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 -%}

它被插入到页面中（我可以看到容器），但除了容器 margin/padding 之外没有任何实际呈现。我怀疑是因为我不在产品页面上。

我如何在购物车页面上进行这项工作？

Answer 1

它不起作用的原因与您得出的结论相同，即它不是产品页面。但是，根据产品 ID，我们可以获得任何产品的推荐。 Shopify Docs for Recommendations object 状态

The recommendations object returns products only if it's used in a theme section that's rendered through an HTTP request to <base_url>?section_id=<section_id>&product_id=<product_id>. section_id is the ID of the section where the recommendations object is being used, and product_id is the ID of the product you want to show recommended products for. To determine the base_url, use the routes.product_recommendations_url attribute. Using the routes object rather than a hardcoded URL ensures that the product recommendations load in the correct locale.

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

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

{% section 'cart-template' %}
{% section 'product-recommendations-cart' %}

然后在 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 来改进这一点，而不是一次又一次地循环所有购物车商品。

如果您需要更多控制，请使用 Product recommendations with the Product Recommendations API products response.

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

Shopify / Liquid - inserting product recommendations onto cart page

javascript

liquid

shopify