将 javascript 函数输出分配给 liquid 变量

Question

我正在尝试验证图像 URL 是否存在于 javascript 中。所以我在 javascript 中添加了这段代码，它接受 URL 和 returns 的 http 状态代码。

function imageExists(image_url){
    var http = new XMLHttpRequest();
    http.open('HEAD', image_url, false);
    http.send();
    return http.status != 404;
}

在液体模板中，我想检查图像 URL 在显示有点像这样之前是否存在

<div class="variant-cat-attributes">
  {% assign tags = product.metafields.product_meta.tag | split: "," %}
  {% for tag in tags %}
      <div class="item">
      {% capture tag_slug %}{{ tag | replace: " ", "_"}}{% endcapture %}
      {% assign img_png = 'tag' | append: '-' | append: tag_slug | append: '.png'%}
      {% capture png_exists %}<script>imageExists({{ img_png }})</script>{% endcapture %}
      {% if png_exists%}
        <img src="{{ img_png | file_img_url: '32x32' }}" />
      {% else %}
        {% assign img_jpg = 'tag' | append: '-' | append: tag_slug | append: '.jpg'%}
        {% capture jpg_exists %}<script>imageExists({{ img_jpg }})</script>{% endcapture %}
        {% if jpg_exists%}
          <img src="{{ img_png | file_img_url: '32x32' }}" />
        {% else %}
          {% assign img_default = 'tag' | append: '-' | append: 'default' | append: '.png'%}
          <img src="{{ img_default | file_img_url: '32x32' }}" />
        {% endif %}
      {% endif %}
      <p class="item-name">{{ tag | capitalize }}</p></div>
 {% endfor %}
</div>

我刚刚开始了解液体，所以我不知道这样说是否正确。但是这段代码发生了什么是脚本标签被当作一个字符串并且其中的代码不是运行

png_exists = imageExists({{ img_png }})

我该如何解决这个问题？

Answer 1

你是混合匹配 JS 和 Liquid，如果你只传递 liquid 内容就可以了。

目前 liquid 看到你的代码是这样的：

{% capture png_exists %}<script>imageExists({{ img_png }})</script>{% endcapture %}

png_exists => <script>imageExists(http://asset_img_url.jpg)</script>

您不能执行 Javascript 代码并期望 liquid 知道它，Javascript 在 liquid 之后执行，所以 liquid 完成它是合乎逻辑的并且 Javascript 将运行之后就是代码了。

所以你不能在 liquid 中使用 javascript 功能。

将 javascript 函数输出分配给 liquid 变量

Assign javascript function output to liquid variable

javascript

php

liquid

shopify