如何使用liqid更改CSS属性

发布于 2025-02-06 21:09:31 字数 622 浏览 1 评论 0原文

我希望有人可以帮助我解决这个问题。

我想根据标签“名称”来更改颜色属性。例如，如果标签为“银”，则文本的颜色应为银。

我试图将其进行调查，还检查了Shopify文档，但没有罚款一些有用的东西。

（下面的代码中的标签是“ oberstdorf”。标签和链接工作正好）

{% if product.tags == 'Oberstdorf' %}
    <style> .product-tag > a {color:red;} </style>
 {% endif %}

     <div class="product-tag"><a href="{{ product.url }}">{{ product.tags }}</a></div>

输出：右标签在奖品上方显示

非常感谢

原文

I hope somebody can help me out on this.

I would like to change the color property depending on what the tag "name" is. For example if the tag is "silver" the color of the text should be silver.

I tried to goole it and also checked the shopify documentation but did not fined something useful.

(Tag in the code below is 'Oberstdorf'. Tag and link work just fine)

{% if product.tags == 'Oberstdorf' %}
    <style> .product-tag > a {color:red;} </style>
 {% endif %}

     <div class="product-tag"><a href="{{ product.url }}">{{ product.tags }}</a></div>

Output: the right tag is displayed above the Prise

Thanks a lot in advance

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

烟若柳尘 2025-02-13 21:09:31

在您的示例中，您要检查product.tags，但这是所有标签的逗号分隔字符串，如果您每个产品的标签超过一个标签（通常是这种情况），那将无效。

如果标签数量很少，并且您希望保持这样的标签（例如青铜，银，黄金），则可以快速执行此类操作：在CSS中，您定义了类

.gold {
 color: gold;
}
.silver {
  color: grey;
}
.bronze {
  color: red;
}

，

{% assign tagClass = 'gold' %}
{% if product.tags contains 'silver' %}
   {% assign tagClass = 'silver' %}
{% elsif product.tags contains 'bronze' %}
   {% assign tagClass = 'bronze' %}
{% endif %}
<div class="{{ tagclass }} product-tag">...</div>

即使您有很多定义的标签颜色，您仍然需要定义与每个标签关联的颜色的某个地方，我认为更好的方法在CSS文件中。但是，如果不可能，您可以在商店变量或设置数据中的Metafield中定义这一点。就像

{
  "silver1" : "#00F100",
  "silver2" : "#00F200",
...
}

假设您

{% assign colors: shop.metafields.space.colors.value %} <!-- .value if you're using the 'json' type -->
{% assign colorStyle = 'color: default;' %}
{% for tag in product.tags %}
 {% if colors[tag] %}
     {% assign colorStylee = colorStyle | replace: 'default', colors[tag] %}
     {% break %}
 {% endif %}
{% endfor %}
<div style="{{colorStyle}}">...</div>

当然有这些只是示例，但只是为了让您概述方法。

In your example you're checking against product.tags but that is a comma separeted string of all tags, that wouldn't work if you have more than one tag per product (which normally is the case).

If the number of tags is low and you expect to remain like that (Like bronze, silver, gold) you can do something fast like this: in your css you define classes

.gold {
 color: gold;
}
.silver {
  color: grey;
}
.bronze {
  color: red;
}

and then in your liquid

{% assign tagClass = 'gold' %}
{% if product.tags contains 'silver' %}
   {% assign tagClass = 'silver' %}
{% elsif product.tags contains 'bronze' %}
   {% assign tagClass = 'bronze' %}
{% endif %}
<div class="{{ tagclass }} product-tag">...</div>

Even if you have a lot of tags defining the color, you still need to define somewhere the color associated to each tag, I think the better approach is in the css file. But if is not possible you could define that in a metafield inside the shop variable or in the setting data. Like

{
  "silver1" : "#00F100",
  "silver2" : "#00F200",
...
}

Let's say you have that in the metafields

{% assign colors: shop.metafields.space.colors.value %} <!-- .value if you're using the 'json' type -->
{% assign colorStyle = 'color: default;' %}
{% for tag in product.tags %}
 {% if colors[tag] %}
     {% assign colorStylee = colorStyle | replace: 'default', colors[tag] %}
     {% break %}
 {% endif %}
{% endfor %}
<div style="{{colorStyle}}">...</div>

Of course these are just examples, but was just to give you an overview of approaches.

回复收藏 0 原文

~没有更多了~