输出某个商品分类里面的所有商品-CSDN博客

本文链接：https://blog.csdn.net/qq_69603357/article/details/140955378

	  {{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