修改 Shopify 搜索 - 显示产品变体，正确分页答案

【问题标题】：Modify Shopify search - display product variants, correct pagination修改 Shopify 搜索 - 显示产品变体，正确分页
【发布时间】：2020-06-20 13:11:55
【问题描述】：

我正在尝试找到以下方法：我正在修改一个液体模板，以便在搜索结果页面上也包含找到的产品变体。但是当我在搜索结果中可见产品/产品变体的数量变化很大时，会导致糟糕的用户体验。

我们有 28 个项目的分页中断。但这只会影响它已经展示的产品数量。因为我现在也展示了产品的变体，所以页面上有大量的项目。如果我将分页限制减少到 - 比如说 4 - 我最终会得到正好有 4 个条目的页面和假设有 500 个条目的页面，具体取决于给定搜索词的匹配变体。

这是总体目标： 在搜索结果页面中显示产品变体以及默认产品，并且仍然具有正确的分页，每页显示固定数量的产品/变体/搜索结果项。

我的做法是这样的：

{% capture total_results %}
    {%- for result in search.results -%}
        {%- case result.object_type -%}
            {%- when 'product' -%}
                // Go over all the variants and match to the search terms
                // Include product-grid-item template in case it matches
            {%- when 'article' -%}
            {%- when 'page' -%}
        {%- endcase -%}
        <!-- Divider: #### -->
    {%- endfor -%}
{% endcapture %}

{% comment %}Break the captured string at the divider string into an array{% endcomment %}
{%- assign total_results = total_resuls | split: "<!-- Divider: #### -->" -%}

<div class="page__description page__description--centered">
    <span>{{ 'search.general.results_count' | t: count: total_results.size, terms: search_terms }}</span>
</div>

{% paginate total_result by 28 %}
    {% for result in total_resuls %}
        {{ result }}
    {% endfor %}
{% endpaginate %}

我在前端收到以下液体错误：Array 'total_results' is not paginateable.

有没有办法让它分页？

或者有没有办法直接修改 search.results 集合，以便分页不仅考虑 shopify 搜索的结果数量，还考虑变化？

顺便说一句，我们这样做的原因是，shopify 似乎确实会根据只有变体匹配的信息来查找产品。但在这种情况下，它只链接到产品，用户需要再次手动转到正确的变体，这是非常糟糕的用户体验。

即使用户直接通过 ID 搜索，他们也会链接到正常的产品页面。我们希望它们直接链接到正确的变体，这也是该产品首先被包含在搜索结果中的原因。

任何帮助将不胜感激。或有关我如何实现这一目标的指针。

【问题讨论】：

标签： shopify liquid shopify-template liquid-layout

【解决方案1】：

也许您可以尝试使用此应用 https://apps.shopify.com/ultimate-search-and-filter-1 在收藏和搜索结果页面上将变体显示为单独的产品，而不会影响 Shopify 中的分页。

【讨论】：

【解决方案2】：

很遗憾，无法对数组进行分页。 paginate 标记只能与 search.results、collection.products 一起用于某些其他预定义对象。

您尝试实现它的方式对我来说似乎是不可能的。但我想到了一些可能对你有帮助的想法：

选项 1. 使用 search.terms 对象构建指向正确变体的链接。主要问题是 Shopify 搜索结果

产品链接，用户需要手动转到正确的变体

我只是建议按原样显示搜索结果，但应用您的逻辑

// 遍历所有变体并匹配搜索词

向搜索结果 URL 添加?variant_id=xxx 属性。然后，一旦客户进入产品页面，将根据此查询参数选择变体。当客户按变体 ID 搜索时，此逻辑也非常适合。

选项 2. 构建自定义搜索。这需要更多的努力，并且意味着根本不使用 Shopify 搜索。您需要同步商店产品并根据搜索表单中的查询从数据库中返回分页结果。此选项可让您灵活地显示产品结果。

如果您只想根据用户的搜索查询选择正确的变体，我会选择选项 1。但是，如果您有多个匹配的变体并且您想要单独显示所有这些变体或者能够将客户重定向到结果页面中的每个匹配变体，则它可能不起作用。

附：只是提示：您使用 {%- when 'product' -%} 块仅过滤产品结果，但您可以在查询中使用 ?type=product 仅搜索产品实体，忽略文章和页面。

【讨论】：