Pomoč
Prijava

Prilagajanje ali odstranitev gumba za nakup, vgrajene zbirke ali vgrajene košarice

Videz ali vedenje gumba za nakup, vgrajene zbirke ali vgrajene košarice lahko spremenite z urejanjem kode za vdelavo v izvorni kodi HTML spletne strani. Vdelavo lahko izbrišete tudi z odstranitvijo kode s spletne strani.

Gumb za nakup prikaže izdelek z gumbom za nakup. Vgrajena zbirka prikaže več izdelkov. Vgrajena košarica prikaže samostojno košarico, ki jo stranke lahko uporabijo na različnih straneh.

Koda za vdelavo je delček kode, ki ste ga kopirali iz skrbnika Shopify in prilepili v kodo HTML spletne strani, ko ste ustvarili gumb za nakup ali košarico. Koda za vdelavo je napisana v jeziku JavaScript, programskem jeziku za dodajanje interaktivnih funkcij spletnim stranem.

Na tej strani

Razumevanje kode za vdelavo gumba za nakup

Vsak gumb za nakup je sestavljen iz ločenih delov, imenovanih komponente. Komponenta je poimenovan del kode za vdelavo, ki nadzira določen del izkušnje z gumbom za nakup. Ko na primer na spletno stran dodate izdelek s košarico, koda za vdelavo ustvari naslednje komponente:

  • komponento product, ki prikaže informacije o izdelku in gumb za nakup
  • komponento cart, ki prikaže vsebino košarice
  • komponento toggle košarice, ki prikaže ikono za odpiranje košarice

Če komponenta izdelka odpre pojavno okno s podrobnostmi o izdelku, koda za vdelavo ustvari dve dodatni komponenti: komponento modal za samo pojavno okno in komponento modalProduct za informacije o izdelku v njem.

V naslednjem delčku kode sta na voljo ločeni komponenti za product in 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'
          }
        }
      }
    }
  });
});

Vsaka komponenta je konfigurirana s konfiguracijskim objektom v kodi za vdelavo. Objekt je strukturirana skupina nastavitev, oblikovana kot seznam parov ključ-vrednost:

  • Ključ je ime nastavitve, na primer buttonDestination.
  • Vrednost je vsebina nastavitve, na primer 'cart'.

Objekt je podoben preglednici: vsak ključ ustreza imenu stolpca, vsaka vrednost pa ustreza vsebini celice. Če želite spremeniti videz ali vedenje gumbov za nakup, uredite ključe in vrednosti v konfiguracijskih objektih.

Vsaka komponenta ima veliko ključev, ki jih lahko urejate. Za celoten seznam uredljivih ključev si oglejte dokumentacijo za razvijalce. Če želite konfigurirati ključ, ki ga še ni v vaši kodi za vdelavo, ga dodajte ustreznemu objektu. Za primer si oglejte poglavje Sprememba postavitve vdelanega izdelka.

Prilagoditev slogov komponent

Vsaka komponenta ima ugnezden konfiguracijski objekt styles, ki nadzira videz komponente. Ugnezden objekt je objekt, ki je postavljen znotraj drugega objekta.

Objekt styles uporablja CSS, jezik za opisovanje vizualnega slogovanja elementov spletne strani. Vsak krovni ključ v objektu styles predstavlja element v komponenti, na primer naslov ali gumb. Znotraj tega ključa je vsak ugnezden ključ lastnost CSS (na primer background-color ali border), vrednost pa je vrednost CSS.

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

V styles je mogoče dodati katero koli veljavno lastnost CSS. Prepričajte se, da so imena lastnosti s pomišljaji ovita v narekovaje.

Za več informacij o prilagajanju seznamov slogov (CSS) si oglejte dokumentacijo za razvijalce.

Komponente vgrajene zbirke

Vgrajene zbirke uporabljajo enake konfiguracijske objekte kot gumbi za nakup. Če želite urediti postavitev ali druge lastnosti izdelkov v zbirki, poiščite konfiguracijski objekt product in ga uredite na enak način kot pri vdelanem izdelku. Če želite urediti lastnosti same zbirke, na primer besedilo na gumbu Naslednja stran, raje uredite konfiguracijski objekt productSet.

Nekateri ključi, kot je na primer besedilo komponente, so konfigurirani z ugnezdenimi objekti. Besedilo za gumb Naslednja stran se na primer nahaja znotraj objekta text komponente productSet:

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

Pogovorno okno s podrobnostmi o izdelku je pojavno okno, ki prikaže informacije o izdelku. Če želite stranko namesto v košarico usmeriti v pogovorno okno s podrobnostmi o izdelku, uredite kodo za vdelavo gumba za nakup v izvorni kodi HTML spletne strani.

Koraki:

  1. Odprite kodo HTML strani, ki vsebuje vdelan izdelek, ki ga želite spremeniti.
  2. Poiščite konfiguracijski objekt product.
  3. Poiščite ključ buttonDestination v objektu:
options: {
      product: {
        buttonDestination: 'cart'
      }
}
  1. Vrednost tega ključa spremenite v 'modal', vključno z narekovaji:
options: {
      product: {
        buttonDestination: 'modal'
      }
}
  1. Shranite spremembe.

Sprememba postavitve vdelanega izdelka

Vodoravna postavitev vdelanega izdelka postavi sliko poleg podrobnosti o izdelku in ne nad njimi. Če želite preklopiti na to postavitev, uredite kodo za vdelavo gumba za nakup v izvorni kodi HTML spletne strani.

Koraki:

  1. Odprite kodo HTML strani, ki vsebuje vdelan izdelek, ki ga želite spremeniti.
  2. Poiščite konfiguracijski objekt product.
  3. Dodajte ključ layout in določite vrednost 'horizontal'. Prepričajte se, da vrednost vključuje narekovaje in da se prejšnja vrstica konča z vejico:
options: {
      product: {
        buttonDestination: 'modal',
        layout: 'horizontal'
      }
}
  1. Shranite spremembe.

Sprememba videza in vedenja vgrajene košarice

Če želite spremeniti videz ali vedenje košarice, uredite konfiguracijski objekt cart v kodi za vdelavo.

Koraki:

  1. Odprite kodo HTML strani, ki vsebuje košarico, ki jo želite urediti.
  2. V svoji kodi za vdelavo poiščite konfiguracijski objekt cart:
options: {
      cart: {
        startOpen: false
      }
}
  1. Za spremembo videza ali vedenja košarice uredite obstoječ ključ ali dodajte novega. Za celoten seznam uredljivih ključev si oglejte dokumentacijo za razvijalce.
  2. Shranite spremembe.

Brisanje Gumba za nakup, vgrajene zbirke ali vgrajene košarice

Če želite s svoje spletne strani odstraniti gumb za nakup, vgrajeno zbirko ali vgrajeno košarico, izbrišite njeno kodo za vdelavo iz izvorne kode HTML.

Koraki:

  1. Odprite izvorno kodo HTML spletne strani, ki vsebuje Gumb za nakup, vgrajeno zbirko ali vgrajeno košarico.
  2. Celotno kodo za vdelavo izbrišite iz izvorne kode HTML, začenši s <script data-shopify-buy-ui> in končavši s </script>. Sledi primer kode za vdelavo gumba za nakup:
<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. Shranite spremembe.