Súgó
Bejelentkezés

Vásárlás gomb, beágyazott kollekció vagy beágyazott kosár testreszabása vagy eltávolítása

A Vásárlás gombok, beágyazott kollekciók és beágyazott kosarak megjelenését vagy viselkedését a weblap HTML-forráskódjában lévő beágyazott kód szerkesztésével módosíthatja. A beágyazott elemeket a kód weblapról történő eltávolításával törölheti is.

A Vásárlás gomb egy terméket jelenít meg egy vásárlásra szolgáló gombbal. A beágyazott kollekció több terméket jelenít meg. A beágyazott kosár egy önálló kosarat jelenít meg, amelyet a vásárlók az oldalak között navigálva is használhatnak.

A beágyazott kód az a kódrészlet, amelyet a Shopify adminisztrációs felületéről másolt ki, majd illesztett be a weblap HTML-kódjába a Vásárlás gomb vagy a kosár létrehozásakor. A beágyazott kód a weblapok interaktív funkcióinak hozzáadásához használt programozási nyelven, JavaScriptben íródott.

Ezen az oldalon

A Vásárlás gomb beágyazott kódjának megismerése

Minden Vásárlás gomb különálló, úgynevezett komponensekből épül fel. A komponens a beágyazott kód egy elnevezett szakasza, amely a Vásárlás gomb élményének egy részét vezérli. Amikor például egy kosárral rendelkező terméket ad hozzá a weblapjához, a beágyazott kód a következő komponenseket állítja elő:

  • egy product (termék) komponenst, amely megjeleníti a termékadatokat és a vásárlás gombot
  • egy cart (kosár) komponenst, amely a kosár tartalmát jeleníti meg
  • egy toggle komponenst a kosárhoz, amely a kosarat megnyitó ikont jeleníti meg

Ha a termékkomponens egy termékadatokat tartalmazó pop-up ablakot nyit meg, akkor a beágyazott kód két további komponenst hoz létre: egy modal komponenst magához a pop-uphoz, valamint egy modalProduct komponenst a pop-upon belüli termékadatokhoz.

A következő kódrészletben külön komponensek találhatók a product és a cart számára:

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

Minden komponenst a beágyazott kódban található konfigurációs objektumon keresztül lehet beállítani. Az objektum a beállítások strukturált csoportja, amely kulcs-érték párok listájaként van megformázva:

  • A kulcs egy beállítás neve, például buttonDestination.
  • Az érték az, amire a beállítás értéke be van állítva, például 'cart'.

Az objektum egy táblázathoz hasonlít: minden kulcs egy oszlopnévnek, minden érték pedig egy cella tartalmának felel meg. A Vásárlás gombok megjelenésének vagy viselkedésének megváltoztatásához a konfigurációs objektumokon belüli kulcsokat és értékeket kell szerkesztenie.

Minden komponens számos szerkeszthető kulccsal rendelkezik. A szerkeszthető kulcsok teljes listájáért tekintse meg a fejlesztői dokumentációt. Egy olyan kulcs konfigurálásához, amely még nem szerepel a beágyazott kódban, adja hozzá a kulcsot a megfelelő objektumhoz. Példaként tekintse meg a következőt: Egy termékbeágyazás elrendezésének módosítása.

A komponensek stílusának testreszabása

Minden komponens rendelkezik egy beágyazott styles konfigurációs objektummal, amely a komponens megjelenését vezérli. A beágyazott objektum egy olyan objektum, amely egy másik objektumon belül helyezkedik el.

A styles objektum CSS-t használ, azt a nyelvet, amelyet a weblap elemeinek vizuális stílusának leírására használnak. A styles objektumban minden felső szintű kulcs a komponens egy elemét (például a címet vagy a gombot) képviseli. Ezen a kulcson belül minden beágyazott kulcs egy CSS-tulajdonság (például background-color vagy border), az érték pedig egy CSS-érték.

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

Bármely érvényes CSS-tulajdonság hozzáadható a styles objektumhoz. Ügyeljen arra, hogy a kötőjeles tulajdonságnevek idézőjelek között szerepeljenek.

A CSS testreszabásával kapcsolatos további információkért tekintse meg a fejlesztői dokumentációt.

Beágyazott kollekciókomponensek

A beágyazott kollekciók ugyanazokat a konfigurációs objektumokat használják, mint a Vásárlás gombok. A kollekción belüli termékek elrendezésének vagy egyéb tulajdonságainak szerkesztéséhez keresse meg a product konfigurációs objektumot, és szerkessze ugyanúgy, mint egy termékbeágyazást. Ha magának a kollekciónak a tulajdonságait – például a Következő oldal gomb szövegét – szeretné szerkeszteni, akkor ehelyett a productSet konfigurációs objektumot szerkessze.

Egyes kulcsok, például egy komponens szövege, beágyazott objektumokon keresztül vannak konfigurálva. A Következő oldal gomb szövege például a productSet komponens text objektumában található:

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

A termékadatokat tartalmazó modális ablak egy olyan pop-up ablak, amely a termékkel kapcsolatos információkat jeleníti meg. Ha a vásárlót a kosár helyett a termékadatokat tartalmazó modális ablakba szeretné irányítani, szerkessze a Vásárlás gomb beágyazott kódját a weblap HTML-forráskódjában.

Lépések:

  1. Nyissa meg annak az oldalnak a HTML-kódját, amely a módosítani kívánt beágyazott terméket tartalmazza.
  2. Keresse meg a product konfigurációs objektumot.
  3. Keresse meg a buttonDestination kulcsot az objektumban:
options: {
      product: {
        buttonDestination: 'cart'
      }
}
  1. Változtassa meg ennek a kulcsnak az értékét 'modal'-ra, az idézőjelekkel együtt:
options: {
      product: {
        buttonDestination: 'modal'
      }
}
  1. Mentse a módosításokat.

Egy termékbeágyazás elrendezésének módosítása

A vízszintes termékbeágyazási elrendezés a képet a termékadatok mellé helyezi, és nem föléjük. Erre az elrendezésre való átváltáshoz szerkessze a Vásárlás gomb beágyazott kódját a weblap HTML-forráskódjában.

Lépések:

  1. Nyissa meg annak az oldalnak a HTML-kódját, amely a módosítani kívánt beágyazott terméket tartalmazza.
  2. Keresse meg a product konfigurációs objektumot.
  3. Adjon hozzá egy layout kulcsot, majd állítsa az értékét 'horizontal'-ra. Ügyeljen arra, hogy az érték tartalmazza az idézőjeleket is, és az előző sor vesszőre végződjön:
options: {
      product: {
        buttonDestination: 'modal',
        layout: 'horizontal'
      }
}
  1. Mentse a módosításokat.

Egy kosárbeágyazás megjelenésének és viselkedésének módosítása

A kosár megjelenésének vagy viselkedésének módosításához szerkessze a cart konfigurációs objektumot a beágyazott kódban.

Lépések:

  1. Nyissa meg annak az oldalnak a HTML-kódját, amely a szerkeszteni kívánt kosarat tartalmazza.
  2. Keresse meg a cart konfigurációs objektumot a beágyazott kódban:
options: {
      cart: {
        startOpen: false
      }
}
  1. A kosár megjelenésének vagy viselkedésének módosításához szerkesszen egy meglévő kulcsot, vagy adjon hozzá egy újat. A konfigurálható kulcsok teljes listájáért tekintse meg a fejlesztői dokumentációt.
  2. Mentse a módosításokat.

Vásárlás gomb, beágyazott kollekció vagy beágyazott kosár törlése

Egy Vásárlás gomb, beágyazott kollekció vagy beágyazott kosár weblapról való eltávolításához törölje annak beágyazott kódját a HTML-forráskódból.

Lépések:

  1. Nyissa meg annak a weblapnak a forrás HTML-kódját, amely a Vásárlás gombot, beágyazott kollekciót vagy beágyazott kosarat tartalmazza.
  2. Törölje a teljes beágyazott kódot a HTML-forráskódból a <script data-shopify-buy-ui> résszel kezdődően egészen a </script> részig bezárólag. A következő egy példa a Vásárlás gomb beágyazott kódjára:
<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. Mentse a módosításokat.