[Yotpo] yotpo #yotpo

yotpo-stars.html

<script>
  // stars placeholder: <div class="yotpo bottomLine" data-product-id="123123"></div>
  
(function() {
  function domReady(fn) {
    // If we're early to the party
    document.addEventListener("DOMContentLoaded", fn);
    // If late; I mean on time.
    if (document.readyState === "interactive" || document.readyState === "complete" ) {
      fn();
    }
  }

  function fetchYotpoStarsData(productId) {
    return fetch("https://staticw2.yotpo.com/batch/app_key/REPLACE__WITH__YOTPO__APP__KEY/domain_key/"+ productId +"/widget/bottomline", {
      "headers": {
        "accept": "application/json",
        "accept-language": "en-US,en;q=0.9",
        "content-type": "application/x-www-form-urlencoded",
      },
      "body": "methods=%5B%7B%22method%22%3A%22bottomline%22%2C%22params%22%3A%7B%22pid%22%3A%22" + productId + "%22%2C%22link%22%3Anull%2C%22skip_average_score%22%3Afalse%2C%22index%22%3A3%2C%22element_id%22%3A%224%22%7D%7D%5D&app_key=7Y9QbRyWpv0Wbjss65amkwH671Um1vSMLTnL4yhM&is_mobile=false&widget_version=2021-08-03_15-38-05",
      "method": "POST",
      "credentials": "include"
    })
    .then(r => r.json())
    .then(xs => xs[0] && xs[0].result)
  }
  window.fetchYotpoStarsData = fetchYotpoStarsData

  function cartUpdateYotpo() {
    let items = document.querySelectorAll('[data-products] .cart__items .yotpo.bottomLine')
    if (items) {
      items.forEach(widget => {
        if (widget.childElementCount == 0) {
          fetchYotpoStarsData(widget.getAttribute('data-product-id'))
          .then(r => {
            if (r) {
              widget.innerHTML = r
            }
          })
        }
      }) 
    }
  }

  domReady(function() {
    cartUpdateYotpo()
  })

  document.body.addEventListener('cart:build', function() {
    cartUpdateYotpo()
  })

})()
</script>