Vásárlás gomb kódjának hozzáadása HTML-hez

Miután létrehozott egy Vásárlás gombot a Shopify adminisztrációs felületén, készen áll arra, hogy hozzáadja azt a saját weboldalához vagy blogjához.

A beágyazott kód hozzáadása a weboldal HTML-forráskódjához némileg eltérő lehet attól függően, hogy hogyan és hol szeretné megjeleníteni a Vásárlás gombokat és a kosarat, milyen közzétételi platformot használ, illetve esetenként az adott platformon használt témától.

Beágyazott kód hozzáadása a WordPresshez

WordPress-webhelyén beágyazott kódot adhat hozzá bejegyzésekhez, oldalakhoz vagy sablonokhoz.

Beágyazott kód hozzáadása WordPress-bejegyzéshez vagy -oldalhoz

1. A Shopifyban hozzon létre egy Vásárlás gombot, és másolja ki a beágyazott kódját a Beágyazott kód párbeszédpanelről (vagy kattintson a „Beágyazott kód másolása a vágólapra” gombra).
2. A WordPress-irányítópultról nyissa meg a bejegyzéseket vagy az oldalakat.
3. Hozzon létre egy új bejegyzést vagy oldalt, vagy szerkesszen egy meglévőt.
4. A blokkszerkesztőben kattintson a + gombra, keressen rá az Egyéni HTML lehetőségre, majd kattintással szúrjon be egy Egyéni HTML-blokkot.
5. Illessze be a beágyazott kódot az Egyéni HTML-blokk szövegmezőjébe.
6. Opcionális: Helyezze át az Egyéni HTML-blokkot, vagy tekintse meg, hogyan fog megjelenni a Vásárlás gomb:
   • Az Egyéni HTML-blokk áthelyezéséhez kattintson a blokk eszköztárán lévő nyílgombokra, vagy húzza a blokkot egy új helyre.
   • A Vásárlás gomb előnézetének megtekintéséhez kattintson a blokk eszköztárán az Előnézet gombra.
7. Ha végzett, kattintson a bejegyzés vagy az oldal Piszkozat mentése, Előnézet vagy Közzététel gombjára.

Ha a WordPress Classic Editor beépülő modulját használja, akkor az Egyéni HTML-blokk használata helyett váltson a szövegszerkesztőben Vizuális módról Szöveg módra, és illessze be a beágyazott kódot a szerkesztőbe.

Beágyazott kód hozzáadása WordPress-sablonhoz

Ha a WordPress-témája támogatja a webhelyszerkesztőt, akkor beágyazott Vásárlás gombot adhat hozzá a webhely bármely sablonjához.

Lépések:

1. A Shopifyban hozzon létre egy Vásárlás gombot, és másolja ki a beágyazott kódját a Beágyazott kód párbeszédpanelről (vagy kattintson a „Beágyazott kód másolása a vágólapra” gombra).
2. A WordPress-irányítópulton lépjen a Szerkesztő menüpontba.
3. Navigáljon a szerkeszteni kívánt sablonhoz.
4. A blokkszerkesztőben kattintson a + gombra, keressen rá az Egyéni HTML lehetőségre, majd kattintással szúrjon be egy Egyéni HTML-blokkot.
5. Illessze be a beágyazott kódot az Egyéni HTML-blokk szövegmezőjébe.
6. Opcionális: Helyezze át az Egyéni HTML-blokkot, vagy tekintse meg, hogyan fog megjelenni a Vásárlás gomb:
   • Az Egyéni HTML-blokk áthelyezéséhez kattintson a blokk eszköztárán lévő nyílgombokra, vagy húzza a blokkot egy új helyre.
   • A Vásárlás gomb előnézetének megtekintéséhez kattintson a blokk eszköztárán az Előnézet gombra.
7. Ha végzett, kattintson a sablon Előnézet vagy Mentés gombjára.

Beágyazott kód hozzáadása a Shopify-bloghoz

Lépések:

Beágyazott kód hozzáadása a Squarespace-hez

A Squarespace-en beágyazott kódot adhat hozzá egyedi bejegyzésekhez és a kezdőoldal menüihez. Egyes esetekben érdemes lehet mindkettőt megtenni. Például beágyazhat egy kosarat a kezdőoldalra, hogy fogadja az egyedi bejegyzésekbe beágyazott Vásárlás gombokról érkező vásárlásokat.

Lépések:

1. A Squarespace-irányítópultról nyissa meg azt a weblapot, amelyhez hozzá szeretné adni a beágyazott kódot.
2. Keresse meg az oldalon azt az elemet, ahol a Vásárlás gombot vagy a beágyazott kosarat meg szeretné jeleníteni, vigye a kurzort az Oldal tartalma terület fölé, majd kattintson a SZERKESZTÉS gombra.
3. Kattintson arra a beillesztési pontra, ahová a beágyazott kódot hozzá szeretné adni.
4. A Tartalmi blokkok párbeszédpanel Továbbiak szakaszában kattintson a Kód lehetőségre.
5. A Shopify adminisztrációs felületéről másolja ki a beágyazott kódot a Beágyazott kód párbeszédpanelből.
6. A Squarespace-irányítópulton illessze be a beágyazott kódot a KÓD párbeszédpanelbe. Győződjön meg arról, hogy a szövegmező HTML-kód fogadására van beállítva.
7. Kattintson az ALKALMAZÁS gombra a KÓD SZERKESZTÉSE párbeszédpanelen.
8. Kattintson ismét a MENTÉS gombra az oldalszerkesztőben. Mivel a Squarespace letiltja a JavaScriptet az irányítópultján, külön meg kell tekintenie az oldal előnézetét, hogy megbizonyosodjon arról, hogy a Vásárlás gomb vagy a beágyazott kosár működik.

Ha elvégezte a lépéseket, de a Vásárlás gomb nem töltődik be, akkor lehet, hogy ki kell kapcsolnia az Ajax-betöltést. További részletekért lásd az Ajax engedélyezése vagy letiltása című részt.

Beágyazott kód hozzáadása a Wix-hez

Miután a Shopify adminisztrációs felületén létrehozott egy Vásárlás gombot vagy kollekciót, a Wix weboldalszerkesztővel hozzáadhatja azt a Wix-weboldalához.

Ha a beágyazott kód szerkesztése nélkül szeretne több terméket megjeleníteni a Wix-weboldalán, akkor beágyazhat egy kollekciót. A Shopify adminisztrációs felületén létrehozhat egy új kollekciót azokhoz a termékekhez, amelyeket meg szeretne jeleníteni a Wix felületén.

Lépések:

1. A Shopify adminisztrációs felületén hozzon létre egy Vásárlás gombot egy termékhez vagy kollekcióhoz, majd másolja ki a beágyazott kódját.

2. A Wix-fiókjából keresse meg a szerkeszteni kívánt webhelyet a Saját webhelyek részben, majd kattintson a Webhely szerkesztése gombra.
3. A Wix weboldalszerkesztőben kattintson a + gombra, majd a Továbbiak gombra.
4. Kattintson a HTML-kód lehetőségre, hogy HTML-kód widgetet adjon az oldalhoz.
5. Kattintson a Kód megadása lehetőségre.
6. A HTML-beállítások párbeszédpanelen illessze be a Vásárlás gomb vagy a kollekció beágyazott kódját az Ide írja be a kódot mezőbe, majd kattintson a Frissítés gombra.
7. Méretezze át a HTML-kód widgetet, hogy illeszkedjen a tartalmához. Ha kosárral rendelkező beágyazást hoz létre, akkor győződjön meg róla, hogy a kosár fül a megfelelő helyen jelenik meg.
8. Ha végzett, kattintson a Mentés gombra.

Több termék vagy kollekció beágyazása

Lépések:

1. A Shopify adminisztrációs felületén hozzon létre egy Vásárlás gombot egy termékhez vagy kollekcióhoz, majd másolja ki a beágyazott kódját.
2. Illessze be a kódot egy kódszerkesztőbe vagy a Wix weboldalkészítőjébe. Ismételje meg az első két lépést, amíg létre nem hozza a szükséges Vásárlás gombokat.
3. Szerkessze a beágyazott kódokat, hogy biztosan a megfelelő igazítással jelenjenek meg.
4. A Wix-fiókjából keresse meg a szerkeszteni kívánt webhelyet a Saját webhelyek részben, majd kattintson a Webhely szerkesztése gombra.
5. A Wix weboldalszerkesztőben kattintson a + gombra, majd a Továbbiak gombra.
6. Kattintson a HTML-kód lehetőségre, hogy HTML-kód widgetet adjon az oldalhoz.
7. Kattintson a Kód megadása lehetőségre.
8. A HTML-beállítások párbeszédpanelen illessze be a Vásárlás gombok szerkesztett kódját az Ide írja be a kódot mezőbe, majd kattintson a Frissítés gombra.
9. Méretezze át a HTML-kód widgetet, hogy illeszkedjen a tartalmához. Ha kosárral rendelkező beágyazást hoz létre, akkor győződjön meg róla, hogy a kosár fül a megfelelő helyen jelenik meg.
10. Ha végzett, kattintson a Mentés gombra.

Script tagek külön hozzáadása

Egyes platformok (például az Unbounce) megkövetelik, hogy a beágyazott kód <script> tagjeit az oldal fejlécébe illessze be, a beágyazott kód többi részét pedig arra az oldalra, ahol a Vásárlás gombot meg szeretné jeleníteni.

Lépések:

1. A Vásárlás gomb létrehozásakor generált beágyazott kódból másolja ki a <div> és a <script> elemet is. Például:

<script type="text/javascript">
/*<![CDATA[*/

(function () {
  var scriptURL = 'https://sdks.shopifycdn.com/buy-button/latest/buy-button-storefront.min.js';
  if (window.ShopifyBuy) {
    if (window.ShopifyBuy.UI) {
      ShopifyBuyInit();
    } else {
      loadScript();
    }
  } else {
    loadScript();
  }

  function loadScript() {
    var script = document.createElement('script');
    script.async = true;
    script.src = scriptURL;
    (document.getElementsByTagName('head')[0] || document.getElementsByTagName('body')[0]).appendChild(script);
    script.onload = ShopifyBuyInit;
  }

  function ShopifyBuyInit() {
    var client = ShopifyBuy.buildClient({
      domain: 'haris-mahmood.myshopify.com',
      apiKey: 'a4e6808b1c4afa490c5b7459f7758347',
      appId: '15'
    });

    ShopifyBuy.UI.onReady(client).then(function (ui) {
      ui.createComponent('product', {
        id: [9017131142],
        node: document.getElementById('product-component-2dd3c8704e6'),
        moneyFormat: '%24%24%24%7B%7Bamount%7D%7D',
        options: {
  "product": {
    "variantId": "all",
    "contents": {
      "variantTitle": false,
      "description": false,
      "buttonWithQuantity": false,
      "quantity": false
    },
    "styles": {
      "product": {
        "@media (min-width: 601px)": {
          "max-width": "calc(25% - 20px)",
          "margin-left": "20px",
          "margin-bottom": "50px"
        }
      }
    }
  },
  "cart": {
    "contents": {
      "button": true
    },
    "styles": {
      "footer": {
        "background-color": "#ffffff"
      }
    }
  },
  "modalProduct": {
    "contents": {
      "variantTitle": false,
      "buttonWithQuantity": false,
      "quantity": false
    },
    "styles": {
      "product": {
        "@media (min-width: 601px)": {
          "max-width": "100%",
          "margin-left": "0px",
          "margin-bottom": "0px"
        }
      }
    }
  },
  "productSet": {
    "styles": {
      "products": {
        "@media (min-width: 601px)": {
          "margin-left": "-20px"
        }
      }
    }
  }
}
      });
    });
  }
})();
/*]]>*/
</script>

2. Nyissa meg annak a weboldalnak az oldalfejlécét, amelybe be szeretné ágyazni a Vásárlás gombot.
3. Illessze be a teljes <script> elemet az oldal fejlécébe.
4. Mentse a módosításokat.
5. A Shopify adminisztrációs felületén található eredeti beágyazott kódból csak a <div> elemet másolja ki. Például:

<div id='product-component-2dd3c8704e6'></div>

6. Nyissa meg azt az oldalt a webhelyén, amelybe be szeretné ágyazni a Vásárlás gombot.
7. Illessze be a <div> kódrészletet az oldalra.
8. Mentse a módosításokat.