Why is my DOM not updating with the product list?

Technical Q&A
1

Took most of this code from Shopify documentation, not sure why it’s not updating the DOM. I can see that the response comes in and the products are there, but I can not get my changes to the DOM apply; the innerHTML of the div is not updated. Any help would be appreciated. This code is inside my cart-drawer.liquid file, not sure if that would make any difference.

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

Copy

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

    request.open(
      "GET",
      baseUrl + ".json?product_id=" + productId + "&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.
      list.innerHTML = products.map(function(product) { return renderProduct(product) }).join("");};

    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>
2

function renderRecs(product) {
return [
‘

’
].join(“”);
};

list.innerHTML = products.map(renderRecs).join(“”);

Hope this helps

3

Thanks for helping! I actually found the problem, what I was trying to add was just out of view! Had to do with other elements positions