How to edit content of product.metafields.spr.reviews

Highlighted
New Member
1 0 0

Hello,

Can somebody explain how this code snippet works? Since Google Search Console is showing some issues of the reviews syntax I am trying to find how I can edit the content of the product review tab but I couldn't find it in templates editor. 

I couldn't find anything about it also in developers documentation.

 

<button class="Collapsible__Button Heading u-h6" data-action="toggle-collapsible" aria-expanded="false">
          <span>{{ 'product.tabs.reviews' | t }} <span class="text--light">({{ reviews_count | default: 0 }})</span></span>
          <span class="Collapsible__Plus"></span>
        </button>

        <div class="Collapsible__Inner">
          <div class="Collapsible__Content">
            <div id="shopify-product-reviews" data-id="{{product.id}}">{{ product.metafields.spr.reviews }}</div>
          </div>
        </div>

As a final result in frontend 'shopify-product-reviews' div contains following code which I am trying to find in Editor and modify

 

<div id="shopify-product-reviews" data-id="2211445178422"><style scoped="">.spr-container {
    padding: 24px;
    border-color: #ECECEC;}
  .spr-review, .spr-form {
    border-color: #ECECEC;
  }
</style>

<div class="spr-container">
  <div class="spr-header">
    <h2 class="spr-header-title">Opinie</h2><div class="spr-summary">

        <span class="spr-starrating spr-summary-starrating">
          <i class="spr-icon spr-icon-star"></i><i class="spr-icon spr-icon-star"></i><i class="spr-icon spr-icon-star"></i><i class="spr-icon spr-icon-star"></i><i class="spr-icon spr-icon-star"></i>
        </span>
        <span class="spr-summary-caption"><span class="spr-summary-actions-togglereviews">W oparciu o 1 opinie</span>
        </span><span class="spr-summary-actions">
        <a href="#" class="spr-summary-actions-newreview" onclick="SPR.toggleForm(2211445178422);return false">Napisz opinię</a>
      </span>
    </div>
  </div>

  <div class="spr-content">
    <div class="spr-form" id="form_2211445178422" style="display: none"><form method="post" action="//productreviews.shopifycdn.com/api/reviews/create" id="new-review-form_2211445178422" class="new-review-form" onsubmit="SPR.submitForm(this);return false;"><input type="hidden" name="review[rating]"><input type="hidden" name="product_id" value="2211445178422"><h3 class="spr-form-title">Napisz opinię</h3><fieldset class="spr-form-contact"><div class="spr-form-contact-name">
          <label class="spr-form-label" for="review_author_2211445178422">Imię</label>
          <input class="spr-form-input spr-form-input-text " id="review_author_2211445178422" type="text" name="review[author]" value="" placeholder="Twoje imię">
        </div><div class="spr-form-contact-email">
          <label class="spr-form-label" for="review_email_2211445178422">E-mail</label>
          <input class="spr-form-input spr-form-input-email " id="review_email_2211445178422" type="email" name="review[email]" value="" placeholder="Twój e-mail">
        </div><div class="spr-form-contact-location">
          <label class="spr-form-label" for="review_location_2211445178422">Lokalizacja</label>
          <input class="spr-form-input spr-form-input-text " id="review_location_2211445178422" type="text" name="review[location]" value="" maxlength="255" placeholder="Twoja lokalizacja">
        </div></fieldset>


    <fieldset class="spr-form-review">

      <div class="spr-form-review-rating">
        <label class="spr-form-label" for="review[rating]">Ocena</label>
        <div class="spr-form-input spr-starrating ">
          <a href="#" onclick="SPR.setRating(this);return false;" class="spr-icon spr-icon-star spr-icon-star-empty" data-value="1" aria-label="1 of 5 stars">&nbsp;</a>
          <a href="#" onclick="SPR.setRating(this);return false;" class="spr-icon spr-icon-star spr-icon-star-empty" data-value="2" aria-label="2 of 5 stars">&nbsp;</a>
          <a href="#" onclick="SPR.setRating(this);return false;" class="spr-icon spr-icon-star spr-icon-star-empty" data-value="3" aria-label="3 of 5 stars">&nbsp;</a>
          <a href="#" onclick="SPR.setRating(this);return false;" class="spr-icon spr-icon-star spr-icon-star-empty" data-value="4" aria-label="4 of 5 stars">&nbsp;</a>
          <a href="#" onclick="SPR.setRating(this);return false;" class="spr-icon spr-icon-star spr-icon-star-empty" data-value="5" aria-label="5 of 5 stars">&nbsp;</a>
        </div>
      </div>

      <div class="spr-form-review-title">
        <label class="spr-form-label" for="review_title_2211445178422">Tytuł</label>
        <input class="spr-form-input spr-form-input-text " id="review_title_2211445178422" type="text" name="review[title]" value="" placeholder="Tytuł opinii">
      </div>

      <div class="spr-form-review-body">
        <label class="spr-form-label" for="review_body_2211445178422">
          Treść
          <span role="status" aria-live="polite" aria-atomic="true">
            <span class="spr-form-review-body-charactersremaining">(1500)</span>
            <span class="visuallyhidden">characters remaining</span>
          </span>
        </label>
        <div class="spr-form-input">
          <textarea class="spr-form-input spr-form-input-textarea " id="review_body_2211445178422" data-product-id="2211445178422" name="review[body]" rows="10" placeholder="Treść opinii"></textarea>
          <script>
            function sprUpdateCount(e){
              var $el = SPR.$(e.currentTarget);
              SPR.$(".spr-form-review-body-charactersremaining").html('(' + (1500 - $el.val().length) + ')');
            }
            SPR.$("textarea[data-product-id=2211445178422]").keyup(sprUpdateCount).trigger("keyup");
          </script>
        </div>
      </div>
    </fieldset>

    <fieldset class="spr-form-actions">
      <input type="submit" class="spr-button spr-button-primary button button-primary btn btn-primary" value="Wyślij opinię">
    </fieldset></form></div>
    <div class="spr-reviews" id="reviews_2211445178422"><div class="spr-review" id="spr-review-86143647">
      <div class="spr-review-header">
        <span class="spr-starratings spr-review-header-starratings" aria-label="5 of 5 stars" role="img"><i class="spr-icon spr-icon-star"></i><i class="spr-icon spr-icon-star"></i><i class="spr-icon spr-icon-star"></i><i class="spr-icon spr-icon-star"></i><i class="spr-icon spr-icon-star"></i></span>
        <h3 class="spr-review-header-title">Dobra jakosć</h3>
        <span class="spr-review-header-byline"><strong>Lilka</strong>, <strong>2019.10.31</strong></span>
      </div>

      <div class="spr-review-content">
        <p class="spr-review-content-body">Przepiękny stanik, ze świetnym rozwiązaniem w postaci ppojedynczej fiszbiny i możliwości przepinania ramiączek. Super do dekoltów. Jestem nim kompletnie oczarowana. Polecam,</p>
      </div><div class="spr-review-footer">
        <a href="#" class="spr-review-reportreview" onclick="SPR.reportReview(86143647);return false" id="report_86143647" data-msg="Opinia została zgłoszona">Zgłoś</a>
      </div>
    </div></div>
  </div>

</div><script type="application/ld+json">
      {
        "@context": "http://schema.org/",
        "@type": "AggregateRating",
        "reviewCount": "1",
        "ratingValue": "5.0",
        "itemReviewed": {
          "@type" : "Product",
          "name" : "Koronkowy stanik Giselle",
          "offers": {
            "@type": "AggregateOffer",
            "lowPrice": "169.0",
            "highPrice": "169.0",
            "priceCurrency": "PLN"
          }
        }
      }
</script></div>
0 Likes