Magento (Adobe Commerce)

Áttekintés

A Magento Open Source-ban és az Adobe Commerce-ben van egy lábléc-beállítás, a Miscellaneous HTML (Egyéb HTML), azoknak a szkripteknek, amelyek minden oldalon közvetlenül a záró </body> tag elé kerülnek. Ha ide illeszted a Yaplet kódot, a chat widget megjelenik a boltban. Nem kell hozzá bővítmény.

Az Adobe útmutatója a saját szerveren futó boltokra és az Adobe Commerce on cloud infrastructure-re írja le ezt a beállítást. A Magento 2.4.7-es és újabb verzióiban a chat nem fut a pénztár oldalain, hacsak egy fejlesztő fel nem veszi az engedélyezési listára (lásd lent, a pénztárról szóló részt). Az admin menüpontjait angolul írjuk, ahogy az Adobe dokumentációja mutatja, zárójelben magyar fordítással; magyar nyelvi csomaggal a nevük eltérhet.

Telepítési lépések

Másold ki a Yaplet kódodat

A Yaplet vezérlőpulton menj a Márka → Chat widget menüpontra, és nyisd meg a Telepítés fület. Ha a fül megkérdezi, min fut a weboldalad, válaszd a Más weboldal lehetőséget. Másold ki a kódot a kódblokk másolás gombjával.

A Miscellaneous HTML mező HTML-t vár, ezért a kódnak egy <script> és egy </script> sor között kell lennie. Ha a Más weboldal lehetőséget választottad, a kódban már benne vannak ezek a sorok. Ha a fül nem kérdezett rá, a kód sima JavaScript, amely így kezdődik: !function (Yaplet, és beillesztéskor adod hozzá a sorokat.

Nyisd meg a lábléc beállításait

Az admin oldalsávjában menj a Content → Design → Configuration (Tartalom → Dizájn → Konfiguráció) menüpontra. Keresd meg azt a store view-t (áruházi nézetet), ahol chatet szeretnél, és kattints az Edit (Szerkesztés) gombra az Action (Művelet) oszlopban. Az Other Settings (Egyéb beállítások) alatt nyisd ki a Footer (Lábléc) részt.

Add hozzá a Yaplet kódot

A Miscellaneous HTML mezőben hagyd meg a meglévő kódot, és a végén kezdj egy új sort. Ide illeszd be a Yaplet kódot. A kódnak egy <script> sorral kell kezdődnie, és egy </script> sorral kell végződnie; ha a kimásolt kód ehelyett így kezdődik: !function (Yaplet, írd elé egy új sorba, hogy <script>, utána pedig egy új sorba, hogy </script>. Kattints a Save Configuration (Konfiguráció mentése) gombra.

A mező store view-nként mentődik. Ismételd meg ezt minden olyan store view-nál, ahol chatet szeretnél.

Frissítsd a gyorsítótárat

Ha a Magento üzenetben jelzi, hogy egy gyorsítótárat frissíteni kell, kattints az üzenetben lévő Cache Management (Gyorsítótár-kezelés) linkre (vagy menj a System → Tools → Cache Management menüpontra). Jelöld ki az érvénytelenként jelölt gyorsítótárakat, az Actions (Műveletek) mezőben válaszd a Refresh (Frissítés) lehetőséget, és kattints a Submit (Küldés) gombra, vagy kattints a Flush Magento Cache (Magento gyorsítótár ürítése) gombra.

Nézd meg a boltodat

Nyisd meg a boltodat egy új böngészőfülön, és frissítsd. A Yaplet chat gombja megjelenik a jobb alsó sarokban. Kattints rá, és nézd meg, hogy megnyílik-e a chat.

Pénztár a 2.4.7-es és újabb verziókon

A 2.4.7-es verziótól a Magento tartalombiztonsági szabályzata (Content Security Policy, CSP) „restrict” módban fut a fizetési oldalakon (a bolt pénztárában és az admin fizetési oldalain), minden más oldalon pedig „report-only” módban. Restrict módban csak az engedélyezett beágyazott szkriptek futnak, és az Adobe útmutatója szerint a Miscellaneous HTML mezőbe tett JavaScriptet engedélyezni kell, különben nem fut a pénztárban. A 2.4.7 előtti verziókban minden oldal report-only módban volt.

Változtatás nélkül tehát a chat mindenhol fut, kivéve a pénztárt. Ha ott is szeretnéd, egy fejlesztő felveszi a Yapletet egy csp_whitelist.xml fájlba egy saját modul etc mappájában:

A beágyazott Yaplet kód: a <script> és </script> tagek közötti pontos szöveg sha256 hash-e, Base64 kódolással, a sortörésekkel együtt. A kódban benne van a widget azonosítód, ezért a hash-t a saját kódodból számold ki, és minden módosítás után újra.
A Yaplet címei: a szkriptek a https://yaplet.com és a https://sdk.yaplet.com címről töltődnek be, a widget a https://yaplet.com címet hívja, és élő kapcsolatot tart a wss://phx.yaplet.com címmel, a chatablak egy keret a https://embed.yaplet.com címről, a képek a https://api.yaplet.com és a https://cdn.yaplet.com címről jönnek, az új üzenet hangja pedig a https://yaplet.com címről.

etc/csp_whitelist.xml

<?xml version="1.0"?>
<csp_whitelist xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:module:Magento_Csp:etc/csp_whitelist.xsd">
    <policies>
        <policy id="script-src">
            <values>
                <value id="yaplet-snippet" type="hash" algorithm="sha256">YOUR_BASE64_HASH</value>
                <value id="yaplet" type="host">https://yaplet.com</value>
                <value id="yaplet-sdk" type="host">https://sdk.yaplet.com</value>
            </values>
        </policy>
        <policy id="connect-src">
            <values>
                <value id="yaplet-api" type="host">https://yaplet.com</value>
                <value id="yaplet-live" type="host">wss://phx.yaplet.com</value>
            </values>
        </policy>
        <policy id="frame-src">
            <values>
                <value id="yaplet-embed" type="host">https://embed.yaplet.com</value>
            </values>
        </policy>
        <policy id="img-src">
            <values>
                <value id="yaplet-api-img" type="host">https://api.yaplet.com</value>
                <value id="yaplet-cdn" type="host">https://cdn.yaplet.com</value>
            </values>
        </policy>
        <policy id="media-src">
            <values>
                <value id="yaplet-sound" type="host">https://yaplet.com</value>
            </values>
        </policy>
    </policies>
</csp_whitelist>

Az Adobe Content Security Policies útmutatója leírja a fájl formátumát, a nonce-szolgáltatót (a hash alternatíváját), és azt, hogyan állítható át a CSP mód területenként.

Hibaelhárítás

A kód szövegként látszik az oldalak alján — hiányoznak a <script> tagek. Írd a kód elé egy új sorba, hogy <script>, a kód után egy új sorba, hogy </script>, mentsd, és frissítsd a gyorsítótárat.
Mentés után semmi sem változott — az oldal-gyorsítótár még a régi oldalakat adja. Frissítsd az érvénytelen gyorsítótárakat a System → Tools → Cache Management menüpontban, és ürítsd a bolt előtt álló minden más oldal-gyorsítótárat is.
A chat az egyik store view-ban megjelenik, a másikban nem — a Miscellaneous HTML store view-nként mentődik. Add hozzá a kódot a másik store view-hoz is.
A chat csak a pénztárban hiányzik — ezt a 2.4.7-es és újabb verziók CSP restrict módja okozza a fizetési oldalakon. Lásd a fenti, pénztárról szóló részt.
A böngésző konzolja más oldalakon is ezt írja: „Refused to execute inline script because it violates the following Content Security Policy directive” — a boltot mindenhol restrict módra állították. Vedd fel a Yapletet az engedélyezési listára a fent leírt módon.
A böngésző az oldal egy régi változatát mutatja — a Magento gyorsítótárának ürítése nem üríti a böngésző gyorsítótárát. Frissíts, vagy nyisd meg a boltot egy privát böngészőablakban.

A Telepítés oldal elmagyarázza, mit csinál a kód, és felsorolja az összes többi platform útmutatóját.