同ページ内で複数のコレクションを表示する場合の実装方法

hakuto · ‎09-03-2020

いつもお世話になります。

理解が浅い為、ご指摘をお願い致します。

例えば　ホームページ上で「NEWコレクション」「MENSコレクション」など複数のコレクションを混在させて商品を表示させたい場合　下記のような設定を用意して複数のschemaを連続して表示させようとしました。

{% schema %}
{
"blocks":[


{
"type": "first-section",
"name": "Homepage Products1",
"settings": [

{
	"type": "text",
	"id": "title",
	"label": "Heading",
	"default":"Trending Products"
	},
{
"type": "collection",
"id": "collection",
"label": "Collection"
},
{
"type": "range",
"id": "product_limit",
"label": "Product Limit",
"min": 3,
"max": 10,
"default": 6
}
]
},

{
"type": "second-section",
"name": "Homepage Products2",
"settings": [
{
	"type": "text",
	"id": "title",
	"label": "Heading",
	"default":"Mens Products"
	},

{
"type": "collection",
"id": "collection",
"label": "Collection"
},
{
"type": "range",
"id": "product_limit",
"label": "Product Limit",
"min": 3,
"max": 10,
"default": 6
}
]
}
]
}
{% endschema %}

<div class="inner">
	<section class="c-section">
		{% for block in section.blocks %}
		<div class="c-section-head">
			<h2 class="c-section-title">NEW</h2>
		</div>

		{% case block.type %}
		<ul class="item-list">
			{% when 'first-section' %}
			
			<li class="item">
				<a href="#">
					<div class="item-cap"><img src="{{block.settings.collection.featured_image.src | img_url:'1920x' }}" alt="" loading="lazy">
					</div><!-- 遅延読み込みで表示速度を担保する	-->
					<div class="item-info">
						<div class="item-name">{{block.settings.title}}</div>
						<div class="item-text">{{block.settings.description}}</div>
						<div class="item-price">{{block.settings.price | money}}</div>
					</div>
				</a>
				{% include 'first-section' %}
			</li>

		</ul>
	</section>


	
	<section class="c-section" data-fadeIn>
		<div class="c-section-head">
			<h2 class="c-section-title">MEN</h2>
			<a href="" class="more-link">もっと見る</a>
		</div>
		<ul class="item-list">
			{% when 'second-section' %}
		
			<li class="item">
				<a href="#">
					<div class="item-cap"><img src="{{block.settings.collection.featured_image.src | img_url:'1920x' }}" alt="" loading="lazy">
					</div><!-- 遅延読み込むで表示速度を担保する	-->
					<div class="item-info">
						<div class="item-name">{{block.settings.title}}</div>
						<div class="item-text">{{block.settings.description}}</div>
						<div class="item-price">{{block.settings.price | money}}</div>
					</div>
				</a>
				{% include 'second-section' %}
			</li>
			{% endcase %}
			
		</ul>
		{% endfor %}
	</section>

カスタマイズ画面は上手く実装されたようなのですが、表示がエラーとなってしまいます。（theme watchでのエラーは無し）

管理画面

参考サイト上の説明では新たに　セクションmuluti_section.liquid　や　スニペットを作成するように説明されていますが理解できません。

セクション内でのループの作成方法など、多々問題があると思いますが　どうか御指南宜しくお願い致します。

参考サイト　http://www.codeshopify.com/blog_posts/shopify-sections-with-dynamic-blocks