[ Client Browser ]                      [ Shopify Server ]
               |                                       |
               | --- 1. Initial Page Request --------> |
               | <--- 2. Returns Page + Empty Shell -- |
               |                                       |
  (DOM Loaded Triggered)                               |
               |                                       |
               | --- 3. GET /recommendations/products  |
               |        ?section_id=related-products   |
               |        &product_id=12345 --------->   |
               |                                       |
               | <--- 4. Returns Rendered Section HTML |
               |                                       |
 (Inject HTML into Container)

<div 
  class="related-products page-width section-{{ section.id }}-padding" 
  data-base-url="{{ routes.product_recommendations_url }}" 
  data-product-id="{{ product.id }}" 
  data-limit="{{ section.settings.products_to_show }}"
>
  {%- if recommendations.performed and recommendations.products_count > 0 -%}
    <div class="related-products__header">
      <h2 class="related-products__heading {{ section.settings.heading_size }}">
        {{ section.settings.heading | escape }}
      </h2>
    </div>

    <ul class="related-products__grid grid grid--{{ section.settings.columns_desktop }}-col-desktop grid--{{ section.settings.columns_mobile }}-col-tablet-down" role="list">
      {%- for recommendation in recommendations.products -%}
        <li class="grid__item">
          {% render 'card-product',
            card_product: recommendation,
            show_vendor: section.settings.show_vendor,
            show_rating: section.settings.show_rating
          %}
        </li>
      {%- endfor -%}
    </ul>
  {%- else -%}
    <div class="related-products__placeholder" id="product-recommendations-{{ section.id }}"></div>
  {%- endif -%}
</div>

<script>
  document.addEventListener('DOMContentLoaded', function () {
    const container = document.querySelector('.related-products[data-product-id]');
    if (!container) return;

    const productId = container.dataset.productId;
    const limit = container.dataset.limit;
    const baseUrl = container.dataset.baseUrl;
    
    // Combining Shopify Liquid section ID with client-side query string parameters
    const requestUrl = `${baseUrl}?section_id={{ section.id }}&product_id=${productId}&limit=${limit}`;

    fetch(requestUrl)
      .then(response => response.text())
      .then(html => {
        const wrapper = document.createElement('div');
        wrapper.innerHTML = html;
        const recommendations = wrapper.querySelector('.related-products');

        if (recommendations && recommendations.innerHTML.trim().length > 0) {
          container.innerHTML = recommendations.innerHTML;
        }
      })
      .catch(e => console.error('Error loading product recommendations:', e));
  });
</script>

<style>
  .section-{{ section.id }}-padding {
    padding-top: {{ section.settings.padding_top }}px;
    padding-bottom: {{ section.settings.padding_bottom }}px;
  }
  .related-products__grid {
    display: grid;
    gap: 1.5rem;
    list-style: none;
    padding: 0;
  }
  .grid--4-col-desktop {
    grid-template-columns: repeat(4, 1fr);
  }
  .grid--3-col-desktop {
    grid-template-columns: repeat(3, 1fr);
  }
  @media screen and (max-width: 749px) {
    .grid--2-col-tablet-down {
      grid-template-columns: repeat(2, 1fr);
    }
    .grid--1-col-tablet-down {
      grid-template-columns: 1fr;
    }
  }
</style>

{% schema %}
{
  "name": "Related Products",
  "tag": "section",
  "class": "section",
  "settings": [
    {
      "type": "text",
      "id": "heading",
      "default": "You may also like",
      "label": "Heading"
    },
    {
      "type": "select",
      "id": "heading_size",
      "options": [
        { "value": "h3", "label": "Small" },
        { "value": "h2", "label": "Medium" },
        { "value": "h1", "label": "Large" }
      ],
      "default": "h2",
      "label": "Heading size"
    },
    {
      "type": "range",
      "id": "products_to_show",
      "min": 2,
      "max": 10,
      "step": 1,
      "default": 4,
      "label": "Maximum products to show"
    },
    {
      "type": "range",
      "id": "columns_desktop",
      "min": 2,
      "max": 5,
      "step": 1,
      "default": 4,
      "label": "Number of columns on desktop"
    },
    {
      "type": "select",
      "id": "columns_mobile",
      "options": [
        { "value": "1", "label": "1 column" },
        { "value": "2", "label": "2 columns" }
      ],
      "default": "2",
      "label": "Number of columns on mobile"
    },
    {
      "type": "checkbox",
      "id": "show_vendor",
      "default": false,
      "label": "Show product vendor"
    },
    {
      "type": "checkbox",
      "id": "show_rating",
      "default": false,
      "label": "Show product rating"
    },
    {
      "type": "header",
      "content": "Section Padding"
    },
    {
      "type": "range",
      "id": "padding_top",
      "min": 0,
      "max": 100,
      "step": 4,
      "unit": "px",
      "label": "Top padding",
      "default": 36
    },
    {
      "type": "range",
      "id": "padding_bottom",
      "min": 0,
      "max": 100,
      "step": 4,
      "unit": "px",
      "label": "Bottom padding",
      "default": 36
    }
  ],
  "presets": [
    {
      "name": "Related Products"
    }
  ]
}
{% endschema %}