Sari la conținut

Shopify Liquid

Secțiuni de temă hrănite de un mic Worker intermediar, t.js în temă și limitele acestei variante.

DocumentațiePrimii pași

Meniul documentațieiShopify Liquid

Liquid nu poate chema un API cât se construiește pagina, iar o cheie secretă nu are ce căuta într-o temă. De aceea setul pentru Shopify are două părți și spune deschis ce nu poate.

  • Un Worker intermediar (proxy/): ține cheia și dă conținutul publicat ca JSON compact, ținut un minut în cache la margine, cu CORS doar pentru magazinul tău.
  • Fișierele temei (sections/, snippets/, assets/): secțiuni care citesc acel JSON în browser și fragmentul pentru t.js.

Pornirea în trei pași

  1. Worker-ul. npm install, apoi npm run dev cu proxy/.dev.vars (completat în setul descărcat). Publicarea: npx wrangler secret put MANIFOLIO_PROJECT, npx wrangler secret put MANIFOLIO_KEY, completezi SHOP_ORIGINS, npm run deploy.
  2. Tema. Copiezi sections/manifolio-entries.liquid, sections/manifolio-entry.liquid, snippets/manifolio-tjs.liquid și assets/manifolio.js în temă. Adaugi secțiunea „Manifolio entries” din editorul temei și lipești adresa Worker-ului.
  3. Analiza. În layout/theme.liquid, înainte de </head>:
liquid
{% render 'manifolio-tjs', key: 'mf_pk_live_cheia_site-ului' %}

Cheia publicabilă trebuie să aibă domeniul magazinului.

Limitele

  • Intrările se afișează în browser: motoarele de căutare care nu rulează JavaScript nu le văd. Pentru conținutul important la SEO, îl sincronizezi în metaobiectele Shopify.
  • Fără editor vizual: temele nu pot încărca ciorne din Manifolio.
  • Un app proxy Shopify sau o extensie de temă ar scoate Worker-ul separat; nu fac parte din acest set.