Ohje
Kirjaudu sisään

Osta-painikkeen, sulautetun kokoelman tai sulautetun ostoskorin mukauttaminen tai poistaminen

Voit muuttaa Osta-painikkeen, sulautetun kokoelman tai sulautetun ostoskorin ulkoasua tai toimintaa muokkaamalla sen upotuskoodia verkkosivusi HTML-lähdekoodissa. Voit myös poistaa upotuksen poistamalla koodin verkkosivultasi.

Osta-painike näyttää tuotteen ja ostospainikkeen. Sulautettu kokoelma näyttää useita tuotteita. Sulautettu ostoskori näyttää erillisen ostoskorin, jota asiakkaat voivat käyttää eri sivuilla.

Upotuskoodi on koodinpätkä, jonka kopioit Shopifyn ohjausnäkymästä ja liitit verkkosivusi HTML-koodiin, kun loit Osta-painikkeen tai ostoskorin. Upotuskoodi on kirjoitettu JavaScriptillä, joka on verkkosivujen interaktiivisten ominaisuuksien lisäämiseen käytettävä ohjelmointikieli.

Tällä sivulla

Osta-painikkeen upotuskoodin ymmärtäminen

Jokainen Osta-painike koostuu erillisistä osista, joita kutsutaan komponenteiksi. Komponentti on upotuskoodin nimetty osa, joka ohjaa yhtä osaa Osta-painikekokemuksesta. Kun esimerkiksi lisäät ostoskorin sisältävän tuotteen verkkosivullesi, upotuskoodi luo seuraavat komponentit:

  • product-komponentti, joka näyttää tuotetiedot ja ostospainikkeen
  • cart-komponentti, joka näyttää ostoskorin sisällön
  • ostoskorin toggle-komponentti, joka näyttää ostoskorin avaavan kuvakkeen

Jos product-komponentti avaa tuotetietojen ponnahdusikkunan, upotuskoodi luo kaksi lisäkomponenttia: modal-komponentin itse ponnahdusikkunaa varten ja modalProduct-komponentin ponnahdusikkunan sisällä olevia tuotetietoja varten.

Seuraavassa koodinpätkässä on erilliset product- ja cart-komponentit:

ShopifyBuy.UI.onReady(client).then(function (ui) {
  ui.createComponent('product', {
    id: 12345,
    options: {
      product: {
        buttonDestination: 'cart',
        contents: {
          description: true
        },
        text: {
          button: 'Add to Cart'
        },
        styles: {
          button: {
            'background-color': 'blue'
          }
        }
      },
      cart: {
        styles: {
          button: {
            'background-color': 'orange'
          }
        }
      }
    }
  });
});

Jokainen komponentti määritetään upotuskoodissa olevan määritysobjektin avulla. Objekti on rakenteellinen ryhmä asetuksia, joka on muotoiltu avain-arvo-parien luetteloksi:

  • Avain on asetuksen nimi, kuten buttonDestination.
  • Arvo on se, miksi asetus on määritetty, kuten 'cart'.

Objekti on samankaltainen kuin laskentataulukko: jokainen avain vastaa sarakkeen nimeä ja jokainen arvo solun sisältöä. Voit muuttaa Osta-painikkeiden ulkoasua tai toimintaa muokkaamalla avaimia ja arvoja määritysobjektien sisällä.

Jokaisella komponentilla on monia muokattavia avaimia. Täydellinen luettelo muokattavista avaimista on kehittäjien dokumentaatiossa. Jos haluat määrittää avaimen, jota ei vielä ole upotuskoodissasi, lisää avain asianmukaiseen objektiin. Katso esimerkki kohdasta Muuta tuoteupotuksen pohjaa.

Mukauta komponenttien tyylejä

Jokaisessa komponentissa on sisäkkäinen styles-määritysobjekti, joka ohjaa komponentin ulkoasua. Sisäkkäinen objekti on toisen objektin sisälle sijoitettu objekti.

styles-objekti käyttää CSS-kieltä, jota käytetään kuvaamaan verkkosivun elementtien visuaalista tyyliä. styles-objektin jokainen ylätason avain edustaa komponentin elementtiä, kuten otsikkoa tai painiketta. Kyseisen avaimen sisällä jokainen sisäkkäinen avain on CSS-ominaisuus (esimerkiksi background-color tai border), ja arvo on CSS-arvo.

options: {
  product: {
    styles: {
      button: {
        'background-color': 'red',
        'border-radius': '5px'
      }
    }
  }
}

Mikä tahansa kelvollinen CSS-ominaisuus voidaan lisätä styles-objektiin. Varmista, että väliviivoja sisältävät ominaisuuksien nimet on kirjoitettu lainausmerkkeihin.

Lue lisää CSS-mukauttamisesta kehittäjädokumentaatiosta.

Sulautetun kokoelman komponentit

Sulautetut kokoelmat käyttävät samoja määritysobjekteja kuin Osta-painikkeet. Voit muokata kokoelman tuotteiden pohjaa tai muita ominaisuuksia etsimällä product-määritysobjektin ja muokkaamalla sitä samalla tavalla kuin tuoteupotusta. Voit muokata itse kokoelman ominaisuuksia, kuten Seuraava sivu -painikkeen tekstiä, muokkaamalla sen sijaan productSet-määritysobjektia.

Jotkin avaimet, kuten komponentin teksti, määritetään sisäkkäisten objektien kautta. Esimerkiksi Seuraava sivu -painikkeen teksti on productSet-komponentin text-objektin sisällä:

options: {
  productSet: {
    text: {
      nextPageButton: 'Continue'
    }
  }
}

Tuotetietojen modaali-ikkuna on ponnahdusikkuna, joka näyttää tuotetiedot. Voit ohjata asiakkaasi tuotetietojen modaali-ikkunaan ostoskorin sijaan muokkaamalla Osta-painikkeen upotuskoodia verkkosivusi HTML-lähdekoodissa.

Vaiheet:

  1. Avaa sen sivun HTML-koodi, joka sisältää muutettavan tuoteupotuksen.
  2. Etsi product-määritysobjekti.
  3. Etsi objektista buttonDestination-avain:
options: {
      product: {
        buttonDestination: 'cart'
      }
}
  1. Muuta kyseisen avaimen arvoksi 'modal' lainausmerkit mukaan lukien:
options: {
      product: {
        buttonDestination: 'modal'
      }
}
  1. Tallenna muutokset.

Muuta tuoteupotuksen pohjaa

Tuoteupotuksen vaakasuuntainen pohja sijoittaa kuvan tuotetietojen viereen niiden yläpuolen sijaan. Voit siirtyä tähän pohjaan muokkaamalla Osta-painikkeen upotuskoodia verkkosivusi HTML-lähdekoodissa.

Vaiheet:

  1. Avaa sen sivun HTML-koodi, joka sisältää muutettavan tuoteupotuksen.
  2. Etsi product-määritysobjekti.
  3. Lisää layout-avain ja aseta sitten arvoksi 'horizontal'. Varmista, että arvo sisältää lainausmerkit ja että edellinen rivi päättyy pilkkuun:
options: {
      product: {
        buttonDestination: 'modal',
        layout: 'horizontal'
      }
}
  1. Tallenna muutokset.

Muuta ostoskoriupotuksen ulkoasua ja toimintaa

Voit muuttaa ostoskorin ulkoasua tai toimintaa muokkaamalla upotuskoodisi cart-määritysobjektia.

Vaiheet:

  1. Avaa sen sivun HTML-koodi, joka sisältää muokattavan ostoskorin.
  2. Etsi upotuskoodistasi cart-määritysobjekti:
options: {
      cart: {
        startOpen: false
      }
}
  1. Voit muuttaa ostoskorin ulkoasua tai toimintaa muokkaamalla olemassa olevaa avainta tai lisäämällä uuden. Täydellinen luettelo määritettävistä avaimista on kehittäjien dokumentaatiossa.
  2. Tallenna muutokset.

Osta-painikkeen, sulautetun kokoelman tai sulautetun ostoskorin poistaminen

Jos haluat poistaa Osta-painikkeen, sulautetun kokoelman tai sulautetun ostoskorin verkkosivultasi, poista sen upotuskoodi HTML-lähdekoodista.

Vaiheet:

  1. Avaa sen verkkosivun HTML-lähdekoodi, joka sisältää Osta-painikkeen, sulautetun kokoelman tai sulautetun ostoskorin.
  2. Poista koko upotuskoodi HTML-lähdekoodista alkaen kohdasta <script data-shopify-buy-ui> ja päättyen kohtaan </script>. Seuraavassa on esimerkki Osta-painikkeen upotuskoodista:
<script data-shopify-buy-ui>
   var scriptURL = "https://cndurl.com/buy-button-storefront.js";
    if (window.ShopifyBuy && window.ShopifyBuy.UI) {
      ShopifyBuyInit();
    } else {
      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({
        apiKey: 'your-api-key',
        domain: 'your-store.myshopify.com',
        appId: '6'
      });

      ShopifyBuy.UI.onReady(client).then(function (ui) {
        ui.createComponent('product', {
          id: 12345,
          options: {
            product: {
              buttonDestination: 'cart',
              contents: {
                description: true
              },
              text: {
                button: 'Add to Cart'
              },
              styles: {
                button: {
                  'background-color': 'blue'
                }
              }
            },
            cart: {
              styles: {
                button: {
                  'background-color': 'orange'
                }
              }
            }
          }
        });
      });
    }
</script>
  1. Tallenna muutokset.