Bearbeiten oder Löschen einer Schaltfläche "Kaufen" oder eines eingebetteten Warenkorbs

Achtung

Dies ist ein Tutorial für Fortgeschrittene und wird von Shopify nicht unterstützt. Kenntnisse in Webdesign-Sprachen wie HTML, CSS, Javascript und Liquid sind erforderlich. Solltest du Hilfe benötigen, kannst du einen Shopify-Partner engagieren.

Buy Buttons und Warenkörbe werden aus den Code-Snippets generiert, die du aus deinem Shopify-Adminbereich kopierst und in den HTML-Code deiner Webseite einfügst. Diese Code-Snippets werden als Einbettungscode bezeichnet. Wenn du die Darstellung oder das Verhalten einer Schaltfläche oder eines Warenkorbs ändern möchtest, musst du den zugehörigen Einbettungscode bearbeiten.

Hinweis

Diese Anleitung gilt für Einbettungscode für die Schaltfläche "Kaufen", den du nach dem 26. September 2016 generiert hast. Wenn du vor diesem Datum generierte Einbettungscodes ändern möchtest, musst du den alten Anweisungen folgen. Du kannst deinen Einbettungscode auch über den Vertriebskanal der Schaltfläche "Kaufen" erneut erstellen.

Wenn du nicht sicher bist, welche Version des Einbettungscodes du hast, prüfe, ob er mit <script data-shopify-buy-ui> beginnt. Wenn dies der Fall ist, hast du die neueste Version. Wenn er mit <div data-emebd_type=... oder einer anderen Art von <div>-Tag beginnt, hast du die Legacy-Version.

Löschen einer Schaltfläche "Kaufen", einer eingebetteten Kollektion oder eines eingebetteten Warenkorbs

Schritte:

1. Öffne den Quell-HTML-Code der Webseite, die die Schaltfläche "Kaufen", die eingebettete Kollektion oder den eingebetteten Warenkorb enthält.
2. Lösche den gesamten Einbettungscode aus dem Quell-HTML, beginnend mit <script data-shopify-buy-ui> und endend mit </script>. Im Fall eines Buy Buttons sieht der Einbettungscode wie folgt aus:

<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. Speichere deine Änderungen.

Die Schaltfläche "Kaufen", die eingebettete Kollektion oder der eingebettete Warenkorb werden nicht mehr auf deiner Webseite angezeigt.

Bearbeiten einer Schaltfläche "Kaufen"

Um das Erscheinungsbild oder die Einstellungen eines vorhandenen Buy Buttons zu ändern, musst du den Einbettungscode bearbeiten, den du dem Quell-HTML hinzugefügt hast.

Jede Schaltfläche "Kaufen" besteht aus separaten Komponenten im Einbettungscode. Wenn du beispielsweise ein Produkt mit einem Warenkorb zu deiner Webseite hinzufügst, generiert der Einbettungscode eine product-Komponente, eine cart-Komponente und eine Warenkorb-toggle-Komponente:

Wenn du möchtest, dass deine Produktkomponente ein modales Fenster mit Produktdetails öffnet, generiert der Einbettungscode eine modal-Komponente und eine modalProduct-Komponente:

Im folgenden Code-Snippet gibt es separate Komponenten für das product und den 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'
          }
        }
      }
    }
  });
});

Diese Komponenten werden separat über Konfigurations Objekte im Einbettungscode konfiguriert. Sie können das Erscheinungsbild oder Verhalten ihrer Buy Buttons ändern, indem Sie die Konfigurationsobjekte im Einbettungscode bearbeiten.

Tipp

In JavaScript ist ein Objekt eine Reihe von Schlüsselwert-Paaren im Format {key: value}. Du kannst es sich wie eine Tabelle vorstellen: Ein Schlüssel entspricht dem Spaltennamen und ein Wert entspricht dem Inhalt einer Zelle.

Jede Komponente hat viele Attribute, die du bearbeiten kannst. Eine vollständige Liste der konfigurierbaren Optionen findest du in unserer Entwicklerdokumentation. Wenn du eine Option konfigurieren möchtest, die nicht bereits in deinem Einbettungscode angezeigt wird, musst du den entsprechenden Schlüssel zum entsprechenden Objekt hinzufügen (siehe Beispiel).

Stil einer Komponente bearbeiten

Jede Komponente verfügt über ein verschachteltes styles-Konfigurationsobjekt, das du bearbeiten oder hinzufügen kannst, um das Erscheinungsbild der Komponente zu ändern. Diese Stile sind ähnlich wie CSS formatiert. Jeder Top-Level-Schlüssel im Objekt styles stellt ein Element in der Komponente dar, zum Beispiel den Titel oder die Schaltfläche. Innerhalb dieses Objekts ist jeder Schlüssel eine CSS-Eigenschaft (zum Beispiel 'background-color' oder 'border') und der Wert ist ein CSS-Wert.

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

Jede gültige CSS-Eigenschaft kann styles hinzugefügt werden. Beachte, dass Eigenschaftsnamen mit Bindestrichen in Anführungszeichen gesetzt werden müssen.

Weitere Informationen zur CSS-Anpassung findest du in der Entwicklerdokumentation.

Beispiel: Link zum Warenkorb ersetzen mit modalen Produktdetails

In diesem Beispiel kannst du deinen aktuellen Einbettungscode so ändern, dass dein Kunde anstelle des Warenkorbs auf ein Modal mit Produktdetails geleitet wird:

1. Öffne den HTML-Code der Seite mit der Produkteinbettung, die du ändern möchtest.
2. Finden Sie das Konfigurationsobjekt product.
3. Finde den Schlüssel buttonDestination im Objekt:

options: {
      product: {
        buttonDestination: 'cart'
      }
}

1. Ändern Sie den Wert dieses Schlüssels in 'modal' um (stellen Sie sicher, dass Sie die Anführungszeichen einschließen):

options: {
      product: {
        buttonDestination: 'modal'
      }
}

1. Speichere deine Änderungen.

Beispiel: Ändere das Layout deiner Produkteinbettung

In diesem Beispiel kannst du das Layout deiner Produkteinbettung so ändern, dass das Bild auf der Seite statt auf der Oberseite angezeigt wird:

1. Öffne den HTML-Code der Seite mit der Produkteinbettung, die du ändern möchtest.
2. Finden Sie das Konfigurationsobjekt product.
3. Füge einen Schlüssel layout hinzu und lege dann den Wert auf 'horizontal' fest:

options: {
      product: {
        buttonDestination: 'modal',
        layout: 'horizontal'
      }
}

<aside class="note">
<h4>Hinweis</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. Speichere deine Änderungen.

Den Warenkorb deiner Website bearbeiten

Wenn du das Erscheinungsbild oder Verhalten des Warenkorbs deiner Website ändern möchtest, musst du das Konfigurationsobjekt cart in deinem Einbettungscode bearbeiten.

Schritte:

1. Öffne den HTML-Code der Seite mit dem Warenkorb, den du bearbeiten möchtest.
2. Finde das Konfigurationsobjekt cart in deinem Einbettungscode:

options: {
      cart: {
        startOpen: false
      }
}

1. Bearbeite oder füge die Eigenschaft hinzu, die du ändern möchtest. Eine vollständige Liste der konfigurierbaren Eigenschaften findest du in der Entwicklerdokumentation.
2. Speichere deine Änderungen.

Eine eingebettete Kollektion bearbeiten

Das Bearbeiten einer eingebetteten Kollektion ähnelt dem Bearbeiten eines Produkts oder eines Warenkorbs. Um die Eigenschaften der Produkte innerhalb der Kollektion zu bearbeiten (zum Beispiel das Layout jedes Produkts), musst du das Konfigurationsobjekt product finden und auf dieselbe Weise bearbeiten, wie du ein eingebettetes Produkt bearbeiten würdest. Um die Eigenschaften der Kollektion selbst zu bearbeiten (zum Beispiel den Text der Schaltfläche Nächste Seite), bearbeite stattdessen die productSet-Komponente.

Einige Eigenschaften, wie zum Beispiel der Text einer Komponente, werden über verschachtelte Objekte konfiguriert. Hierbei handelt es sich um Objekte, die innerhalb anderer Objekten angezeigt werden. Der Text für die Schaltfläche Nächste Seite wird beispielsweise in der productSet-Komponente und zwar im text-Objekt angezeigt:

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