Lahjapaketointi‑vaihtoehdon lisääminen ostoskorisivullesi

Huomio

Vanhoja teemoja ei ole saatavilla Theme Storessa. Vanhoissa teemoissa ei ole Shopifyn Online Store 2.0 ‑teemoihin sisältyviä ominaisuuksia, eikä Shopifyn ilmaisiin vanhoihin teemoihin tehdä muita päivityksiä kuin tietoturvakorjauksia.

Huomaa

Jos käytät Shopifyn ilmaista teemaa, voit ottaa yhteyttä Shopify-tukeen saadaksesi tähän tutoriaaliin liittyvää tukea. Tarvitset 15 minuuttia suunnitteluaikaa. Lue lisää Shopifyn suunnittelukäytännöstä.

Huomaa

tämä mukautus koskee vain vanhoja Shopify-teemoja, eikä sitä sovelleta Online Store 2.0 -teemoihin.

• Selvitä teemasi arkkitehtuuriversio
• Tutustu Online Store 2.0:n teemojen mukauttamiseen

Voit tarjota asiakkaillesi lahjapaketointipalvelua verkkokauppasi ostoskorisivulla. Voit valintasi mukaan veloittaa paketoinnin tilaavilta asiakkailta joko joko kiinteän maksun tai tuotekohtaisen maksun.

Huomio

Tämä mukautus ei toimi veto-ostoskori- tai ponnahdusikkunaostoskorityylien kanssa. Se toimii ainoastaan ostoskorisivun kanssa (URL-osoite your-store.com/cart). Jos käytät veto-ostoskoria tai ponnahdusikkunaa, sinun on muutettava ostoskorityylisi sivuksi teemaeditorissa. Lisää tuote ostoskoriin teemaesikatselussa ja klikkaa sitten ostoskorisivuvälilehteä teemaeditorissa tarkastellaksesi ostoskorisi asetuksia.

Lahjapaketointituotteen luominen

Luo ensin lahjapaketointivaihtoehto tuotteeksi:

1. Siirry Shopify-ylläpitäjästä kohtaan Tuotteet.

2. Klikkaa Lisää tuote.

3. Luo lahjapaketointituote aivan kuten loisit minkä tahansa muun tuotteen:

   

• Tuotekuvauksen avulla voit selittää, mitä materiaaleja tuotteiden lahjapaketointiin käytetään.
• Anna lahjapaketointituotteelle hinta, jonka haluat palvelusta veloittaa. Jos haluat lahjapaketoinnin olevan ilmainen, aseta lahjapaketointituotteen hinnaksi silloin 0.
• Voit ladata kuvan tuotteesta näyttääksesi asiakkaille, miltä lahjaksi paketoitu tuote näyttää.
• Varmista, että lahjapaketointituotteesi sisältää varaston, tai muuta asetuksia niin, ettei Shopify seuraa lahjapaketointituotteen varastoa. Jos kaupallasi on useita sijainteja, poista valinta Seuraa määrää ‑kohdasta, jotta Shopify ei seuraa lahjapaketointituotteen varastoa.

1. Klikkaa Tallenna.

Valikon luominen

Luo seuraavaksi valikko, joka osoittaa lahjapaketointituotteeseesi:

Tietokone

1. Siirry Shopify Adminissa kohtaan Sisältö > Valikot.

2. Klikkaa Lisää valikko.

3. Anna valikolle nimeksi Gift wrapping, jotta valikkoon määritetty nimitunnus on gift-wrapping.

4. Lisää lahjapaketointituote valikkoon:

   1. Valitse Lisää valikkokohta ja syötä sitten lahjapaketointituotteeseen vievälle linkille nimi.
   2. Valitse Linkki-kentässä ensin Tuotteet ja sitten lahjapaketointituote pudotusvalikosta.
   3. Klikkaa Lisää.

5. Klikkaa Tallenna valikko.

iPhone

1. Napauta Shopify-sovelluksessa …-painiketta.
2. Napauta Sisältö > Valikot.
3. Klikkaa Lisää valikko.
4. Anna valikolle nimeksi Gift wrapping, jotta valikkoon määritetty nimitunnus on gift-wrapping.

5. Lisää lahjapaketointituote valikkoon:

   1. Valitse Lisää valikkokohta ja syötä sitten lahjapaketointituotteeseen vievälle linkille nimi.
   2. Valitse Linkki-kentässä ensin Tuotteet ja sitten lahjapaketointituote pudotusvalikosta.
   3. Klikkaa Lisää.

6. Klikkaa Tallenna valikko.

Android

1. Napauta Shopify-sovelluksessa …-painiketta.
2. Napauta Sisältö > Valikot.
3. Klikkaa Lisää valikko.
4. Anna valikolle nimeksi Gift wrapping, jotta valikkoon määritetty nimitunnus on gift-wrapping.

5. Lisää lahjapaketointituote valikkoon:

   1. Valitse Lisää valikkokohta ja syötä sitten lahjapaketointituotteeseen vievälle linkille nimi.
   2. Valitse Linkki-kentässä ensin Tuotteet ja sitten lahjapaketointituote pudotusvalikosta.
   3. Klikkaa Lisää.

6. Klikkaa Tallenna valikko.

Koodinpätkän luominen

Tietokone

1. Siirry Shopify Adminissa kohtaan Verkkosivu > Teemat.
2. Etsi teema, jota haluat muokata, avaa toimintovalikko klikkaamalla ...-painiketta ja klikkaa sitten Muokkaa koodia.
3. klikkaa Koodinpätkät-hakemistossa Lisää uusi koodinpätkä.
4. Nimeä koodinpätkäsi gift-wrapping ja valitse Luo koodinpätkä. Koodinpätkätiedostosi avautuu koodieditorissa.
5. Tässä vaiheessa liität koodia uuteen gift-wrapping-koodinpätkätiedostoosi. Liittämäsi koodi riippuu siitä, miten haluat veloittaa lahjapaketointipalvelusta:

iPhone

1. Napauta Shopify-sovelluksessa …-painiketta.
2. Napauta myyntikanavat -osiossa Verkkokauppa.
3. Napauta Hallitse teemoja.
4. Etsi teema, jota haluat muokata, avaa toimintovalikko klikkaamalla ...-painiketta ja klikkaa sitten Muokkaa koodia.
5. klikkaa Koodinpätkät-hakemistossa Lisää uusi koodinpätkä.
6. Nimeä koodinpätkäsi gift-wrapping ja valitse Luo koodinpätkä. Koodinpätkätiedostosi avautuu koodieditorissa.
7. Tässä vaiheessa liität koodia uuteen gift-wrapping-koodinpätkätiedostoosi. Liittämäsi koodi riippuu siitä, miten haluat veloittaa lahjapaketointipalvelusta:

Android

1. Napauta Shopify-sovelluksessa …-painiketta.
2. Napauta myyntikanavat -osiossa Verkkokauppa.
3. Napauta Hallitse teemoja.
4. Etsi teema, jota haluat muokata, avaa toimintovalikko klikkaamalla ...-painiketta ja klikkaa sitten Muokkaa koodia.
5. klikkaa Koodinpätkät-hakemistossa Lisää uusi koodinpätkä.
6. Nimeä koodinpätkäsi gift-wrapping ja valitse Luo koodinpätkä. Koodinpätkätiedostosi avautuu koodieditorissa.
7. Tässä vaiheessa liität koodia uuteen gift-wrapping-koodinpätkätiedostoosi. Liittämäsi koodi riippuu siitä, miten haluat veloittaa lahjapaketointipalvelusta:

Kiinteän veloituksen lisääminen lahjapaketoinnista

Liitä seuraava koodi ja Tallenna:

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

Tilauksen tuotteiden lukumäärän mukaan määrittyvän veloituksen lisääminen

Jos käytössäsi on tämä valinta ja tilauksessa on kolme tuotetta, lahjapaketointimaksu kerrotaan kolmella. Liitä seuraava koodi ja Tallenna:

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

Koodinpätkän sisällyttäminen ostoskorimalliin

Näin lisäät lahjapaketoinnin koodinpätkän ostoskorimalliisi:

1. Klikkaa Osat-hakemistossa kohtaa cart-template.liquid. Jos teemassasi ei ole tiedostoa cart-template.liquid, valitse silloin Mallit-hakemistosta cart.liquid.

2. Etsi tämän elementin lopputunniste </form>. Liitä seuraava koodi uudelle riville lopputunnisteen </form> yläpuolelle:

{% render 'gift-wrapping' %}

1. Klikkaa Tallenna.