Osta-painikkeen tai sulautetun ostoskorin muokkaaminen tai poistaminen

Tämä sivu on tulostettu Apr 25, 2024. Nykyinen versio on osoitteessa https://help.shopify.com/fi/manual/online-sales-channels/buy-button/edit-delete.

Osta-painikkeet ja ostoskorit luodaan koodikatkelmista, jotka kopioit Shopify Administa ja liität verkkosivusi HTML-lähdekoodiin. Näitä koodikatkelmia kutsutaan upotuskoodiksi. Jos haluat muuttaa painikkeen tai ostoskorin ulkoasua tai käyttäytymistä, sinun on muokattava siihen liittyvää upotuskoodia.

Tällä sivulla

Poista Osta-painike, sulautettu kokoelma tai sulautettu ostoskori

Tee näin:

  1. Avaa Osta-painikkeen, sulautetun kokoelman tai sulautetun ostoskorin sisältävän verkkosivun lähde-HTML.
  2. Poista lähde-HTML:stä koko upotuskoodi, joka alkaa <script data-shopify-buy-ui> ja päättyy </script>. Osta-painikkeen upotuskoodi näyttää seuraavalta: 
<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.

Osta-painike, sulautettu kokoelma tai sulautettu ostoskori ei enää näy verkkosivulla.

Muokkaa Osta-painiketta

Jos haluat muuttaa olemassa olevan Osta-painikkeen ulkoasua tai asetuksia, sinun on muokattava lähde-HTML:ään lisäämääsi upotuskoodia.

Jokainen Osta-painike on koostettu erillisistä upotuskoodin komponenteista. Jos esimerkiksi lisäät verkkosivullesi tuotteen ostoskorin kanssa, upotuskoodi luo product-komponentin, cart-komponentin ja ostoskorin toggle-komponentin:

Jos haluat, että tuotekomponentti avaa ponnahdusikkunan, jossa on tuotetietoja, upotuskoodi luo modal-komponentin modalProduct-komponentin:

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'
          }
        }
      }
    }
  });
});

Nämä komponentit määritetään erikseen upotuskoodin määritysobjektien kautta. Voit muuttaa ostopainikkeiden ulkoasua tai käyttäytymistä muokkaamalla upotuskoodin määritysobjekteja.

Jokaisella komponentilla on monia muokattavia ominaisuuksia. Täydellinen luettelo muokattavissa vaihtoehdoista on kehittäjädokumentaatiossa. Jos haluat määrittää vaihtoehdon, jota ei vielä ole upotuskoodissa, sinun on lisättävä asianmukainen avain asianmukaiseen objektiin (katso esimerkki).

Komponentin tyylin muokkaaminen

Jokaisella komponentilla on sisäkkäinen styles-määritysobjekti, jota voit muokata tai jonka voit lisätä muuttaaksesi komponentin ulkoasua. Näitä tyylejä muotoillaan samalla tavalla kuin CSS:ää. Jokainen styles-objektin ylätason avain edustaa komponentin elementtiä, kuten otsikkoa tai painiketta. Tämän objektin sisällä kukin avain on CSS-ominaisuus (esimerkiksi "taustaväri" tai "reunus"), ja arvo on CSS-arvo.

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

Kelvollinen CSS-ominaisuus voidaan lisätä styles-objektiin. Huomaa, että viivoja sisältävien ominaisuusnimien on oltava lainausmerkkien sisällä.

Lisätietoja CSS:n mukautuksesta saat kehittäjädokumentaatiosta.

Esimerkki: Ostokoriin johtavan linkin vaihtaminen tuotetietoja sisältävään ponnahdusikkunaan

Tässä esimerkissä voit muuttaa nykyistä upotuskoodia niin, että ohjaat asiakkaasi tuotetietoja sisältävään ponnahdusikkunaan tuotetietojen sijaan:

  1. Avaa muutettavan tuotesulautuksen sisältävän sivun HTML.
  2. Etsi product-määritysobjekti.
  3. Etsi objektista buttonDestination-avain: 
options: {
      product: {
        buttonDestination: 'cart'
      }
}
  1. Muuta kyseisen avaimen arvoksi 'modal' (varmista, että sisällytät lainausmerkit): 
options: {
      product: {
        buttonDestination: 'modal'
      }
}
  1. Tallenna muutokset.

Esimerkki: tuotesulautuksen asettelun muuttaminen

Tässä esimerkissä voit muuttaa tuotteen sulautuksen asettelua niin, että kuva näkyy yläosan sijasta sivulla:

  1. Avaa muutettavan tuotesulautuksen sisältävän sivun HTML.
  2. Etsi product-määritysobjekti.
  3. Lisää layout-avain ja aseta arvoksi 'horizontal': 
options: {
      product: {
        buttonDestination: 'modal',
        layout: 'horizontal'
      }
}
<aside class="note">
<h4>Huomaa</h4>
<p>When you add the <code>&#39;horizontal&#39;</code> value, make sure that it includes the quotation marks, and that the previous line ends with a comma.</p>
</aside>
  1. Tallenna muutokset.

Sivuston ostoskorin muokkaaminen

Jos haluat muuttaa sivustosi ostoskorin ulkoasua tai käyttäytymistä, sinun on muokattava upotuskoodin cart-määritysobjektia.

Tee näin:

  1. Avaa sen sivun HTML, joka sisältää muokattavan ostoskorin.
  2. Etsi upotuskoodin cart-määritysobjekti: 
options: {
      cart: {
        startOpen: false
      }
}
  1. Muokkaa ominaisuutta, jota haluat muuttaa, tai lisää se. Täydellinen luettelo määritettävissä olevista ominaisuuksista on kehittäjädokumentaatiossa.
  2. Tallenna muutokset.

Sulautetun kokoelman muokkaaminen

Sulautetun kokoelman muokkaaminen muistuttaa tuotteen tai ostoskorin muokkaamista. Jos haluat muokata kokoelman tuotteiden ominaisuuksia (esimerkiksi kunkin tuotteen asettelua), sinun täytyy etsiä product-määritysobjekti ja muokata sitä samalla tavalla kuin muokkaisit tuotteen sulautusta. Jos sen sijaan haluat muokata itse kokoelman ominaisuuksia (esimerkiksi Seuraava sivu -painikkeen tekstiä), muokkaa productSet-avainta.

Jotkin ominaisuudet, kuten komponentin teksti, määritetään sisäkkäisillä objekteilla, jotka ovat muiden objektien sisällä olevia objekteja. Esimerkiksi Seuraava sivu -painikkeen teksti näkyy productSet-komponentin text -objektissa:

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

Valmiina aloittamaan Shopifyssa?

Kokeile ilmaiseksi