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

解決済
Highlighted
観光客
10 1 2

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

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

 

例えば ホームページ上で「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 

0 件の「いいね!」
Highlighted
観光客
10 1 2

管理画面でホームページとは別に作ったページ上で2つのセクションを読み込み、その2つのセクションそれぞれにschemaを配置する事で、とりあえず1ページ上で2つのコレクションを実装してみました。

370B1241-5673-490A-91D7-A65D39B7B254.jpeg

0 件の「いいね!」
Highlighted
Community Manager
Community Manager
527 118 194

成功

セクションの概要については以下のブログにまとめていますので、ご参照ください。
https://www.shopify.jp/blog/partner-shopify-theme-section-first-create

単純にコレクションを全て表示したいだけの場合は、セクションを無理に使う必要はないと思います。

以下のドキュメントを参考にして、表示させたいページのliquidに、collection objectを表示させれば良いと思います。

https://shopify.dev/docs/themes/liquid/reference/objects/collection

Technical Partner Manager, Japan
1 件の「いいね!」
Highlighted
観光客
10 1 2

岡村さん、ありがとうございます!

 

ブロックの部分もブログに詳しく書いてありますね、勉強不足でした。

 

コレクションオブジェクトに関しても参考にさせていただきます!

0 件の「いいね!」