在產品頁面上顯示產品推薦
此頁面列印時間為 Apr 20, 2024。如須最新版本，請至 https://help.shopify.com/zh-TW/manual/online-store/themes/themes-by-shopify/vintage-themes/customizing-vintage-themes/show-recommendations。
此教學課程說明如何在 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">如果使用者使用替代語言代碼，則該語言代碼將包含在 div 的 data-base-url 中 (例如 /fr/recommendations/products)。
- 在 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">如果使用者使用替代語言代碼，則該語言代碼將包含在 div 的 data-base-url 中 (例如 /fr/recommendations/products)。
- 在 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">如果使用者使用替代語言代碼，則該語言代碼將包含在 div 的 data-base-url 中 (例如 /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);
}
}- 點擊「儲存」。