แสดงคำแนะนำสินค้าบนหน้าสินค้า

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

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

หมายเหตุ: ธีม Shopify เวอร์ชันล่าสุดต่อไปนี้ประกอบด้วยคำแนะนำสินค้าตามค่าเริ่มต้น:

  • Boundless
  • Brooklyn
  • Debut
  • มินิมอล
  • Narrative
  • Simple
  • Venture

หากคุณกำลังใช้เวอร์ชันที่เก่ากว่าของธีมใดธีมหนึ่งนี้ คุณสามารถแสดงคำแนะนำสินค้าหลังจากที่คุณอัปเดตธีมแทนที่จะปรับแต่งโค้ดได้

ขั้นตอนที่ 1: สร้างส่วน product-recommendations.liquid

  1. ในส่วน Shopify admin ให้ไปที่ร้านค้าออนไลน์ > ธีม

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

  1. จากแอป Shopify ให้แตะ ร้านค้า

  2. ในส่วนช่องทางการขาย ให้แตะ ร้านค้าออนไลน์

  3. แตะ จัดการธีม

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

  1. จากแอป Shopify ให้แตะ ร้านค้า

  2. ในส่วนช่องทางการขาย ให้แตะ ร้านค้าออนไลน์

  3. แตะ จัดการธีม

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

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

  2. ตั้งชื่อส่วนใหม่ product-recommendations แล้วคลิกที่ “สร้างส่วน”

  3. แทนที่เนื้อหาทั้งหมดด้วยโค้ดด้านล่าง:

{% assign limit = 4 %}
<div class="page-width product-recommendations" data-base-url="{{ routes.product_recommendations_url }}" data-product-id="{{ product.id }}" data-limit="{{ limit }}" data-section-id="{{ section.id }}" data-section-type="product-recommendations" data-intent="related">
  {% if recommendations.performed %}
    {% if recommendations.products_count > 0 %}
      <div class="section-header text-center">
        {% if recommendations.intent = 'related' %}
          <h2> You may also like</h2>
        {% elsif recommendations.intent = 'complementary' %}
          <h2>Pair it with</h2>
        {% endif %}    
      </div>
      <ul class="grid grid--uniform grid--view-items">
        {% for product in recommendations.products %}
          <li class="grid__item small--one-half medium-up--one-quarter">
            {% include 'product-card-grid', max_height: 250 %}
          </li>
        {% endfor %}
      </ul>
    {% endif %}
  {% else %}
    <div class="product-recommendations__loading-dots">
      <div class="product-recommendations__loading-dot"></div>
      <div class="product-recommendations__loading-dot"></div>
      <div class="product-recommendations__loading-dot"></div>
    </div>
  {% endif %}
</div>
  1. คลิกที่ “บันทึก”

เมื่อแสดงส่วนพร้อมกับหน้าสินค้า ระบบจะแสดง recommendations.performed เป็น false จากนั้น HTML ที่สร้างขึ้นจะแสดงภาพเคลื่อนไหวการโหลด:

<div class="page-width product-recommendations" data-base-url="/recommendations/products" data-product-id="123" data-limit="4" data-section-id="product-recommendations" data-section-type="product-recommendations" data-intent="related">
  <div class="product-recommendations__loading-dots">
    <div class="product-recommendations__loading-dot"></div>
    <div class="product-recommendations__loading-dot"></div>
    <div class="product-recommendations__loading-dot"></div>
  </div>
</div>

หมายเหตุ: คุณต้องโหลดสินค้าที่แนะนำแบบอะซิงโครนัสโดยใช้ JavaScript โดยคุณจะโหลดได้ในขั้นตอนที่ 3: แก้ไขไฟล์ theme.js เพื่อโหลดคำแนะนำแบบอะซิงโครนัส

หากคุณไม่ต้องการแสดงภาพเคลื่อนไหวการโหลด ให้ใช้โค้ดนี้แทน:

{% assign limit = 4 %}
<div class="page-width product-recommendations" data-base-url="{{ routes.product_recommendations_url }}" data-product-id="{{ product.id }}" data-limit="{{ limit }}" data-section-id="{{ section.id }}" data-section-type="product-recommendations" data-intent="related">
  {% if recommendations.products_count > 0 %}
    <div class="section-header text-center">
      {% if recommendations.intent = 'related' %}
          <h2> You may also like</h2>
      {% elsif recommendations.intent = 'complementary' %}
          <h2>Pair it with</h2>
        {% endif %}
    </div>
    <ul class="grid grid--uniform grid--view-items">
      {% for product in recommendations.products %}
        <li class="grid__item small--one-half medium-up--one-quarter">
          {% include 'product-card-grid', max_height: 250 %}
        </li>
      {% endfor %}
    </ul>
  {% endif %}
</div>

เมื่อแสดงส่วนด้านบนพร้อมกับหน้าสินค้าของคุณ HTML ที่สร้างขึ้นจะเป็นองค์ประกอบ div ที่ไม่มีเนื้อหา:

<div class="page-width product-recommendations" data-base-url="/recommendations/products" data-product-id="123" data-limit="4" data-section-id="product-recommendations" data-section-type="product-recommendations" data-intent="related">

หากผู้ใช้ใช้ภาษาท้องถิ่นอื่น ภาษานั้นจะรวมอยู่ใน data-base-url ของ div ตัวอย่างเช่น /fr/recommendations/products

ขั้นตอนที่ 2: ใส่ส่วนในเทมเพลต product.liquid ของคุณ

หากต้องการแสดงคำแนะนำสินค้าที่ด้านล่างของหน้าสินค้า ให้ใส่ส่วนที่ด้านล่างของไฟล์ templates/product.liquid

  1. ในไดเรกทอรีเทมเพลต ให้เปิดไฟล์ product.liquid

  2. เพิ่มโค้ดต่อไปนี้ที่ด้านล่างของไฟล์:

{% section 'product-recommendations' %}
  1. คลิกที่ “บันทึก”

ขั้นตอนที่ 3: แก้ไขไฟล์ theme.js ของคุณเพื่อโหลดคำแนะนำแบบอะซิงโครนัส

คุณต้องโหลดคำแนะนำลงในคอนเทนเนอร์เปล่าที่ส่วนได้สร้างในหน้าสินค้า ใช้ JavaScript เพื่อส่งคำขอ HTTP GET <base_url>?section_id=<section_id>&product_id=<product_id>

  1. ในไดเรกทอรีองค์ประกอบ ให้เปิดไฟล์ theme.js

  2. ค้นหาบรรทัดนี้ของโค้ด:

sections.register('hero-section', theme.HeroSection);
  1. ด้านล่างบรรทัดนั้น ให้เพิ่มโค้ดนี้: 
sections.register('product-recommendations', theme.ProductRecommendations);
  1. เพิ่มโค้ดต่อไปนี้ที่ด้านล่างของไฟล์: 
theme.ProductRecommendations = (function() {
  function ProductRecommendations(container) {
    var $container = (this.$container = $(container));
    var baseUrl = $container.data('baseUrl');
    var productId = $container.data('productId');
    var limit = $container.data('limit');
    var intent = $container.data('intent');
    var productRecommendationsUrlAndContainerClass = baseUrl + '?section_id=product-recommendations&limit=' + limit +
      '&product_id=' + productId + '&intent='+ intent +
      ' .product-recommendations';
    $container.parent().load(productRecommendationsUrlAndContainerClass);
  }
  return ProductRecommendations;
})();
  1. คลิกที่ “บันทึก”

ขั้นตอนที่ 4: แก้ไขไฟล์ theme.scss.liquid ของคุณเพื่อสร้างภาพเคลื่อนไหวการโหลด (ไม่บังคับ)

หากคุณใช้ส่วนย่อยที่แสดงภาพเคลื่อนไหวการโหลดภายในส่วนคำแนะนำสินค้าของคุณ ให้เพิ่มโค้ดต่อไปนี้ที่ด้านล่างไฟล์ assets/theme.scss.liquid

  1. ในไดเรกทอรีองค์ประกอบ ให้เปิดไฟล์ theme.scss.liquid

  2. เพิ่มโค้ดนี้ที่ด้านล่างของไฟล์:

.product-recommendations {
  padding-top: $section-spacing-small;
  padding-bottom: $section-spacing-small;

  @include media-query($medium-up) {
    padding-top: $section-spacing;
    padding-bottom: $section-spacing;
  }
}
.product-recommendations__loading-dots {
  height: 350px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.product-recommendations__loading-dot {
  animation: dot-keyframes 1.5s infinite ease-in-out;
  background-color: $color-text;
  border-radius: 10px;
  display: inline-block;
  height: 10px;
  width: 10px;
  margin: 0 3px;
  &:nth-child(2) {
    animation-delay: 0.5s;
  }
  &:nth-child(3) {
    animation-delay: 1s;
  }
}
@keyframes dot-keyframes {
  0% {
    opacity: 0.4;
    transform: scale(1, 1);
  }
  50% {
    opacity: 1;
    transform: scale(1.2, 1.2);
  }
  100% {
    opacity: 0.4;
    transform: scale(1, 1);
  }
}
  1. คลิกที่ “บันทึก”

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

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