<mmm-review-rating> — Commmerce Docs

Overview

Drop this component on a PDP (or anywhere a product slug can be inferred) and shoppers get a complete review experience: rating average, 5-bar histogram, paginated reviews list, and a modal form for submitting their own review with optional media. The component auto-detects the product slug from PDP_STORE.productInfo.slug or the last segment of the URL when product-slug isn't passed.

When to use

Product detail pages — alongside <mmm-pdp-rating> for the summary star + click-to-scroll.
Standalone review landing pages where the slug is in the URL.
Inside the theme editor for previewing review layouts — the component skips the post-submit redirect when running inside the editor iframe.

Quick start

<script src="https://v2-api-production.commmerce.com/api/v1/web-component/commmerce-sdk.js?store=sample-store"></script>

<mmm-review-rating product-slug="organic-cotton-tee" limit="5"></mmm-review-rating>

Attributes

AttributeTypeDefaultDescription

product-slugstring—Product slug for the API payload. If omitted, falls back to PDP_STORE.productInfo.slug, then to the last segment of location.pathname. Live-reactive — changing it refetches reviews from page 1.

limitnumber2Reviews per page. Drives the paginator at the bottom of the list. Live-reactive — changing it resets to page 1.

theme-modestringlightlight or dark. Switches the inline review form / modal colour palette. Live-reactive — changing it re-renders without refetching.

title-textstringRating & ReviewsSection heading shown above the rating breakdown. Read once on first render — not live-reactive.

Events

The component does not emit window-level CustomEvents. All user actions are handled inside the component: rating clicks update local form state, the submit button calls sdk.reviewRatings.writeReview and on success refreshes the list via sdk.reviewRatings.productReviews. Toasts are routed through window.CommmerceUtils.showMessage.

SDK calls

CallWhenArgsNotes

sdk.reviewRatings.productReviewson connect, page change, attribute change, post-submit refresh{ product, page, limit }Expects { status, averageRating, totalRatings, totalReviews, allRatings, reviews }.

sdk.media.uploadImageuser attaches an image / video in the modalFileReturns the uploaded URL which is stashed into formImages for the eventual write call.

sdk.reviewRatings.writeReviewuser submits the form{ product, anonymous, rating, title, description, images }On status === 'success' the modal closes and the list refetches from page 1.

Auth behaviour

Submitting requires a logged-in user (checked via window.CommmerceUtils.isUserLoggedIn()). Guests clicking "Write a review" see a toast and are redirected to /login?redirect=<current-path> after ~1.2 s. The redirect is skipped when the component detects it's running inside the theme editor (window.CommmerceUtils.isInThemeEditor()).

Live preview

store sample-store tag <mmm-review-rating>

Examples

1. Default — on a PDP, auto-slug

Drop on a product page and let the component pick up the slug from PDP_STORE.

<mmm-pdp-title></mmm-pdp-title>
<mmm-pdp-price></mmm-pdp-price>
<mmm-review-rating></mmm-review-rating>

2. Explicit slug, larger page size

<mmm-review-rating
  product-slug="organic-cotton-tee"
  limit="10">
</mmm-review-rating>

3. Dark theme + custom heading

<mmm-review-rating
  product-slug="midnight-jacket"
  theme-mode="dark"
  title-text="What our customers say">
</mmm-review-rating>

4. Switch theme-mode on the fly

Both theme-mode and limit are observed — change them imperatively and the component re-renders without re-fetching.

const el = document.querySelector('mmm-review-rating');
document.querySelector('#toggle').addEventListener('click', () => {
  const next = el.getAttribute('theme-mode') === 'dark' ? 'light' : 'dark';
  el.setAttribute('theme-mode', next);
});