Edycja lub usuwanie przycisku zakupu lub osadzonego koszyka

Ta strona została wydrukowana dnia Apr 20, 2024. Aby zapoznać się z aktualną wersją, odwiedź https://help.shopify.com/pl/manual/online-sales-channels/buy-button/edit-delete.

Przyciski zakupu i koszyki są generowane na podstawie fragmentów kodu, które kopiujesz z panelu administracyjnego Shopify i wklejasz w kodzie źródłowym HTML strony internetowej. Te fragmenty kodu są określane jako kod osadzania. Jeśli chcesz zmienić wygląd lub zachowanie przycisku lub koszyka, musisz edytować powiązany kod osadzania.

Na tej stronie

Usuwanie przycisku zakupu, osadzonej kolekcji lub osadzonego koszyka

Kroki:

  1. Otwórz kod źródłowy HTML strony internetowej zawierającej przycisk zakupu, osadzoną kolekcję lub osadzony koszyk.
  2. Usuń cały kod osadzania z kodu źródłowego HTML, zaczynając od <script data-shopify-buy-ui> i kończąc na </script>. W przypadku przycisku zakupu kod osadzania wygląda jak poniższy kod: 
<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. Zapisz zmiany.

Przycisk zakupu, osadzona kolekcja lub osadzony koszyk nie będą już wyświetlane na Twojej stronie internetowej.

Edycja przycisku zakupu

Aby zmienić wygląd lub ustawienia istniejącego przycisku zakupu, musisz edytować kod osadzania dodany do kodu źródłowego HTML.

Każdy przycisk zakupu jest zbudowany z oddzielnych składników w kodzie osadzania. Na przykład, jeśli dodasz produkt z koszykiem do swojej strony internetowej, kod osadzania spowoduje wygenerowanie składnika product, składnika cart i składnika toggle koszyka:

Jeśli chcesz, aby składnik produktu otwierał okno modalne ze szczegółami produktu, to kod osadzania spowoduje wygenerowanie składnika modal i składnika modalProduct:

W poniższym fragmencie kodu istnieją oddzielne składniki dla 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'
          }
        }
      }
    }
  });
});

Te składniki są konfigurowane oddzielnie za pośrednictwem obiektów konfiguracji w kodzie osadzania. Możesz zmienić wygląd lub zachowanie przycisków zakupu, edytując obiekty konfiguracji w kodzie osadzania.

Każdy składnik ma wiele atrybutów, które można edytować. Pełna lista opcji edytowalnych znajduje się w dokumentacji programisty. Jeśli chcesz skonfigurować opcję, która nie pojawia się w kodzie osadzania, musisz dodać odpowiedni klucz do odpowiedniego obiektu (patrz przykład).

Edycja stylu składnika

Każdy składnik ma zagnieżdżony obiekt konfiguracji styles, który można edytować lub dodać, aby zmienić wygląd składnika. Style te są sformatowane podobnie do CSS. Każdy klucz najwyższego poziomu w obiekcie styles reprezentuje element w składniku, taki jak tytuł lub przycisk. W ramach tego obiektu każdy klucz jest właściwością CSS (na przykład 'kolor-tła' lub 'obramowanie'), a wartość jest wartością CSS.

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

Można dodać dowolną prawidłową właściwość CSS do styles. Należy zauważyć, że nazwy właściwości z myślnikami muszą znajdować się w cudzysłowie.

Aby uzyskać więcej informacji na temat dostosowywania CSS, wyświetl dokumentację programisty.

Przykład: Zastąp link do koszyka oknem modalnym ze szczegółami produktu

W tym przykładzie możesz zmienić swój bieżący kod osadzania, aby przekierować klienta do okna modalnego ze szczegółami produktu zamiast do koszyka:

  1. Otwórz HTML strony zawierającej osadzenie produktu, które chcesz zmienić.
  2. Znajdź obiekt konfiguracji product.
  3. Znajdź klucz buttonDestination w obiekcie: 
options: {
      product: {
        buttonDestination: 'cart'
      }
}
  1. Zmień wartość tego klucza na 'modal' (upewnij się, że zawarty jest cudzysłów): 
options: {
      product: {
        buttonDestination: 'modal'
      }
}
  1. Zapisz zmiany.

Przykład: Zmień układ osadzenia produktu

W tym przykładzie możesz zmienić układ osadzenia produktu w taki sposób, aby obraz pojawił się z boku zamiast na górze:

  1. Otwórz HTML strony zawierającej osadzenie produktu, które chcesz zmienić.
  2. Znajdź obiekt konfiguracji product.
  3. Dodaj klucz layout, a następnie ustaw wartość na 'horizontal': 
options: {
      product: {
        buttonDestination: 'modal',
        layout: 'horizontal'
      }
}
<aside class="note">
<h4>Uwaga</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. Zapisz zmiany.

Edytuj koszyk strony internetowej

Jeśli chcesz zmienić wygląd lub zachowanie koszyka strony internetowej, musisz edytować obiekt konfiguracji cart w kodzie osadzania.

Kroki:

  1. Otwórz HTML strony zawierającej koszyk, który chcesz edytować.
  2. Znajdź obiekt konfiguracji cart w kodzie osadzania: 
options: {
      cart: {
        startOpen: false
      }
}
  1. Edytuj lub dodaj właściwość, którą chcesz zmienić. Aby uzyskać pełną listę konfigurowalnych właściwości, wyświetl dokumentację programisty.
  2. Zapisz zmiany.

Edycja osadzonej kolekcji

Edycja osadzonej kolekcji jest podobna do edycji produktu lub koszyka. Aby edytować właściwości produktów w kolekcji (np. układ każdego produktu), musisz znaleźć obiekt konfiguracji product i edytować go w taki sam sposób, jak w przypadku edycji osadzenia produktu. Aby edytować właściwości samej kolekcji (np. tekst przycisku Następna strona), edytuj klucz productSet.

Niektóre właściwości, takie jak tekst składnika, są konfigurowane za pomocą zagnieżdżonych obiektów, które są obiektami pojawiającymi się w wewnątrz innych obiektów. Na przykład tekst dla przycisku Następna strona pojawia się wewnątrz obiektu productSet składnika text:

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

Gotowy(-a) do rozpoczęcia sprzedaży za pomocą Shopify?

Wypróbuj za darmo