shopifyのデフォルト機能を利用して、商品ページに動画を入れています。
動画の一覧ページを作成しようと考えているのですが、動画のみを抜き出して一覧のページを作成することは可能でしょうか。
動的に、作成できない場合、静的にでもできればと考えているのですが、CSVで出力してもmp4のメディアURLは出力されず、困っております。
AI-generated summary
テーマ: 商品ページに登録した動画だけを抽出して、動画一覧ページを動的に作成したい。CSV出力ではmp4のURLが取得できず困っている。
対応方針: Liquid（Shopifyのテンプレート言語）でcollections[‘all’].productsを走査し、product.mediaのmedia_typeがvideoのものだけをvideo_tag（動画埋め込み用フィルタ）で出力する方法が提示。生のmp4 URLではなく、埋め込み表示で解決。
実装手順（Dawn例）: page.video.jsonとmain-page-video.liquidを作成し紐付け、sectionの{% schema %}前にコードを挿入。ページ作成時にテンプレート「video」を選択。Liquid/HTML/CSSの知識が必要で、難しければパートナー依頼推奨。
追加要望への更新: 一覧に商品名（商品ページへリンク）と商品説明を自動表示し、24件ごとのページネーションを実装。paginate by 24とdefault_pagination、product.title/product.description/product.urlの出力で対応可能。
ステータス: 初期質問者はパートナーへ相談予定。追加要望のコード案も提示済みだが未検証のため要テスト。CSVでmp4 URLを得る件は未解決だが、一覧表示の実装方針は固まった。
商品ページに入れている動画一覧であれば、以下のコードでページに出力できるかと思います。
{% 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の場合は以下の通りです。
- ページテンプレートを作成（Templates/page.video.json）※page.jsonのソースをコピペ
- ページセクションを作成（Sections/main-page-video.liquid））※main-page.liquidのソースをコピペ
- 「page.video.json」のtypeを「main-page-video」に変更
- 「main-page-video.liquid」の下部（{% schema %}の前くらい）に上記コードをコピペ
- HTMLやCSSでデザイン調整
- ページを作成 ※テーマテンプレート「video」を選択
このフローで動画一覧ページができます。
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 }}
{{ product.title }}
{{ product.description }}
{% endif %}
{% endfor %}
{% endfor %}
{{ paginate | default_pagination }}
{% endpaginate %}
{% paginate %}で表示点数を指定し、{{ paginate | default_pagination }}でページネーションを出力、{{ product }}オブジェクトで必要な商品情報を出力するだけです。
https://shopify.dev/api/liquid/objects/product
後は、HTMLタグを追記してCSSでデザイン調整してください。
しっかり検証していないので、不具合があれば改めてご報告下さい。
mrtc様
返信ありがとうございます。
こちらのコードをベースに動作するかどうか試してみます。
丁寧にご回答いただき、ありがとうございます。