Pirkimo mygtuko kodo įdėjimas į HTML

Kai savo „Shopify“ administratoriaus skydelyje sukursite pirkimo mygtuką, būsite pasirengę jį įtraukti į savo svetainę arba tinklaraštį.

Įterpiamojo kodo įdėjimo į svetainės pirminį HTML kodą procesas šiek tiek skiriasi ir priklauso nuo to, kaip ir kur norite rodyti pirkimo mygtukus bei krepšelį, taip pat nuo jūsų leidybos platformos ir kartais nuo joje naudojamos temos.

Įterpiamojo kodo įdėjimas į „WordPress“

Įterpiamąjį kodą galite įdėti į savo „WordPress“ svetainės įrašus, puslapius ar šablonus.

Įterpiamojo kodo įdėjimas į „WordPress“ įrašą ar puslapį

1. „Shopify“ sistemoje sukurkite pirkimo mygtuką ir nukopijuokite jo įterpiamąjį kodą iš dialogo lango Įterpiamasis kodas (arba spustelėkite Nukopijuoti įterpiamąjį kodą į iškarpinę).
2. „WordPress“ valdymo skydelyje eikite į savo įrašus arba puslapius.
3. Sukurkite naują įrašą ar puslapį arba redaguokite esamą.
4. Blokų rengyklėje spustelėkite mygtuką +, ieškokite Pasirinktinis HTML, tada spustelėkite, kad įterptumėte Pasirinktinio HTML bloką.
5. Įklijuokite įterpiamąjį kodą į Pasirinktinio HTML bloko teksto lauką.
6. Pasirinktinai: perkelkite Pasirinktinio HTML bloką arba peržiūrėkite, kaip bus rodomas Jūsų pirkimo mygtukas:
   • Norėdami perkelti Pasirinktinio HTML bloką, spustelėkite rodyklių mygtukus bloko įrankių juostoje arba nuvilkite bloką į naują vietą.
   • Norėdami peržiūrėti pirkimo mygtuką, bloko įrankių juostoje spustelėkite Peržiūra.
7. Baigę spustelėkite įrašo ar puslapio mygtuką Išsaugoti juodraštį, Peržiūra arba Publikuoti.

Jei naudojate „WordPress“ Classic Editor Plugin, tada, užuot naudoję pasirinktinio HTML bloką, teksto rengyklę perjunkite iš vaizdinio į teksto režimą ir įklijuokite įterpiamąjį kodą į rengyklę.

Įterpiamojo kodo įdėjimas į „WordPress“ šabloną

Jei jūsų „WordPress“ tema palaiko svetainės rengyklę, integruotą pirkimo mygtuką galite pridėti prie bet kurio savo svetainės šablono.

Veiksmai:

1. „Shopify“ sistemoje sukurkite pirkimo mygtuką ir nukopijuokite jo įterpiamąjį kodą iš dialogo lango Įterpiamasis kodas (arba spustelėkite Nukopijuoti įterpiamąjį kodą į iškarpinę).
2. Savo „WordPress“ valdymo skydelyje eikite į Rengyklę.
3. Eikite į šabloną, kurį norite redaguoti.
4. Blokų rengyklėje spustelėkite mygtuką +, ieškokite Pasirinktinis HTML, tada spustelėkite, kad įterptumėte Pasirinktinio HTML bloką.
5. Įklijuokite įterpiamąjį kodą į Pasirinktinio HTML bloko teksto lauką.
6. Pasirinktinai: perkelkite Pasirinktinio HTML bloką arba peržiūrėkite, kaip bus rodomas Jūsų pirkimo mygtukas:
   • Norėdami perkelti Pasirinktinio HTML bloką, spustelėkite rodyklių mygtukus bloko įrankių juostoje arba nuvilkite bloką į naują vietą.
   • Norėdami peržiūrėti pirkimo mygtuką, bloko įrankių juostoje spustelėkite Peržiūra.
7. Baigę spustelėkite šablono mygtuką Peržiūra arba Išsaugoti.

Įterpiamojo kodo įdėjimas į „Shopify“ tinklaraštį

Veiksmai:

Įterpiamojo kodo įdėjimas į „Squarespace“

„Squarespace“ sistemoje įterpiamąjį kodą galite įdėti į atskirus įrašus ir į pagrindinio puslapio meniu. Kai kuriais atvejais galite norėti atlikti abu veiksmus. Pavyzdžiui, galite įterpti krepšelį savo pagrindiniame puslapyje, kad galėtumėte priimti pirkimus, atliekamus per pirkimo mygtukus, kuriuos įterpiate į atskirus įrašus.

Veiksmai:

1. „Squarespace“ valdymo skydelyje atidarykite tinklalapį, kuriame norite įdėti įterpiamąjį kodą.
2. Puslapyje raskite elementą, kuriame norite, kad būtų rodomas pirkimo mygtukas arba įdėtas krepšelis, užveskite žymeklį virš srities Puslapio turinys, tada spustelėkite REDAGUOTI.
3. Spustelėkite įterpimo tašką, kuriame norite įdėti įterpiamąjį kodą.
4. Dialogo lango Turinio blokai skiltyje Daugiau spustelėkite Kodas.
5. „Shopify“ administratoriaus skydelyje nukopijuokite įterpiamąjį kodą iš dialogo lango Įterpiamasis kodas.
6. „Squarespace“ valdymo skydelyje įklijuokite įterpiamąjį kodą į dialogo langą KODAS. Įsitikinkite, kad teksto laukas nustatytas priimti HTML.
7. Dialogo lange REDAGUOTI KODĄ spustelėkite TAIKYTI.
8. Puslapio rengyklėje dar kartą spustelėkite IŠSAUGOTI. Kadangi „Squarespace“ savo valdymo skydelyje išjungia „JavaScript“, turite atskirai peržiūrėti puslapį, kad patvirtintumėte, jog pirkimo mygtukas arba įdėtas krepšelis veikia.

Jei atlikote veiksmus, tačiau pirkimo mygtukas neįkeliamas, gali reikėti išjungti „Ajax“ įkėlimą. Daugiau informacijos rasite skyriuje „Ajax“ įjungimas arba išjungimas.

Įterpiamo kodo įtraukimas į „Wix“

Kai sukursite pirkimo mygtuką arba kolekciją savo „Shopify“ administravimo priemonėje, galėsite jį įtraukti į savo „Wix“ svetainę naudodami „Wix“ svetainės redagavimo priemonę.

Jei norite rodyti daugiau nei vieną produktą savo „Wix“ svetainėje neredaguodami įterpiamo kodo, galite įterpti kolekciją. Savo „Shopify“ administravimo priemonėje galite sukurti naują kolekciją produktams, kuriuos norite rodyti „Wix“ svetainėje.

Veiksmai:

1. Savo „Shopify“ administravimo priemonėje sukurkite pirkimo mygtuką produktui arba kolekcijai ir nukopijuokite jo įterpiamą kodą.

2. Savo „Wix“ paskyroje raskite svetainę, kurią norite redaguoti, skiltyje Mano svetainės, tada spustelėkite Redaguoti svetainę.
3. „Wix“ svetainės redagavimo priemonėje spustelėkite mygtuką +, tada spustelėkite Daugiau.
4. Spustelėkite HTML kodas, kad į puslapį įtrauktumėte HTML kodo valdiklį.
5. Spustelėkite Įvesti kodą.
6. Dialogo lange HTML nustatymai įklijuokite pirkimo mygtuko arba kolekcijos įterpiamą kodą į lauką Čia pridėkite savo kodą ir spustelėkite Atnaujinti.
7. Pakeiskite HTML kodo valdiklio dydį, kad jis atitiktų turinį. Jei kuriate įterpinį su krepšeliu, įsitikinkite, kad krepšelio skirtukas rodomas tinkamoje vietoje.
8. Baigę spustelėkite Išsaugoti.

Kelių produktų ar kolekcijų įterpimas

Veiksmai:

1. Savo „Shopify“ administravimo priemonėje sukurkite pirkimo mygtuką produktui arba kolekcijai ir nukopijuokite jo įterpiamą kodą.
2. Įklijuokite kodą į kodo rengyklę arba „Wix“ svetainių kūrimo priemonę. Kartokite pirmuosius du veiksmus, kol sukursite reikiamus pirkimo mygtukus.
3. Redaguokite įterpiamus kodus, kad jie būtų tinkamai išlygiuoti.
4. Savo „Wix“ paskyroje raskite svetainę, kurią norite redaguoti, skiltyje Mano svetainės, tada spustelėkite Redaguoti svetainę.
5. „Wix“ svetainės redagavimo priemonėje spustelėkite mygtuką +, tada spustelėkite Daugiau.
6. Spustelėkite HTML kodas, kad į puslapį įtrauktumėte HTML kodo valdiklį.
7. Spustelėkite Įvesti kodą.
8. Dialogo lange HTML nustatymai į lauką Pridėkite savo kodą čia įklijuokite redaguotą pirkimo mygtukų kodą, o tada spustelėkite Atnaujinti.
9. Pakeiskite HTML kodo valdiklio dydį, kad jis atitiktų turinį. Jei kuriate įterpinį su krepšeliu, įsitikinkite, kad krepšelio skirtukas rodomas tinkamoje vietoje.
10. Baigę spustelėkite Išsaugoti.

Skripto žymų įtraukimas atskirai

Kai kuriose platformose (pvz., „Unbounce“) reikalaujama, kad įterpiamo kodo <script> žymas įklijuotumėte į puslapio antraštę, o likusią įterpiamo kodo dalį – į puslapį, kuriame norite rodyti pirkimo mygtuką.

Veiksmai:

1. Iš įterpiamo kodo, sugeneruoto kuriant pirkimo mygtuką, nukopijuokite ir <div>, ir <script> elementus. Pavyzdžiui:

<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. Atidarykite svetainės, kurioje norite įterpti pirkimo mygtuką, puslapio antraštę.
3. Į puslapio antraštę įklijuokite visą <script> elementą.
4. Išsaugokite pakeitimus.
5. Iš pradinio įterpiamo kodo savo „Shopify“ administravimo priemonėje nukopijuokite tik <div> elementą. Pavyzdžiui:

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

6. Atidarykite savo svetainės puslapį, kuriame norite įterpti pirkimo mygtuką.
7. Į puslapį įklijuokite <div> kodo fragmentą.
8. Išsaugokite pakeitimus.