Legg til et alternativ for gaveinnpakking på handlekurvsiden

Denne siden ble skrevet ut den Mar 24, 2023. Gå til https://help.shopify.com/nb/manual/online-store/themes/themes-by-shopify/vintage-themes/customizing-vintage-themes/add-gift-wrap-option for nyeste versjon.

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.

Opprett et gaveinnpakkingsprodukt

Først oppretter du alternativet for gaveinnpakking som produkt:

Fra Shopify-administratoren går du til Produkter.
Klikk på Legg til produkt.
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.

Klikk på Lagre.

Opprett en meny

Deretter oppretter du en meny som peker på gaveinnpakkingsproduktet:

Fra Shopify-administratoren går du til Nettbutikk > Navigasjon.

Fra Shopify-appen trykker du på Butikk.
I Salgskanal-seksjonen trykker du på Nettbutikk.
Trykk på Navigasjon.

Fra Shopify-appen trykker du på Butikk.
I Salgskanal-seksjonen trykker du på Nettbutikk.
Trykk på Navigasjon.

Klikk på Legg til meny.
Navngi menyen Gift wrapping, slik at referansen som er tilordnet menyen er gift-wrapping.
Legg til gaveinnpakkingsproduktet i menyen:
Klikk på Lagre meny.

Opprett en kodebit

Slik oppretter du en kodebit for gaveinnpakkingsalternativet:

Fra Shopify-administrator går du til Nettbutikk > Temaer.
Finn temaet du vil redigere, klikk på …-knappen for å åpne handlingsmenyen og klikk på Rediger kode.

Fra Shopify-appen trykker du på Butikk.
I Salgskanal-seksjonen trykker du på Nettbutikk.
Trykk på Redigere temaer.
Finn temaet du vil redigere, klikk på …-knappen for å åpne handlingsmenyen og klikk på Rediger kode.

Fra Shopify-appen trykker du på Butikk.
I Salgskanal-seksjonen trykker du på Nettbutikk.
Trykk på Redigere temaer.
Finn temaet du vil redigere, klikk på …-knappen for å åpne handlingsmenyen og klikk på Rediger kode.

I Utdrag-katalogen klikker du på Legg til et nytt utdrag.
Gi kodebiten navnet gift-wrapping, og klikk på Opprett kodebit. Kodebitfilen vil åpnes i koderedigeringsprogrammet.
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:

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

### Add a charge that is multiplied by the number of products in the order

With this option, if there are three products in the order, then the gift wrap charge will be multiplied by three. Paste the following code and **Save**:

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

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.
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' %}

Klikk på Lagre.

Legg til et alternativ for gaveinnpakking på handlekurvsiden

Opprett et gaveinnpakkingsprodukt

Opprett en meny

Opprett en kodebit

Inkluder kodebiten i handlekurvmalen

Er du klar til å begynne å selge med Shopify?