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

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

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

ขั้นตอนที่ 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 แล้วหรือยัง

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