<div class="review-teaser__container" data-review-sku="420-11T" data-review-count="true" data-review-read-more="true">
    <div class="rating" data-rating-value="5.0" aria-label="Rating: 5.0 out of 5 Stars.">
        <span class="rating__star" role="presentation">
    <svg class="icon icon--star-full" alt="">
  <use xlink:href="/assets/icons/icons.svg#star-full"></use>
</svg>

    <svg class="icon icon--star-half" alt="">
  <use xlink:href="/assets/icons/icons.svg#star-half"></use>
</svg>

    <svg class="icon icon--star-empty" alt="">
  <use xlink:href="/assets/icons/icons.svg#star-empty"></use>
</svg>

  </span>
        <span class="rating__star" role="presentation">
    <svg class="icon icon--star-full" alt="">
  <use xlink:href="/assets/icons/icons.svg#star-full"></use>
</svg>

    <svg class="icon icon--star-half" alt="">
  <use xlink:href="/assets/icons/icons.svg#star-half"></use>
</svg>

    <svg class="icon icon--star-empty" alt="">
  <use xlink:href="/assets/icons/icons.svg#star-empty"></use>
</svg>

  </span>
        <span class="rating__star" role="presentation">
    <svg class="icon icon--star-full" alt="">
  <use xlink:href="/assets/icons/icons.svg#star-full"></use>
</svg>

    <svg class="icon icon--star-half" alt="">
  <use xlink:href="/assets/icons/icons.svg#star-half"></use>
</svg>

    <svg class="icon icon--star-empty" alt="">
  <use xlink:href="/assets/icons/icons.svg#star-empty"></use>
</svg>

  </span>
        <span class="rating__star" role="presentation">
    <svg class="icon icon--star-full" alt="">
  <use xlink:href="/assets/icons/icons.svg#star-full"></use>
</svg>

    <svg class="icon icon--star-half" alt="">
  <use xlink:href="/assets/icons/icons.svg#star-half"></use>
</svg>

    <svg class="icon icon--star-empty" alt="">
  <use xlink:href="/assets/icons/icons.svg#star-empty"></use>
</svg>

  </span>
        <span class="rating__star" role="presentation">
    <svg class="icon icon--star-full" alt="">
  <use xlink:href="/assets/icons/icons.svg#star-full"></use>
</svg>

    <svg class="icon icon--star-half" alt="">
  <use xlink:href="/assets/icons/icons.svg#star-half"></use>
</svg>

    <svg class="icon icon--star-empty" alt="">
  <use xlink:href="/assets/icons/icons.svg#star-empty"></use>
</svg>

  </span>
    </div>

</div>
<div class="review-teaser__container"
  data-review-sku="{{ sku }}"
  data-review-count="{{ addReviewCount }}"
  data-review-read-more="{{ addReviewReadMore }}">
  {{render '@rating'}}
</div>
{
  "sku": "420-11T",
  "addReviewCount": true,
  "addReviewReadMore": true
}
  • Content:
    (function (window) {
      'use strict';
    
      const skuContainer = document.querySelector('.review-teaser__container[data-review-sku]');
      // If no sku container is found, do nothing.
      if (!skuContainer) return;
      const turnTo = window.captureMetadata('turnTo');
      const key = turnTo.key;
      const sku = skuContainer.getAttribute('data-review-sku');
    
      // Create i18n object for review teaser.
      window.reviewTeaser_i18n = window.reviewTeaser_i18n || {};
      if (!window.reviewTeaser_i18n.linkText ) {
        window.reviewTeaser_i18n.linkText = 'Read Reviews';
      }
    
      function createTeaserElement(tag, className, text) {
        const el = document.createElement(tag);
        el.setAttribute('class', className);
        if (text) {
          el.innerText = text;
        }
        return el;
      }
    
      function buildComponent(results) {
        const reviewCount = skuContainer.getAttribute('data-review-count');
        const readMore = skuContainer.getAttribute('data-review-read-more');
        const ratingStars = skuContainer.querySelector('.rating');
    
        if (results.avgRating) {
          const rating = results.avgRating.toFixed(1);
          ratingStars.setAttribute('data-rating-value', rating);
          ratingStars.setAttribute('aria-label', rating + ' out of 5 Stars.');
        }
    
        if (reviewCount === 'true' && (results.reviews && results.reviews > 0)) {
          const reviewsCount = createTeaserElement('span', 'teaser__reviews-count', results.reviews);
          skuContainer.appendChild(reviewsCount);
        }
    
        if (readMore === 'true') {
          const readMoreReviews = createTeaserElement('a', 'teaser__read-reviews', window.reviewTeaser_i18n.linkText);
          readMoreReviews.setAttribute('href', '#review-' + sku);
          skuContainer.appendChild(readMoreReviews);
        }
      }
    
      function loadTeaserInformation(sku, key) {
        const xhr = new XMLHttpRequest();
        const ugcCountsUrl = [
          'https://cdn-ws.turnto.com/v5/sitedata',
          key, sku, 'd/ugc/counts', turnToConfig.locale
        ].join('/');
    
        xhr.open('GET', ugcCountsUrl, true);
        xhr.addEventListener('load', function () {
          if (xhr.responseText) {
            try {
              buildComponent(JSON.parse(xhr.responseText));
            } catch (error) {
              // eslint-disable-next-line no-console
              console.error(error)
            }
          }
        });
        xhr.send();
      }
    
      function setTurnToConfig(sku) {
        window.turnToConfig = {
          locale: 'en_US',
          pageId: 'pdp-page',
          sku: sku,
        };
      }
      if (sku && key) {
        setTurnToConfig(sku);
        loadTeaserInformation(sku, key);
      }
    
    })(this);
    
  • URL: /components/raw/review-teaser/review-teaser.js
  • Filesystem Path: src/components/01-elements/review-teaser/review-teaser.js
  • Size: 2.5 KB
  • Content:
    $tt-dark-color: #252525;
    $tt-green: #0c7257;
    
    .review-teaser__container {
      /* critical */
      display: flex;
      flex-direction: row;
    
      .rating__star {
        margin-right: 11px;
      }
    
      .teaser__reviews-count {
        color: $tt-dark-color;
        font-size: 14px;
        line-height: 20px;
      }
    
      .teaser__read-reviews {
        margin-left: 4px;
        border: 0;
        background: none;
        color: $tt-green;
        font-size: 14px;
        line-height: 20px;
        text-decoration: none;
        cursor: pointer;
      }
    }
    
  • URL: /components/raw/review-teaser/review-teaser.scss
  • Filesystem Path: src/components/01-elements/review-teaser/review-teaser.scss
  • Size: 487 Bytes

There are no notes for this item.