{{snippet "stylesheet" href=(asset_url "recently-viewed.css")}}
<h2 class="recently-viewed-title">Recently viewed</h2>
<div class="recently-viewed">
{{#each section.blocks as |block|}}
<!-- 遍历 collections -->
<div class="grid-product__contents grid-cols-{{settings.home_desktop}}-desktop">
<!-- 判断 block 类型是否为 slide -->
{{#if block.type '==' 'slide'}}
<!-- 遍历每个商品分类 -->
{{#each block.settings.product_categories.products limit=block.settings.home_desktop_product_number as |product|}}
<div class="grid-product__content">
<!-- 显示商品图片 -->
<img src="{{product.featured_media}}" alt="{{product.title}}">
<div class="grid-product__content__meta">
<!-- 显示商品标题 -->
<div class="grid-product__content__title">{{product.title}}</div>
<!-- 显示商品价格 -->
<div class="grid-product__content__price">from {{money_with_currency product.price}}</div>
</div>
</div>
{{/each}}
{{/if}}
</div>
{{/each}}
</div>
{{#schema}}
{
"name": "最近浏览",
"settings": [],
"blocks": [
{
"name": "Slide",
"type": "slide",
"icon": "image",
"settings": [
{
"id": "product_categories",
"type": "collection_picker",
"label":"选择商品分类",
"default": ""
},
{
"id": "home_desktop",
"type": "range",
"label": "电脑端列数",
"default": 4,
"min": 2,
"max": 5,
"step": 1
},
{
"id": "home_desktop_product_number",
"type": "range",
"label": "最大商品数量",
"default": 8,
"min": 3,
"max": 20,
"step": 1
}
]
}
]
}
{{/schema}}
这个是控制列数,如下图:css已经内置写好的了,如果不行,可以再加个flex布局试试
grid-cols-{{settings.home_desktop}}-desktop
{{#schema}}
{
"name": "最近浏览",
"settings": [],
"blocks": [
{
"name": "Slide",
"type": "slide",
"icon": "image",
"settings": [
{
"id": "home_desktop",
"type": "range",
"label": "电脑端列数",
"default": 4,
"min": 2,
"max": 5,
"step": 1
}
]
}
]
}
{{/schema}}
以下是控制每一页显示数量
limit=block.settings.home_desktop_product_number
以下是遍历到商品分类里面的所有商品------.products
block.settings.product_categories.products