shopifyのメディアにアップロードしている動画の一覧表示

[BECOS]

shopifyのデフォルト機能を利用して、商品ページに動画を入れています。

動画の一覧ページを作成しようと考えているのですが、動画のみを抜き出して一覧のページを作成することは可能でしょうか。

動的に、作成できない場合、静的にでもできればと考えているのですが、CSVで出力してもmp4のメディアURLは出力されず、困っております。

[mrtc]

商品ページに入れている動画一覧であれば、以下のコードでページに出力できるかと思います。

{% 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

[BECOS]

ご回答ありがとうございます。

Templatesにliquid を新規作成して、collectionにテーマテンプレートとして設置すれば良いでしょうか。

設置してみたのですが、うまく行かず、どのようにしたらよいか教えていただけると助かります。

[mrtc · Accepted solution]

上記のコードを貼り付ければ、どのテンプレートでも動画一覧は出力はされます。
テーマによって構造やファイル名が異なりますし、最終的にどんな動画一覧ページを作成したいのかによってHTMLやCSSなども変わります。

テーマがDawnの場合は以下の通りです。

1. ページテンプレートを作成（Templates/page.video.json）※page.jsonのソースをコピペ
2. ページセクションを作成（Sections/main-page-video.liquid））※main-page.liquidのソースをコピペ
3. 「page.video.json」のtypeを「main-page-video」に変更
4.  「main-page-video.liquid」の下部（{% schema %}の前くらい）に上記コードをコピペ
5. HTMLやCSSでデザイン調整
6. ページを作成 ※テーマテンプレート「video」を選択

このフローで動画一覧ページができます。
2.0に対応していないテーマでも、だいたい同じようなフローです。

ただし、このカスタマイズにはLIQUIDやHTML、CSSを操作するスキルが必要です。
難しいようであれば、Shopifyパートナーやエキスパートなど専門家に依頼することをお勧めします。

[BECOS]

ご丁寧にありがとうございます。

Shopifyパートナーの方に相談してみます。

[ashimorimeron]

横から失礼いたします。

こちらのように動画の一覧ページを作り、

さらにその動画にディスクリプションのように説明文を表示したいのですが、

それも自動取得することはできるのでしょうか？

具体的には、各商品ページにそれぞれ入っている動画を一覧ページに出力し、

その動画の下に添付画像のように商品ページ内の商品名と商品説明を出力する形です。

この場合、「商品ページに動画がある場合、商品ページから動画と説明文を自動で出力」という形になると思うのですが、

やはり難しいでしょうか？(商品名を押すと、商品ページにリンクするようにもしたいです)

また、動画の一覧ページを一枚ものではなく、

「動画24個で1ページ」とし、それ以上は次のページを自動生成するようにもしたいのですが、

こちらもやり方が分かりません。

何卒お手隙の際に、どのようにコードを書いたらいいかお教えいただけますと幸いです。

[mrtc]

出力方法は様々ですが、上記で紹介したコードをベースに太字部分を追記するだけでいけると思います。

{% 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でデザイン調整してください。

しっかり検証していないので、不具合があれば改めてご報告下さい。

[ashimorimeron]

mrtc様

返信ありがとうございます。

こちらのコードをベースに動作するかどうか試してみます。

丁寧にご回答いただき、ありがとうございます。