How to Build a Customizable Related Products Section | https://www.shopify.com/partners/blog/related-products

product-recommendations-section.liquid

{%- if section.settings.show_product_recommendations -%}
  <div class="product-recommendations" data-product-id="{{ product.id }}" data-limit="4">
    {%- if recommendations.products_count > 0 -%}
      <h2>{{ section.settings.heading }}</h2>
      <ul>
        {%- for product in recommendations.products -%}
        <li class="product">
          <a href="{{ product.url }}">
            <img class="product__img" src="{{ product.featured_image | img_url: '300x300' }}" alt="{{ product.featured_image.alt }}" />
            <p class="product__title">{{ product.title }}</p>
            <p class="product__price">{{ product.price | money}}</p>
          </a>
        </li>
        {%- endfor -%}
      </ul>
    {%- endif -%}
  </div>
{%- endif -%}

{% schema %}
{
  "name": "Product recommendations",
  "settings": [
	{
      "type": "checkbox",
      "id": "show_product_recommendations",
      "label": "Turn on product recommendations",
      "default": false
    },
    {
      "type": "text",
      "id": "heading",
      "label": "Heading",
      "default": "You might also like"
    }
  ]
}
{% endschema %}

{% javascript %}
var loadProductRecommendationsIntoSection = function() {
  // Look for an element with class 'product-recommendations'
  var productRecommendationsSection = document.querySelector(".product-recommendations");
  if (productRecommendationsSection === null) { return; }
  // Read product id from data attribute
  var productId = productRecommendationsSection.dataset.productId;
  // Read limit from data attribute
  var limit = productRecommendationsSection.dataset.limit;
  // Build request URL
  var requestUrl = "/recommendations/products?section_id=product-recommendations&limit="+limit+"&product_id="+productId;
  // Create request and submit it using Ajax
  var request = new XMLHttpRequest();
  request.open("GET", requestUrl);
  request.onload = function() {
    if (request.status >= 200 && request.status < 300) {
      var container = document.createElement("div");
      container.innerHTML = request.response;
      productRecommendationsSection.parentElement.innerHTML = container.querySelector(".product-recommendations").innerHTML;
    }
  };
  request.send();
};
// If your section has theme settings, the theme editor
// reloads the section as you edit those settings. When that happens, the
// recommendations need to be fetched again.
// See https://help.shopify.com/en/themes/development/sections/integration-with-theme-editor
document.addEventListener("shopify:section:load", function(event) {
  if (event.detail.sectionId === "product-recommendations") {
    loadProductRecommendationsIntoSection();
  }
});
// Fetching the recommendations on page load
loadProductRecommendationsIntoSection();
{% endjavascript %}

@shopifypartners scripts.js?2383:119 Uncaught TypeError: Cannot read property 'innerHTML' of null
at XMLHttpRequest.request.onload (scripts.js?2383:119) can you please help