Pomocník
Prihlásiť sa

Prispôsobenie alebo odstránenie tlačidla Kúpiť, vloženej kolekcie alebo vloženého košíka

Vzhľad alebo správanie tlačidla Kúpiť, vloženej kolekcie alebo vloženého košíka môžete zmeniť úpravou ich kódu na vloženie v zdrojovom kóde HTML svojej webovej stránky. Vložený prvok môžete zmazať aj odstránením kódu zo svojej webovej stránky.

Tlačidlo Kúpiť zobrazuje produkt s tlačidlom na nákup. Vložená kolekcia zobrazuje viacero produktov. Vložený košík zobrazuje samostatný košík, ktorý môžu zákazníci používať na rôznych stránkach.

Kód na vloženie je úryvok kódu, ktorý ste skopírovali z administrátora Shopify a prilepili do kódu HTML svojej webovej stránky pri vytváraní tlačidla Kúpiť alebo košíka. Kód na vloženie je napísaný v jazyku JavaScript, čo je programovací jazyk, ktorý sa používa na pridávanie interaktívnych funkcií na webové stránky.

Na tejto stránke

Pochopenie kódu na vloženie tlačidla Kúpiť

Každé tlačidlo Kúpiť sa skladá zo samostatných častí, ktoré sa nazývajú komponenty. Komponent je pomenovaná časť kódu na vloženie, ktorá riadi jednu časť fungovania tlačidla Kúpiť. Keď napríklad na svoju webovú stránku pridáte produkt s košíkom, kód na vloženie vygeneruje nasledujúce komponenty:

  • komponent product, ktorý zobrazuje informácie o produkte a tlačidlo nákupu
  • komponent cart, ktorý zobrazuje obsah košíka
  • komponent toggle košíka, ktorý zobrazuje ikonu otvárajúcu košík

Ak váš komponent produktu otvára vyskakovacie okno s detailmi o produkte, kód na vloženie vygeneruje ďalšie dva komponenty: komponent modal pre samotné vyskakovacie okno a komponent modalProduct pre informácie o produkte vo vyskakovacom okne.

V nasledujúcom úryvku kódu sú samostatné komponenty pre product a 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'
          }
        }
      }
    }
  });
});

Každý komponent sa konfiguruje prostredníctvom konfiguračného objektu v kóde na vloženie. Objekt je štruktúrovaná skupina nastavení vo formáte zoznamu párov kľúč – hodnota:

  • Kľúč je názov nastavenia, napríklad buttonDestination.
  • Hodnota predstavuje konkrétne nastavenie, napríklad 'cart'.

Objekt sa podobá tabuľke: každý kľúč zodpovedá názvu stĺpca a každá hodnota obsahu bunky. Ak chcete zmeniť vzhľad alebo správanie tlačidiel Kúpiť, upravte kľúče a hodnoty v rámci konfiguračných objektov.

Každý komponent má veľa kľúčov, ktoré sa dajú upraviť. Úplný zoznam konfigurovateľných kľúčov nájdete v dokumentácii pre vývojárov. Ak chcete nakonfigurovať kľúč, ktorý sa zatiaľ nenachádza vo vašom kóde na vloženie, pridajte ho do príslušného objektu. Príklad nájdete v časti Zmena rozloženia vloženého produktu.

Prispôsobenie štýlov komponentov

Každý komponent má vnorený konfiguračný objekt styles, ktorý riadi vzhľad komponentu. Vnorený objekt je objekt umiestnený v inom objekte.

Objekt styles používa jazyk CSS, ktorý sa používa na opis vizuálneho formátovania prvkov webovej stránky. Každý kľúč najvyššej úrovne v objekte styles predstavuje prvok v komponente, napríklad nadpis alebo tlačidlo. V rámci tohto kľúča je každý vnorený kľúč vlastnosťou CSS (napríklad background-color alebo border) a jeho hodnota je hodnotou CSS.

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

Do objektu styles je možné pridať akúkoľvek platnú vlastnosť CSS. Uistite sa, že názvy vlastností s pomlčkami sú ohraničené úvodzovkami.

Ďalšie informácie o prispôsobení CSS nájdete v dokumentácii pre vývojárov.

Komponenty vloženej kolekcie

Vložené kolekcie používajú rovnaké konfiguračné objekty ako tlačidlá Kúpiť. Ak chcete upraviť rozloženie alebo iné vlastnosti produktov v rámci kolekcie, vyhľadajte konfiguračný objekt product a upravte ho rovnakým spôsobom ako vložený produkt. Ak chcete upraviť vlastnosti samotnej kolekcie, ako je napríklad text tlačidla Ďalšia stránka, upravte namiesto toho konfiguračný objekt productSet.

Niektoré kľúče, ako napríklad text komponentu, sa konfigurujú prostredníctvom vnorených objektov. Napríklad text tlačidla Ďalšia stránka sa nachádza v objekte text v rámci komponentu productSet:

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

Modálne okno s detailmi o produkte je vyskakovacie okno, ktoré zobrazuje informácie o produkte. Ak chcete zákazníka nasmerovať do modálneho okna s detailmi o produkte namiesto košíka, upravte kód na vloženie tlačidla Kúpiť v zdrojovom kóde HTML svojej webovej stránky.

Postup:

  1. Otvorte kód HTML stránky obsahujúcej vložený produkt, ktorý chcete zmeniť.
  2. Nájdite konfiguračný objekt product.
  3. V objekte nájdite kľúč buttonDestination:
options: {
      product: {
        buttonDestination: 'cart'
      }
}
  1. Zmeňte hodnotu tohto kľúča na 'modal' vrátane úvodzoviek:
options: {
      product: {
        buttonDestination: 'modal'
      }
}
  1. Uložte zmeny.

Zmena rozloženia vloženého produktu

Pri horizontálnom rozložení vloženého produktu sa obrázok umiestni vedľa detailov o produkte a nie nad ne. Ak chcete prejsť na toto rozloženie, upravte kód na vloženie tlačidla Kúpiť v zdrojovom kóde HTML svojej webovej stránky.

Postup:

  1. Otvorte kód HTML stránky obsahujúcej vložený produkt, ktorý chcete zmeniť.
  2. Nájdite konfiguračný objekt product.
  3. Pridajte kľúč layout a potom nastavte jeho hodnotu na 'horizontal'. Uistite sa, že hodnota obsahuje úvodzovky a predchádzajúci riadok končí čiarkou:
options: {
      product: {
        buttonDestination: 'modal',
        layout: 'horizontal'
      }
}
  1. Uložte zmeny.

Zmena vzhľadu a správania vloženého košíka

Ak chcete zmeniť vzhľad alebo správanie košíka, upravte konfiguračný objekt cart vo svojom kóde na vloženie.

Postup:

  1. Otvorte kód HTML stránky obsahujúcej košík, ktorý chcete upraviť.
  2. V kóde na vloženie nájdite konfiguračný objekt cart:
options: {
      cart: {
        startOpen: false
      }
}
  1. Upravte existujúci kľúč alebo pridajte nový, aby ste zmenili vzhľad alebo správanie košíka. Úplný zoznam konfigurovateľných kľúčov nájdete v dokumentácii pre vývojárov.
  2. Uložte zmeny.

Odstránenie tlačidla Kúpiť, vloženej kolekcie alebo vloženého košíka

Ak chcete zo svojej webovej stránky odstrániť tlačidlo Kúpiť, vloženú kolekciu alebo vložený košík, vymažte ich kód na vloženie zo zdrojového kódu HTML.

Postup:

  1. Otvorte zdrojový kód HTML webovej stránky, ktorá obsahuje tlačidlo Kúpiť, vloženú kolekciu alebo vložený košík.
  2. Vymažte celý kód na vloženie zo zdrojového kódu HTML od <script data-shopify-buy-ui> až po </script>. Nasleduje príklad kódu na vloženie tlačidla Kúpiť:
<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. Uložte zmeny.