Expert Shopify Liquid et API. Du thème aux intégrations.

{% liquid
  assign collection = section.settings.collection
  assign limit = section.settings.limit | default: 4
%}

<div class="product-grid">
  {% for product in collection.products limit: limit %}
    {% render 'product-card', product: product %}
  {% else %}
    <p>{{ 'sections.featured_collection.empty' | t }}</p>
  {% endfor %}
</div>

{% schema %}
{
  "name": "Featured collection",
  "settings": [
    { "type": "collection", "id": "collection", "label": "Collection" },
    { "type": "range", "id": "limit", "label": "Products", "min": 2, "max": 12, "step": 1, "default": 4 }
  ],
  "presets": [{ "name": "Featured collection" }]
}
{% endschema %}

{% assign faqs = shop.metaobjects.faq.values %}

{% for faq in faqs %}
  <details>
    <summary>{{ faq.question.value }}</summary>
    {{ faq.answer | metafield_tag }}
  </details>
{% endfor %}

// Bundled section rendering: the cart drawer HTML comes back with the add-to-cart response
const response = await fetch(`${window.Shopify.routes.root}cart/add.js`, {
  method: "POST",
  headers: { "Content-Type": "application/json" },
  body: JSON.stringify({
    items: [{ id: variantId, quantity: 1 }],
    sections: "cart-drawer",
  }),
});

const { sections } = await response.json();
document.querySelector("#shopify-section-cart-drawer").outerHTML = sections["cart-drawer"];

query ProductsUpdatedSince($cursor: String, $since: String!) {
  products(first: 100, after: $cursor, query: $since) {
    pageInfo {
      hasNextPage
      endCursor
    }
    nodes {
      id
      handle
      updatedAt
      variants(first: 50) {
        nodes {
          sku
          inventoryQuantity
        }
      }
    }
  }
}

import crypto from "node:crypto";

// rawBody must be the untouched request body, before any JSON parsing
export function isValidWebhook(rawBody, hmacHeader, secret) {
  const digest = crypto.createHmac("sha256", secret).update(rawBody, "utf8").digest("base64");
  const expected = Buffer.from(digest);
  const received = Buffer.from(hmacHeader ?? "");
  return expected.length === received.length && crypto.timingSafeEqual(expected, received);
}