Filter-System（系统）

Filter System

system（系统）

  • t
  • language
  • price_format
  • currency_symbol
  • font_face
  • placeholder_svg_tag
  • card_custom_css
  • image_aspect_ratio
  • script_tag
  • stylesheet_tag
  • asset_url
  • pagination
  • pagination_ajax

t

进行翻译

  • 将翻译内容key，在翻译文件找到相应语言的值，进行返回
  • 翻译文件:locales/json/文件夹里面，文件格式为：sitelang{lang_code}.json

例子：

// 1.代码
{{ 'Shopping_cart' | t }}


// 2.输出
// 2.1如果是中文，则对应文件：locales/json/site_lang_cn.json（可以在这个文件里面搜索：Shopping_cart，然后就可以看到）
购物车

// 2.2如果是英文，则对应文件：locales/json/site_lang_en.json（可以在这个文件里面搜索：Shopping_cart，然后就可以看到）
Cart

// 2.3如果是西班牙语，则对应文件：locales/json/site_lang_es.json（可以在这个文件里面搜索：Shopping_cart，然后就可以看到）
carro de la compra

关于翻译文件的说明，更多参看：locales-翻译文件

language

1.通过给与的一个json对象， 以及当前店铺的语言，得到对应的语言值

例子：

// 1.数据
{
  "product_title":{
    "text":"summer lady dress"
    "lang_params": {
      "cn":"夏季淑女连衣裙",
      "es":"vestido de verano para dama",
      "ru":"летнее женское платье",
      "tw":"夏季淑女連身裙"
    }
  }
}

// 2.代码
{{ product_title | language }}


// 3.1输出（如果当前店铺语言：中文）
夏季淑女连衣裙

// 3.2输出（如果当前店铺语言：英文）
summer lady dress

// 3.3输出（如果当前店铺语言：繁体中文）
夏季淑女連身裙

// 3.3输出（如果当前店铺语言：德文）（因为没有德文的翻译，则直接使用text的值：summer lady dress）
summer lady dress

2.对象结构

  • text：默认语言值，如果在lang_params里面找不到相应的语言值（或者值为空），则将返回text的值。
  • lang_params: 多语言的值，根据当前的语言，在对象找查找对应的语言简码是否存在(譬如中文-对应：lang_params.cn)，如果存在&&不为空，则直接返回，否则返回text的值
{
  "text":"summer lady dress"
  "lang_params": {
    "cn":"夏季淑女连衣裙",
    "es":"vestido de verano para dama",
    "ru":"летнее женское платье",
    "tw":"夏季淑女連身裙"
  }
}

2.1在默认装修，对于标题，副标题等都支持多语言编辑，编辑后保存的json结构，就是上面的json结构，然后模版中使用filter：language, 进行取值

2.2兼容：为了兼容历史包袱，json结构做了一些兼容

  • text：可以使用其他的替代：name，value (如果text值为空，则查找name，如果值为空，则查找value)
  • lang_params：可以使用其他的替代：language(如果lang_params值为空，则查找language)

因此，json结构可以是如下：

{
  "name":"summer lady dress"
  "language": {
    "cn":"夏季淑女连衣裙",
    "es":"vestido de verano para dama",
    "ru":"летнее женское платье",
    "tw":"夏季淑女連身裙"
  }
}

3.自定义翻译key

  • text和lang_params,您可以进行指定对应的key
  • 譬如下面：text对应message，lang_params对应language_message
{{ item_colorcard.link_text | language : text: 'message', lang_params : 'language_message'}}

例子：

// 1.数据
{
    "product_title": {
      "message":"summer lady dress"
      "language_message": {
        "cn":"夏季淑女连衣裙",
        "es":"vestido de verano para dama",
        "ru":"летнее женское платье",
        "tw":"夏季淑女連身裙"
      }
    }
}


// 2.代码（通过指定text对应message，lang_params对应language_message ）
{{ product_title | language : text: 'message', lang_params : 'language_message'}}


// 3.输出(繁体中文)
夏季淑女連身裙

price_format

根据店铺的当前货币，得到对应的价格格式

1.如果价格参数为空，则返回：

  • 如果货币是：'HUF', 'TWD', 'JPY', 'VND', 'IDR'（匈牙利福林、新台币、日元, 越南 印尼盾），返回：0
  • 其他货币返回：0.00

2.如果价格不为空

2.1如果货币是'HUF', 'TWD', 'JPY'（匈牙利福林、新台币、日元），并且没有小数，千分位为,

  • 譬如：价格为323，则返回：323
  • 譬如：价格为53533446，则返回：53,533,446

2.2如果货币是'VND', 'IDR'（越南 印尼盾），并且没有小数，千分位为.

  • 譬如：价格为323，则返回：323
  • 譬如：价格为53533446，则返回：53.533.446

2.3其他货币：两位小数，千分位为,

  • 譬如：价格为323，则返回：323.00
  • 譬如：价格为323.1，则返回：323.10
  • 譬如：价格为53533446，则返回：53,533,446.00

currency_symbol

根据当前货币，给商品价格，加上货币符号

  • 一般来说 currency_symbol 和 price_format 搭配起来一起使用
  • 参数：symbol，通过传递参数可以自定义显示货币符号
// 1.数据
{
  "product_curr_price": 45.1,
  "order_symbol": "€"
}


// 2.代码（可以自定义传递货币符号，譬如：订单货币，如果不传递,则使用店铺的当前货币）
{{ product_curr_price | price_format | currency_symbol: symbol: order_symbol }}
{{ product_curr_price | price_format | currency_symbol }}

// 3.输出(当前货币是美元)
€45.1
$45.1

font_face

1.根据字体名称和属性，自动生成对应的 @font-face CSS 规则，方便在页面里加载自定义字体。

// 1.数据
{
  "header_font":"regular"
}


// 2.代码
{{ header_font | font_face: font_display: 'swap' }}


// 3.输出
@font-face {
    font-family: regular;
    font-weight: 400;
    font-style: normal;
    src: url("https://diydomain.fecmall.cn/dist/front/fonts/Regular/Jost-Regular.ttf");
    font_display:swap;
}

@font-face {
    font-family: regular;
    font-weight: 500;
    font-style: normal;
    src: url("https://diydomain.fecmall.cn/dist/front/fonts/Regular/Jost-Medium.ttf");
    font_display:swap;
}

@font-face {
    font-family: regular;
    font-weight: 600;
    font-style: normal;
    src: url("https://diydomain.fecmall.cn/dist/front/fonts/Regular/Jost-SemiBold.ttf");
    font_display:swap;
}

2.对于字体，一般都是在全局配置里面进行选择

  • schema：字体选择器：font_picker，详细参看：schema类型3：基本数据选择器
  • 通过上面的schema，在全局配置里面加入配置项，选择发布后，模版部分可以直接调用，如下：
// 1.全局配置，schema定义：
{
    "type": "font_picker",
    "id": "type_header_font",
    "label": {
      "text": "字体",
      "lang_params": {
        "en": "Font",
        "tw": "字體"
      }
    },
    "default": {
      "id": "d-21",
      "name": "Roboto",
      "family": "Roboto,sans-serif"
    }
  },


// 2.模版直接调用
{% assign header_font = settings.type_header_font.family %}
{{ header_font | font_face: font_display: 'swap' }}

全局配置选择字体：

3.对于字体，系统默认支持很多字体，如果您想自定义字体，可以在服务端后台进行上传字体

placeholder_svg_tag

使用系统的svg图片

  • 当模版装修，添加卡片后，还没有对卡片进行图片上传的时候，默认使用系统的svg图，撑起来卡片的内容框架

1.接受以下占位符名称：

product：

  • product-1
  • product-2
  • product-3
  • product-4
  • product-5
  • product-6

collection：

  • collection-1
  • collection-2
  • collection-3
  • collection-4
  • collection-5
  • collection-6

lifestyle：

  • lifestyle-1
  • lifestyle-2

image：

  • image
  • product-apparel：
  • product-apparel-1
  • product-apparel-2
  • product-apparel-3
  • product-apparel-4

collection-apparel：

  • collection-apparel-1
  • collection-apparel-2
  • collection-apparel-3
  • collection-apparel-4

hero-apparel：

  • hero-apparel-1
  • hero-apparel-2
  • hero-apparel-3
  • blog-apparel-1
  • blog-apparel-2
  • blog-apparel-3

detailed-apparel：

  • detailed-apparel-1

2.使用

  • 传递的参数，将作为svg标签的class
{{ 'collection-5' | placeholder_svg_tag: 'f-placeholder-svg f-placeholder-svg--no-border m:w-full m:h-full m:object-cover'  }}

返回：

<svg class="f-placeholder-svg f-placeholder-svg--no-border m:w-full m:h-full m:object-cover" viewBox="0 0 200 200" xmlns="http://www.w3.org/2000/svg" role="img" aria-label="Placeholder: Collection-5">
  <rect width="200" height="200" fill="#eee"></rect>
  <text x="50%" y="50%" dy=".3em" text-anchor="middle" font-size="20" fill="#aaa">
    Collection-5
  </text>
</svg>

card_custom_css

给传入的一段 CSS 代码，自动加上带有 sectionId 的前缀选择器，避免 CSS 污染到其他 section。

  • 对于后台模版装修，每个卡片都可以自定义css，card_custom_css的作用:自动加上带有 sectionId 的前缀选择器，避免 CSS 污染到其他 section。

使用：

  • 在section文件中，一般都是放到style标签里面
{%- style section.id -%}
    #f-banner-with-slider-{{ section.id }} {
    --items: 1;
    --section-padding-top: {{ section.settings.padding_top }}px;
    --section-padding-bottom: {{ section.settings.padding_bottom }}px;
    }
    {{ section.settings.custom_css | card_custom_css: section.id }}
{%- endstyle -%}

例子：

// 1.数据
{
  "section":{
    "id":"he4gr6"
  }
}


// 2.代码
{{ ".title { color: red; }" | card_custom_css: section.id }}


// 3.输出
.section_id_he4gr6 .title { color: red; }

image_aspect_ratio

图片宽高比处理

  • liquid模版中，图片都是懒加载，在图片还没有加载之前，需要根据图片的宽度，以及宽高比，进行默认给图片一个高度，等图片加载后再进行替换
  • 历史数据中，某些图片没有宽高比数据，因此，就需要给与一个默认的宽高比数据

例子：

{% image_ratio_x | image_aspect_ratio: 'product' %}


返回：
1

具体逻辑：

  • 如果image_ratio_x存在值，譬如值为1，则直接返回image_ratio_x的值
  • 如果image_ratio_x为空，传递的值是：'product'，则从全局配置-商品图里面查找值
  • 如果image_ratio_x为空，传递的值是：'article'，则从全局配置文章图里面查找值
  • 如果上面都找不到值，则返回1

这样保证图片，会存在宽高比数据。

script_tag

返回script的标签

  • <script>为给定的资源 URL生成 HTML标签。该标签具有type属性: text/javascript
// 1.代码
{{ 'cart.js' | asset_url | script_tag: defer: 'defer' }}

2.输出
<script type="text/javascript" src="https://diydomain.fecmall.cn/dist/front/static/new_default_theme/cart.js?v=4165" defer="defer"></script>

使用script_tag标签生成，和直接使用 <script>的区别在于：

  • 使用script_tag标签，系统会将js <script>的代码放到页面的最后面，这样可以加快UI的加载

stylesheet_tag

1.返回link标签

  • 为给定的资源 URL生成 HTML<link>标签。该标签具有以下参数：
属性 值
rel stylesheet
type text/css
media all

例子：

// 1.代码
{{ 'header.css' | asset_url | stylesheet_tag }}

2.输出
<link href="https://diydomain.fecmall.cn/dist/front/static/new_default_theme/header.css?v=4165" rel="stylesheet" type="text/css" media="all" />

2.预加载

  • 当preload设置为时true，将预加载css
  • 使用预加载，不会堵塞页面渲染，但是会出现短暂的乱码或者位移现象
  • 因此，请谨慎使用
// 1.代码
{{ 'header.css' | asset_url | stylesheet_tag: onload: true }}

2.输出
<link rel="stylesheet" href="https://diydomain.fecmall.cn/dist/front/static/new_default_theme/header.css?v=4165" media="print" onload="this.media='all'">
<noscript><link href="https://diydomain.fecmall.cn/dist/front/static/new_default_theme/header.css?v=4165" rel="stylesheet" type="text/css" media="all" /></noscript>

asset_url

得到js或者css的url

// 1.代码
{{ 'header.css' | asset_url  }}

2.输出
https://diydomain.fecmall.cn/dist/front/static/new_default_theme/header.css?v=4165

pagination

得到分页的html信息：

  • 分页信息：在商品列表页面，底部会有点击到第x页的数字链接，点击后跳转到第x页
// 1.代码
{{ 10 | pagination: next: '»', previous: '«' }}


// 2.输出
<div class="f-pagination f-scroll-trigger animate--fade-in">
    <div class="f-pagination">
        <span class="prev">
            <a href="/collections/ifq2tjpu9j?page=1" title="">«</a>
        </span>
        <span class="page current">1</span>
        <span class="page">
            <a href="/collections/ifq2tjpu9j?page=2" title="">2</a>
        </span>
        <span class="page">
            <a href="/collections/ifq2tjpu9j?page=3" title="">3</a>
        </span>
        <span class="deco">…</span>
        <span class="page">
            <a href="/collections/ifq2tjpu9j?page=10" title="">10</a>
        </span>
        <span class="next">
            <a href="/collections/ifq2tjpu9j?page=2" title="">»</a>
        </span>
    </div>
</div>

本质是得到html代码

pagination_ajax

pagination_ajax 和 pagination 类似，都是得到一个html代码，不同的是 pagination_ajax是用在api类型的，里面将a链接去掉了，通过js进行触发

Copyright © fecify.com 2025 all right reserved，powered by Gitbook该文件修订时间： 2025-09-09 11:10:47

results matching ""

    No results matching ""