เพิ่มเครื่องมือเลือกวันที่จัดส่งไปยังตะกร้าสินค้าของคุณ

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

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

เครื่องมือเลือกวันที่จัดส่ง

ในหน้านี้

ใส่ jQuery ใน theme.liquid ของคุณ

ธีมบางธีมจำเป็นต้องมีการเพิ่มแท็กสคริปต์สำหรับ jQuery ลงในไฟล์เลย์เอาต์ theme.liquid เพื่อให้การปรับแต่งนี้ใช้งานได้ หากคุณใช้งานธีม Boundless, Debut เวอร์ชัน 17.2.0 หรือใหม่กว่า, Express, Narrative, หรือ Venture คุณอาจต้องดำเนินการตามขั้นตอนถัดไป:

  1. ในไดเรกทอรีเลย์เอาต์ ให้คลิก theme.liquid

  2. ค้นหาแท็กปิด </head> ภายในโค้ดดังกล่าว ในบรรทัดใหม่เหนือแท็กปิด </head> ให้วางโค้ดต่อไปนี้:

{{ '//ajax.googleapis.com/ajax/libs/jquery/2.2.3/jquery.min.js' | script_tag }}
  1. คลิกที่ “บันทึก”

สร้างส่วนย่อยของวันที่จัดส่ง

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

  4. สร้างส่วนย่อย:

    1. ตั้งชื่อส่วนย่อย delivery-date ของคุณ
    2. คลิกที่ “สร้างส่วนย่อย” ไฟล์ส่วนย่อยใหม่จะเปิดขึ้นในตัวแก้ไขโค้ด

  5. ในส่วนย่อย delivery-date.liquid ใหม่ของคุณ ให้วางโค้ดต่อไปนี้:

{{ '//code.jquery.com/ui/1.9.2/themes/base/jquery-ui.css' | stylesheet_tag }}
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.9.2/jquery-ui.min.js" defer="defer"></script>

<div style="width:300px; clear:both;">
  <p>
    <label for="date">Pick a delivery date:</label>
    <input id="date" type="text" name="attributes[date]" value="{{ cart.attributes.date }}" />
    <span style="display:block" class="instructions"> We do not deliver during the week-end.</span>
  </p>
</div>

<script>
  window.onload = function() {
      if (window.jQuery) {
        let $ = window.jQuery;

        $(function() {
          $("#date").datepicker({
          minDate: +1,
          maxDate: '+2M',
          beforeShowDay: $.datepicker.noWeekends
        });
      });
    }
  }
</script>
  1. คลิกที่ “บันทึก”
  1. จากแอป Shopify ให้แตะที่ปุ่ม …
  2. ในส่วนช่องทางการขาย ให้แตะที่ร้านค้าออนไลน์
  3. แตะจัดการธีม
  4. ค้นหาธีมที่คุณต้องการแก้ไข แล้วคลิกปุ่ม … เพื่อเปิดเมนูดำเนินการ จากนั้นคลิก แก้ไขโค้ด
  5. ในไดเรกทอรีส่วนย่อย ให้คลิก “เพิ่มส่วนย่อยใหม่”

  6. สร้างส่วนย่อย:

    1. ตั้งชื่อส่วนย่อย delivery-date ของคุณ
    2. คลิกที่ “สร้างส่วนย่อย” ไฟล์ส่วนย่อยใหม่จะเปิดขึ้นในตัวแก้ไขโค้ด

  7. ในส่วนย่อย delivery-date.liquid ใหม่ของคุณ ให้วางโค้ดต่อไปนี้:

{{ '//code.jquery.com/ui/1.9.2/themes/base/jquery-ui.css' | stylesheet_tag }}
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.9.2/jquery-ui.min.js" defer="defer"></script>

<div style="width:300px; clear:both;">
  <p>
    <label for="date">Pick a delivery date:</label>
    <input id="date" type="text" name="attributes[date]" value="{{ cart.attributes.date }}" />
    <span style="display:block" class="instructions"> We do not deliver during the week-end.</span>
  </p>
</div>

<script>
  window.onload = function() {
      if (window.jQuery) {
        let $ = window.jQuery;

        $(function() {
          $("#date").datepicker({
          minDate: +1,
          maxDate: '+2M',
          beforeShowDay: $.datepicker.noWeekends
        });
      });
    }
  }
</script>
  1. คลิกที่ “บันทึก”
  1. จากแอป Shopify ให้แตะที่ปุ่ม …
  2. ในส่วนช่องทางการขาย ให้แตะที่ร้านค้าออนไลน์
  3. แตะจัดการธีม
  4. ค้นหาธีมที่คุณต้องการแก้ไข แล้วคลิกปุ่ม … เพื่อเปิดเมนูดำเนินการ จากนั้นคลิก แก้ไขโค้ด
  5. ในไดเรกทอรีส่วนย่อย ให้คลิก “เพิ่มส่วนย่อยใหม่”

  6. สร้างส่วนย่อย:

    1. ตั้งชื่อส่วนย่อย delivery-date ของคุณ
    2. คลิกที่ “สร้างส่วนย่อย” ไฟล์ส่วนย่อยใหม่จะเปิดขึ้นในตัวแก้ไขโค้ด

  7. ในส่วนย่อย delivery-date.liquid ใหม่ของคุณ ให้วางโค้ดต่อไปนี้:

{{ '//code.jquery.com/ui/1.9.2/themes/base/jquery-ui.css' | stylesheet_tag }}
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.9.2/jquery-ui.min.js" defer="defer"></script>

<div style="width:300px; clear:both;">
  <p>
    <label for="date">Pick a delivery date:</label>
    <input id="date" type="text" name="attributes[date]" value="{{ cart.attributes.date }}" />
    <span style="display:block" class="instructions"> We do not deliver during the week-end.</span>
  </p>
</div>

<script>
  window.onload = function() {
      if (window.jQuery) {
        let $ = window.jQuery;

        $(function() {
          $("#date").datepicker({
          minDate: +1,
          maxDate: '+2M',
          beforeShowDay: $.datepicker.noWeekends
        });
      });
    }
  }
</script>
  1. คลิกที่ “บันทึก”

ใส่ส่วนย่อยในหน้าตะกร้าสินค้าของคุณ

วิธีใส่ส่วนย่อยของวันที่จัดส่งในหน้าตะกร้าสินค้าของคุณ:

  1. ในไดเรกทอรีส่วน ให้คลิก cart-template.liquid หากธีมของคุณไม่มีไฟล์นี้ ให้คลิก cart.liquid ในไดเรกทอรีเทมเพลต

  2. ค้นหาแท็กปิด </form> ภายในโค้ดดังกล่าว ในบรรทัดใหม่เหนือแท็กปิด </form> ให้วางโค้ดต่อไปนี้:

{% render 'delivery-date' %}
  1. คลิกที่ “บันทึก”

ขณะนี้คุณมีช่องป้อนข้อมูลวันที่จัดส่งในหน้าตะกร้าสินค้าของคุณ เมื่อคุณคลิกภายในช่องข้อความ ปฏิทินจะปรากฏขึ้น:

เครื่องมือเลือกวันที่จัดส่ง

เครื่องมือเลือกวันที่ที่ใช้ในการปรับแต่งนี้เป็นวิดเจ็ตจากไลบรารี UI ของ jQuery โดยบล็อกโพสต์นี้จะอธิบายถึงวิธีปิดใช้วันที่ที่ระบุในปฏิทินตัวเลือกวันที่

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

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