Pomoć
Prijavi se

Prilagodba ili uklanjanje Gumba Kupi, ugrađene kolekcije ili ugrađene košarice

Možete promijeniti izgled ili ponašanje Gumba Kupi, ugrađene kolekcije ili ugrađene košarice uređivanjem koda za ugradnju u izvornom HTML-u svoje internetske stranice. Ugradnju možete i izbrisati uklanjanjem koda sa svoje internetske stranice.

Gumb Kupi prikazuje proizvod s gumbom za kupnju. Ugrađena kolekcija prikazuje više proizvoda. Ugrađena košarica prikazuje samostalnu košaricu koju korisnici mogu upotrebljavati na različitim stranicama.

Kod za ugradnju je isječak koda koji ste kopirali iz administratorskog alata za Shopify i zalijepili u HTML svoje internetske stranice kada ste izradili Gumb Kupi ili košaricu. Kod za ugradnju napisan je u JavaScriptu, programskom jeziku koji se upotrebljava za dodavanje interaktivnih značajki na internetske stranice.

Na ovoj stranici

Razumijevanje koda za ugradnju Gumba Kupi

Svaki se Gumb Kupi sastoji od odvojenih dijelova koji se zovu komponente. Komponenta je imenovani odjeljak koda za ugradnju koji kontrolira jedan dio doživljaja Gumba Kupi. Primjerice, kada na internetsku stranicu dodate proizvod s košaricom, kod za ugradnju generira sljedeće komponente:

  • komponenta product, koja prikazuje informacije o proizvodu i gumb za kupnju
  • komponenta cart, koja prikazuje sadržaj košarice
  • komponenta toggle košarice, koja prikazuje ikonu za otvaranje košarice

Ako komponenta vašeg proizvoda otvara pop-up prozor s pojedinostima o proizvodu, tada kod za ugradnju generira dvije dodatne komponente: komponentu modal za sam pop-up prozor i komponentu modalProduct za informacije o proizvodu unutar pop-up prozora.

U sljedećem isječku koda nalaze se zasebne komponente za product i cart:

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

Svaka se komponenta konfigurira putem konfiguracijskog objekta u kodu za ugradnju. Objekt je strukturirana grupa postavki, formatirana kao popis parova ključa i vrijednosti:

  • Ključ je naziv postavke, kao što je buttonDestination.
  • Vrijednost je ono na što je postavka postavljena, kao što je 'cart'.

Objekt je sličan proračunskoj tablici: svaki ključ odgovara nazivu stupca, a svaka vrijednost odgovara sadržaju ćelije. Kako biste promijenili izgled ili ponašanje svojih Gumba Kupi, uredite ključeve i vrijednosti unutar konfiguracijskih objekata.

Svaka komponenta ima mnogo ključeva koji se mogu uređivati. Za cjelovit popis ključeva koji se mogu uređivati, pogledajte dokumentaciju za razvojne programere. Da biste konfigurirali ključ koji se još ne nalazi u vašem kodu za ugradnju, dodajte ga u odgovarajući objekt. Primjer potražite pod Promjena izgleda ugradnje proizvoda.

Prilagodba stilova komponenti

Svaka komponenta ima ugniježđeni konfiguracijski objekt styles koji kontrolira izgled komponente. Ugniježđeni objekt jest objekt smješten unutar drugog objekta.

Objekt styles koristi se jezikom CSS, koji služi za opisivanje vizualnog stila elemenata internetske stranice. Svaki ključ najviše razine u objektu styles predstavlja element u komponenti, kao što su naslov ili gumb. Unutar tog ključa, svaki ugniježđeni ključ predstavlja CSS svojstvo (primjerice background-color ili border), dok je vrijednost CSS vrijednost.

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

Bilo koje važeće CSS svojstvo može se dodati u styles. Pobrinite se da nazivi svojstava s crticama budu stavljeni pod navodnike.

Više informacija o prilagodbi CSS-a potražite u dokumentaciji za razvojne programere.

Komponente ugrađene kolekcije

Ugrađene kolekcije upotrebljavaju iste konfiguracijske objekte kao Gumbi Kupi. Da biste uredili izgled ili druga svojstva proizvoda unutar kolekcije, pronađite konfiguracijski objekt product i uredite ga na isti način na koji biste uredili ugradnju proizvoda. Da biste uredili svojstva same kolekcije, kao što je tekst na gumbu Sljedeća stranica, umjesto toga uredite konfiguracijski objekt productSet.

Neki se ključevi, kao što je tekst komponente, konfiguriraju putem ugniježđenih objekata. Na primjer, tekst gumba Sljedeća stranica nalazi se unutar objekta text komponente productSet:

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

Modalni prozor s pojedinostima o proizvodu jest pop-up prozor koji prikazuje informacije o proizvodu. Da biste korisnika usmjerili na modalni prozor s pojedinostima o proizvodu umjesto na košaricu, uredite kod za ugradnju Gumba Kupi u izvornom HTML-u svoje internetske stranice.

Koraci:

  1. Otvorite HTML stranice koja sadrži ugrađeni proizvod koji želite promijeniti.
  2. Pronađite konfiguracijski objekt product.
  3. Pronađite ključ buttonDestination u objektu:
options: {
      product: {
        buttonDestination: 'cart'
      }
}
  1. Promijenite vrijednost tog ključa u 'modal', uključujući navodnike:
options: {
      product: {
        buttonDestination: 'modal'
      }
}
  1. Spremite promjene.

Promjena izgleda ugradnje proizvoda

Vodoravni izgled ugradnje proizvoda postavlja sliku pored pojedinosti o proizvodu umjesto iznad njih. Za prebacivanje na taj izgled, uredite kod za ugradnju Gumba Kupi u izvornom HTML-u svoje internetske stranice.

Koraci:

  1. Otvorite HTML stranice koja sadrži ugrađeni proizvod koji želite promijeniti.
  2. Pronađite konfiguracijski objekt product.
  3. Dodajte ključ layout i zatim postavite vrijednost na 'horizontal'. Provjerite uključuje li vrijednost navodnike i završava li prethodni redak zarezom:
options: {
      product: {
        buttonDestination: 'modal',
        layout: 'horizontal'
      }
}
  1. Spremite promjene.

Promjena izgleda i ponašanja ugradnje košarice

Da biste promijenili izgled ili ponašanje košarice, uredite konfiguracijski objekt cart u svojem kodu za ugradnju.

Koraci:

  1. Otvorite HTML stranice koja sadrži košaricu koju želite urediti.
  2. Pronađite konfiguracijski objekt cart u kodu za ugradnju:
options: {
      cart: {
        startOpen: false
      }
}
  1. Uredite postojeći ključ ili dodajte novi kako biste promijenili izgled ili ponašanje košarice. Za cjelovit popis ključeva koji se mogu konfigurirati pogledajte dokumentaciju za razvojne programere.
  2. Spremite promjene.

Brisanje gumba Kupi, ugrađene kolekcije ili ugrađene košarice

Da biste sa svoje internetske stranice uklonili Gumb Kupi, ugrađenu kolekciju ili ugrađenu košaricu, izbrišite njegov kod za ugradnju iz izvornog HTML-a.

Koraci:

  1. Otvorite izvorni HTML internetske stranice koja sadrži gumb Kupi, ugrađenu kolekciju ili ugrađenu košaricu.
  2. Izbrišite cijeli kod za ugradnju iz izvornog HTML-a, počevši s <script data-shopify-buy-ui> i završavajući s </script>. Slijedi primjer koda za ugradnju Gumba Kupi:
<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. Spremite promjene.