shopify中 liquid使用记录

最新推荐文章于 2025-04-11 17:06:55 发布

Jedi Hongbin

最新推荐文章于 2025-04-11 17:06:55 发布

阅读量2.2k

点赞数

分类专栏：大前端文章标签： javascript

本文链接：https://blog.csdn.net/printf_hello/article/details/118323643

版权

大前端专栏收录该内容

134 篇文章

订阅专栏

引入 liquid 文件 include

{%- if xxxxx -%}
  {% include 'media-360', path360: product.metafields.custom_fields.path_360,height: height %}
{%- endif -%}

上面代码表示

if 表达式成立
引入文件 media-360.liquid
在该文件中可以拿到的变量 path360: product.metafields.custom_fields.path_360,height: height

引入 asset目录下的资源

引入 js

<script src="{{ 'jquery-2.2.3.min.js' | asset_url }}"></script>

引入图片

<img 
	src="{{ '360-degrees.png' | asset_url }}" 
	alt="">

liquid 定义变量

{%- assign featured_media = product.price -%}

过滤器文档

添加默认值

使用过滤器 default
｜之后即为过滤条件

{%- assign featured_media = product.price | default: 100 -%}

使用 liquid 变量

传入liquid文件变量

引入media-360.liquid并传入了两个变量

  {% include 'media-360', path360: 'fuck',height: height %}

liquid文件中使用变量

media-360.liquid文件中使用变量

<div style="max-width:{{ height }}px; max-height:{{ height }}px;" />

liquid文件中嵌入js 并使用变量

<script>
	const path360 = "{{ path360 }}"
	console.log(path360);
</script>

<div style="max-width:{{ height }}px; max-height:{{ height }}px;" />

<script>
	console.log("{{ height }}");
</script>

将多个liquid变量组合成一个变量

https://liquid.bootcss.com/tags/variable/
capture的变量都是 string类型

{% capture image_size %}
    {{ height }}x{{ height }}
{% endcapture %}

解释：加入 height变量的值为200。则将字符串 200x200 赋值给变量 image_size

{% capture media_class %}product-featured-media
{% endcapture %}

liquid中添加style

.lqiudi文件中直接添加 style标签

<style>
.watermark {
  width: 30%;
  height: 30%;
}
</style>

<div class="watermark">
 <img 
      src="{{ '360-degrees.png' | asset_url }}" 
      alt="Load and play video in Gallery viewer, 1-Turn Easy Jar Opener">
</div>

条件控制

https://liquid.bootcss.com/tags/control-flow/

case/when 相当于 switch

{% case section.settings.media_size %}
    {% when 'small' %}
      {%- assign height = 345 -%}
    {% when 'medium' %}
      {%- assign height = 530 -%}
    {% when 'large' %}
      {%- assign height = 720 -%}
    {% when 'full' %}
      {%- assign height = 1090 -%}
      {%- assign enable_image_zoom = false -%}
  {% endcase %}

循环

{%- for media in product.media -%}
  {% include 'media', media: media %}
{%- endfor -%}

if 语句

if

{% if product.title == 'Awesome Shoes' %}
  These shoes are awesome!
{% endif %}

else

{% if customer.name == 'kevin' %}
  Hey Kevin!
{% else %}
  Hi Stranger!
{% endif %}

elseif

{% if customer.name == 'kevin' %}
  Hey Kevin!
{% elsif customer.name == 'anonymous' %}
  Hey Anonymous!
{% else %}
  Hi Stranger!
{% endif %}