在 liquid 中使用 localStorage

Question

我正在为 Shopify 构建一个应用程序，遇到了一个我目前无法解决的问题。语境：我在 localStorage

的 state.products 中保存了一系列产品

state: {
   products: [ productId1, productId2, productId3]
}

如果产品的 ID（我存储在 product Shopify 对象 https://shopify.dev/api/liquid/objects/product 中）在 products 数组中，那么我想呈现一个图标，否则什么都没有渲染

这个技巧不起作用（我猜是因为 liquid 在服务器端工作）：

{% assign state = JSON.parse(localStorage.getItem('state')) %}
{% products = state.products %}
{% if products contains {{product.id}} %}
   <svg />
{% endif %}

所以我的问题是，如何将存储在 localStorage 中的数组分配给 liquid 变量？

Answer 1

简答：不，这不可能

使用 Shopify 网站时首先要记住的是 Liquid 是一种模板语言，而不是脚本语言。当访问者请求您商店的页面时，Shopify 的服务器将 Liquid 命令解释为 assemble 最终文档，该文档通过 Internet 发送到客户的浏览器，其中没有任何模板标记 - 最终结果只是一个普通页面HTML、Javascript 或 CSS。

将页面放在一起的服务器不知道任何给定购物者的 localStorage 或 Javascript 上下文中存在的任何其他内容，因此在构建要发送的页面时不能使用这些值中的任何一个给用户。

我们可以做什么？

您拥有 create/display 使用 Javascript SVG 所需的一切，无需依赖 Liquid 来打印元素！

由于您要存储一系列产品 ID，因此您可以在产品页面上执行类似这样的操作：

<script>
  const currentProductId = {{ product.id | json }};
  const productArray = JSON.parse(localStorage.getItem('state'));

  if(productArray.includes(currentProductId)){
    // Code to create or display the SVG in question
  }
</script>

在 liquid 中使用 localStorage

Using localStorage in liquid

liquid

local-storage

shopify

简答：不，这不可能

我们可以做什么？