Geschenkverpackungsoption zur Warenkorbseite hinzufügen

Du kannst deinen Kunden auf der Warenkorbseite deines Onlineshops einen Geschenkverpackungsservice anbieten. Kunden, die ihre Bestellung als Geschenk verpackt haben möchten, kannst du entweder eine Flat Rate oder eine Gebühr pro Produkt in Rechnung stellen.

Warnung: Diese Anpassung wird ausschließlich auf die Warenkorbseite angewendet, nicht aber auf Warenkorneinschübe oder Pop-ups (auf der URL your-store.com/cart). Wenn du einen Warenkorbeinschub oder ein Pop-up verwendest, musst du den Warenkorb-Stil im Theme-Editor zu Seite ändern. Füge in der Theme-Vorschau dem Warenkorb ein Produkt hinzu und klicke anschließend im Theme-Editor auf das Tab Warenkorbseite, um deine Warenkorneinstellungen anzuzeigen.

Auf dieser Seite

Geschenkverpackungsprodukt erstellen

Zuerst erstellst du eine Geschenkverpackungsoption als ein Produkt:

Gehe im Shopify-Adminbereich zu Produkte.
Klicke auf Produkt hinzufügen.
Erstelle ein Geschenkverpackungsprodukt auf dieselbe Art und Weise, wie du jedes andere Produkt erstellen würdest:

Du kannst eine Produktbeschreibung verwenden, um anzuzeigen, welche Materialien für die Geschenkverpackung verwendet werden.
Gib für das Geschenkverpackungsprodukt den Preis ein, den du für diesen Service berechnen möchtest. Wenn der Geschenkverpackungsservice kostenlos sein soll, dann lege für das Geschenkverpackungsprodukt 0 als Preis fest.
Du kannst ein Bild für das Produkt hochladen, um deinen Kunden zu zeigen, wie eine Bestellung mit Geschenkverpackung aussehen wird.
Vergewissere dich, dass das Geschenkverpackungsprodukt Inventar enthält, oder passe die Einstellungen so an, dass Shopify das Inventar von Geschenkverpackungsprodukten nicht verfolgt. Wenn dein Shop über mehrere Standorte verfügt, deaktiviere das Kontrollkästchen Anzahl verfolgen, um zu verhindern, dass Shopify das Inventar von Geschenkverpackungsprodukten verfolgt.

Klicke auf Speichern.

Erstelle anschließend ein Menü, das auf dein Geschenkverpackungsprodukt verweist:

Desktop

Gehe in deinem Shopify-Adminbereich zu Inhalt > Menüs.
Klicke auf Menü hinzufügen.
Benenne das Menü Gift wrapping, sodass das dem Menü zugewiesene Handle gift-wrapping lautet.
Füge das Geschenkverpackungsprodukt zum Menü hinzu:
1. Klicke auf Menüpunkt hinzufügen und gib einen Namen für den Link, der zum Geschenkverpackungsprodukt führt, ein.
2. Wähle im Feld Link die Option Produkte und anschließend das Geschenkverpackungsprodukt aus dem Dropdown-Menü aus.
3. Klicke auf Hinzufügen.
Klicke auf Menü speichern.

iPhone

Tippe in der Shopify-App auf die Schaltfläche ....
Tippe auf Inhalt > Menüs.
Klicke auf Menü hinzufügen.
Benenne das Menü Gift wrapping, sodass das dem Menü zugewiesene Handle gift-wrapping lautet.
Füge das Geschenkverpackungsprodukt zum Menü hinzu:
1. Klicke auf Menüpunkt hinzufügen und gib einen Namen für den Link, der zum Geschenkverpackungsprodukt führt, ein.
2. Wähle im Feld Link die Option Produkte und anschließend das Geschenkverpackungsprodukt aus dem Dropdown-Menü aus.
3. Klicke auf Hinzufügen.
Klicke auf Menü speichern.

Android

Tippe in der Shopify-App auf die Schaltfläche ....
Tippe auf Inhalt > Menüs.
Klicke auf Menü hinzufügen.
Benenne das Menü Gift wrapping, sodass das dem Menü zugewiesene Handle gift-wrapping lautet.
Füge das Geschenkverpackungsprodukt zum Menü hinzu:
1. Klicke auf Menüpunkt hinzufügen und gib einen Namen für den Link, der zum Geschenkverpackungsprodukt führt, ein.
2. Wähle im Feld Link die Option Produkte und anschließend das Geschenkverpackungsprodukt aus dem Dropdown-Menü aus.
3. Klicke auf Hinzufügen.
Klicke auf Menü speichern.

Code-Snippet erstellen

Desktop

Gehe im Shopify-Adminbereich zu Onlineshop > Themes.
Suche das Theme, das du bearbeiten möchtest, klicke auf die Schaltfläche ..., um das Aktionsmenü zu öffnen, und klicke dann auf Code bearbeiten.
Klicke in der Übersicht Snippets auf Neues Snippet hinzufügen.
Benenne dein Snippet gift-wrapping und klicke auf Snippet erstellen. Deine Snippet-Datei wird im Code-Editor geöffnet.
In diesem Schritt fügst in der neuen Snippet-Datei gift-wrapping etwas Code ein. Der Code, den du einfügst, hängt davon ab, wie du deinen Kunden den Geschenkverpackungsservice in Rechnung stellen möchtest:

iPhone

Tippe in der Shopify-App auf die Schaltfläche ....
Klicke im Bereich Vertriebskanäle auf Onlineshop.
Tippe auf Themes verwalten.
Suche das Theme, das du bearbeiten möchtest, klicke auf die Schaltfläche ..., um das Aktionsmenü zu öffnen, und klicke dann auf Code bearbeiten.
Klicke in der Übersicht Snippets auf Neues Snippet hinzufügen.
Benenne dein Snippet gift-wrapping und klicke auf Snippet erstellen. Deine Snippet-Datei wird im Code-Editor geöffnet.
In diesem Schritt fügst in der neuen Snippet-Datei gift-wrapping etwas Code ein. Der Code, den du einfügst, hängt davon ab, wie du deinen Kunden den Geschenkverpackungsservice in Rechnung stellen möchtest:

Android

Tippe in der Shopify-App auf die Schaltfläche ....
Klicke im Bereich Vertriebskanäle auf Onlineshop.
Tippe auf Themes verwalten.
Suche das Theme, das du bearbeiten möchtest, klicke auf die Schaltfläche ..., um das Aktionsmenü zu öffnen, und klicke dann auf Code bearbeiten.
Klicke in der Übersicht Snippets auf Neues Snippet hinzufügen.
Benenne dein Snippet gift-wrapping und klicke auf Snippet erstellen. Deine Snippet-Datei wird im Code-Editor geöffnet.
In diesem Schritt fügst in der neuen Snippet-Datei gift-wrapping etwas Code ein. Der Code, den du einfügst, hängt davon ab, wie du deinen Kunden den Geschenkverpackungsservice in Rechnung stellen möchtest:

Pauschalgebühr für Geschenkverpackung hinzufügen

Füge den folgenden Code ein und klicke auf Speichern:

{% if linklists.gift-wrapping.links.size > 0 and
linklists.gift-wrapping.links.first.type == 'product_link' %}

<div
  id="is-a-gift"
  style="clear: left; margin: 30px 0"
  class="clearfix rte"
>
  <p>
    <input
      id="gift-wrapping"
      type="checkbox"
      name="attributes[gift-wrapping]"
      value="yes"
      {% if cart.attributes.gift-wrapping %}
      checked="checked"
      {% endif %}
      style="float: none"
    />
    <label
      for="gift-wrapping"
      style="display:inline; padding-left: 5px; float: none;"
    >
      For {{ linklists.gift-wrapping.links.first.object.price | money }}
      please wrap the products in this order.
    </label>
  </p>
  <p>
    <label style="display:block" for="gift-note"
      >Gift message (free and optional):</label
    >
    <textarea name="attributes[gift-note]" id="gift-note">
{{ cart.attributes.gift-note }}</textarea
    >
  </p>
</div>

{% assign id = linklists.gift-wrapping.links.first.object.variants.first.id
%} {% assign gift_wraps_in_cart = 0 %} {% for item in cart.items %} {% if
item.id == id %} {% assign gift_wraps_in_cart = item.quantity %} {% endif %}
{% endfor %}

<style>
  #updates_{{ id }} { display: none; }
</style>

<script>

  Shopify.Cart = Shopify.Cart || {};

  Shopify.Cart.GiftWrap = {};

  Shopify.Cart.GiftWrap.set = function() {
    var headers = new Headers({ 'Content-Type': 'application/json' });

    var request = {
      method: 'POST',
      headers: headers,
      body: JSON.stringify({ updates: { {{ id }}: 1 }, attributes: { 'gift-wrapping': true } })
    };
    fetch('/cart/update.js', request)
    .then(function() {
      location.href = '/cart';
    });
  }

  Shopify.Cart.GiftWrap.remove = function() {
    var headers = new Headers({ 'Content-Type': 'application/json' });

    var request = {
      method: 'POST',
      headers: headers,
      body: JSON.stringify({ updates: { {{ id }}: 0 }, attributes: { 'gift-wrapping': '', 'gift-note': '' } })
    };
    fetch('/cart/update.js', request)
    .then(function() {
      location.href = '/cart';
    });
  }

  // If we have nothing but gift-wrap items in the cart.
  {% if cart.items.size == 1 and gift_wraps_in_cart > 0 %}
  document.addEventListener("DOMContentLoaded", function(){
    Shopify.Cart.GiftWrap.remove();
  });
  // If we have more than one gift-wrap item in the cart.
  {% elsif gift_wraps_in_cart > 1 %}
  document.addEventListener("DOMContentLoaded", function(){
    Shopify.Cart.GiftWrap.set();
  });
  // If we have a gift-wrap item in the cart but our gift-wrapping cart attribute has not been set.
  {% elsif gift_wraps_in_cart > 0 and cart.attributes.gift-wrapping == blank %}
  document.addEventListener("DOMContentLoaded", function(){
    Shopify.Cart.GiftWrap.set();
  });
  // If we have no gift-wrap item in the cart but our gift-wrapping cart attribute has been set.
  {% elsif gift_wraps_in_cart == 0 and cart.attributes.gift-wrapping != blank %}
  document.addEventListener("DOMContentLoaded", function(){
    Shopify.Cart.GiftWrap.set();
  });
  {% endif %}

  // When the gift-wrapping checkbox is checked or unchecked.
  document.addEventListener("DOMContentLoaded", function(){
    document.querySelector('[name="attributes[gift-wrapping]"]').addEventListener("change", function(event) {
      if (event.target.checked) {
        Shopify.Cart.GiftWrap.set();
      } else {
        Shopify.Cart.GiftWrap.remove();
      }

    });

    document.querySelector('#gift-note').addEventListener("change", function(evt) {
      var note = evt.target.value;
      var headers = new Headers({ 'Content-Type': 'application/json' });

      var request = {
        method: 'POST',
        headers: headers,
        body: JSON.stringify({ attributes: { 'gift-note': note } })
      };

      fetch('/cart/update.js', request);
    });
  });
</script>

{% else %}

<p style="clear: left; margin: 30px 0" class="rte">
  You attempted to add a gift-wrapping script to your shopping cart, but it
  won't work because you don't have a link list with handle
  <code>gift-wrapping</code> which, in turn, contains a link to your
  gift-wrapping product. Please review the steps outlined
  <a
    href="https://help.shopify.com/manual/online-store/themes/os/customize/add-gift-wrap-option"
    target="_blank"
    rel="noopener noreferrer nofollow"
    >here</a
  >.
</p>

{% endif %}

Gebühr hinzufügen, die in der Bestellung pro Produkt berechnet wird

Wenn sich bei Auswahl dieser Option drei Produkte in der Bestellung befinden, wird die Gebühr für die Geschenkverpackung mit Drei multipliziert. Füge den folgenden Code ein und klicke auf Speichern.

{% if linklists.gift-wrapping.links.size > 0 and
linklists.gift-wrapping.links.first.type == 'product_link' %}

<div
  id="is-a-gift"
  style="clear: left; margin: 30px 0"
  class="clearfix rte"
>
  <p>
    <input
      id="gift-wrapping"
      type="checkbox"
      name="attributes[gift-wrapping]"
      value="yes"
      {% if cart.attributes.gift-wrapping %}
      checked="checked"
      {% endif %}
      style="float: none"
    />
    <label
      for="gift-wrapping"
      style="display:inline; padding-left: 5px; float: none;"
    >
      For {{ linklists.gift-wrapping.links.first.object.price | money }} per
      item, please wrap the products in this order.
    </label>
  </p>
  <p>
    <label style="display:block" for="gift-note"
      >Gift message (free and optional):</label
    >
    <textarea name="attributes[gift-note]" id="gift-note">
{{ cart.attributes.gift-note }}</textarea
    >
  </p>
</div>

{% assign id = linklists.gift-wrapping.links.first.object.variants.first.id
%} {% assign gift_wraps_in_cart = 0 %} {% for item in cart.items %} {% if
item.id == id %} {% assign gift_wraps_in_cart = item.quantity %} {% endif %}
{% endfor %} {% assign items_in_cart = cart.item_count | minus:
gift_wraps_in_cart %}

<style>
  #updates_{{ id }} { display: none; }
</style>

<script>

  Shopify.Cart = Shopify.Cart || {};

  Shopify.Cart.GiftWrap = {};

  Shopify.Cart.GiftWrap.set = function() {
    var headers = new Headers({ 'Content-Type': 'application/json' });

    var request = {
      method: 'POST',
      headers: headers,
      body: JSON.stringify({ updates: { {{ id }}: {{ items_in_cart }} }, attributes: { 'gift-wrapping': true } })
    };
    fetch('/cart/update.js', request)
    .then(function() {
      location.href = '/cart';
    });
  }

  Shopify.Cart.GiftWrap.remove = function() {
    var headers = new Headers({ 'Content-Type': 'application/json' });

    var request = {
      method: 'POST',
      headers: headers,
      body: JSON.stringify({ updates: { {{ id }}: 0 }, attributes: { 'gift-wrapping': '', 'gift-note': '' } })
    };
    fetch('/cart/update.js', request)
    .then(function() {
      location.href = '/cart';
    });
  }

  // If we have nothing but gift-wrap items in the cart.
  {% if cart.items.size == 1 and gift_wraps_in_cart > 0 %}
  document.addEventListener("DOMContentLoaded", function(){
    Shopify.Cart.GiftWrap.remove();
  });
  // If we don't have the right amount of gift-wrap items in the cart.
  {% elsif gift_wraps_in_cart > 0 and gift_wraps_in_cart != items_in_cart %}
  document.addEventListener("DOMContentLoaded", function(){
    Shopify.Cart.GiftWrap.set();
  });
  // If we have a gift-wrap item in the cart but our gift-wrapping cart attribute has not been set.
  {% elsif gift_wraps_in_cart > 0 and cart.attributes.gift-wrapping == blank %}
  document.addEventListener("DOMContentLoaded", function(){
    Shopify.Cart.GiftWrap.set();
  });
  // If we have no gift-wrap item in the cart but our gift-wrapping cart attribute has been set.
  {% elsif gift_wraps_in_cart == 0 and cart.attributes.gift-wrapping != blank %}
  document.addEventListener("DOMContentLoaded", function(){
    Shopify.Cart.GiftWrap.set();
  });
  {% endif %}

  // When the gift-wrapping checkbox is checked or unchecked.
  document.addEventListener("DOMContentLoaded", function(){
    document.querySelector('[name="attributes[gift-wrapping]"]').addEventListener("change", function(event) {
      if (event.target.checked) {
        Shopify.Cart.GiftWrap.set();
      } else {
        Shopify.Cart.GiftWrap.remove();
      }

    });

    document.querySelector('#gift-note').addEventListener("change", function(evt) {
      var note = evt.target.value;
      var headers = new Headers({ 'Content-Type': 'application/json' });

      var request = {
        method: 'POST',
        headers: headers,
        body: JSON.stringify({ attributes: { 'gift-note': note } })
      };

      fetch('/cart/update.js', request);
    });
  });
</script>

{% else %}

<p style="clear: left; margin: 30px 0" class="rte">
  You attempted to add a gift-wrapping script to your shopping cart, but it
  won't work because you don't have a link list with handle
  <code>gift-wrapping</code> which, in turn, contains a link to your
  gift-wrapping product. Please review the steps outlined
  <a
    href="https://help.shopify.com/manual/online-store/themes/os/customize/add-gift-wrap-option"
    target="_blank"
    rel="noopener noreferrer nofollow"
    >here</a
  >.
</p>

{% endif %}

Snippet in die Warenkorb-Vorlage einschließen

So schließt du das Snippet für die Geschenkverpackung in deine Warenkorb-Vorlage ein:

Klicke im Verzeichnis Abschnitte auf cart-template.liquid. Wenn dein Theme nicht über cart-template.liquid verfügt, klicke im Verzeichnis Vorlagen auf cart.liquid.
Suche das abschließende Tag </form> im Code. Füge in einer neuen Zeile über dem abschließenden Tag </form> den folgenden Code ein:

{% render 'gift-wrapping' %}

Klicke auf Speichern.