แสดงคำแนะนำสินค้าบนหน้าสินค้า
บทแนะนำการใช้งานนี้จะอธิบายวิธีเพิ่มคำแนะนำสินค้าไปยังหน้าสินค้าของคุณในธีม Debut หากต้องการดูข้อมูลเพิ่มเติมเกี่ยวกับวิธีการทำงานของคำแนะนำสินค้า ให้ดูที่การแสดงคำแนะนำสินค้าบนหน้าสินค้า
ในหน้านี้
ขั้นตอนที่ 1: สร้างส่วน product-recommendations.liquid
เดสก์ท็อป
- ในส่วนผู้ดูแล 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>
หากคุณไม่ต้องการแสดงภาพเคลื่อนไหวการโหลด ให้ใช้โค้ดนี้แทน:
{% 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
iPhone
- จากแอป 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>
หากคุณไม่ต้องการแสดงภาพเคลื่อนไหวการโหลด ให้ใช้โค้ดนี้แทน:
{% 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
Android
- จากแอป 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>
หากคุณไม่ต้องการแสดงภาพเคลื่อนไหวการโหลด ให้ใช้โค้ดนี้แทน:
{% 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);
}
}
- คลิกที่ “บันทึก”