Tilføj mulighed for gaveindpakning på siden med indkøbskurv

Advarsel

Ældre temaer er ikke tilgængelige i temabutikken. Ældre temaer har ikke de funktioner, der er inkluderet i Shopifys Online Store 2.0-temaer, og Shopifys gratis ældre temaer modtager ikke opdateringer med undtagelse af sikkerhedsrettelser.

Bemærk

Hvis du bruger et gratis tema fra Shopify, kan du kontakte Shopify Support for at få hjælp til denne vejledning. Det kræver 15 minutters designtid. Få mere at vide om Shopify Design Policy.

Bemærk

Denne tilpasning er for ældre Shopify-temaer og gælder ikke for Online Store 2.0-temaer.

• Find dit temas arkitekturversion
• Se Online Store 2.0-tematilpasninger

Du kan tilbyde gaveindpakning til dine kunder på siden med indkøbskurv i din webshop. Du kan enten opkræve et fast beløb for gaveindpakning eller opkræve et beløb pr. produkt.

Advarsel

Denne tilpasning fungerer ikke for indkøbskurvskuffer eller pop op-indkøbskurve, og den vil kun fungere for en side med indkøbskurv (på webadressen your-store.com/cart). Hvis du bruger en indkøbskurvskuffe eller en pop op-indkøbskurv, skal du ændre indkøbskurvstilen til Side i temaeditoren. Læg et produkt i indkøbskurven i forhåndsvisningen af temaet, og klik derefter på fanen Side med indkøbskurv i temaeditoren for at se dine indstillinger for indkøbskurven.

Opret et gaveindpakningsprodukt

Du skal først oprette din mulighed for gaveindpakning som et produkt:

1. Gå til Produkter i din Shopify-administrator.

2. Klik på Tilføj produkt.

3. Opret et gaveindpakningsprodukt som du ville oprette ethvert andet produkt:

   

• Du kan bruge din produktbeskrivelse til at forklare, hvilke materialer der bruges til gaveindpakningen.
• Giv dit gaveindpakningsprodukt den pris, som du vil opkræve for tjenesten. Hvis du vil gøre gaveindpakning gratis, skal du angive prisen på dit gaveindpakningsprodukt til 0.
• Du kan uploade et billede for produktet, som viser dine kunder, hvordan indpakkede ordrer ser ud.
• Sørg for, at dit gaveindpakningsprodukt indeholder lagerbeholdning. Du kan også justere indstillingerne, så Shopify ikke sporer lagerbeholdning for dit gaveindpakningsprodukt. Hvis din butik har flere lokationer, skal du fjerne markeringen af Spor antal for at forhindre, at Shopify sporer din lagerbeholdning for gavekortproduktet.

1. Klik på Gem.

Opret en menu

Opret derefter en menu, der peger på dit gaveindpakningsprodukt:

Desktop

1. Gå til Webshop > Navigation i Shopify-administrator.
2. Klik på Tilføj menu.
3. Navngiv din menu Gift wrapping, så den handle, der er knyttet til menuen er gift-wrapping.

4. Føj gaveindpakningsproduktet til menuen:

   1. Klik på Tilføj menupunkt, og angiv derefter et Navn for linket til gaveindpakningsproduktet.
   2. Vælg Produkter i feltet Link, og vælg derefter gaveindpakningsproduktet i rullemenuen.
   3. Klik på Tilføj.

5. Klik på menuen Gem.

iPhone

1. Tryk på knappen … i Shopify-appen.
2. Tryk på Webshop i afsnittet Salgskanaler.
3. Tryk på Navigation.
4. Klik på Tilføj menu.
5. Navngiv din menu Gift wrapping, så den handle, der er knyttet til menuen er gift-wrapping.

6. Føj gaveindpakningsproduktet til menuen:

   1. Klik på Tilføj menupunkt, og angiv derefter et Navn for linket til gaveindpakningsproduktet.
   2. Vælg Produkter i feltet Link, og vælg derefter gaveindpakningsproduktet i rullemenuen.
   3. Klik på Tilføj.

7. Klik på menuen Gem.

Android

1. Tryk på knappen … i Shopify-appen.
2. Tryk på Webshop i afsnittet Salgskanaler.
3. Tryk på Navigation.
4. Klik på Tilføj menu.
5. Navngiv din menu Gift wrapping, så den handle, der er knyttet til menuen er gift-wrapping.

6. Føj gaveindpakningsproduktet til menuen:

   1. Klik på Tilføj menupunkt, og angiv derefter et Navn for linket til gaveindpakningsproduktet.
   2. Vælg Produkter i feltet Link, og vælg derefter gaveindpakningsproduktet i rullemenuen.
   3. Klik på Tilføj.

7. Klik på menuen Gem.

Opret et kodestykke

Desktop

1. Gå til Webshop > Temaer i din Shopify-administrator.
2. Find det tema, du vil redigere, og klik på knappen … for at åbne handlingsmenuen. Klik derefter på Rediger kode.
3. Klik på Opret et nyt kodestykke i mappen Kodestykker.
4. Navngiv dit kodestykke gift-wrapping, og klik på Opret kodestykke. Din kodestykkefil åbnes i kodeeditoren.
5. I dette trin skal du indsætte kode i din nye gift-wrapping-kodestykkefil. Den kode, som du indsætter, afhænger af, hvordan du vil opkræve dine kunder for gaveindpakningstjenesten:

iPhone

1. Tryk på knappen … i Shopify-appen.
2. Tryk på Webshop i afsnittet Salgskanaler.
3. Tryk på Administrer temaer.
4. Find det tema, du vil redigere, og klik på knappen … for at åbne handlingsmenuen. Klik derefter på Rediger kode.
5. Klik på Opret et nyt kodestykke i mappen Kodestykker.
6. Navngiv dit kodestykke gift-wrapping, og klik på Opret kodestykke. Din kodestykkefil åbnes i kodeeditoren.
7. I dette trin skal du indsætte kode i din nye gift-wrapping-kodestykkefil. Den kode, som du indsætter, afhænger af, hvordan du vil opkræve dine kunder for gaveindpakningstjenesten:

Android

1. Tryk på knappen … i Shopify-appen.
2. Tryk på Webshop i afsnittet Salgskanaler.
3. Tryk på Administrer temaer.
4. Find det tema, du vil redigere, og klik på knappen … for at åbne handlingsmenuen. Klik derefter på Rediger kode.
5. Klik på Opret et nyt kodestykke i mappen Kodestykker.
6. Navngiv dit kodestykke gift-wrapping, og klik på Opret kodestykke. Din kodestykkefil åbnes i kodeeditoren.
7. I dette trin skal du indsætte kode i din nye gift-wrapping-kodestykkefil. Den kode, som du indsætter, afhænger af, hvordan du vil opkræve dine kunder for gaveindpakningstjenesten:

Tilføj et gebyr på et fast beløb for gaveindpakning

Indsæt følgende kode, og Gem:

{% 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 %}

Tilføj et gebyr, der ganges med antallet af produkter i ordren

Hvis du vælger denne valgmulighed, vil gebyret for gaveindpakning f.eks. blive ganget med tre, hvis kundens ordre indeholder tre produkter. Indsæt følgende kode, og Gem:

{% 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 %}

Inkluder kodestykket i din indkøbskurvsskabelon

Hvis du vil inkludere kodestykket til gaveindpakning i din indkøbskurvsskabelon:

1. Klik på cart-template.liquid i mappen Afsnit. Hvis dit tema ikke indeholder en cart-template.liquid, skal du klikke på cart.liquid i mappen Skabeloner.

2. Find det afsluttende </form>-tag i koden. Indsæt følgende kode på en ny linje over det afsluttende </form>-tag:

{% render 'gift-wrapping' %}

1. Klik på Gem.