Legg til et alternativ for gaveinnpakking på handlekurvsiden

Advarsel

Eldre temaer er ikke tilgjengelige i Theme Store. Eldre temaer har ikke funksjonene fra Shopifys Online Store 2.0-temaer, og Shopifys gratis eldre temaer mottar ikke oppdateringer ut over sikkerhetsrettelser.

Merk

Hvis du bruker et gratis tema fra Shopify, kan du kontakte Shopifys brukerstøtte for å få hjelp med denne veiledningen. Det krever 15 minutter med designtid. Finn ut mer om Shopifys retningslinjer for design.

Merk

Denne tilpasningen er for eldre Shopify-temaer, og gjelder ikke for Nettbutikk 2.0-temaer.

• Finn ut temaets arkitekturversjon
• Utforsk Online Store 2.0-tematilpasninger

Du kan tilby en gaveinnpakkingstjeneste til kundene dine på handlekurvsiden i nettbutikken. For kunder som ønsker bestillingen sin innpakket kan du enten belaste en fastpris, eller belaste per produkt.

Advarsel

Opprett et gaveinnpakkingsprodukt

Først oppretter du alternativet for gaveinnpakking som produkt:

1. Fra Shopify-administratoren går du til Produkter.

2. Klikk på Legg til produkt.

3. Opprett et gaveinnpakkingsprodukt på samme måte som du oppretter et hvilket som helst annet produkt:

   

• Du kan bruke produktbeskrivelsen til å forklare hva slags materialer som brukes til innpakningen.
• Gi gaveinnpakkingsproduktet den prisen du ønsker å belaste for tjenesten. Hvis du ønsker at innpakking skal være gratis, angir du prisen for gaveinnpakkingsproduktet til 0.
• Du kan laste opp et bilde for produktet for å vise kundene hvordan en innpakket bestilling ser ut.
• Sørg for at gaveinnpakkingsproduktet inkluderer lagerbeholdning, eller juster innstillingene slik at Shopify ikke sporer lagerbeholdning for gaveinnpakkingsproduktet. Hvis butikken din har flere lokalisasjoner, fjerner du avkrysningen for Spor antall for å forhindre at Shopify sporer lagerbeholdningen for gaveinnpakkingsproduktet.

1. Klikk på Lagre.

Opprett en meny

Deretter oppretter du en meny som peker på gaveinnpakkingsproduktet:

Datamaskin

1. Gå til Innhold > Menyer fra Shopify-administrator.

2. Klikk på Legg til meny.

3. Navngi menyen Gift wrapping, slik at referansen som er tilordnet menyen er gift-wrapping.

4. Legg til gaveinnpakkingsproduktet i menyen:

   1. Klikk på Legg til menyelement, og angi et Navn for koblingen til gaveinnpakkingsproduktet.
   2. I Kobling-feltet velger du Produkter, og velger deretter gaveinnpakkingsproduktet fra rullegardinmenyen.
   3. Klikk på Legg til.

5. Klikk på Lagre meny.

iPhone

1. Trykk på …-knappen fra Shopify-appen.

2. Trykk på Innhold > Menyer.

3. Klikk på Legg til meny.

4. Navngi menyen Gift wrapping, slik at referansen som er tilordnet menyen er gift-wrapping.

5. Legg til gaveinnpakkingsproduktet i menyen:

   1. Klikk på Legg til menyelement, og angi et Navn for koblingen til gaveinnpakkingsproduktet.
   2. I Kobling-feltet velger du Produkter, og velger deretter gaveinnpakkingsproduktet fra rullegardinmenyen.
   3. Klikk på Legg til.

6. Klikk på Lagre meny.

Android

1. Trykk på …-knappen fra Shopify-appen.

2. Trykk på Innhold > Menyer.

3. Klikk på Legg til meny.

4. Navngi menyen Gift wrapping, slik at referansen som er tilordnet menyen er gift-wrapping.

5. Legg til gaveinnpakkingsproduktet i menyen:

   1. Klikk på Legg til menyelement, og angi et Navn for koblingen til gaveinnpakkingsproduktet.
   2. I Kobling-feltet velger du Produkter, og velger deretter gaveinnpakkingsproduktet fra rullegardinmenyen.
   3. Klikk på Legg til.

6. Klikk på Lagre meny.

Opprett en kodebit

Datamaskin

1. Fra Shopify-administrator går du til Nettbutikk > Temaer.
2. Finn temaet du vil redigere, klikk på …-knappen for å åpne handlingsmenyen, og klikk deretter på Rediger kode.
3. I Utdrag-katalogen klikker du på Legg til et nytt utdrag.
4. Gi kodebiten navnet gift-wrapping, og klikk på Opprett kodebit. Kodebitfilen vil åpnes i koderedigeringsprogrammet.
5. I dette trinnet skal du lime inn litt kode i den nye gift-wrapping-kodebitfilen. Koden du limer inn avhenger av hvordan du ønsker å belaste kundene for gaveinnpakkingstjenesten:

iPhone

1. Trykk på …-knappen fra Shopify-appen.
2. I Salgskanaler-seksjonen trykker du på Nettbutikk.
3. Trykk på Administrer temaer.
4. Finn temaet du vil redigere, klikk på …-knappen for å åpne handlingsmenyen, og klikk deretter på Rediger kode.
5. I Utdrag-katalogen klikker du på Legg til et nytt utdrag.
6. Gi kodebiten navnet gift-wrapping, og klikk på Opprett kodebit. Kodebitfilen vil åpnes i koderedigeringsprogrammet.
7. I dette trinnet skal du lime inn litt kode i den nye gift-wrapping-kodebitfilen. Koden du limer inn avhenger av hvordan du ønsker å belaste kundene for gaveinnpakkingstjenesten:

Android

1. Trykk på …-knappen fra Shopify-appen.
2. I Salgskanaler-seksjonen trykker du på Nettbutikk.
3. Trykk på Administrer temaer.
4. Finn temaet du vil redigere, klikk på …-knappen for å åpne handlingsmenyen, og klikk deretter på Rediger kode.
5. I Utdrag-katalogen klikker du på Legg til et nytt utdrag.
6. Gi kodebiten navnet gift-wrapping, og klikk på Opprett kodebit. Kodebitfilen vil åpnes i koderedigeringsprogrammet.
7. I dette trinnet skal du lime inn litt kode i den nye gift-wrapping-kodebitfilen. Koden du limer inn avhenger av hvordan du ønsker å belaste kundene for gaveinnpakkingstjenesten:

Legg til en fastpris for gaveinnpakking

Lim inn følgende kode og Lagre:

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

Legg til en belastning som multipliseres med antall produkter i bestillingen

Med dette alternativet vil, dersom det er tre produkter i bestillingen, gaveinnpakningsbelastningen multipliseres med tre. Lim inn følgende kode og Lagre:

{% 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 kodebiten i handlekurvmalen

Slik inkluderer du kodebiten for gaveinnpakking i handlekurvmalen:

1. I Seksjoner-katalogen klikker du på cart-template.liquid. Hvis temaet ditt ikke har en cart-template.liquid, klikker du på cart.liquid i Maler-katalogen.

2. Finn den avsluttende </form>-taggen i koden. Lim inn følgende kode på en ny linje like over den avsluttende </form>-taggen:

{% render 'gift-wrapping' %}

1. Klikk på Lagre.