Lägg till ett alternativ för presentinslagning på din varukorgssida

Varning

Vintage-teman är inte tillgängliga i temabutiken. Dessa teman har inte funktionerna som ingår i Shopifys Online Store 2.0-teman och Shopifys gratis Vintage-teman får inte uppdateringar utöver säkerhetsfixar.

Observera

Om du använder ett gratis tema från Shopify kan du kanske kontakta Shopify-support för att få hjälp med denna handledning. Det tar 15 minuter i designtid. För mer information, se Support för teman.

Observera

Denna anpassning är för Shopifys vintageteman och gäller inte teman för webbutik 2.0.

• Hitta temats arkitekturversion
• Utforska temaanpassningar för Online Store 2.0

Du kan erbjuda en tjänst för presentinslagning till dina kunder på varukorgssidan i din webbutik. För kunder som vill att deras order ska slås in kan du debitera antingen en fast avgift eller debitera per produkt.

Varning

Den här anpassningen fungerar inte för varukorgsstilarna panel och popup och fungerar endast för en varukorgssida (på URL your-store.com/cart). Om du använder en varukorgspanel eller -popup måste du ändra din varukorgsstil till Sida i temaredigeraren. Lägg till en produkt i varukorgen i temaförhandsgranskningen och klicka sedan på fliken Varukorgssida i temaredigeraren för att se dina varukorgsinställningar.

Skapa en produkt för presentinslagning

Först skapar du ditt alternativ för presentinslagning som en produkt:

1. Gå till Produkter i din Shopify-administratör.

2. Klicka på Lägg till produkt.

3. Skapa en produkt för presentinslagning på samma sätt som du skulle skapa vilken annan produkt som helst:

   

• Du kan använda din produktbeskrivning för att förklara vilket material som kommer att användas för att slå in artiklarna i presentpapper.
• Ge din produkt för presentinslagning det pris som du vill debitera för tjänsten. Om du vill att presentinslagningen ska vara gratis ställer du in priset för din produkt för presentinslagning till 0.
• Du kan ladda upp en bild för produkten för att visa dina kunder hur en presentinslagen order kommer att se ut.
• Se till att din produkt för presentinslagning inkluderar lagervaror eller justera inställningarna så att Shopify inte spårar lager för produkten för presentinslagning. Om din butik har flera platser avmarkerar du Spåra kvantitet för att förhindra att Shopify spårar lager för produkten för presentinslagning.

1. Klicka på Spara.

Skapa en meny

Skapa sedan en meny som pekar mot din produkt för presentinslagning:

Dator

1. Från din Shopify-admin, gå till Webbshop > Navigation.
2. Klicka på Lägg till-menyer.
3. Döp din meny till Gift wrapping, så att det namn som tilldelas menyn är gift-wrapping.

4. Lägg till produkten för presentinslagning i menyn:

   1. Klicka på Lägg till menyobjekt och ange sedan ett Namn för länken till produkten för presentinslagning.
   2. I fältet Länk väljer du Produkter och väljer sedan produkten för presentinslagning från rullgardinsmenyn.
   3. Klicka på Lägg till.

5. Klicka på Spara-menyn.

iPhone

1. Från Shopify-appen trycker du på knappen ….
2. Tryck på Webbshop i avsnittet Försäljningskanaler.
3. Tryck på Navigation.
4. Klicka på Lägg till-menyer.
5. Döp din meny till Gift wrapping, så att det namn som tilldelas menyn är gift-wrapping.

6. Lägg till produkten för presentinslagning i menyn:

   1. Klicka på Lägg till menyobjekt och ange sedan ett Namn för länken till produkten för presentinslagning.
   2. I fältet Länk väljer du Produkter och väljer sedan produkten för presentinslagning från rullgardinsmenyn.
   3. Klicka på Lägg till.

7. Klicka på Spara-menyn.

Android

1. Från Shopify-appen trycker du på knappen ….
2. Tryck på Webbshop i avsnittet Försäljningskanaler.
3. Tryck på Navigation.
4. Klicka på Lägg till-menyer.
5. Döp din meny till Gift wrapping, så att det namn som tilldelas menyn är gift-wrapping.

6. Lägg till produkten för presentinslagning i menyn:

   1. Klicka på Lägg till menyobjekt och ange sedan ett Namn för länken till produkten för presentinslagning.
   2. I fältet Länk väljer du Produkter och väljer sedan produkten för presentinslagning från rullgardinsmenyn.
   3. Klicka på Lägg till.

7. Klicka på Spara-menyn.

Skapa ett kodfragment

Dator

1. Från din Shopify-admin går du till Webbshop > Teman.
2. Hitta det tema du vill redigera, klicka på knappen … för att öppna åtgärdsmenyn och klicka sedan på Redigera kod.
3. Klicka på Lägg till en ny snippet i katalogen Snippets.
4. Döp ditt fragment gift-wrapping och klicka på Skapa fragment. Din fragmentfil kommer öppnas i kodredigeraren.
5. I det här steget klistrar du in viss kod i din nya gift-wrapping-fragmentfil. Vilken kod du klistrar in beror på hur du vill debitera dina kunder för tjänsten för presentinslagning:

iPhone

1. Från Shopify-appen trycker du på knappen ….
2. Tryck på Webbshop i avsnittet Försäljningskanaler.
3. Tryck på Hantera teman.
4. Hitta det tema du vill redigera, klicka på knappen … för att öppna åtgärdsmenyn och klicka sedan på Redigera kod.
5. Klicka på Lägg till en ny snippet i katalogen Snippets.
6. Döp ditt fragment gift-wrapping och klicka på Skapa fragment. Din fragmentfil kommer öppnas i kodredigeraren.
7. I det här steget klistrar du in viss kod i din nya gift-wrapping-fragmentfil. Vilken kod du klistrar in beror på hur du vill debitera dina kunder för tjänsten för presentinslagning:

Android

1. Från Shopify-appen trycker du på knappen ….
2. Tryck på Webbshop i avsnittet Försäljningskanaler.
3. Tryck på Hantera teman.
4. Hitta det tema du vill redigera, klicka på knappen … för att öppna åtgärdsmenyn och klicka sedan på Redigera kod.
5. Klicka på Lägg till en ny snippet i katalogen Snippets.
6. Döp ditt fragment gift-wrapping och klicka på Skapa fragment. Din fragmentfil kommer öppnas i kodredigeraren.
7. I det här steget klistrar du in viss kod i din nya gift-wrapping-fragmentfil. Vilken kod du klistrar in beror på hur du vill debitera dina kunder för tjänsten för presentinslagning:

Lägg till en fast avgift för presentinslagning

Klistra in följande kod och Spara:

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

Lägg till en avgift som multipliceras med antalet produkter i ordern

Med det här alternativet kommer avgiften för presentinslagning att multipliceras med tre om det finns tre produkter i ordern. Klistra in följande kod och Spara:

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

Inkludera fragmentet i din varukorgsmall

Så här inkluderar du fragmentet för presentinslagning i din varukorgsmall:

1. Klicka på cart-template.liquid i registret Avsnitt. Om ditt tema inte har en cart-template.liquid ska du klicka på cart.liquid i katalogen Mallar.

2. Hitta sluttaggen </form> i koden. På en ny rad ovanför sluttaggen </form> klistrar du in följande kod:

{% render 'gift-wrapping' %}

1. Klicka på Spara.