เพิ่มตัวเลือกการห่อของขวัญลงในหน้าตะกร้าสินค้าของคุณ

หน้านี้พิมพ์ขึ้นเมื่อ Mar 27, 2023 หากต้องการเวอร์ชันปัจจุบัน โปรดไปที่ https://help.shopify.com/th/manual/online-store/themes/themes-by-shopify/vintage-themes/customizing-vintage-themes/add-gift-wrap-option

คุณสามารถเสนอบริการห่อของขวัญให้กับลูกค้าได้ในหน้าตะกร้าสินค้าในร้านค้าออนไลน์ของคุณ สำหรับลูกค้าที่ต้องการห่อสินค้าของพวกเขา คุณสามารถเรียกเก็บค่าบริการในอัตราค่าจัดส่งตายตัวหรือเรียกเก็บค่าบริการต่อรายการสินค้าได้

ข้อควรระวัง

การปรับแต่งนี้จะไม่สามารถใช้ได้กับรูปแบบตะกร้าสินค้าแบบเลื่อนด้านข้างหรือแบบป๊อปอัป และจะสามารถใช้ได้กับหน้าตะกร้าสินค้าเท่านั้น (ที่ URL your-store.com/cart) หากคุณใช้ตะกร้าสินค้าแบบเลื่อนด้านข้างหรือแบบป๊อปอัป คุณจำเป็นจะต้องเปลี่ยนรูปแบบตะกร้าสินค้าเป็นหน้าภายในตัวแก้ไขธีม เพิ่มสินค้าลงในตะกร้าสินค้าภายในตัวอย่างธีม แล้วให้คลิกที่แท็บหน้าตะกร้าสินค้าภายในตัวแก้ไขธีมเพื่อดูการตั้งค่าตะกร้าสินค้าของคุณ

สร้างสินค้าห่อของขวัญ

ก่อนอื่นคุณจะต้องสร้างตัวเลือกการห่อของขวัญเป็นสินค้า:

จากส่วน Shopify admin ให้ไปที่ สินค้า
คลิกเพิ่มสินค้า
สร้างสินค้าห่อของขวัญ เช่นเดียวกับที่คุณสร้างสินค้าอื่นๆ:

คุณสามารถใช้คำอธิบายสินค้าเพื่ออธิบายว่าจะใช้วัสดุใดในการห่อสินค้า
แสดงราคาค่าบริการที่คุณต้องการเรียกเก็บสำหรับสินค้าห่อของขวัญ หากคุณต้องการให้บริการห่อของขวัญฟรี ให้ตั้งราคาสินค้าห่อของขวัญของคุณเป็น 0
คุณสามารถอัปโหลดรูปภาพสินค้าเพื่อแสดงให้ลูกค้าเห็นว่าคำสั่งซื้อที่จะได้รับการห่อของขวัญนั้นจะมีลักษณะอย่างไร
ตรวจสอบให้แน่ใจว่าสินค้าห่อของขวัญของคุณมีสินค้าคงคลัง หรือจะปรับการตั้งค่าเพื่อให้ Shopify ไม่สามารถติดตามสินค้าคงคลังของสินค้าห่อของขวัญได้ หากร้านค้าของคุณมีหลายตำแหน่งที่ตั้ง ให้เลิกทำเครื่องหมายติดตามปริมาณเพื่อป้องกันไม่ให้ Shopify ติดตามสินค้าคงคลังของสินค้าห่อของขวัญ

คลิกที่ “บันทึก”

สร้างเมนู

ถัดไป ให้สร้างเมนูที่ชี้ไปยังสินค้าห่อของขวัญของคุณ:

จากส่วน Shopify admin ให้ไปที่ ร้านค้าออนไลน์ > การนำทาง

จาก แอป Shopify ให้แตะ ร้านค้า
ในส่วน ช่องทางการขาย ให้แตะ ร้านค้าออนไลน์
แตะการนำทาง

จาก แอป Shopify ให้แตะ ร้านค้า
ในส่วน ช่องทางการขาย ให้แตะ ร้านค้าออนไลน์
แตะการนำทาง

คลิกเพิ่มเมนู
ตั้งชื่อเมนู Gift wrapping ของคุณเพื่อให้แฮนเดิลที่กำหนดไปยังเมนูเป็น gift-wrapping
เพิ่มสินค้าห่อของขวัญไปยังเมนู:
คลิกบันทึกเมนู

สร้างส่วนย่อยของโค้ด

วิธีสร้างส่วนย่อยของโค้ดให้กับตัวเลือกการห่อของขวัญ:

ในส่วน Shopify admin ให้ไปที่ร้านค้าออนไลน์ > ธีม
ค้นหาธีมที่คุณต้องการแก้ไข แล้วคลิกปุ่ม ... เพื่อเปิดเมนูดำเนินการ จากนั้นคลิกแก้ไขโค้ด

จากแอป Shopify ให้แตะ ร้านค้า
ในส่วนช่องทางการขาย ให้แตะ ร้านค้าออนไลน์
แตะ จัดการธีม
ค้นหาธีมที่คุณต้องการแก้ไข แล้วคลิกปุ่ม ... เพื่อเปิดเมนูดำเนินการ จากนั้นคลิกแก้ไขโค้ด

จากแอป Shopify ให้แตะ ร้านค้า
ในส่วนช่องทางการขาย ให้แตะ ร้านค้าออนไลน์
แตะ จัดการธีม
ค้นหาธีมที่คุณต้องการแก้ไข แล้วคลิกปุ่ม ... เพื่อเปิดเมนูดำเนินการ จากนั้นคลิกแก้ไขโค้ด

ในไดเรกทอรีส่วนย่อย ให้คลิก เพิ่มส่วนย่อยใหม่
ตั้งชื่อส่วนย่อย gift-wrapping ของคุณ จากนั้นคลิก “สร้างส่วนย่อย” ไฟล์ส่วนย่อยของคุณจะเปิดขึ้นในตัวแก้ไขโค้ดดังกล่าว
ในขั้นตอนนี้ คุณจะวางบางโค้ดลงในไฟล์ส่วนย่อย gift-wrapping ใหม่ของคุณ โดยโค้ดที่คุณวางขึ้นอยู่กับว่าคุณต้องการเรียกเก็บค่าบริการการห่อของขวัญจากลูกค้าอย่างไร:

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

รวมส่วนย่อยของคุณไว้ในเทมเพลตร้านค้า

วิธีใส่ส่วนย่อยการห่อของขวัญในเทมเพลตตะกร้าสินค้าของคุณ:

ในไดเรกทอรีส่วน ให้คลิก cart-template.liquid หากธีมของคุณไม่มี cart-template.liquid ให้คลิก cart.liquid ในไดเรกทอรีเทมเพลต
ค้นหาแท็กปิด </form> ภายในโค้ดดังกล่าว ในบรรทัดใหม่เหนือแท็กปิด </form> ให้วางโค้ดต่อไปนี้:

{% render 'gift-wrapping' %}

คลิกที่ “บันทึก”

เพิ่มตัวเลือกการห่อของขวัญลงในหน้าตะกร้าสินค้าของคุณ

สร้างสินค้าห่อของขวัญ

สร้างเมนู

สร้างส่วนย่อยของโค้ด

รวมส่วนย่อยของคุณไว้ในเทมเพลตร้านค้า

พร้อมเริ่มต้นการขายด้วย Shopify แล้วหรือยัง