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

หน้านี้พิมพ์ขึ้นเมื่อ Apr 23, 2024 หากต้องการเวอร์ชันปัจจุบัน โปรดไปที่ 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 ให้ไปที่สินค้า
คลิกเพิ่มสินค้า
สร้างสินค้าห่อของขวัญ เช่นเดียวกับที่คุณสร้างสินค้าอื่นๆ:

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

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

สร้างเมนู

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

จากส่วนผู้ดูแล Shopify ให้ไปที่ ร้านค้าออนไลน์ > การนำทาง
คลิกเพิ่มเมนู
ตั้งชื่อเมนู Gift wrapping ของคุณเพื่อให้แฮนเดิลที่กำหนดไปยังเมนูเป็น gift-wrapping
เพิ่มสินค้าห่อของขวัญไปยังเมนู:
1. คลิกที่ “เพิ่มรายการเมนู” แล้วป้อนชื่อสำหรับลิงก์ไปยังสินค้าห่อของขวัญ
2. ในช่องลิงก์ ให้เลือกสินค้า จากนั้นเลือกสินค้าห่อของขวัญจากเมนูดรอปดาวน์
3. คลิกที่เพิ่ม
คลิกบันทึกเมนู

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

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

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

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

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

จากแอป 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 %}

เพิ่มค่าบริการที่คูณด้วยจํานวนสินค้าในคำสั่งซื้อ

ด้วยตัวเลือกนี้ หากมีสินค้าสามรายการในคำสั่งซื้อ ค่าบริการห่อของขวัญจะถูกคูณด้วยสาม วางโค้ดต่อไปนี้และบันทึก:

{% 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 แล้วหรือยัง

ทดลองใช้งานฟรี