在产品页面上显示产品推荐
已于 Mar 22, 2023 打印了此页面。若要查看当前版本，请访问 https://help.shopify.com/zh-CN/manual/online-store/themes/themes-by-shopify/vintage-themes/customizing-vintage-themes/show-recommendations。
本教程介绍如何在 Debut 模板中向产品页面添加产品推荐。若要详细了解产品推荐的工作方式，请参阅在产品页面上显示产品推荐。
备注：默认情况下，以下 Shopify 模板的最新版本中包含产品推荐：
- Boundless
- Brooklyn
- Debut
- Minimal
- Narrative
- Simple
- Venture
如果您使用的是上方某个模板的旧版本，则您可以在更新模板后显示产品推荐，而无需自定义模板代码。
步骤 1：创建 product-recommendations.liquid 分区
在 Shopify 后台中，转到在线商店 > 模板。
找到要编辑的模板，点击 ... 按钮打开操作菜单，然后点击编辑代码。
在 Shopify 应用中，轻触商店。
在销售渠道部分中，轻触在线商店。
轻触 Manage themes（管理模板）。
找到要编辑的模板，点击 ... 按钮打开操作菜单，然后点击编辑代码。
在 Shopify 应用中，轻触商店。
在销售渠道部分中，轻触在线商店。
轻触 Manage themes（管理模板）。
找到要编辑的模板，点击 ... 按钮打开操作菜单，然后点击编辑代码。
在 Sections 目录中，点击添加新分区。
将新分区命名为
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">如果用户使用的是备用区域设置，则区域设置将包含在 div 的 data-base-url 中。例如，/fr/recommendations/products。
步骤 2：在 product.liquid 模板中包含该分区
若要在产品页面底部显示产品推荐，请在 templates/product.liquid 文件底部包含该分区：
在 Templates 目录中，打开 product.liquid 文件。
在文件底部添加以下代码：
{% section 'product-recommendations' %}- 点击保存。
步骤 3：编辑您的 theme.js 文件以便以异步方式加载推荐
您需要将推荐加载到该分区在产品页面上生成的空容器中。使用 JavaScript 向 <base_url>?section_id=<section_id>&product_id=<product_id> 发出 HTTP GET 请求。
在 Assets 目录中，打开 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 文件底部添加以下代码：
在 Assets 目录中，打开 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);
}
}- 点击保存。