使用 Liquid 根据页面显示不同的 .js 嵌入 URL

Question

我正在尝试让 Shopify 产品系列页面根据当前页面的 URL 在页面的特定部分显示不同的 .js 嵌入。

这可以使用 {% if page.url == %} 来完成吗？如果可以，我如何获得页面 URL 的变体和特定的嵌入代码？

页面 URL 如下所示：

https://www.example.com/collections/technology/technology-connected-home

嵌入代码如下所示：

<script type="text/javascript" src="https://apps.example.com/app/js/18218989163.js"></script>```

Answer 1

每个 Shopify 商店都有不同类型的页面：索引（也称为主页）、产品、产品系列、页面、博客、文章和购物车。这里是full list的页面类型。

因此，此 page.url 仅适用于 page 类型的页面对象，对于所有其他类型，您需要使用正确的页面对象来获取 url:

collection.url
product.url
等...

在您的情况下，我建议使用 case/when，将您的逻辑添加到片段中，然后 render 将其添加到 theme.liquid。

这是一个例子：

{% if request.page_type == 'page' %}
  {% case page.url %}
    {% when '/pages/about-us' %}
      {{ 'pages__about-us.js' | script_tag }}
    {% when '/pages/contact-us' %}
      {{ 'pages__contact-us.js' | script_tag }}
    {% else %}
      {{ 'pages__generic.js' | script_tag }}
  {% endcase %}
{% endif %}

ref

您必须在创建 case/when 之前检查 request.page_type，或者另一种方法是检查代码段顶部的类型，例如：

{% comment %} Set page object type {% endcomment %}
{% case request.page_type %}
  {% when 'page' %}
    {% assign page_object = page %}
  {% when 'collection' %}
    {% assign page_object = collection %}
  {% when 'product' %}
    {% assign page_object = product %}
{% endcase %}

{% comment %} Load JS based on page URL{% endcomment %}
{% case page_object.url %}
  {% when '/pages/about-us' %}
    {{ 'pages__about-us.js' | script_tag }}
  {% when '/pages/contact-us' %}
    {{ 'pages__contact-us.js' | script_tag }}
  {% else %}
    {{ 'pages__generic.js' | script_tag }}
{% endcase %}

这不是一个万无一失的解决方案，但它应该足以让您在此基础上进行构建。

祝你好运！

Answer 2

我建议使用 page.handle 并确定句柄。我不相信 page.url 会做你需要的事

Answer 3

您也可以试试这个，因为 handle 永远无法更改。

{% case page.handle %}
    {% when 'about-us' %}
      {{ 'pages_about-us.js' | script_tag }}
    {% when 'contact-us' %}
      {{ 'pages_contact-us.js' | script_tag }}
    {% else %}
      {{ 'pages_generic.js' | script_tag }}
  {% endcase %}

使用 Liquid 根据页面显示不同的 .js 嵌入 URL

Using Liquid to display different .js embeds depending on page URL

liquid

shopify