Dodaj opcję pakowania prezentów do strony koszyka

Uwaga

Klasyczne szablony nie są dostępne w Theme Store. Te szablony nie mają funkcji zawartych w szablonach Online Store 2.0, a darmowe klasyczne szablony Shopify nie są aktualizowane z wyjątkiem poprawek bezpieczeństwa.

Uwaga

Jeśli używasz darmowego szablonu z Shopify, możesz skontaktować się z Pomocą techniczną Shopify, aby uzyskać pomoc w związku z tym tutorialem. Czas projektowania wynosi 15 minut. Dowiedz się więcej o Polityce projektowania Shopify.

Uwaga

To dostosowanie jest przeznaczone dla klasycznych szablonów Shopify i nie ma zastosowania do szablonów Online Store 2.0.

• Dowiedz się, jaka jest wersja architektury Twojego szablonu
• Przeglądaj dostosowania szablonu Online Store 2.0

Możesz zaoferować swoim klientom usługę pakowania prezentów na stronie koszyka w Twoim sklepie online. W przypadku klientów, którzy chcą, aby ich zamówienie było zapakowane, możesz naliczać ryczałt lub opłatę od każdego produktu.

Uwaga

To dostosowanie nie będzie działało w przypadku koszyków w stylu szuflady lub wyskakującego okienka, a jedynie dla strony koszyka (adres URL: your-store.com/cart). Jeśli używasz koszyka w stylu szuflady lub wyskakującego okienka, musisz zmienić styl koszyka na Stronę w edytorze szablonów. Dodaj produkt do koszyka w podglądzie szablonu, a następnie kliknij kartę Strona koszyka w edytorze szablonów, aby wyświetlić ustawienia swojego koszyka.

Utwórz produkt „pakowanie prezentu”

Najpierw utwórz opcję pakowania prezentów jako produkt:

1. Z panelu administracyjnego Shopify przejdź do opcji Produkty.

2. Kliknij opcję Dodaj produkt.

3. Utwórz produkt „pakowanie prezentu” w taki sam sposób, jak każdy inny produkt:

   

• Możesz użyć opisu produktu, aby wyjaśnić, jakie materiały będą używane do pakowania artykułów.
• Określ dla produktu „pakowanie prezentu” cenę, która ma obowiązywać za usługę. Jeśli chcesz, aby pakowanie prezentów było darmowe, ustaw cenę produktu „pakowanie prezentu” na 0.
• Możesz załadować obraz produktu, aby pokazać klientom, jak będzie wyglądało zamówienie z zapakowanym prezentem.
• Upewnij się, że produkt „pakowanie prezentu” zawiera zapasy lub dostosuj ustawienia tak, aby aplikacja Shopify nie śledziła zapasów produktu „pakowanie prezentu”. Jeśli Twój sklep ma wiele lokalizacji, dezaktywuj opcję Śledź ilość, aby uniemożliwić aplikacji Shopify śledzenie zapasów dla produktu „pakowanie prezentu”.

1. Kliknij opcję Zapisz.

Utwórz menu

Następnie utwórz menu, które wskazuje na produkt „pakowanie prezentu”:

Pulpit

1. Z poziomu panelu administracyjnego Shopify przejdź do opcji Sklep online > Nawigacja.
2. Kliknij opcję Dodaj menu.
3. Nazwij swoje menu Gift wrapping, aby uchwytem przypisanym do menu był gift-wrapping.

4. Dodaj produkt „pakowanie prezentu” do menu:

   1. Kliknij opcję Dodaj pozycję menu, a następnie wprowadź Nazwę dla linku do produktu „pakowanie prezentu”.
   2. W polu Link wybierz Produkty, a następnie wybierz produkt „pakowanie prezentu” z menu rozwijanego.
   3. Kliknij Dodaj.

5. Kliknij Zapisz menu.

iPhone

1. W aplikacji Shopify naciśnij przycisk ….
2. W sekcji Kanały sprzedaży naciśnij Sklep online.
3. Naciśnij opcję Nawigacja.
4. Kliknij opcję Dodaj menu.
5. Nazwij swoje menu Gift wrapping, aby uchwytem przypisanym do menu był gift-wrapping.

6. Dodaj produkt „pakowanie prezentu” do menu:

   1. Kliknij opcję Dodaj pozycję menu, a następnie wprowadź Nazwę dla linku do produktu „pakowanie prezentu”.
   2. W polu Link wybierz Produkty, a następnie wybierz produkt „pakowanie prezentu” z menu rozwijanego.
   3. Kliknij Dodaj.

7. Kliknij Zapisz menu.

Android

1. W aplikacji Shopify naciśnij przycisk ….
2. W sekcji Kanały sprzedaży naciśnij Sklep online.
3. Naciśnij opcję Nawigacja.
4. Kliknij opcję Dodaj menu.
5. Nazwij swoje menu Gift wrapping, aby uchwytem przypisanym do menu był gift-wrapping.

6. Dodaj produkt „pakowanie prezentu” do menu:

   1. Kliknij opcję Dodaj pozycję menu, a następnie wprowadź Nazwę dla linku do produktu „pakowanie prezentu”.
   2. W polu Link wybierz Produkty, a następnie wybierz produkt „pakowanie prezentu” z menu rozwijanego.
   3. Kliknij Dodaj.

7. Kliknij Zapisz menu.

Utwórz fragment kodu

Pulpit

1. W panelu administracyjnym Shopify przejdź do opcji: Sklep online > Szablony.
2. Znajdź temat, który chcesz edytować, kliknij przycisk ..., aby otworzyć menu czynności, a następnie kliknij Edytuj kod.
3. W katalogu Fragmenty kodu kliknij opcję Dodaj nowy fragment kodu.
4. Nadaj nazwę fragmentowi kodu gift-wrapping i kliknij opcję Utwórz fragment kodu. Twój plik z fragmentami kodu otworzy się w edytorze kodów.
5. W tym kroku wkleisz kod do nowego pliku fragmentu kodu gift-wrapping. Wklejany kod zależy od tego, w jaki sposób chcesz naliczać klientom opłaty za usługę pakowania prezentów:

iPhone

1. W aplikacji Shopify naciśnij przycisk ….
2. W sekcji Kanały sprzedaży naciśnij Sklep online.
3. Naciśnij Zarządzaj szablonami.
4. Znajdź temat, który chcesz edytować, kliknij przycisk ..., aby otworzyć menu czynności, a następnie kliknij Edytuj kod.
5. W katalogu Fragmenty kodu kliknij opcję Dodaj nowy fragment kodu.
6. Nadaj nazwę fragmentowi kodu gift-wrapping i kliknij opcję Utwórz fragment kodu. Twój plik z fragmentami kodu otworzy się w edytorze kodów.
7. W tym kroku wkleisz kod do nowego pliku fragmentu kodu gift-wrapping. Wklejany kod zależy od tego, w jaki sposób chcesz naliczać klientom opłaty za usługę pakowania prezentów:

Android

1. W aplikacji Shopify naciśnij przycisk ….
2. W sekcji Kanały sprzedaży naciśnij Sklep online.
3. Naciśnij Zarządzaj szablonami.
4. Znajdź temat, który chcesz edytować, kliknij przycisk ..., aby otworzyć menu czynności, a następnie kliknij Edytuj kod.
5. W katalogu Fragmenty kodu kliknij opcję Dodaj nowy fragment kodu.
6. Nadaj nazwę fragmentowi kodu gift-wrapping i kliknij opcję Utwórz fragment kodu. Twój plik z fragmentami kodu otworzy się w edytorze kodów.
7. W tym kroku wkleisz kod do nowego pliku fragmentu kodu gift-wrapping. Wklejany kod zależy od tego, w jaki sposób chcesz naliczać klientom opłaty za usługę pakowania prezentów:

Dodaj zryczałtowaną opłatę za pakowanie prezentów

Wklej następujący kod i kliknij opcję Zapisz:

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

Dodaj opłatę, która jest pomnożona przez liczbę produktów w zamówieniu

W przypadku tej opcji, jeśli w zamówieniu są trzy produkty, opłata za pakowanie prezentu zostanie pomnożona przez trzy. Wklej następujący kod i kliknij opcję Zapisz:

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

Dodaj fragment kodu do szablonu koszyka

Aby dołączyć fragment kodu gift-wrapping do szablonu koszyka:

1. W katalogu Sekcje kliknij cart-template.liquid. Jeśli dla Twojego szablonu nie istnieje cart-template.liquid, kliknij cart.liquid w katalogu Szablony.

2. Znajdź tag zamykający </form> w kodzie. W nowej linii nad tagiem zamykającym </form> wklej następujący kod:

{% render 'gift-wrapping' %}

1. Kliknij opcję Zapisz.