Блог

 $( document ).ready(function() {
    var list = document.querySelector(".product-recommendations__list");
    console.log(list)
    // Get the base URL for translated product recommendations
    var baseUrl = list.dataset.baseUrl;
    console.log(baseUrl)
    // Get the product ID to request the product recommendations
    var productId = list.dataset.productId;
    console.log(productId)
    // Create an AJAX request
    var request = new XMLHttpRequest();

    request.open(
      "GET",
      baseUrl   ".json?product_id="   productId   "amp;limit=4"
    );

    request.onload = function() {

      if (request.status === 404 || request.status === 422) {
        return hideRecommendationsSection();
      }

      var products = JSON.parse(request.response).products;

      if (products.length === 0) {
        return hideRecommendationsSection();
      }

      // Append product recommendations to the DOM.
      console.log(products)
      list.innerHTML = products.map(function(product) { return renderProduct(product) }).join("");
      console.log(list.innerHTML)
    };

    request.onerror = function() {
      hideRecommendationsSection();
    };

    // Send AJAX request
    request.send();

    function hideRecommendationsSection() {
      console.log('in hideRecommendations')
      list.style.display = "none";
    }

    function renderProduct(product) {
      return [
        '<div>',
        '<a href="'   product.url   '" class="product__anchor">',
        '<img class="product__img" src="'   product.featured_image   '" alt="'  product.title  '"/>',
        '<p class="product__title">'   product.title   '</p>',
        '<p class="product__price">'   product.price   '</p>',
        '</a>',
        '</div>'
      ].join("");
    }
}) 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div class="product-recommendations__list" data-base-url="{{ routes.product_recommendations_url }}" data-product-id="{{ item.product_id }}"></div>