Shopify / Liquid - 将产品推荐插入购物车页面

Question

我想在我的 shopify 购物车页面上添加产品推荐。

我补充了：{% section 'product-recommendations' %}cart.liquid文件中。

此文件包含：

{%- if section.settings.show_product_recommendations -%}
{%- if recommendations.performed -%}
{%- if recommendations.products_count > 0 -%}
<div class="product-recommendations__inner">
{%- if section.settings.heading != blank -%}

<div class="section-header">
<h2>{{ section.settings.heading | escape }}</h2>
</div>
{%- endif -%}
<ul data-slides="8" id='product-slider' class="grid grid--uniform grid--view-items product-slider">
{%- for product in recommendations.products -%}
<li class="grid__item small--one-half medium-up--one-quarter">
{% include 'product-card-grid', max_height: 250, product: product, show_vendor: section.settings.show_vendor %}
</li>
{%- endfor -%}
</ul>
</div>
{%- endif -%}
{%- else  -%}
<div class="page-width recommendations-container" data-base-url="{{ routes.product_recommendations_url }}" data-product-id="{{ product.id }}" data-section-id="{{ section.id }}" data-section-type="product-recommendations"></div>
{%- endif -%}
{%- endif -%}

它入到页面中(我可以看到容器(，但除了容器边距/填充之外，实际上没有任何呈现。我怀疑这是因为我不在产品页面上。

我将如何在购物车页面上完成这项工作？

Answer 1

它不起作用的原因与您得出的结论相同，它不是产品页面。但是，给定产品ID，我们可以获得任何产品的推荐。用于推荐的 Shopify 文档对象状态

仅当建议对象在 通过HTTP请求呈现的主题部分？section_id=&product_id=。section_id是建议对象所在的部分的 ID 已使用，product_id是您要显示的产品的 ID 推荐产品。要确定base_url，请使用routes.product_recommendations_url属性。使用路由对象 而不是硬编码的 URL 可确保产品推荐 在正确的区域设置中加载。

因此，与产品对象全局可用的 Shopify 产品页面不同，您必须从 Shopify 购物车项目传递产品 ID。为此，请添加一个名为产品推荐购物车的新部分，并将其包含在购物车模板中。

{% comment %}
The contents of the cart.liquid template can be found in /sections/cart-template.liquid
{% endcomment %}
{% section 'cart-template' %}
{% section 'product-recommendations-cart' %}

然后在产品推荐购物车部分内

{%- if section.settings.show_product_recommendations and cart.item_count > 0 -%}
{%- for item in cart.items -%}
{%- assign product_rec = item.product -%}
{%- endfor -%}
{%- if recommendations.performed -%}
{%- if recommendations.products_count > 0 -%}
<div class="product-recommendations__inner">
{%- if section.settings.heading != blank -%}
<div class="section-header text-center">
<h2>{{ section.settings.heading | escape }}</h2>
</div>
{%- endif -%}
<ul class="grid grid--uniform grid--view-items">
{%- for product in recommendations.products -%}

{%- assign display = true -%}

{%- for item in cart.items -%}
{%- if item.product.id == product.id -%}
{%- assign display = false -%}
{%- endif -%}
{%- endfor -%}

{%- if display == true -%}
<li class="grid__item small--one-half medium-up--one-quarter">
{% include 'product-card-grid', max_height: 250, product: product, show_vendor: section.settings.show_vendor %}
</li>
{%- endif -%}

{%- endfor -%}
</ul>
</div>
{%- endif -%}
{%- else  -%}
<div class="page-width" data-base-url="{{ routes.product_recommendations_url }}" data-product-id="{{ product_rec.id }}" data-section-id="{{ section.id }}" data-section-type="product-recommendations"></div>
{%- endif -%}
{%- endif -%}
{% schema %}
{
"name": {
"en": "Product Recommend Cart"
},
"settings": [
{
"type": "checkbox",
"id": "show_product_recommendations",
"label": {
"en": "Show dynamic recommendations"
},
"info": {      
"en": "Dynamic recommendations change and improve with time. [Learn more](https://help.shopify.com/en/themes/development/recommended-products)"
},
"default": true
},
{
"type": "text",
"id": "heading",
"label": {
"en": "Heading"
},
"default": {
"en": "You may also like"
}
},
{
"type": "checkbox",
"id": "show_vendor",
"label": {
"en": "Show vendor"
},
"default": false
}
]
}
{% endschema %}

在这里，我添加了条件，仅当购物车有一些项目时才显示，并使用购物车中的最后一个产品来获取推荐。

根据您的评论，我添加了跳过购物车中已有产品的条件。您可以使用购物车中的一串产品 ID 来改善这一点，而不是一次又一次地循环所有购物车项目。

如果需要更多控制，请将产品建议与产品建议 API 产品响应结合使用。

Answer 2

jQuery.getJSON("/recommendations/products.json?product_id=" + item.product_id + "&limit=6&section_id=custom-cart", function(response) {
var recommendedProducts = response.products;
$.each(recommendedProducts, function(index,recommended){
console.log(recommended)
});
});

您还可以使用 jQuery 创建购物车推荐。

在这里，我添加了jQuery代码。在此 ajax 调用响应中，您将获得推荐产品 JSON。

您可以使用购物车项目 ID 代替item.product_id，而不是自定义购物车，您可以在创建 html 的位置添加部分名称。