Reviews Display

{%- comment -%}
  modblo. Reviews Display
  Replaces Loox basic / Judge.me free / Stamped reviews display layouts.
  Reviews are theme blocks (no third-party review API integration), so
  merchants paste in curated, hand-picked reviews. Includes:
    - Aggregate rating header with breakdown bars
    - Filter by star rating
    - Sort by newest / highest / lowest
    - Schema.org Review markup for SEO (rich snippets)
  For full review collection at scale, pair with Judge.me / Loox / Stamped
  and replace the inner block loop with their export feed.
{%- endcomment -%}

{%- assign total = 0 -%}
{%- assign sum = 0 -%}
{%- assign s5 = 0 -%}
{%- assign s4 = 0 -%}
{%- assign s3 = 0 -%}
{%- assign s2 = 0 -%}
{%- assign s1 = 0 -%}
{%- for block in section.blocks -%}
  {%- if block.type == 'review' -%}
    {%- assign total = total | plus: 1 -%}
    {%- assign r = block.settings.rating | plus: 0 -%}
    {%- assign sum = sum | plus: r -%}
    {%- if r == 5 -%}{%- assign s5 = s5 | plus: 1 -%}{%- endif -%}
    {%- if r == 4 -%}{%- assign s4 = s4 | plus: 1 -%}{%- endif -%}
    {%- if r == 3 -%}{%- assign s3 = s3 | plus: 1 -%}{%- endif -%}
    {%- if r == 2 -%}{%- assign s2 = s2 | plus: 1 -%}{%- endif -%}
    {%- if r == 1 -%}{%- assign s1 = s1 | plus: 1 -%}{%- endif -%}
  {%- endif -%}
{%- endfor -%}
{%- assign avg = 0 -%}
{%- if total > 0 -%}
  {%- assign avg = sum | times: 10 | divided_by: total | divided_by: 10.0 -%}
{%- endif -%}

<section class="modblo-rv" data-modblo-rv
         data-section-id="{{ section.id }}"
         style="--modblo-rv-bg: {{ section.settings.bg }};
                --modblo-rv-fg: {{ section.settings.fg }};
                --modblo-rv-star: {{ section.settings.star_color }};
                --modblo-rv-accent: {{ section.settings.accent }};">
  <div class="modblo-rv__inner page-width" itemscope itemtype="https://schema.org/Product">
    {%- if product != blank -%}
      <meta itemprop="name" content="{{ product.title | escape }}">
    {%- endif -%}

    <header class="modblo-rv__head">
      {%- if section.settings.eyebrow != blank -%}
        <p class="modblo-rv__eyebrow">{{ section.settings.eyebrow }}</p>
      {%- endif -%}
      <h2 class="modblo-rv__h">{{ section.settings.heading | default: 'What customers say' }}</h2>
    </header>

    {%- if total > 0 -%}
      <div class="modblo-rv__summary" itemprop="aggregateRating" itemscope itemtype="https://schema.org/AggregateRating">
        <div class="modblo-rv__avg">
          <p class="modblo-rv__avg-num">
            <span itemprop="ratingValue">{{ avg }}</span>
            <span class="modblo-rv__avg-of">/ 5</span>
          </p>
          <div class="modblo-rv__stars modblo-rv__stars--lg" aria-label="{{ avg }} out of 5 stars">
            {%- for n in (1..5) -%}
              <span class="modblo-rv__star {% if avg >= n %}is-full{% elsif avg >= n | minus: 0.5 %}is-half{% endif %}">
                <svg viewBox="0 0 16 16" fill="currentColor" aria-hidden="true"><path d="M8 .5l2.4 4.9 5.4.8-3.9 3.8.9 5.4L8 12.9l-4.8 2.5.9-5.4L.2 6.2l5.4-.8z"/></svg>
              </span>
            {%- endfor -%}
          </div>
          <p class="modblo-rv__avg-count">
            <span itemprop="reviewCount">{{ total }}</span> {% if total == 1 %}review{% else %}reviews{% endif %}
          </p>
        </div>

        <div class="modblo-rv__breakdown">
          {%- assign rows = '5|4|3|2|1' | split: '|' -%}
          {%- for n in rows -%}
            {%- assign nint = n | plus: 0 -%}
            {%- case nint -%}
              {%- when 5 -%}{%- assign cnt = s5 -%}
              {%- when 4 -%}{%- assign cnt = s4 -%}
              {%- when 3 -%}{%- assign cnt = s3 -%}
              {%- when 2 -%}{%- assign cnt = s2 -%}
              {%- when 1 -%}{%- assign cnt = s1 -%}
            {%- endcase -%}
            {%- assign pct = 0 -%}
            {%- if total > 0 -%}{%- assign pct = cnt | times: 100 | divided_by: total -%}{%- endif -%}
            <button type="button" class="modblo-rv__row" data-modblo-rv-filter="{{ n }}" aria-label="Show {{ n }}-star reviews">
              <span class="modblo-rv__row-label">{{ n }}</span>
              <svg class="modblo-rv__row-star" viewBox="0 0 16 16" fill="currentColor" aria-hidden="true"><path d="M8 .5l2.4 4.9 5.4.8-3.9 3.8.9 5.4L8 12.9l-4.8 2.5.9-5.4L.2 6.2l5.4-.8z"/></svg>
              <span class="modblo-rv__row-bar"><span style="width: {{ pct }}%"></span></span>
              <span class="modblo-rv__row-count">{{ cnt }}</span>
            </button>
          {%- endfor -%}
        </div>
      </div>

      {%- comment -%} Filter / sort controls {%- endcomment -%}
      <div class="modblo-rv__controls">
        <div class="modblo-rv__chips">
          <button type="button" class="modblo-rv__chip is-active" data-modblo-rv-filter="all">All ({{ total }})</button>
          {%- if s5 > 0 -%}<button type="button" class="modblo-rv__chip" data-modblo-rv-filter="5">5 stars</button>{%- endif -%}
          {%- if s4 > 0 -%}<button type="button" class="modblo-rv__chip" data-modblo-rv-filter="4">4 stars</button>{%- endif -%}
          {%- if s3 > 0 -%}<button type="button" class="modblo-rv__chip" data-modblo-rv-filter="3">3 stars</button>{%- endif -%}
        </div>
        <label class="modblo-rv__sort">
          Sort by
          <select data-modblo-rv-sort>
            <option value="newest">Newest</option>
            <option value="highest">Highest rated</option>
            <option value="lowest">Lowest rated</option>
          </select>
        </label>
      </div>

      <div class="modblo-rv__list" data-modblo-rv-list>
        {%- for block in section.blocks -%}
          {%- if block.type == 'review' -%}
            {%- assign r = block.settings.rating | plus: 0 -%}
            <article class="modblo-rv__item"
                     data-modblo-rv-item
                     data-rating="{{ r }}"
                     data-date="{{ block.settings.date }}"
                     itemprop="review" itemscope itemtype="https://schema.org/Review"
                     {{ block.shopify_attributes }}>

              <header class="modblo-rv__item-head">
                <div class="modblo-rv__stars" itemprop="reviewRating" itemscope itemtype="https://schema.org/Rating">
                  <meta itemprop="ratingValue" content="{{ r }}">
                  <meta itemprop="bestRating" content="5">
                  {%- for n in (1..5) -%}
                    <span class="modblo-rv__star {% if r >= n %}is-full{% endif %}">
                      <svg viewBox="0 0 16 16" fill="currentColor" aria-hidden="true"><path d="M8 .5l2.4 4.9 5.4.8-3.9 3.8.9 5.4L8 12.9l-4.8 2.5.9-5.4L.2 6.2l5.4-.8z"/></svg>
                    </span>
                  {%- endfor -%}
                </div>
                {%- if block.settings.date != blank -%}
                  <time class="modblo-rv__item-date" datetime="{{ block.settings.date }}">
                    {{ block.settings.date | date: '%b %-d, %Y' }}
                  </time>
                {%- endif -%}
              </header>

              {%- if block.settings.title != blank -%}
                <h3 class="modblo-rv__item-title" itemprop="name">{{ block.settings.title }}</h3>
              {%- endif -%}

              <p class="modblo-rv__item-body" itemprop="reviewBody">{{ block.settings.body }}</p>

              <footer class="modblo-rv__item-foot">
                <span class="modblo-rv__item-author" itemprop="author" itemscope itemtype="https://schema.org/Person">
                  <span itemprop="name">{{ block.settings.author }}</span>
                  {%- if block.settings.location != blank -%}
                    <span class="modblo-rv__item-loc">{{ block.settings.location }}</span>
                  {%- endif -%}
                </span>
                {%- if block.settings.verified -%}
                  <span class="modblo-rv__verified">
                    <svg viewBox="0 0 16 16" width="11" height="11" fill="currentColor" aria-hidden="true"><path d="M8 0a8 8 0 1 0 0 16A8 8 0 0 0 8 0zm3.78 6.28-4.5 4.5a.75.75 0 0 1-1.06 0L4.22 8.78a.75.75 0 1 1 1.06-1.06L7 9.44l3.97-3.97a.75.75 0 1 1 1.06 1.06z"/></svg>
                    Verified buyer
                  </span>
                {%- endif -%}
              </footer>
            </article>
          {%- endif -%}
        {%- endfor -%}
      </div>

      <p class="modblo-rv__empty" data-modblo-rv-empty hidden>No reviews match this filter.</p>
    {%- else -%}
      <p class="modblo-rv__none">Add Review blocks in the theme editor to populate this section.</p>
    {%- endif -%}
  </div>
</section>

<style>
  .modblo-rv { background: var(--modblo-rv-bg, #fff); color: var(--modblo-rv-fg, #0b0b0c); padding: clamp(48px, 6vw, 96px) 0; }
  .modblo-rv__inner { max-width: 880px; margin: 0 auto; padding: 0 24px; }

  .modblo-rv__head { text-align: center; margin-bottom: 36px; }
  .modblo-rv__eyebrow { text-transform: uppercase; letter-spacing: .18em; font-size: 12px; font-weight: 700; color: var(--modblo-rv-accent, #6366f1); margin: 0 0 12px; }
  .modblo-rv__h { font-size: clamp(28px, 4vw, 36px); letter-spacing: -.02em; margin: 0; }

  .modblo-rv__summary {
    display: grid; grid-template-columns: auto 1fr; gap: 40px; align-items: center;
    background: color-mix(in oklab, var(--modblo-rv-fg) 3%, transparent);
    border-radius: 16px; padding: 24px 28px; margin-bottom: 32px;
  }
  .modblo-rv__avg { text-align: center; padding-right: 24px; border-right: 1px solid color-mix(in oklab, var(--modblo-rv-fg) 8%, transparent); }
  .modblo-rv__avg-num { font-size: 40px; font-weight: 700; letter-spacing: -.02em; line-height: 1; margin: 0 0 6px; font-variant-numeric: tabular-nums; }
  .modblo-rv__avg-of { font-size: 16px; opacity: .4; font-weight: 500; }
  .modblo-rv__avg-count { font-size: 12px; opacity: .6; margin: 6px 0 0; }

  .modblo-rv__stars { display: inline-flex; gap: 2px; color: var(--modblo-rv-star, #f59e0b); }
  .modblo-rv__stars--lg { gap: 3px; }
  .modblo-rv__stars--lg .modblo-rv__star svg { width: 18px; height: 18px; }
  .modblo-rv__star { opacity: .25; }
  .modblo-rv__star.is-full { opacity: 1; }
  .modblo-rv__star.is-half { opacity: .65; }
  .modblo-rv__star svg { width: 14px; height: 14px; display: block; }

  .modblo-rv__breakdown { display: flex; flex-direction: column; gap: 4px; }
  .modblo-rv__row {
    display: grid; grid-template-columns: 16px 12px 1fr 32px; gap: 8px; align-items: center;
    background: transparent; border: 0; color: inherit; cursor: pointer;
    padding: 4px 6px; border-radius: 6px; font-size: 12px;
    transition: background .15s;
  }
  .modblo-rv__row:hover { background: color-mix(in oklab, var(--modblo-rv-fg) 5%, transparent); }
  .modblo-rv__row-label { text-align: center; font-weight: 600; }
  .modblo-rv__row-star { color: var(--modblo-rv-star, #f59e0b); width: 12px; height: 12px; }
  .modblo-rv__row-bar {
    display: block; height: 6px; border-radius: 999px;
    background: color-mix(in oklab, var(--modblo-rv-fg) 8%, transparent); overflow: hidden;
  }
  .modblo-rv__row-bar > span {
    display: block; height: 100%;
    background: var(--modblo-rv-star, #f59e0b);
    border-radius: 999px;
  }
  .modblo-rv__row-count { text-align: right; opacity: .65; font-variant-numeric: tabular-nums; }

  .modblo-rv__controls {
    display: flex; align-items: center; justify-content: space-between; gap: 16px;
    margin-bottom: 24px; flex-wrap: wrap;
  }
  .modblo-rv__chips { display: flex; flex-wrap: wrap; gap: 6px; }
  .modblo-rv__chip {
    background: color-mix(in oklab, var(--modblo-rv-fg) 5%, transparent);
    color: inherit; border: 0; cursor: pointer;
    padding: 6px 12px; border-radius: 999px;
    font-size: 12px; font-weight: 600;
    transition: background .2s;
  }
  .modblo-rv__chip:hover { background: color-mix(in oklab, var(--modblo-rv-fg) 10%, transparent); }
  .modblo-rv__chip.is-active {
    background: var(--modblo-rv-fg, #0b0b0c); color: var(--modblo-rv-bg, #fff);
  }

  .modblo-rv__sort { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; opacity: .7; }
  .modblo-rv__sort select {
    background: transparent; color: inherit;
    border: 1px solid color-mix(in oklab, var(--modblo-rv-fg) 15%, transparent);
    border-radius: 8px; padding: 5px 8px; font-size: 12px;
  }

  .modblo-rv__list { display: flex; flex-direction: column; gap: 16px; }
  .modblo-rv__item {
    background: var(--modblo-rv-bg, #fff);
    border: 1px solid color-mix(in oklab, var(--modblo-rv-fg) 8%, transparent);
    border-radius: 14px; padding: 18px 20px;
  }
  .modblo-rv__item[hidden] { display: none; }

  .modblo-rv__item-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; }
  .modblo-rv__item-date { font-size: 11px; opacity: .55; }
  .modblo-rv__item-title { font-size: 15px; font-weight: 600; margin: 0 0 6px; }
  .modblo-rv__item-body { font-size: 14px; line-height: 1.6; opacity: .85; margin: 0 0 12px; }

  .modblo-rv__item-foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
  .modblo-rv__item-author { font-size: 13px; }
  .modblo-rv__item-loc { opacity: .5; margin-left: 6px; }
  .modblo-rv__verified {
    display: inline-flex; align-items: center; gap: 4px;
    color: #16a34a; font-size: 11px; font-weight: 600;
  }

  .modblo-rv__empty, .modblo-rv__none { text-align: center; padding: 48px 0; opacity: .55; }

  @media (max-width: 640px) {
    .modblo-rv__summary { grid-template-columns: 1fr; gap: 20px; padding: 20px; }
    .modblo-rv__avg { padding: 0 0 20px; border-right: 0; border-bottom: 1px solid color-mix(in oklab, var(--modblo-rv-fg) 8%, transparent); }
  }
</style>

<script>
  (function () {
    var root = document.querySelector('[data-modblo-rv][data-section-id="{{ section.id }}"]');
    if (!root) return;
    var list = root.querySelector('[data-modblo-rv-list]');
    var items = Array.from(root.querySelectorAll('[data-modblo-rv-item]'));
    var empty = root.querySelector('[data-modblo-rv-empty]');
    var chips = root.querySelectorAll('[data-modblo-rv-filter]');
    var sort = root.querySelector('[data-modblo-rv-sort]');

    var activeFilter = 'all';
    var activeSort = 'newest';

    function render() {
      var visible = 0;
      items.forEach(function (item) {
        var rating = parseInt(item.dataset.rating, 10);
        var match = activeFilter === 'all' || rating === parseInt(activeFilter, 10);
        item.hidden = !match;
        if (match) visible++;
      });
      empty.hidden = visible > 0;

      // Sort by reordering DOM
      var sorted = items.slice().sort(function (a, b) {
        var ra = parseInt(a.dataset.rating, 10);
        var rb = parseInt(b.dataset.rating, 10);
        var da = new Date(a.dataset.date || 0).getTime();
        var db = new Date(b.dataset.date || 0).getTime();
        if (activeSort === 'highest') return rb - ra || db - da;
        if (activeSort === 'lowest') return ra - rb || db - da;
        return db - da; // newest
      });
      sorted.forEach(function (item) { list.appendChild(item); });
    }

    chips.forEach(function (chip) {
      chip.addEventListener('click', function () {
        // Top-row chips
        if (chip.classList.contains('modblo-rv__chip')) {
          activeFilter = chip.dataset.cbRvFilter;
          root.querySelectorAll('.modblo-rv__chip').forEach(function (c) {
            c.classList.toggle('is-active', c.dataset.cbRvFilter === activeFilter);
          });
        } else {
          // Breakdown row click — filter by that rating
          activeFilter = chip.dataset.cbRvFilter;
          root.querySelectorAll('.modblo-rv__chip').forEach(function (c) {
            c.classList.toggle('is-active', c.dataset.cbRvFilter === activeFilter);
          });
        }
        render();
      });
    });

    sort.addEventListener('change', function () {
      activeSort = sort.value;
      render();
    });

    render();
  })();
</script>

{% schema %}
{
  "name": "Reviews Display",
  "tag": "section",
  "settings": [
    { "type": "header", "content": "Heading" },
    { "type": "text", "id": "eyebrow", "label": "Eyebrow", "default": "Reviews" },
    { "type": "text", "id": "heading", "label": "Heading", "default": "What customers say" },
    { "type": "header", "content": "Colors" },
    { "type": "color", "id": "bg", "label": "Background", "default": "#ffffff" },
    { "type": "color", "id": "fg", "label": "Foreground", "default": "#0b0b0c" },
    { "type": "color", "id": "star_color", "label": "Star color", "default": "#f59e0b" },
    { "type": "color", "id": "accent", "label": "Accent", "default": "#6366f1" }
  ],
  "blocks": [
    {
      "type": "review",
      "name": "Review",
      "settings": [
        { "type": "range", "id": "rating", "label": "Rating", "min": 1, "max": 5, "step": 1, "default": 5 },
        { "type": "text", "id": "title", "label": "Review title" },
        { "type": "textarea", "id": "body", "label": "Review body" },
        { "type": "text", "id": "author", "label": "Author name" },
        { "type": "text", "id": "location", "label": "Author location (optional)" },
        { "type": "text", "id": "date", "label": "Date (ISO)", "info": "e.g. 2026-04-12" },
        { "type": "checkbox", "id": "verified", "label": "Verified buyer badge", "default": true }
      ]
    }
  ],
  "presets": [{
    "name": "Reviews Display",
    "blocks": [
      { "type": "review", "settings": { "rating": 5, "title": "Worth every penny.", "body": "Best merino piece I own. Holds shape after a dozen washes, no pilling.", "author": "Sarah K.", "location": "Brooklyn, NY", "date": "2026-04-12" } },
      { "type": "review", "settings": { "rating": 5, "title": "Buying another in every color.", "body": "Lightweight enough for spring layers, warm enough for fall. Cut runs true.", "author": "Marcus W.", "location": "Austin, TX", "date": "2026-04-08" } },
      { "type": "review", "settings": { "rating": 4, "title": "Great fabric, runs slightly slim.", "body": "Sized up and it's perfect. Material feels premium, washes well.", "author": "Yuki T.", "location": "Portland, OR", "date": "2026-03-29" } },
      { "type": "review", "settings": { "rating": 5, "title": "Replaced three other crews.", "body": "Soft, structured, and the neck doesn't stretch out. Will reorder.", "author": "Priya R.", "location": "Toronto, ON", "date": "2026-03-21" } }
    ]
  }]
}
{% endschema %}