商品を登録するとき、色であればバリエーションColorとして「Black」とか「red」などと登録していくと思います。

そうすると商品詳細ページにはColorの選択肢として、プルダウンやボタンで選択エリアが表示されて、購入する商品の色を選択が可能になります。

その商品に「リンクしたい」というのです。

色違いで商品を新たに登録する。ということでした。

どう対応したら良いのでしょう。

AIに色々と聞いたのですが、聞き方がまずいのでしょう要領を得ません。
半日粘っても私では埒が開かないのを悟り、教えを乞うことになりました。

メタフィールドを使う

方法を教えてもらいました。以下です。

複数の商品リストで定義してあるので、liquidでfor文回して商品IDからOptionカラーバリューと商品URL引っ張ってきてリンク作ってください。

メタフィールドで商品リストを取得して、商品IDからカラー名・URL・売切れフラグを取得してリンク作成する。

という説明です。
メタフィールドを作成します。
商品のメタフィールドで、商品リストを選びます。

リンク先となる商品を登録したい、そのためのものです。

自分ではできない。以下は作成してもらいましたコードです。

{% #### メタフィールドで商品リストを取得し、商品IDからカラー名・URL・売切れフラグを取得してリンク作成 #### %}
{% assign gids = product.metafields.custom.other_color  | split: '","' %}
{% if product.metafields.custom.other_color %}
  {% #### other_colorがある複数カラーリンクの場合 #### %}
  {% for gid in gids %}
    {% assign split_id = gid | remove: '["'  | remove: 'gid://shopify/Product/' | remove: '"]' | plus:0 %}
    {% paginate collections.all.products by 1000 %}
          {% for product in collections.all.products %}
            {% if product.id == split_id %}
              {% assign variant_color = product.options_by_name["COLOR"].values %}
              <div class="label-only-input relative px-1">
                <a href="{{ product.handle }}"
                  {% if product.available == false %}style="text-decoration: line-through;"{% endif %}
                  class="relative select-none block p-2 min-w-9 cursor-pointer rounded-button border-text border-transparent text-center peer-checked:border-scheme-text is-current">
                  <span>{{ variant_color }}</span>
                </a>
              </div>
            {% endif %}
          {% endfor %}
      {% endpaginate %}
  {% endfor %}
{% else %}
  {% #### other_colorがない単品カラーの場合 #### %}
  {% assign variant_color = product.options_by_name["COLOR"].values %}
  <div class="label-only-input relative px-1">
    <div {% if product.available == false %}style="text-decoration: line-through;"{% endif %}
      class="relative select-none block p-2 min-w-9 cursor-pointer rounded-button border-text border-transparent text-center peer-checked:border-scheme-text is-current">
      <span>{{ variant_color }}</span>
    </div>
  </div>
{% endif %}

バリエーションのコード箇所へ仕込んでください。
※class名はテンプレートのcssです。テーマテンプレートに合わせてください。

ひどい！出来上がったのを見れば、多少は理解できます。。

公開されている商品を読み込みさせましょう。

もう一つの商品、半袖のおじさん。

同じ「おじさん」という商品ですが、バリエーションとして新たに作成した肝煎りの商品を登録しました。

これでテストの商品登録が完了です。確認してみました。

登録した商品がリンクとなって表示されています。

コードの解説をしてもらいました

このLiquidコードの解説をAIにしてもらいました。まとめると大きく2つ。

1. 商品メタフィールドから他のカラーオプションの商品IDを取得し、その商品IDに基づいてカラー情報や在庫情報を表示するリンクを生成します。
2. other_color メタフィールドが存在しない場合は、現在の商品カラー情報を表示します。

上から、

メタフィールドから商品IDを取得

{% assign gids = product.metafields.custom.other_color | split: '","' %}

product.metafields.custom.other_color から取得した文字列を split: '","' で分割し、配列 gids に格納します。other_color はカンマで区切られた商品IDのリストと仮定しています。

other_color が存在する場合の処理

{% if product.metafields.custom.other_color %}

other_color が存在する場合、以下の処理を行います。

各商品IDに対して処理を行うループ

{% for gid in gids %}

gids に含まれる各商品ID (gid) に対してループを実行します。

商品IDを分割して正しい形式に変換

{% assign split_id = gid | remove: '["' | remove: 'gid://shopify/Product/' | remove: '"]' | plus:0 %}

商品IDを正しい形式に変換します。gid から不要な文字を削除し、整数値に変換して split_id に格納します。

全商品を1000件ずつページネートしながら取得

{% paginate collections.all.products by 1000 %}
  {% for product in collections.all.products %}

collections.all.products を1000件ずつページネートしながらループを実行します。

取得した商品と商品IDが一致するかチェック

{% if product.id == split_id %}

取得した商品のIDと split_id が一致する場合に以下の処理を行います。

商品のカラー情報を取得

{% assign variant_color = product.options_by_name["COLOR"].values %}

商品オプションからカラー情報を取得し、variant_color に格納します。

カラー情報を表示するリンクを作成

<div class="label-only-input relative px-1">
  <a href="{{ product.handle }}"
    {% if product.available == false %}style="text-decoration: line-through;"{% endif %}
    class="relative select-none block p-2 min-w-9 cursor-pointer rounded-button border-text border-transparent text-center peer-checked:border-scheme-text is-current">
    <span>{{ variant_color }}</span>
  </a>
</div>

カラー情報を表示するリンクを作成します。商品が売り切れ (available == false) の場合、リンクに打ち消し線のスタイルを適用します。

ページネーション終了

{% endfor %}
{% endpaginate %}

全商品のループとページネーションを終了します。

other_color が存在しない場合の処理

{% else %}
  {% assign variant_color = product.options_by_name["COLOR"].values %}
  <div class="label-only-input relative px-1">
    <div {% if product.available == false %}style="text-decoration: line-through;"{% endif %}
      class="relative select-none block p-2 min-w-9 cursor-pointer rounded-button border-text border-transparent text-center peer-checked:border-scheme-text is-current">
      <span>{{ variant_color }}</span>
    </div>
  </div>
{% endif %}

other_color が存在しない場合、現在の商品に対してカラー情報を取得し、表示する処理を行います。ここでも、商品が売り切れの場合は打ち消し線のスタイルを適用します。

以上です。

メモとなります。

あとがき

こういうスクリプトはAIですぐにできるというような雰囲気がありますか？
そういう時代になっていくのでしょうか。

最近はひとえに自分のポンコツ具合に打ちひしがれる日々でございます。
調べ物をすると、あっという間に時間が経っていきますね。

この記事も楽しんでもらえるようなものになっているでしょうか、心配です。