แสดงคำแนะนำสินค้าบนหน้าสินค้า
บทแนะนำการใช้งานนี้จะอธิบายวิธีเพิ่มคำแนะนำสินค้าไปยังหน้าสินค้าของคุณในธีม Debut หากต้องการดูข้อมูลเพิ่มเติมเกี่ยวกับวิธีการทำงานของคำแนะนำสินค้า ให้ดูที่การแสดงคำแนะนำสินค้าบนหน้าสินค้า
หมายเหตุ: ธีม Shopify เวอร์ชันล่าสุดต่อไปนี้ประกอบด้วยคำแนะนำสินค้าตามค่าเริ่มต้น:
- Boundless
- Brooklyn
- Debut
- มินิมอล
- Narrative
- Simple
- Venture
หากคุณกำลังใช้เวอร์ชันที่เก่ากว่าของธีมใดธีมหนึ่งนี้ คุณสามารถแสดงคำแนะนำสินค้าหลังจากที่คุณอัปเดตธีมแทนที่จะปรับแต่งโค้ดได้
ขั้นตอนที่ 1: สร้างส่วน product-recommendations.liquid
ในส่วน Shopify admin ให้ไปที่ร้านค้าออนไลน์ > ธีม
ค้นหาธีมที่คุณต้องการแก้ไข แล้วคลิกปุ่ม ... เพื่อเปิดเมนูดำเนินการ จากนั้นคลิกแก้ไขโค้ด
จากแอป Shopify ให้แตะ ร้านค้า
ในส่วนช่องทางการขาย ให้แตะ ร้านค้าออนไลน์
แตะ จัดการธีม
ค้นหาธีมที่คุณต้องการแก้ไข แล้วคลิกปุ่ม ... เพื่อเปิดเมนูดำเนินการ จากนั้นคลิกแก้ไขโค้ด
จากแอป Shopify ให้แตะ ร้านค้า
ในส่วนช่องทางการขาย ให้แตะ ร้านค้าออนไลน์
แตะ จัดการธีม
ค้นหาธีมที่คุณต้องการแก้ไข แล้วคลิกปุ่ม ... เพื่อเปิดเมนูดำเนินการ จากนั้นคลิกแก้ไขโค้ด
ในไดเรกทอรีส่วน ให้คลิก “เพิ่มส่วนใหม่”
ตั้งชื่อส่วนใหม่
product-recommendations
แล้วคลิกที่ “สร้างส่วน”แทนที่เนื้อหาทั้งหมดด้วยโค้ดด้านล่าง:
{% 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>
- คลิกที่ “บันทึก”
เมื่อแสดงส่วนพร้อมกับหน้าสินค้า ระบบจะแสดง 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
ในไดเรกทอรีเทมเพลต ให้เปิดไฟล์ product.liquid
เพิ่มโค้ดต่อไปนี้ที่ด้านล่างของไฟล์:
{% section 'product-recommendations' %}
- คลิกที่ “บันทึก”
ขั้นตอนที่ 3: แก้ไขไฟล์ theme.js
ของคุณเพื่อโหลดคำแนะนำแบบอะซิงโครนัส
คุณต้องโหลดคำแนะนำลงในคอนเทนเนอร์เปล่าที่ส่วนได้สร้างในหน้าสินค้า ใช้ JavaScript เพื่อส่งคำขอ HTTP GET <base_url>?section_id=<section_id>&product_id=<product_id>
ในไดเรกทอรีองค์ประกอบ ให้เปิดไฟล์ theme.js
ค้นหาบรรทัดนี้ของโค้ด:
sections.register('hero-section', theme.HeroSection);
- ด้านล่างบรรทัดนั้น ให้เพิ่มโค้ดนี้:
sections.register('product-recommendations', theme.ProductRecommendations);
- เพิ่มโค้ดต่อไปนี้ที่ด้านล่างของไฟล์:
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;
})();
- คลิกที่ “บันทึก”
ขั้นตอนที่ 4: แก้ไขไฟล์ theme.scss.liquid
ของคุณเพื่อสร้างภาพเคลื่อนไหวการโหลด (ไม่บังคับ)
หากคุณใช้ส่วนย่อยที่แสดงภาพเคลื่อนไหวการโหลดภายในส่วนคำแนะนำสินค้าของคุณ ให้เพิ่มโค้ดต่อไปนี้ที่ด้านล่างไฟล์ assets/theme.scss.liquid
ในไดเรกทอรีองค์ประกอบ ให้เปิดไฟล์ theme.scss.liquid
เพิ่มโค้ดนี้ที่ด้านล่างของไฟล์:
.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);
}
}
- คลิกที่ “บันทึก”