7-Star Post Rating Plugin

The plugin processes visitor input through a client-side AJAX workflow backed by WordPress server-side rating storage and validation. The architecture operates at the WordPress AJAX / data-processing level rather than relying on cached page HTML for the visitor's voted state | which is what allows cached page delivery to coexist with accurate per-visitor voting state.

• Loads the rating interface for posts.
• Requests the current aggregate statistics through AJAX.
• Requests the current visitor's voted state through a separate AJAX request.
• If the visitor has already voted, the rating controls are locked.
• If the visitor has not voted, selecting a star opens the confirmation popup.
• After confirmation, the vote is submitted through AJAX and the interface is immediately locked.
• Updated aggregate statistics are fetched and rendered without a page reload.

The system follows a strict AJAX-first voted-state architecture. All operations must conform to the following directives:

• Never rely on cached HTML to determine whether a visitor has voted.
• Retrieve voted state through an AJAX request.
• Retrieve aggregate rating statistics through AJAX.
• Do not reload the page after voting.
• Lock the visitor's rating interface after a successful vote.

Activation Condition

The voting interface is enabled only when the visitor has not already voted for the current post:

// Voted-state resolution
if (response.success && response.data.voted) {
    lockUI();
}

The condition exists so that the same visitor cannot reopen the confirmation workflow after their vote has been recorded, including when the surrounding page is served from cache.

1. Cached HTML Caused Incorrect Voted States

Problem

Page caching could preserve stale HTML containing an old voted state. A visitor who had already voted could therefore receive markup indicating that voting was still available.

Resolution

Voted detection was moved fully to AJAX. The browser requests the current voted state directly from the WordPress backend instead of trusting cached page HTML.

2. Popup Could Open After A Vote

Problem

Multiple or previously registered JavaScript click handlers could allow the confirmation popup to open again after a vote had already been recorded.

Resolution

The frontend maintains an explicit locked state after a successful vote and disables the rating interaction. The voted-state AJAX check also locks the interface when the visitor returns to the post.

3. Page Refresh And Stale Aggregate Statistics

Problem

Refreshing the page after voting introduced caching and synchronization problems, including stale vote counts and incorrect aggregate calculations on mobile devices.

Resolution

Voting is submitted through AJAX and the updated statistics are fetched again immediately after the vote. No page reload is required.

4. Responsive Breakdown Table Overflow

Problem

The rating breakdown tooltip could extend beyond the viewport on small mobile screens.

Resolution

The breakdown tooltip uses responsive viewport-constrained sizing and mobile positioning so that the table remains within the available screen width.

• Confirmation Popup: before submitting, the visitor sees the selected stars with matching text (for example ★★★★★ 5 Stars), a clear note that the vote cannot be changed later, and Yes / No actions.
• Hover Star Preview: the stars provide a left-to-right hover preview so the visitor sees the exact number of stars being selected before voting.
• Breakdown Table: hovering the rating information reveals a compact breakdown of votes and percentage for each rating from 1 through 7 stars, including percentage bars.
• Responsive Frontend: the rating interface and breakdown table stay usable on small mobile devices, including small iPhone-sized screens, without horizontal overflow.