在Shopify Liquid中使用JavaScript变量 [英] Using javascript variables in Shopify liquid

问题描述

我正在尝试在image标签内使用一个javascript变量，但是它不起作用.

I am trying to use a javascript variable inside the image tag but it is not working.

我想在一个开发项目中为我的收藏创​​建一个过滤器，在那里我可以根据产品的纹理过滤产品.我已经编写了以下代码:

I want to create a filter for my collection in a developing project, where I can filter products by the textures of products. I have coded the following:

<div class="collection-filter-navbar-nav">
{% assign tags = 'white, yellow, golden' | split: ',' %}
<ul class="fabric-filter">
<li><a href="javascript:void(0);" >All</a></li>
 {% for t in tags %}
{% assign tag = t | strip %}
{% if current_tags contains tag %}
<li><a href="javascript:void(0);" data-value="{{ tag | handle }}" >{{ tag }}</a></li>
{% elsif collection.all_tags contains tag %}
<li><a href="javascript:void(0);" class="filter-lists" data-value="{{ tag | handle }}">{{ tag }}</a></li>
{% endif %}
{% endfor %}
</ul>
</div>

该html显示在前端，但是我需要在每个标签中添加一个参考标签名称的纹理图像.

The html is showing in the front end, but what I need, I want to add a texture image in each tag in reference to the tag name.

所以我编写了脚本:

jQuery(document).ready(function(){
 var filter_tabs = jQuery('.fabric-filter > li > a.filter-lists');
  jQuery.each( filter_tabs, function(index, element){
    var data_value = jQuery(this).data('value');
    {% assign value = data_value %}
    var img_append = '<img src="{{ 'f1-'+value+'.png'  | asset_url }}">'
  jQuery(img_append).appendTo(jQuery(this));
   console.log(data_value);
   });
  });

但是它显示错误.我知道这可以通过CSS来完成，但是我只使用javascript来实现动态性.

But it is showing error. I know this can be done by css, but I am using javascript just for dynamism.

推荐答案

您将无法执行此操作，因为所有液态代码都在jquery代码之前运行.

You won't be able to do this as the liquid code all runs before the jquery code.

在您运行jquery液体时，已经输出了{% assign value = data_value %}

By the time you are running the jquery liquid has already outputted the line {% assign value = data_value %}

这篇关于在Shopify Liquid中使用JavaScript变量的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！