A Yaplet telepítése Shopify-áruházba

A Shopify lehetővé teszi a téma kódjának közvetlen szerkesztését, így a Yaplet widgetet az összes oldalra feltehetod a beágyazási script fő layout-fájlba való beillesztésével. Nem szükséges appot telepíteni — csak egy másolás-beillesztés a témaszerkesztőben.

1. Szerezd meg a beágyazási kódot

Lépj be a Yaplet irányítópultba, kattints a Widgetek menüpontra az oldalsávon, válaszd ki a widgetedet, majd kattints a jobb felső sarokban lévő Beágyazás gombra. Másold ki az ablakban megjelenő teljes beágyazási scriptet. A Widget ID már benne van.

Ha még nem hoztál létre widgetet, először olvasd el ezt: A Yaplet telepítése JavaScript-kódrészlettel.

2. Nyisd meg a témakód-szerkesztőt

A Shopify adminban menj az Online áruház → Témák menüpontra. Keresd meg az aktív témádat, kattints a mellette lévő hárompontos menüre (…), és válaszd a Kód szerkesztése opciót.

3. Nyisd meg a theme.liquid fájlt

A kódszerkesztő bal oldali sávjában nyisd meg a Layout mappát, és kattints a theme.liquid fájlra. Ez az a fősablon, amely az áruházad minden oldalát körbefogja.

4. Illeszd be a beágyazási scriptet

Görgess a theme.liquid aljára, és keresd meg a záró </body> taget. Illeszd be a Yaplet beágyazási kódot közvetlenül e tag elé, majd kattints a Mentés gombra.

5. Ellenőrizd, hogy a widget megjelenik-e

Nyisd meg az áruházadat egy új böngészőfülön, és töltsd újra az oldalt. A Yaplet indítógombjának meg kell jelennie az oldal jobb alsó sarkában. Kattints rá az ellenőrzéshez.

Részletesebb ellenőrzésért lásd: Telepítés ellenőrzése.

Hibaelhárítás

• A widget nem jelenik meg mentés után — A Shopify agresszívan gyorsítótárazza az oldalakat. Nyisd meg az áruházadat inkognito módban, vagy fűzd hozzá a ?nocache=1 paramétert az URL-hez a gyorsítótár megkerüléséhez.
• A script egy kommentblokkon belül van — Ellenőrizd, hogy a kód nem egy {%- comment -%} blokkon belül van-e, vagy a záró </body> tag után.
• Több layout-fájl — Egyes témák további layout-fájlokat is használnak (pl. customers/account.liquid). Ha a widget a fiókoldalakon is kell, ott is add hozzá.
• Content Security Policy hibák — Ha a böngészőkonzol CSP-hibákat mutat, lehet, hogy engedélyezni kell a yaplet.com és az embed.yaplet.com doméneket az áruházad CSP-konfigurációjában.

Bejelentkezett vásárlók azonosítása

Ha az áruházadban vannak vásárlói fiókok, átadhatod a Shopify vásárlói adatait a Yapletnek, hogy a csapatod valódi neveket lásson a „Látogató 1234" helyett. Adj hozzá egy identify hívást egy Liquid feltétel belsejébe:

{% if customer %}
<script>
  Yaplet.identify("{{ customer.id }}", {
    name: "{{ customer.name }}",
    email: "{{ customer.email }}",
  });
</script>
{% endif %}

Ezt a blokkot közvetlenül a fő Yaplet beágyazási script után helyezd el, még a </body> előtt.