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 Docs for Recommendations object 状态

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

因此，与 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.