Shopify doporučené produkty AJAX API a sekce

Házím to sem v naději, že je to snazší najít než některé z náhodných příkladů, které jsem našel po spoustě hledání.
Každopádně, neautentizované API AJAX od Shopify je svým rozsahem dost omezené, ale jeho doporučené návrhy produktů jsou rozhodně robustnější než jakékoli chytré smyčkování a kódování, které mohu dělat v tekuté šabloně.
Také v jednom docela důkladném příkladu, který jsem zjistil, úplně nevysvětlují, jak s tím sekce pracují. Tak to zkusím udělat tady.
Když vytvoříte adresu URL, ze které chcete načíst doporučení, můžete přidat 3 proměnné:id produktu (povinné), limit položek, které se mají stáhnout, a id sekce, která vykreslí výsledky.

var productId="12345"; //{ in a template it would be product.id }
var sectionId="product-recommendations";
var limit="4";
var url="/recommendations/products?section_id="+sectionId+"&limit="+limit+"&product_id="+productId;

Pokud zadáte pouze ID produktu, získáte až 10 výsledků produktu ve formátu json. A pokud je vaše věc pouze javascript, pak je vše připraveno. Pro mě je jednodušší mít jednoduchý tekutý oddíl pro formátování dat. Takže v naší sekci s názvem „doporučení k produktům“ máme nějaké tekuté a HTML. Objekt doporučení (recommendations.products) je sada produktů a my jej projdeme, abychom zobrazili všechny položky. Výsledek může být samozřejmě prázdný, takže to také zkontrolujeme.

<div class="product-recommendations">
  {%- if recommendations.products_count > 0 -%}
    <h2>You may also like</h2>
      {%- for product in recommendations.products -%}
        <div>Item url: {{ product.url }}</div>
        <div>Image url: {{ product.featured_image | img_url: '300x300' }}"</div>
        <div>Item name: {{ product.title }}</div>
        <div>Item price: {{ product.price | money}}</div>
      {%- endfor -%}
  {%- endif -%}
</div>

V normálním objektu produktu je k dispozici téměř cokoli, takže si to označte, jakkoli potřebujete pro svůj obchod. Takže pomocí načítání javascriptu a za předpokladu, že máte na stránce kontejner div s id „product-recs“, byste to měli (pomocí adresy URL, kterou jsme vytvořili dříve)

fetch(url).then(function (response) {
    return response.text();
}).then(function (html) {
    document.getElementById("product-recs").innerHTML=html;
}).catch(function (err) {
    console.warn('Something went wrong.', err);
});

A to je do značné míry vše! Můžete to přidat na jakoukoli stránku produktu nebo stránku košíku (použijte ID produktu první nebo poslední položky v košíku) nebo dokonce oblast účtů (možná získáte ID oblíbené položky zákazníka a použijte to atd.).
ALE je tu ještě jedna věc, kterou sem přidám, a to způsob, jak ušetřit počáteční čas načítání stránek, které implementujete. Náš kód v současné době načte položky jako součást načítání stránky, ale doporučení se obvykle nacházejí ve spodní části stránky pod okrajem a mimo dohled. Pojďme je tedy načíst, když vstoupí do výřezu. K tomu použijeme javascriptový IntersectionObserver. Velmi pěkný a čistý způsob, jak spustit naše načítání (spíše než poslouchat události posouvání).

var productId="12345"; //{ in a template it would be product.id }
var sectionId="product-recommendations";
var limit="4";
var url="/recommendations/products?section_id="+sectionId+"&limit="+limit+"&product_id="+productId;
var intersectionObserver = new IntersectionObserver(function(entries) {
  // If intersectionRatio is 0, the target is out of view
  // and we do not need to do anything.
  if (entries[0].intersectionRatio <= 0) return;
  fetch(url).then(function (response) {
//once loaded we can stop observing
intersectionObserver.unobserve(document.getElementById("product-recs"));
return response.text();
}).then(function (html) {
    document.getElementById("product-recs").innerHTML=html;
}).catch(function (err) {
    console.warn('Something went wrong.', err);
});
    console.log('Loaded new items');
});
// start observing
intersectionObserver.observe(document.getElementById("product-recs"));

Poslední věc:za předpokladu, že vytvoříte sekci nazvanou „doporučení k produktu“ s označením HTML, které potřebujete, zde je návod, jak to přidat do svého motivu.

Add a div with the id "product-recommendations" 
where you want suggestions to show up 
in your product.liquid template.
Add this script to your theme footer
{% if request.page_type == "product" %}
<script>
if(document.getElementById("product-recommendations")){
      var intersectionObserver = new IntersectionObserver(function(entries) {
  if (entries[0].intersectionRatio <= 0) return;
  var requestUrl = "/recommendations/products?section_id=product-recommendations&limit=4&product_id="+{{ product.id }};
  fetch(requestUrl).then(function (response) {
intersectionObserver.unobserve(document.getElementById("product-recommendations"));
    return response.text();
}).then(function (html) {
        document.getElementById("product-recommendations").innerHTML=html;
}).catch(function (err) {
    console.warn('Something went wrong.', err);
});
});
intersectionObserver.observe(document.getElementById("product-recommendationss"));  
}
</script>
{% endif %}

Používám to na projektu a funguje to dobře. Doufám, že to bude užitečné, šťastné kódování!