ご閲覧ありがとうございます。
おわかりになる方がいらっしゃいましたら、ご教授の程、宜しくお願い致します。
テーマ内の同セクションから、コレクション別のリンクを設置したいと思っております。
セクションでは、指定したコレクションの商品が数個表示がされるになっております。
そこから「すべて見る」等の文字より、コレクションページ飛ぶようにさせたいと思っております。
どうぞ宜しくお願い致します。
Topic summary
ユーザーがShopifyテーマのセクション内で、特定のコレクションへのリンクを設置する方法について質問しています。
実現したい機能:
- セクション内に指定したコレクションの商品を数個表示
- 「すべて見る」などのリンクからコレクションページへ遷移
- タブでコレクション切替が可能な構成
経緯:
- 初回質問時は詳細不明だったため、回答者がテーマとセクションの情報を要求
- ユーザーがLiquidコードと完成イメージ画像を提供
- 回答者(キュー小坂氏)がコード修正案を提示
- 実装時にエラーが発生し、再度修正コードを提供
- 2回目の修正後も別のエラーが発生
現状:
- 複数回のコード修正を経てもエラーが解消されず、トラブルシューティング継続中
- 最新のエラー画像が提示され、さらなる解決策を待っている状態
- 回答者は元のコードの影響を考慮しながら段階的に修正を試みている
@Snownow 様
ご質問いただいている内容ですと、ご利用のテーマや利用したいセクションが不明なため、回答することが難しいです。
ご利用のテーマ・利用したいセクションをお教えいただければ、回答できるかもしれません。
※有料のテーマですと回答できない場合がございますので、あらかじめご了承ください。
（キュー小坂）
1 Like
返信ありがとうございます！
大変申し訳ございません。
改めて、明後日にセクションのコードを貼らせて頂きます。
もし可能でしたら、ご返信宜しくお願い致します 
お世話になっております。
セクションのコード(Liquid部分)と完成イメージ画像を記載添付致しました。
※ 完成イメージは①と②の候補がございます。
(1.セクション内容は、コレクションから呼び出した商品一覧が並ぶようなセクションになります。2.タブでコレクション切替が可能です。)
可能でしたらご教授の程、どうか宜しくお願い致します。
{%- liquid
assign collectionProductsAvailable = false
assign collectionAvailable = 0
if settings.product_image_style == 'landscape'
assign productImageRatio = 75
elsif settings.product_image_style == 'square'
assign productImageRatio = 100
elsif settings.product_image_style == 'portrait'
assign productImageRatio = 125
endif
-%}
{%- capture collectionProducts -%}
{%- assign customIndex = 0 -%}
{%- for block in section.blocks -%}
{%- if block.settings.collection != blank and block.settings.collection.all_products_count > 0 -%}
{%- liquid
if collectionAvailable == 0
assign collectionAvailable = forloop.index
endif
assign collectionProductsAvailable = true
assign customIndex = customIndex | plus: 1
-%}
-
{% endif %}
{%- else -%}
{%- assign collectionProductsAvailable = true -%}
- {{ 'onboarding.collection_title' | t }}
- {{ 'onboarding.collection_title' | t }}
- {{ 'onboarding.collection_title' | t }}
{% endfor %}
{%- endcapture -%}
{% liquid
assign show_tabs_heading = true
if section.settings.hide_tab_name and section.blocks.size <= 1
assign show_tabs_heading = false
endif
%}
{%- if section.settings.heading != blank -%}
<{{ section.settings.seo_heading }} class="section-heading-title {{ section.settings.heading_size }}">
{{- section.settings.heading -}}
{%- endif -%}
{%- if collectionProductsAvailable and show_tabs_heading-%}
{{- collectionProducts -}}
{%- endif -%}
{%- if collectionProductsAvailable -%}
{% if section.blocks.size > 0 -%}
{%- liquid
for block in section.blocks
assign collection = block.settings.collection
assign mainAttr = 'data-filter-item="product-' | append: block.id | append: '"'
if forloop.index == collectionAvailable
assign mainClass='filter-slide active product-' | append: block.id
else
assign mainAttr=mainAttr | append: ' style="display:none"'
assign mainClass='filter-slide product-' | append: block.id
endif
if collection != blank and collection.all_products_count > 0
for product in collection.products limit: 10
assign delay = 100 | times : forloop.index
assign productFormId = 'product-form-' | append : section.id | append : forloop.index | append : '-' | append : collection.handle
assign animationAttr = 'data-aos="fade-up" data-aos-delay="' | append : delay | append : '"'
render 'product-grid' product : product, section : section, productFormId : productFormId, tabbedCollection : true, productClasses: mainClass, mainAttr: mainAttr, animationAttr: animationAttr,customRadius:true, show_ranking: block.settings.show_ranking, rank: forloop.index
endfor
endif
endfor
-%}
{% else %}
{%- for i in (1..10) -%}
{%- if settings.product_image_style != 'aspect' -%}
{%- endif -%}
{%- capture current -%}{% cycle 1, 2, 3, 4, 5, 6 %}{%- endcapture -%}
{{ 'product-' | append: current | placeholder_svg_tag: 'placeholder-svg' }}
{%- if settings.product_image_style != 'aspect' -%}
{%- endif -%}
{{ 'onboarding.product_title' | t }}
{{ 1999 | money }}
{%- endfor -%}
{%- endif -%}
{%- endif -%}
@Snownow 様
①については、コード内に類する部分がございませんでしたので、②に対応できるようコードを調整してみました。
いただいていたコードの下記部分を
if collection != blank and collection.all_products_count > 0
for product in collection.products limit: 10
assign delay = 100 | times : forloop.index
assign productFormId = 'product-form-' | append : section.id | append : forloop.index | append : collection.handle
assign animationAttr = 'data-aos="fade-up" data-aos-delay="' | append : delay | append : '"'
render 'product-grid' product : product, section : section, productFormId : productFormId, tabbedCollection : true, productClasses: mainClass, mainAttr: mainAttr, animationAttr: animationAttr, customRadius:true, show_ranking: block.settings.show_ranking, rank: forloop.index
endfor
endif
下記のように変更いただくと②の部分にコレクション一覧へのリンクを追加できるかと思われます。
if collection != blank and collection.all_products_count > 0
for product in collection.products limit: 10
assign delay = 100 | times : forloop.index
assign productFormId = 'product-form-' | append : section.id | append : forloop.index | append : collection.handle
assign animationAttr = 'data-aos="fade-up" data-aos-delay="' | append : delay | append : '"'
render 'product-grid' product : product, section : section, productFormId : productFormId, tabbedCollection : true, productClasses: mainClass, mainAttr: mainAttr, animationAttr: animationAttr, customRadius:true, show_ranking: block.settings.show_ranking, rank: forloop.index
{%- if forloop.last -%}
{{ 'collection' | placeholder_svg_tag: 'placeholder-svg' }}
{{ collection.title }} の商品一覧を見る →
{%- endif -%}
endfor
endif
実際にコードを試しておりませんので、動かない場合もございますのでご了承ください。
ご参考まで。
（キュー小坂）
1 Like
小坂様
ご教授、本当にありがとうございます? 
来週になりますが、試してみます！
また返信を致します！
小坂様
返信をしない状態で、申し訳ございませんでした。
返信の投稿が正常に完了出来てなかったようです…。
(もう一度、投稿させて頂きます。)
コードの入れ替えをさせて頂きましたが、画像のようなエラーが出てしまいました。
もし宜しければ、またご教授頂ければ幸いです。
どうぞ宜しくお願い致します。
@Snownow 様
お送りしたコードですと、元々のコードより影響を受けていた様です。
{%- liquid
for block in section.blocks
assign collection = block.settings.collection
assign mainAttr = 'data-filter-item="product-' | append: block.id | append: '"'
if forloop.index == collectionAvailable
assign mainClass='filter-slide active product-' | append: block.id
else
assign mainAttr=mainAttr | append: ' style="display:none"'
assign mainClass='filter-slide product-' | append: block.id
endif
if collection != blank and collection.all_products_count > 0
for product in collection.products limit: 10
assign delay = 100 | times : forloop.index
assign productFormId = 'product-form-' | append : section.id | append : forloop.index | append : '-' | append : collection.handle
assign animationAttr = 'data-aos="fade-up" data-aos-delay="' | append : delay | append : '"'
render 'product-grid' product : product, section : section, productFormId : productFormId, tabbedCollection : true, productClasses: mainClass, mainAttr: mainAttr, animationAttr: animationAttr,customRadius:true, show_ranking: block.settings.show_ranking, rank: forloop.index
endfor
endif
endfor
-%}
部分を下記のように変更すると、エラーが直るかもしれません。
{%- for block in section.blocks - %}
{%- assign collection = block.settings.collection - %}
{%- assign mainAttr = 'data-filter-item="product-' | append: block.id | append: '"' - %}
{%- if forloop.index == collectionAvailable - %}
{%- assign mainClass='filter-slide active product-' | append: block.id - %}
{%- else - %}
{%- assign mainAttr=mainAttr | append: ' style="display:none"' - %}
{%- assign mainClass='filter-slide product-' | append: block.id - %}
{%- endif - %}
{%- if collection != blank and collection.all_products_count > 0 - %}
{%- for product in collection.products limit: 10 - %}
{%- assign delay = 100 | times : forloop.index - %}
{%- assign productFormId = 'product-form-' | append : section.id | append : forloop.index | append : '-' | append : collection.handle - %}
{%- assign animationAttr = 'data-aos="fade-up" data-aos-delay="' | append : delay | append : '"' - %}
{%- render 'product-grid' product : product, section : section, productFormId : productFormId, tabbedCollection : true, productClasses: mainClass, mainAttr: mainAttr, animationAttr: animationAttr,customRadius:true, show_ranking: block.settings.show_ranking, rank: forloop.index -%}
{%- if forloop.last -%}
{{ 'collection' | placeholder_svg_tag: 'placeholder-svg' }}
{{ collection.title }} の商品一覧を見る →
{%- endif -%}
{%- endfor -%}
{%- endif -%}
{%- endfor -%}
ご参考まで。
（キュー小坂）
1 Like
