Liquid、JavaScriptなどに関する質問
shopifyのデフォルト機能を利用して、商品ページに動画を入れています。
動画の一覧ページを作成しようと考えているのですが、動画のみを抜き出して一覧のページを作成することは可能でしょうか。
動的に、作成できない場合、静的にでもできればと考えているのですが、CSVで出力してもmp4のメディアURLは出力されず、困っております。
解決済! ベストソリューションを見る。
成功
上記のコードを貼り付ければ、どのテンプレートでも動画一覧は出力はされます。
テーマによって構造やファイル名が異なりますし、最終的にどんな動画一覧ページを作成したいのかによってHTMLやCSSなども変わります。
テーマがDawnの場合は以下の通りです。
このフローで動画一覧ページができます。
2.0に対応していないテーマでも、だいたい同じようなフローです。
ただし、このカスタマイズにはLIQUIDやHTML、CSSを操作するスキルが必要です。
難しいようであれば、Shopifyパートナーやエキスパートなど専門家に依頼することをお勧めします。
商品ページに入れている動画一覧であれば、以下のコードでページに出力できるかと思います。
{% for product in collections['all'].products %}
{% for media in product.media %}
{% if media.media_type == 'video' %}
{{ media | video_tag: controls: true }}
{% endif %}
{% endfor %}
{% endfor %}
全てのコレクション内の商品メディアに登録された動画を出力する感じです。
htmlタグやサイズなどはお好みで調整してください。
https://shopify.dev/api/liquid/filters/media-filters#video_tag
ご回答ありがとうございます。
Templatesにliquid を新規作成して、collectionにテーマテンプレートとして設置すれば良いでしょうか。
設置してみたのですが、うまく行かず、どのようにしたらよいか教えていただけると助かります。
成功
上記のコードを貼り付ければ、どのテンプレートでも動画一覧は出力はされます。
テーマによって構造やファイル名が異なりますし、最終的にどんな動画一覧ページを作成したいのかによってHTMLやCSSなども変わります。
テーマがDawnの場合は以下の通りです。
このフローで動画一覧ページができます。
2.0に対応していないテーマでも、だいたい同じようなフローです。
ただし、このカスタマイズにはLIQUIDやHTML、CSSを操作するスキルが必要です。
難しいようであれば、Shopifyパートナーやエキスパートなど専門家に依頼することをお勧めします。
ご丁寧にありがとうございます。
Shopifyパートナーの方に相談してみます。
横から失礼いたします。
こちらのように動画の一覧ページを作り、
さらにその動画にディスクリプションのように説明文を表示したいのですが、
それも自動取得することはできるのでしょうか?
具体的には、各商品ページにそれぞれ入っている動画を一覧ページに出力し、
その動画の下に添付画像のように商品ページ内の商品名と商品説明を出力する形です。
この場合、「商品ページに動画がある場合、商品ページから動画と説明文を自動で出力」という形になると思うのですが、
やはり難しいでしょうか?(商品名を押すと、商品ページにリンクするようにもしたいです)
また、動画の一覧ページを一枚ものではなく、
「動画24個で1ページ」とし、それ以上は次のページを自動生成するようにもしたいのですが、
こちらもやり方が分かりません。
何卒お手隙の際に、どのようにコードを書いたらいいかお教えいただけますと幸いです。
出力方法は様々ですが、上記で紹介したコードをベースに太字部分を追記するだけでいけると思います。
{% paginate collections['all'].products by 24 %}
{% for product in collections['all'].products %}
{% for media in product.media %}
{% if media.media_type == 'video' %}
{{ media | video_tag: controls: true }}
<a href="{{ product.url }}">{{ product.title }}</a>
<p>{{ product.description }}</p>
{% endif %}
{% endfor %}
{% endfor %}
{{ paginate | default_pagination }}
{% endpaginate %}
{% paginate %}で表示点数を指定し、{{ paginate | default_pagination }}でページネーションを出力、{{ product }}オブジェクトで必要な商品情報を出力するだけです。
https://shopify.dev/api/liquid/objects/product
後は、HTMLタグを追記してCSSでデザイン調整してください。
しっかり検証していないので、不具合があれば改めてご報告下さい。
mrtc様
返信ありがとうございます。
こちらのコードをベースに動作するかどうか試してみます。
丁寧にご回答いただき、ありがとうございます。
Shopify アカデミーの学習パスと認定スキルバッジExpanding Your Shopify Business Internationallyを活用して、国際的にビジネ...
By Shopify Feb 7, 2025Shopify アカデミーの学習パスB2B on Shopify:立ち上げとカスタマイズで卸売販売に進出しましょう。これら3つの無料コースは、ShopifyストアでB2B機能...
By Shopify Jan 31, 2025サポートの選択肢が増えていく中、最適となる選択の判断が難しくなっているかと存じます。今回は問題の解決に最適となるサポートの選択方法を、紹介させて頂きます。 選択肢のご紹介...
By Mirai Oct 6, 2024