เพิ่มตารางขนาดไปยังหน้าสินค้า

ข้อควรระวัง

ธีมวินเทจไม่พร้อมใช้งานในร้านค้าธีม ธีมเหล่านี้ไม่มีฟีเจอร์ในธีม Online Store 2.0 ของ Shopify และธีมวินเทจฟรีของ Shopify จะไม่ได้รับการอัปเดตนอกเหนือไปจากการแก้ไขความปลอดภัย

หมายเหตุ

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

หมายเหตุ

การปรับแต่งนี้เฉพาะกับธีมเก่าของ Shopify และไม่สามารถใช้ได้กับธีม Online Store 2.0

• ค้นหาธีมของคุณในเวอร์ชันสถาปัตยกรรม
• สำรวจการปรับแต่งธีม Online Store 2.0

หากคุณขายเสื้อผ้าที่ลูกค้าต้องทราบขนาดก่อนทำการซื้อ คุณก็สามารถเพิ่มตารางขนาดแบบกำหนดเองไปยังหน้าสินค้าของคุณได้

สินค้าทั้งหมดที่ต้องอ้างอิงถึงตารางขนาดจะต้องมีตัวเลือกขนาด:

ข้อควรระวัง

บทแนะนำการใช้งานนี้ไม่สามารถใช้งานกับธีม Express ได้โดยไม่มีโค้ดเพิ่มเติม

คุณอาจพบว่าคุณจะต้องปรับ CSS สำหรับตารางโดยขึ้นอยู่กับธีม

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

การสร้างหน้าตารางขนาด

เดสก์ท็อป

1. จากส่วนผู้ดูแล Shopify ให้ไปที่ร้านค้าออนไลน์ > หน้า
2. คลิกเพิ่มหน้า

3. ป้อนชื่อหน้า

   • หากคุณต้องการสร้างตารางขนาดที่ปรากฏทั่วทั้งเว็บไซต์ ให้ป้อน Size Chart สำหรับชื่อหน้าในส่วนตัวอย่างรายการเครื่องมือค้นหา URL* ของหน้าควรลงท้ายด้วย /size-chart
   • หากคุณต้องการสร้างตารางที่ปรากฏเฉพาะบนสินค้าจากเวนเดอร์รายใดรายหนึ่งเท่านั้น ให้ป้อนชื่อเวนเดอร์ตามด้วย Size Chart
     ตัวอย่างเช่น หากเวนเดอร์ของคุณชื่อ Great Owls ให้ป้อน Great Owls Size Chart สำหรับชื่อหน้านั้น ในส่วนตัวอย่างรายการเครื่องมือค้นหา URL ของหน้าควรลงท้ายด้วย /great-owls-size-chart
   • หากคุณต้องการสร้างตารางที่จะปรากฏบนสินค้าบางประเภทเท่านั้น ให้ป้อนประเภทสินค้าตามด้วย Size Chart
     ตัวอย่างเช่น หากคุณต้องการแสดงตารางขนาดเฉพาะให้รองเท้า ให้ป้อน Shoes Size Chart สำหรับชื่อหน้านั้น ในส่วนตัวอย่างรายการเครื่องมือค้นหา URL ของหน้าควรลงท้ายด้วย /shoes-size-chart

4. ในกล่องเนื้อหา ให้สร้างตารางที่มีข้อมูลตารางขนาดของคุณแล้วจึงปรับแต่งตารางให้มีลักษณะตามที่คุณต้องการ:

   

5. ในส่วนการแสดงผล ให้ตรวจสอบให้แน่ใจว่าตั้งค่าหน้าเป็น “แสดง” แล้ว

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

iPhone

1. จากแอป Shopify ให้แตะที่ปุ่ม …
2. ในส่วนช่องทางการขาย ให้แตะที่ร้านค้าออนไลน์
3. แตะหน้า
4. คลิกเพิ่มหน้า

5. ป้อนชื่อหน้า

   • หากคุณต้องการสร้างตารางขนาดที่ปรากฏทั่วทั้งเว็บไซต์ ให้ป้อน Size Chart สำหรับชื่อหน้าในส่วนตัวอย่างรายการเครื่องมือค้นหา URL* ของหน้าควรลงท้ายด้วย /size-chart
   • หากคุณต้องการสร้างตารางที่ปรากฏเฉพาะบนสินค้าจากเวนเดอร์รายใดรายหนึ่งเท่านั้น ให้ป้อนชื่อเวนเดอร์ตามด้วย Size Chart
     ตัวอย่างเช่น หากเวนเดอร์ของคุณชื่อ Great Owls ให้ป้อน Great Owls Size Chart สำหรับชื่อหน้านั้น ในส่วนตัวอย่างรายการเครื่องมือค้นหา URL ของหน้าควรลงท้ายด้วย /great-owls-size-chart
   • หากคุณต้องการสร้างตารางที่จะปรากฏบนสินค้าบางประเภทเท่านั้น ให้ป้อนประเภทสินค้าตามด้วย Size Chart
     ตัวอย่างเช่น หากคุณต้องการแสดงตารางขนาดเฉพาะให้รองเท้า ให้ป้อน Shoes Size Chart สำหรับชื่อหน้านั้น ในส่วนตัวอย่างรายการเครื่องมือค้นหา URL ของหน้าควรลงท้ายด้วย /shoes-size-chart

6. ในกล่องเนื้อหา ให้สร้างตารางที่มีข้อมูลตารางขนาดของคุณแล้วจึงปรับแต่งตารางให้มีลักษณะตามที่คุณต้องการ:

   

7. ในส่วนการแสดงผล ให้ตรวจสอบให้แน่ใจว่าตั้งค่าหน้าเป็น “แสดง” แล้ว

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

Android

1. จากแอป Shopify ให้แตะที่ปุ่ม …
2. ในส่วนช่องทางการขาย ให้แตะที่ร้านค้าออนไลน์
3. แตะหน้า
4. คลิกเพิ่มหน้า

5. ป้อนชื่อหน้า

   • หากคุณต้องการสร้างตารางขนาดที่ปรากฏทั่วทั้งเว็บไซต์ ให้ป้อน Size Chart สำหรับชื่อหน้าในส่วนตัวอย่างรายการเครื่องมือค้นหา URL* ของหน้าควรลงท้ายด้วย /size-chart
   • หากคุณต้องการสร้างตารางที่ปรากฏเฉพาะบนสินค้าจากเวนเดอร์รายใดรายหนึ่งเท่านั้น ให้ป้อนชื่อเวนเดอร์ตามด้วย Size Chart
     ตัวอย่างเช่น หากเวนเดอร์ของคุณชื่อ Great Owls ให้ป้อน Great Owls Size Chart สำหรับชื่อหน้านั้น ในส่วนตัวอย่างรายการเครื่องมือค้นหา URL ของหน้าควรลงท้ายด้วย /great-owls-size-chart
   • หากคุณต้องการสร้างตารางที่จะปรากฏบนสินค้าบางประเภทเท่านั้น ให้ป้อนประเภทสินค้าตามด้วย Size Chart
     ตัวอย่างเช่น หากคุณต้องการแสดงตารางขนาดเฉพาะให้รองเท้า ให้ป้อน Shoes Size Chart สำหรับชื่อหน้านั้น ในส่วนตัวอย่างรายการเครื่องมือค้นหา URL ของหน้าควรลงท้ายด้วย /shoes-size-chart

6. ในกล่องเนื้อหา ให้สร้างตารางที่มีข้อมูลตารางขนาดของคุณแล้วจึงปรับแต่งตารางให้มีลักษณะตามที่คุณต้องการ:

   

7. ในส่วนการแสดงผล ให้ตรวจสอบให้แน่ใจว่าตั้งค่าหน้าเป็น “แสดง” แล้ว

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

ไปที่ตัวแก้ไขโค้ด

เดสก์ท็อป

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

iPhone

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

Android

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

เลือกอย่างใดอย่างหนึ่งต่อไปนี้และสร้างส่วนย่อยของตารางขนาด

Site-wide

หมายเหตุ

การเลือก “ทั้งเว็บไซต์” จะแสดงตารางไซส์ในหน้าสินค้าทุกหน้าที่มีตัวเลือกไซส์

การสร้างส่วนย่อยของตารางขนาด

1. ในไดเรกทอรีส่วนย่อย ให้คลิก เพิ่มส่วนย่อยใหม่

2. ตั้งชื่อส่วนย่อย size-chart แล้วคลิกที่ “สร้างส่วนย่อย”:

3. คัดลอกข้อความต่อไปนี้ไปยังส่วนย่อย size-chart ของคุณ:

<div class="pop-up-modal">
  <div class="pop-up-content">
    <span class="close-button">&times;</span>
    <span class="size-chart-content">{{ pages.size-chart.content }}</span>
  </div>
</div>

<script>
  const modal = document.querySelector('.pop-up-modal');
  const trigger = document.querySelector('.trigger-pop-up');
  const closeButton = document.querySelector('.close-button');

  function toggleModal() {
    modal.classList.toggle('show-pop-up');
  }

  function windowOnClick(event) {
    if (event.target === modal) {
      toggleModal();
    }
  }

  trigger.addEventListener('click', toggleModal);
  closeButton.addEventListener('click', toggleModal);
  window.addEventListener('click', windowOnClick);
</script>

<style>
  .pop-up-modal {
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    opacity: 0;
    display: none;
    transform: scale(1.1);
    transition: visibility 0s linear 0.25s, opacity 0.25s 0s, transform 0.25s;
    overflow:auto;
  }
  .pop-up-content {
    position: absolute;
    top: 8%;
    left: 50%;
    transform: translate(-50%, 0);
    background-color: white;
    padding: 1rem 1.5rem;
    width: auto;
    border-radius: 0.5rem;
  }
  .pop-up-content table {
    table-layout: auto;
  }
  .close-button {
    float: right;
    width: 1.5rem;
    line-height: 1.5rem;
    text-align: center;
    cursor: pointer;
    border-radius: 0.25rem;
    background-color: lightgray;
  }
  .close-button:hover {
    background-color: darkgray;
  }
  .show-pop-up {
    z-index: 12;
    opacity: 1;
    display: block;
    transform: scale(1);
    transition: visibility 0s linear 0s, opacity 0.25s 0s, transform 0.25s;
  }
  .trigger-pop-up {
    margin: 10px 0 10px 0;
    width: 100%;
  }
  @media only screen and (max-width: 749px) {
    .pop-up-content,
    .size-chart-content table {
      width: 100%;
    }
    .size-chart-content th,
    .size-chart-content td {
      padding: 10px;
    }
  }
</style>

{% block "note" %} มีการเปลี่ยนแปลงบางอย่างที่คุณต้องแก้ไขในการจัดรูปแบบ CSS สำหรับธีม Simple และ Minimal {% endblock %}

หากคุณใช้ธีม Simple ให้ใช้รหัสนี้:

<div class="pop-up-modal">
  <div class="pop-up-content">
    <span class="close-button">&times;</span>
    <span class="size-chart-content">{{ pages.size-chart.content }}</span>
  </div>
</div>

<script>
  const modal = document.querySelector('.pop-up-modal');
  const trigger = document.querySelector('.trigger-pop-up');
  const closeButton = document.querySelector('.close-button');

  function toggleModal() {
    modal.classList.toggle('show-pop-up');
  }

  function windowOnClick(event) {
    if (event.target === modal) {
      toggleModal();
    }
  }

  trigger.addEventListener('click', toggleModal);
  closeButton.addEventListener('click', toggleModal);
  window.addEventListener('click', windowOnClick);
</script>

<style>
  .pop-up-modal {
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    opacity: 0;
    display: none;
    transform: scale(1.1);
    transition: visibility 0s linear 0.25s, opacity 0.25s 0s, transform 0.25s;
    overflow:auto;
  }
  .pop-up-content {
    position: absolute;
    top: 8%;
    left: 50%;
    transform: translate(-50%, 0);
    background-color: white;
    padding: 1rem 1.5rem;
    width: auto;
    border-radius: 0.5rem;
  }
  .pop-up-content table {
    table-layout: auto;
  }
  .close-button {
    float: right;
    width: 1.5rem;
    line-height: 1.5rem;
    text-align: center;
    cursor: pointer;
    border-radius: 0.25rem;
    background-color: lightgray;
  }
  .close-button:hover {
    background-color: darkgray;
  }
  .show-pop-up {
    z-index: 12;
    opacity: 1;
    display: block;
    transform: scale(1);
    transition: visibility 0s linear 0s, opacity 0.25s 0s, transform 0.25s;
  }
  .trigger-pop-up {
    margin: 10px 0 10px 8px;
    width: 50%;
  }
  @media only screen and (max-width: 749px) {
    .pop-up-content,
    .size-chart-content table {
      width: 100%;
    }
    .size-chart-content th,
    .size-chart-content td {
      padding: 10px;
    }
    .trigger-pop-up {
      width: 100%;
    }
  }
  </style>

หากคุณใช้ธีม Minimal ให้ใช้รหัสต่อไปนี้:

<div class="pop-up-modal">
  <div class="pop-up-content">
    <span class="close-button">&times;</span>
    <span class="size-chart-content">{{ pages.size-chart.content }}</span>
  </div>
</div>

<script>
  const modal = document.querySelector('.pop-up-modal');
  const trigger = document.querySelector('.trigger-pop-up');
  const closeButton = document.querySelector('.close-button');

  function toggleModal() {
    modal.classList.toggle('show-pop-up');
  }

  function windowOnClick(event) {
    if (event.target === modal) {
      toggleModal();
    }
  }

  trigger.addEventListener('click', toggleModal);
  closeButton.addEventListener('click', toggleModal);
  window.addEventListener('click', windowOnClick);
</script>

<style>
  .pop-up-modal {
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    opacity: 0;
    display: none;
    transform: scale(1.1);
    transition: visibility 0s linear 0.25s, opacity 0.25s 0s, transform 0.25s;
    overflow:auto;
  }
  .pop-up-content {
    position: absolute;
    top: 8%;
    left: 50%;
    transform: translate(-50%, 0);
    background-color: white;
    padding: 1rem 1.5rem;
    width: auto;
    border-radius: 0.5rem;
  }
  .pop-up-content table {
    table-layout: auto;
  }
  .close-button {
    float: right;
    width: 1.5rem;
    line-height: 1.5rem;
    text-align: center;
    cursor: pointer;
    border-radius: 0.25rem;
    background-color: lightgray;
  }
  .close-button:hover {
    background-color: darkgray;
  }
  .show-pop-up {
    z-index: 12;
    opacity: 1;
    display: block;
    transform: scale(1);
    transition: visibility 0s linear 0s, opacity 0.25s 0s, transform 0.25s;
  }
  .trigger-pop-up {
    margin: 10px 0 10px 0;
    width: 100%;
  }
  @media only screen and (max-width: 749px) {
    .pop-up-content,
    .size-chart-content table {
      width: 100%;
    }
    .size-chart-content th,
    .size-chart-content td {
      padding: 10px;
    }
  }
  @media only screen and (min-width: 750px) {
    .trigger-pop-up {
      width: 50%;
    }
  }
</style>

เพิ่มส่วนย่อยของตารางขนาดลงใน theme.liquid ของคุณ

1. ในไดเรกทอรีเลย์เอาต์ ให้คลิกเพื่อเปิดไฟล์ theme.liquid ของคุณ
2. ค้นหาแท็กปิด </body> แล้ววางโค้ดต่อไปนี้เหนือแท็กปิด </body>

{% if request.page_type == 'product' %}
    {% if product.options contains 'Size' %}
        {% render 'size-chart' %}
    {% endif %}
{% endif %}

เพิ่มปุ่มตารางขนาด

1. ในไดเรกทอรีส่วน ให้คลิกเพื่อเปิดไฟล์ product-template.liquid หรือเปิดไฟล์ product.liquid หากคุณไม่มีไฟล์ product-template.liquid
2. วางโค้ดต่อไปนี้เหนือปุ่มเพิ่มลงในตะกร้าสินค้า:

{% if product.options contains 'Size' %}
    <a class="trigger-pop-up btn">See Size Chart</a>
{% endif %}

โดยทั่วไปแล้ว ปุ่มเพิ่มลงในตะกร้าสินค้าจะขึ้นต้นด้วย <button type="submit" name="add" หากภาษาที่ใช้ดําเนินการของร้านค้าคุณไม่ใช่ภาษาอังกฤษ ให้แทนที่ See Size Chart ด้วยข้อความที่คุณต้องการใช้

หมายเหตุ

ในธีม Narrative คุณจำเป็นต้องใส่โค้ดข้างต้นภายในไฟล์ product-form.liquid ที่อยู่ในไดเรกทอรีส่วนย่อย

Type

หมายเหตุ

การเลือกประเภทสินค้าจะแสดงตารางขนาดในหน้าสินค้าทุกหน้าที่มีตัวเลือกขนาดและประเภทสินค้าที่ระบุ

การสร้างส่วนย่อยของตารางขนาด

1. ในไดเรกทอรีส่วนย่อย ให้คลิก เพิ่มส่วนย่อยใหม่

2. ตั้งชื่อส่วนย่อย size-chart แล้วคลิกที่ “สร้างส่วนย่อย”:

3. คัดลอกข้อความต่อไปนี้ไปยังส่วนย่อย size-chart ของคุณ:

{% assign chart = product.type | handleize | append: "-size-chart" %} {% unless
pages[chart].empty? or pages[chart].content == blank %}
<div class="pop-up-modal">
  <div class="pop-up-content">
    <span class="close-button">&times;</span>
    <span class="size-chart-content">{{ pages[chart].content }}</span>
  </div>
</div>
{% endunless %}
<script>
  const modal = document.querySelector('.pop-up-modal');
  const trigger = document.querySelector('.trigger-pop-up');
  const closeButton = document.querySelector('.close-button');

  function toggleModal() {
    modal.classList.toggle('show-pop-up');
  }

  function windowOnClick(event) {
    if (event.target === modal) {
      toggleModal();
    }
  }

  trigger.addEventListener('click', toggleModal);
  closeButton.addEventListener('click', toggleModal);
  window.addEventListener('click', windowOnClick);
</script>

<style>
  .pop-up-modal {
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    opacity: 0;
    display: none;
    transform: scale(1.1);
    transition: visibility 0s linear 0.25s, opacity 0.25s 0s, transform 0.25s;
    overflow:auto;
  }
  .pop-up-content {
    position: absolute;
    top: 8%;
    left: 50%;
    transform: translate(-50%, 0);
    background-color: white;
    padding: 1rem 1.5rem;
    width: auto;
    border-radius: 0.5rem;
  }
  .pop-up-content table {
    table-layout: auto;
  }
  .close-button {
    float: right;
    width: 1.5rem;
    line-height: 1.5rem;
    text-align: center;
    cursor: pointer;
    border-radius: 0.25rem;
    background-color: lightgray;
  }
  .close-button:hover {
    background-color: darkgray;
  }
  .show-pop-up {
    z-index: 12;
    opacity: 1;
    display: block;
    transform: scale(1);
    transition: visibility 0s linear 0s, opacity 0.25s 0s, transform 0.25s;
  }
  .trigger-pop-up {
    margin: 10px 0 10px 0;
    width: 100%;
  }
  @media only screen and (max-width: 749px) {
    .pop-up-content,
    .size-chart-content table {
      width: 100%;
    }
    .size-chart-content th,
    .size-chart-content td {
      padding: 10px;
    }
  }
</style>

หมายเหตุ

มีการเปลี่ยนแปลงบางอย่างที่คุณต้องแก้ไขในการจัดรูปแบบ CSS สำหรับธีม Simple และ Minimal

หากคุณกำลังใช้ธีม Simple ให้เปลี่ยนตำแหน่งโค้ด .trigger-pop-up ไปไว้ด้านบนของ </style> แล้วแทนที่ด้วยโค้ดต่อไปนี้:

.trigger-pop-up {
  margin: 10px 0 10px 8px;
  width: 50%;
}
@media only screen and (max-width: 749px) {
  .pop-up-content,
  .size-chart-content table {
    width: 100%;
  }
  .size-chart-content th,
  .size-chart-content td {
    padding: 10px;
  }
  .trigger-pop-up {
    width: 100%;
  }
}

หากคุณกำลังใช้ธีม Minimal ให้เพิ่มโค้ดต่อไปนี้เหนือแท็กปิด </style>:

@media only screen and (min-width: 750px) {
  .trigger-pop-up {
    width: 50%;
  }
}

เพิ่มส่วนย่อยของตารางขนาดลงใน theme.liquid ของคุณ

1. ในไดเรกทอรีเลย์เอาต์ ให้คลิกเพื่อเปิดไฟล์ theme.liquid ของคุณ
2. ค้นหาแท็กปิด </body> แล้ววางโค้ดต่อไปนี้เหนือแท็กปิด </body>

{% if request.page_type == 'product' %}
    {% if product.options contains 'Size' %}
      {% assign chart = product.type | handleize | append: "-size-chart" %}
      {% unless pages[chart].empty? or pages[chart].content == blank %}
        {% render 'size-chart' %}
      {% endunless %}
    {% endif %}
  {% endif %}

เพิ่มปุ่มตารางขนาด

1. ในไดเรกทอรีส่วน ให้คลิกเพื่อเปิดไฟล์ product-template.liquid หรือเปิดไฟล์ product.liquid หากคุณไม่มีไฟล์ product-template.liquid
2. วางโค้ดต่อไปนี้เหนือปุ่มเพิ่มลงในตะกร้าสินค้า:

{% if product.options contains 'Size' %}
      {% assign chart = product.type | handleize | append: "-size-chart" %}
      {% unless pages[chart].empty? or pages[chart].content == blank %}
        <a class="trigger-pop-up btn">See Size Chart</a>
      {% endunless %}
    {% endif %}

โดยทั่วไปแล้ว ปุ่มเพิ่มลงในตะกร้าสินค้าจะขึ้นต้นด้วย <button type="submit" name="add" หากภาษาที่ใช้ดําเนินการของร้านค้าคุณไม่ใช่ภาษาอังกฤษ ให้แทนที่ See Size Chart ด้วยข้อความที่คุณต้องการใช้

หมายเหตุ

ในธีม Narrative คุณจำเป็นต้องใส่โค้ดข้างต้นภายในไฟล์ product-form.liquid ที่อยู่ในไดเรกทอรีส่วนย่อย

Vendor

หมายเหตุ

การเลือกเวนเดอร์สินค้าจะแสดงตารางขนาดในหน้าสินค้าทั้งหมดที่มีตัวเลือกขนาดและเวนเดอร์สินค้าที่ระบุไว้

การสร้างส่วนย่อยของตารางขนาด

1. ในไดเรกทอรีส่วนย่อย ให้คลิก เพิ่มส่วนย่อยใหม่

2. ตั้งชื่อส่วนย่อย size-chart แล้วคลิกที่ “สร้างส่วนย่อย”:

3. คัดลอกข้อความต่อไปนี้ไปยังส่วนย่อย size-chart ของคุณ:

{% assign chart = product.vendor | handleize | append: "-size-chart" %} {%
unless pages[chart].empty? or pages[chart].content == blank %}
<div class="pop-up-modal">
  <div class="pop-up-content">
    <span class="close-button">&times;</span>
    <span class="size-chart-content">{{ pages[chart].content }}</span>
  </div>
</div>
{% endunless %}
<script>
  const modal = document.querySelector('.pop-up-modal');
  const trigger = document.querySelector('.trigger-pop-up');
  const closeButton = document.querySelector('.close-button');

  function toggleModal() {
    modal.classList.toggle('show-pop-up');
  }

  function windowOnClick(event) {
    if (event.target === modal) {
      toggleModal();
    }
  }

  trigger.addEventListener('click', toggleModal);
  closeButton.addEventListener('click', toggleModal);
  window.addEventListener('click', windowOnClick);
</script>

<style>
  .pop-up-modal {
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    opacity: 0;
    display: none;
    transform: scale(1.1);
    transition: visibility 0s linear 0.25s, opacity 0.25s 0s, transform 0.25s;
    overflow:auto;
  }
  .pop-up-content {
    position: absolute;
    top: 8%;
    left: 50%;
    transform: translate(-50%, 0);
    background-color: white;
    padding: 1rem 1.5rem;
    width: auto;
    border-radius: 0.5rem;
  }
  .pop-up-content table {
    table-layout: auto;
  }
  .close-button {
    float: right;
    width: 1.5rem;
    line-height: 1.5rem;
    text-align: center;
    cursor: pointer;
    border-radius: 0.25rem;
    background-color: lightgray;
  }
  .close-button:hover {
    background-color: darkgray;
  }
  .show-pop-up {
    z-index: 12;
    opacity: 1;
    display: block;
    transform: scale(1);
    transition: visibility 0s linear 0s, opacity 0.25s 0s, transform 0.25s;
  }
  .trigger-pop-up {
    margin: 10px 0 10px 0;
    width: 100%;
  }
  @media only screen and (max-width: 749px) {
    .pop-up-content,
    .size-chart-content table {
      width: 100%;
    }
    .size-chart-content th,
    .size-chart-content td {
      padding: 10px;
    }
  }
</style>

หมายเหตุ

มีการเปลี่ยนแปลงบางอย่างที่คุณต้องแก้ไขในการจัดรูปแบบ CSS สำหรับธีม Simple และ Minimal

หากคุณกำลังใช้ธีม Simple ให้เปลี่ยนตำแหน่งโค้ด .trigger-pop-up ไปไว้ด้านบนของ </style> แล้วแทนที่ด้วยโค้ดต่อไปนี้:

.trigger-pop-up {
  margin: 10px 0 10px 8px;
  width: 50%;
}
@media only screen and (max-width: 749px) {
  .pop-up-content,
  .size-chart-content table {
    width: 100%;
  }
  .size-chart-content th,
  .size-chart-content td {
    padding: 10px;
  }
  .trigger-pop-up {
    width: 100%;
  }
}

หากคุณกำลังใช้ธีม Minimal ให้เพิ่มโค้ดต่อไปนี้เหนือแท็กปิด </style>:

@media only screen and (min-width: 750px) {
  .trigger-pop-up {
    width: 50%;
  }
}

เพิ่มส่วนย่อยของตารางขนาดลงใน theme.liquid ของคุณ

1. ในไดเรกทอรีเลย์เอาต์ ให้คลิกเพื่อเปิดไฟล์ theme.liquid ของคุณ
2. ค้นหาแท็กปิด </body> แล้ววางโค้ดต่อไปนี้เหนือแท็กปิด </body>

{% if request.page_type == 'product' %}
    {% if product.options contains 'Size' %}
      {% assign chart = product.vendor | handleize | append: "-size-chart" %}
      {% unless pages[chart].empty? or pages[chart].content == blank %}
        {% render 'size-chart' %}
      {% endunless %}
    {% endif %}
  {% endif %}

เพิ่มปุ่มตารางขนาด

1. ในไดเรกทอรีส่วน ให้คลิกเพื่อเปิดไฟล์ product-template.liquid หรือเปิดไฟล์ product.liquid หากคุณไม่มีไฟล์ product-template.liquid
2. วางโค้ดต่อไปนี้เหนือปุ่มเพิ่มลงในตะกร้าสินค้า:

{% if product.options contains 'Size' %}
      {% assign chart = product.vendor | handleize | append: "-size-chart" %}
      {% unless pages[chart].empty? or pages[chart].content == blank %}
        <a class="trigger-pop-up btn">See Size Chart</a>
      {% endunless %}
    {% endif %}

โดยทั่วไปแล้ว ปุ่มเพิ่มลงในตะกร้าสินค้าจะขึ้นต้นด้วย <button type="submit" name="add" หากภาษาที่ใช้ดําเนินการของร้านค้าคุณไม่ใช่ภาษาอังกฤษ ให้แทนที่ See Size Chart ด้วยข้อความที่คุณต้องการใช้

หมายเหตุ

ในธีม Narrative คุณจำเป็นต้องใส่โค้ดข้างต้นภายในไฟล์ product-form.liquid ที่อยู่ในไดเรกทอรีส่วนย่อย