不具合についてお知らせがありました。
初期コーディングの際に覚えておいてくださいという以下の内容です。
メタオブジェクトは運用していくにつれ、登録数が増えていきますが、
for ループの上限がデフォルトでは おそらく50件までのため、
paginate を使い、ループの上限を上げてあげる必要があります。
50件以上も商品カテゴリーがあるって、そんないっぱい普通あります？凄くないですか。
paginateを使用した修正コードサンプル
{% paginate shop.metaobjects.color.values by 999 %}
{% for colors in shop.metaobjects.color.values %}
<p>カラー名：{{ colors.name }}</p>
{% endfor %}
{% endpaginate %}この記事も修正したいです。
商品タイプでサイズガイド画像を差し替えたい
サイズ表の付近にサイズガイドの画像を表示させたい。
そんな要件はありますでしょうか。
以下のような感じで、サイズについての説明をする画像を表示したいです。
商品タイプごとに異なるガイド画像を表示することで、ショップのユーザーエクスペリエンスを向上させたいという目論見です。
商品タイプってなんですか？
商品カテゴリーというと馴染みがあるでしょうか。
私は以下のようにproduct.typeでガチの分岐コーディングしました。
この方法ですと、新たなタイプの商品ができたら、ソースコードを追加で書き換えないといけませんね。
はい。急いで仕込んだものでして。。
当初の仕様では、メタフィールドで商品に該当するガイド画像を登録してもらえるようにしていました。
ところが、「ガイド内容はほぼ一緒である」「毎回登録するのが面倒」だというのです。
不便ですよ！未通しが甘いですぞ。
ど素人ですか、ほんとにもう。
やり直しですね。何やってるんですか。
ふぇぇ。
「商品タイプ」は絶対に登録する箇所。それを利用できないか、という要件です。
どうやるのでしょうか。教えてもらいました。
そんな時「メタオブジェクト」を利用します。
【修正/共有】リキッドソース
商品詳細ページ用のliquidファイルの、テーブル表のあたりに共有ソースをコピペして仕込んでください。
要件は以下です。
・商品タイプが存在しない場合 → [何も表示しない]
・商品タイプが存在するが、対応するサイズガイドがない場合→ [何も表示しない]
・商品タイプが存在し、対応するサイズガイドがある場合→ [表示する]
修正バージョン
sections/main-product.liquid
{% assign has_sizeguide = false %}
{% for sizeguide in shop.metaobjects.sizeguide.values %}
{% if sizeguide.category_name == product.type %}
{% assign has_sizeguide = true %}
{% endif %}
{% endfor %}
{% if product.type and has_sizeguide %}
<p class="title">SIZE GUIDE</p>
<div class="sizeguideImage">
{% paginate shop.metaobjects.sizeguide.values by 999 %}
{% for sizeguide in shop.metaobjects.sizeguide.values %}
{% if sizeguide.category_name == product.type %}
<img src="{{ sizeguide.image | img_url: '840x' }}" loading="lazy" alt="{{ sizeguide.category_name }} SIZE" width="420" height="283">
{% endif %}
{% endfor %}
{% endpaginate %}
</div>
{% endif %}
POINT
has_sizeguideというフラグを使用し、trueだと表示させます。
サイズガイド画像を描画するために、ループを2回目に再利用という想定です。
11行目から修正のpaginateです。
has_sizeguide を判定するためのループでは paginate を使わず、全件を対象にチェック。
画像を表示するループ内で paginate を適用しています。
metaobjectsという記述が使われます。
後でそれのメタオブジェクトを管理画面で作成します。
メタオブジェクトを作成する前に、サイズガイド画像をつくります。
【AI】サイズガイド画像を作ろう
あなたはサイズガイドの「画像」を作れと言われてパッとできますでしょうか？
私は無理なのでAIに手がかりをお願いします。
パッとできちゃう人もいるでしょう。
そういうレベチな人はこの記事の読者対象者ではございません。
真似するばかりで恥ずかしくないのですか。
そこでおすすめなのがAIです。検索よりも早いかも。
AIの使い方の記事はこちら
https://neo.astrowave.jp/blog/508/
ChatGPTオフィシャル
https://chat.openai.com/
ChatGPTさんに、以下のように尋ねます。
ECショップによくあるTシャツのサイズについての説明の図の、モノクロの画像が欲しいです。作成していただけますでしょうか。
あなたはすごい！
同じテイストで、ショルダーバックのサイズについての説明の図の、モノクロの画像が欲しいです。
そうすると以下のように教えてくれます。
無料枠ですと3枚まで。
それ以上を頼みたい時は課金してください。
【メタオブジェクト】ガイド画像を登録する場所
サイズガイド画像の登録、商品タイプへの関連付けテキストを入力する場所を作成します。
その方法はまとめると以下の手順で行います。
1.メタオブジェクトの準備:
Shopify管理画面の「設定」＞「カスタムデータ」＞「メタオブジェクト」から、sizeguideオブジェクトを作成し、必要なフィールド（例: category_name, image）を登録します。
2.サイズガイド画像の登録:
各カテゴリ（例: Tシャツ、ジャケットなど）のサイズガイド画像を、該当するメタオブジェクトにアップロードして関連付けます。
メタオブジェクトは、メタフィールドの親戚というか、オリジナルでカスタム版の入力箇所を作るイメージです。
管理画面に行く
管理画面に行って、カスタムデータを見ると、メタオブジェクトに「定義を追加」するボタンがあります。
↓こちらから行っても同じです。
メタオブジェクトを作る
・メタオブジェクト名「sizeguide」を入れます。
・メタオブジェクト「sizeguide」のフィールドを2つ追加します。
それは登録のために使います以下のフィールドです。
・単一行テキスト
→ 名前 CATEGOLY NAME
→ キー category_name
・ファイル
→ 名前 CATEGOLY IMAGE
→ キー image
フィールドを作る
「+フィルドを追加」を押すといくつも追加できますが、今回は2つ作成です。
関連付けよう
・商品タイプのテキストを登録する
・サイズ画像を登録する
保存したメタオブジェクトはメニューのコンテンツにあります。
「sizeguide」をクリックしましょう。
「エントリーを追加」ボタンから、商品タイプの数だけ存分に追加したってください。
CATEGORY NAMEに入れる商品タイプのテキストは、商品登録の時に入れた商品タイプのテキストと同じものを入れます。
英文字が良いでしょう。（例：HUMAN）
※大文字小文字も判別しますので全く同じように入力してください。
例えば以下の商品名「おじさん」の、
商品タイプ「HUMAN」は、メタオブジェクトにある「HUMAN」と合致して、以下のように商品詳細ページにガイド画像が現れるでしょう。
このおじさんはロボットなんですか！？
着せ替えが自由なのでしょうか。
そのようです( ◜ω◝ )
参考サイト置き場
参考にさせていただいているサイトのリンクです。
STORE DOJO
https://store-dojo.com/
ChatGPTオフィシャル
https://chat.openai.com/
shopifyオフィシャル
https://www.shopify.com/jp
星間旅路のメロディ
「宇宙の静けさに包まれながら、漂流する過去の音楽を捜し求め、銀河の奥底でその旋律に耳を傾ける。」
「この電波はどこの星からきたのだろうか。」
映像データの破損が特に激しいです。
何の歌でしょうか。