Rendering blocks with the SDK

{% assign layers_block = section.settings.layers_block %}

{% if layers_block != blank %}
  {% assign selected_block_id = layers_block.system.handle | remove_first: 'layers-' | upcase %}
  <section
    class="layers-recommendations"
    data-block-id="{{ selected_block_id }}"
    data-anchor-id="{% if template == 'product' %}{{ product.id }}{% elsif template == 'collection' %}{{ collection.handle }}{% endif %}"
  >
    {% if section.settings.heading != blank %}
      <h2>{{ section.settings.heading }}</h2>
    {% endif %}
    <ol class="layers-recommendations__products" data-loading="true"></ol>
  </section>
{% endif %}

{% schema %}
{
  "name": "Layers Recommendations",
  "settings": [
    {
      "type": "text",
      "id": "heading",
      "label": "Heading",
      "default": "You may also like"
    },
    {
      "type": "metaobject",
      "id": "layers_block",
      "label": "Block",
      "info": "Choose a Layers recommendation block.",
      "metaobject_type": "app--278936322049--block"
    }
  ],
  "presets": [{ "name": "Layers Recommendations" }]
}
{% endschema %}

import { getSDK } from '@commerce-blocks/sdk'

const { data: sdk, error: sdkError } = getSDK()
if (sdkError) {
  console.error('SDK not initialized:', sdkError.message)
}

function hydrate(section) {
  const blockId = section.dataset.blockId
  const anchorId = section.dataset.anchorId || undefined
  const list = section.querySelector('.layers-recommendations__products')

  const blocks = sdk.blocks({ blockId, anchorId })

  blocks.subscribe(({ data, error }) => {
    if (error || (data && !data.products.length)) {
      section.hidden = true
      return
    }
    if (data) renderProducts(list, data.products)
  })

  blocks.get({ pagination: { limit: 12 } })
}

document.querySelectorAll('.layers-recommendations').forEach(hydrate)

function renderProducts(list, products) {
  list.removeAttribute('data-loading')
  list.innerHTML = products
    .map(
      (p) => `
        <li>
          <a href="/products/${p.handle}">
            <img src="${p.featuredMedia?.url ?? ''}" alt="" />
            <h3>${p.title}</h3>
            <span>${p.price?.formatted ?? ''}</span>
          </a>
        </li>
      `,
    )
    .join('')
}

{% comment %} sections/layers-card-search.liquid {% endcomment %}
{% render 'product-card',
  product: product,
  current_variant: product.selected_or_first_available_variant,
  show_rating: section.settings.show_rating
%}

async function fetchCards(products, sectionId) {
  const results = await Promise.allSettled(
    products.map((p) => {
      // Pass the matched variant through as a product-page ?variant= param so
      // the section renders the variant Layers selected, not the default
      const variantId = p.selectedVariant?.numericId
      const variantParam = variantId ? `?variant=${variantId}&` : '?'
      return fetch(`/products/${p.handle}${variantParam}sections=${sectionId}`)
        .then((r) => (r.ok ? r.json() : null))
        .then((json) => json?.[sectionId] ?? '')
    })
  )

  // Order follows `products` exactly; failed or empty cards drop out
  return results
    .map((r) => (r.status === 'fulfilled' ? r.value : ''))
    .filter((html) => html.trim())
}

blocks.get({
  pagination: { limit: 12 },
  context: {
    priorSearches: [{ searchQuery: submittedQuery }],
  },
})