Dodavanje koda za Gumb Kupi u HTML

Nakon što izradite Gumb Kupi u administratorskom alatu za Shopify, bit ćete spremni dodati ga na vlastito mrežno mjesto ili blog.

Postupak dodavanja koda za ugradnju u izvorni HTML vašeg mrežnog mjesta malo se razlikuje ovisno o tome kako i gdje želite da se Gumb Kupi i košarica prikazuju, o vašoj platformi za objavljivanje, a ponekad i o temi koju na toj platformi upotrebljavate.

Dodavanje koda za ugradnju na platformu WordPress

Kod za ugradnju možete dodati u objave, stranice ili predloške na svojem mrežnom mjestu na platformi WordPress.

Dodajte kod za ugradnju u objavu ili na stranicu na platformi WordPress

1. Na platformi Shopify izradite Gumb Kupi i kopirajte njegov kod za ugradnju iz dijaloškog okvira Kod za ugradnju (ili kliknite Kopiraj kod za ugradnju u međuspremnik).
2. S nadzorne ploče za WordPress idite na svoje objave ili stranice.
3. Izradite novu objavu ili stranicu, ili pak uredite postojeću.
4. Unutar uređivača blokova kliknite gumb +, potražite Prilagođeni HTML, a zatim kliknite za umetanje bloka s prilagođenim HTML-om.
5. Zalijepite kod za ugradnju u tekstualno polje bloka s prilagođenim HTML-om.
6. Neobavezno: Premjestite blok s prilagođenim HTML-om ili pregledajte kako će se vaš Gumb Kupi prikazati:
   • Da biste premjestili blok s prilagođenim HTML-om, kliknite gumbe sa strelicama na alatnoj traci bloka ili ga povucite na novu lokaciju.
   • Za pregled Gumba Kupi kliknite Pregled na alatnoj traci bloka.
7. Kada završite, za objavu ili stranicu kliknite gumb Spremi skicu, Pregledaj ili Objavi.

Ako upotrebljavate dodatak Classic Editor Plugin platforme WordPress, umjesto bloka Custom HTML promijenite program za uređivanje teksta iz načina rada Visual u Text i zalijepite kod za ugradnju u program za uređivanje.

Dodavanje koda za ugradnju u predložak platforme WordPress

Ako vaša tema za WordPress podržava alat za uređivanje mrežnog mjesta, ugrađeni Gumb Kupi možete dodati u bilo koji predložak mrežnog mjesta.

Koraci:

1. Na platformi Shopify izradite Gumb Kupi i kopirajte njegov kod za ugradnju iz dijaloškog okvira Kod za ugradnju (ili kliknite Kopiraj kod za ugradnju u međuspremnik).
2. Na nadzornoj ploči platforme WordPress idite na stavku Editor.
3. Idite na predložak koji želite urediti.
4. Unutar uređivača blokova kliknite gumb +, potražite Prilagođeni HTML, a zatim kliknite za umetanje bloka s prilagođenim HTML-om.
5. Zalijepite kod za ugradnju u tekstualno polje bloka s prilagođenim HTML-om.
6. Neobavezno: Premjestite blok s prilagođenim HTML-om ili pregledajte kako će se vaš Gumb Kupi prikazati:
   • Da biste premjestili blok s prilagođenim HTML-om, kliknite gumbe sa strelicama na alatnoj traci bloka ili ga povucite na novu lokaciju.
   • Za pregled Gumba Kupi kliknite Pregled na alatnoj traci bloka.
7. Kada završite, za predložak kliknite gumb Preview ili Save.

Dodavanje koda za ugradnju na blog platforme Shopify

Koraci:

Dodavanje koda za ugradnju na platformu Squarespace

Kod za ugradnju možete dodati u pojedinačne objave na platformi Squarespace i u izbornike na početnoj stranici. U nekim ćete slučajevima možda htjeti učiniti oboje. Na primjer, možete ugraditi košaricu na početnu stranicu za zaprimanje narudžbi putem Gumba Kupi koje ugradite u pojedinačne objave.

Koraci:

1. Na nadzornoj ploči platforme Squarespace otvorite internetsku stranicu na koju želite dodati kod za ugradnju.
2. Pronađite element na stranici gdje želite da se prikaže Gumb Kupi ili ugrađena košarica, pomaknite pokazivač iznad područja Page Content, a zatim kliknite EDIT.
3. Kliknite točku umetanja na koju želite dodati kod za ugradnju.
4. U odjeljku More u dijaloškom okviru Content Blocks kliknite Code.
5. U administratorskom alatu za Shopify kopirajte kod za ugradnju iz dijaloškog okvira Kod za ugradnju.
6. Na nadzornoj ploči platforme Squarespace zalijepite kod za ugradnju u dijaloški okvir CODE. Provjerite je li tekstualno polje postavljeno na primanje HTML-a.
7. Kliknite APPLY u dijaloškom okviru EDIT CODE.
8. Ponovno kliknite SAVE u alatu za uređivanje stranice. Budući da Squarespace onemogućuje JavaScript na svojoj nadzornoj ploči, morate zasebno pregledati stranicu kako biste potvrdili da Gumb Kupi ili ugrađena košarica radi.

Ako dovršite korake, a Gumb Kupi se ne učitava, možda ćete morati isključiti učitavanje Ajax. Za više pojedinosti pogledajte Omogućivanje ili onemogućivanje značajke Ajax.

Dodavanje koda za ugradnju na platformu Wix

Nakon što izradite Gumb Kupi ili kolekciju u administratorskom alatu za Shopify, možete ih dodati na mrežno mjesto Wix s pomoću alata za uređivanje mrežnog mjesta Wix.

Ako želite prikazati više od jednog proizvoda na mrežnom mjestu Wix bez uređivanja koda za ugradnju, možete ugraditi kolekciju. U administratorskom alatu za Shopify možete izraditi novu kolekciju za proizvode koje želite prikazati na platformi Wix.

Koraci:

1. U administratorskom alatu za Shopify izradite Gumb Kupi za proizvod ili kolekciju, a zatim kopirajte njegov kod za ugradnju.

2. Na računu platforme Wix pronađite mrežno mjesto koje želite urediti u odjeljku My Sites, a zatim kliknite Edit Site.
3. U alatu za uređivanje mrežnog mjesta Wix kliknite gumb +, a zatim kliknite More.
4. Kliknite HTML Code kako biste na stranicu dodali grafički element za HTML kod.
5. Kliknite Enter Code.
6. U dijaloškom okviru HTML Settings zalijepite kod za ugradnju za Gumb Kupi ili kolekciju u polje Add your code here, a zatim kliknite Update.
7. Promijenite veličinu grafičkog elementa za HTML kod kako bi odgovarao sadržaju. Ako izrađujete ugradnju s košaricom, provjerite prikazuje li se kartica košarice na pravome mjestu.
8. Kada završite, kliknite Save.

Ugradnja više proizvoda ili kolekcija

Koraci:

1. U administratorskom alatu za Shopify izradite Gumb Kupi za proizvod ili kolekciju, a zatim kopirajte njegov kod za ugradnju.
2. Zalijepite kod u program za uređivanje koda ili alat za izradu mrežnih mjesta platforme Wix. Ponavljajte prva dva koraka dok ne izradite potrebne Gumbe Kupi.
3. Uredite kodove za ugradnju i provjerite prikazuju li se pravilno poravnati.
4. Na računu platforme Wix pronađite mrežno mjesto koje želite urediti u odjeljku My Sites, a zatim kliknite Edit Site.
5. U alatu za uređivanje mrežnog mjesta Wix kliknite gumb +, a zatim kliknite More.
6. Kliknite HTML Code kako biste na stranicu dodali grafički element za HTML kod.
7. Kliknite Enter Code.
8. U dijaloškom okviru Postavke HTML-a zalijepite uređeni kod za gumbe Kupi u polje Dodaj kod ovdje i kliknite Ažuriraj.
9. Promijenite veličinu grafičkog elementa za HTML kod kako bi odgovarao sadržaju. Ako izrađujete ugradnju s košaricom, provjerite prikazuje li se kartica košarice na pravome mjestu.
10. Kada završite, kliknite Save.

Zasebno dodajte oznake skripte

Neke platforme (poput platforme Unbounce) zahtijevaju da zalijepite oznake <script> koda za ugradnju u zaglavlje stranice, a ostatak koda za ugradnju na stranicu na kojoj želite prikazati gumb Kupi.

Koraci:

1. Iz koda za ugradnju koji se generira prilikom izrade gumba Kupi kopirajte element <div> i element <script>. Na primjer:

<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. Otvorite zaglavlje stranice mrežnog mjesta na koje želite ugraditi gumb Kupi.
3. Zalijepite cijeli element <script> u zaglavlje stranice.
4. Spremite promjene.
5. Iz originalnog koda za ugradnju u administratorskom alatu za Shopify kopirajte samo element <div>. Na primjer:

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

6. Otvorite stranicu na mrežnom mjestu na koju želite ugraditi gumb Kupi.
7. Zalijepite isječak koda <div> na stranicu.
8. Spremite promjene.