オプション機能のカスタマイズについて

[S_F_]

次のような設定を実現したいと思うのですが、

方法もしくは対応できるアプリをお分かりになる方はいらっしゃいますでしょうか？

ちなみに「infinit options」アプリに問い合わせたところ、対応不可との回答を得ています。

------

Shopifyに「商品1」「商品2」「商品3」の３つの商品が登録されていると仮定します。

「商品1」のページにアクセスし、プルダウン形式のオプション（AかBかCが選択できる）の中から、

Aを選んだ場合は「商品1」のページのまま、

Bを選んだ場合は「商品2」のページに移動、

Cを選んだ場合は「商品3」のページに移動する

[Sota_yohaku · Accepted solution]

要件を満たすアプリは分からないですが、テーマを編集すれば要件を満たせると思います。
方法は、商品1、2、3が属するコレクションを作成し、商品ページでコレクションに含まれる商品をselectで表示します。
選択肢A、B、Cは商品のメタフィールドとして登録します。使用したアプリは『Metafields Guru』です。

最初に商品にメタフィールドを設定します。

次にコレクションを作成します。

使用するコードの完成形は以下になります。

{% assign is_products = false %}
      {% for collection in product.collections %}
        {% if collection.handle == "products" %}
          {% assign is_products = true %}
        {% endif %}
      {% endfor %}

      {% if is_products %}
        {% assign is_id = product.id %}
        {% assign collection = collections['products'] %}

        <select onChange="location.href=value;">
          {% for product in collection.products %}
            {% if product.id == is_id %}
            <option value="#" selected>{{ product.metafields.namespace.key }}</option>
            {% else %}
            <option value="{{ product.url }}">{{ product.metafields.namespace.key }}</option>
            {% endif %}
          {% endfor %}
        </select>
      {% endif %}

テストで使用したテーマはdebutです、コード的にどのテーマでも問題ないと思います。
コードは商品ページ(product-template.liquid)の表示したい場所に貼り付けてください。
以下はコードの説明です。

コレクションのハンドル名は『products』にしています。

{% assign is_products = false %}
      {% for collection in product.collections %}
        {% if collection.handle == "products" %}
          {% assign is_products = true %}
        {% endif %}
      {% endfor %}

最初のforは、商品1、2、3以外にも商品がある場合その商品ページではプルダウンメニューを表示をしないための判定です。商品自体にproductsコレクションが含まれているか判定しています。

{% if is_products %}
        {% assign is_id = product.id %}
        {% assign collection = collections['products'] %}

        <select onChange="location.href=value;">
          {% for product in collection.products %}
            {% if product.id == is_id %}
            <option value="#" selected>{{ product.metafields.namespace.key }}</option>
            {% else %}
            <option value="{{ product.url }}">{{ product.metafields.namespace.key }}</option>
            {% endif %}
          {% endfor %}
        </select>
      {% endif %}

変数is_idは、商品1だった場合選択肢Aを選ばれたときにはページ移動をしないという要件を満たすために開いている商品ページの商品IDを控えています。

あとはselect内でコレクションのループを回して、表示中の商品か否かを判断して移動先をoptionのvalueに入れています。

S_F_さんのしたいことか分かりませんが、よければ使ってください。

[Sota_yohaku · Accepted solution]

要件を満たすアプリは分からないですが、テーマを編集すれば要件を満たせると思います。
方法は、商品1、2、3が属するコレクションを作成し、商品ページでコレクションに含まれる商品をselectで表示します。
選択肢A、B、Cは商品のメタフィールドとして登録します。使用したアプリは『Metafields Guru』です。

最初に商品にメタフィールドを設定します。

次にコレクションを作成します。

使用するコードの完成形は以下になります。

{% assign is_products = false %}
      {% for collection in product.collections %}
        {% if collection.handle == "products" %}
          {% assign is_products = true %}
        {% endif %}
      {% endfor %}

      {% if is_products %}
        {% assign is_id = product.id %}
        {% assign collection = collections['products'] %}

        <select onChange="location.href=value;">
          {% for product in collection.products %}
            {% if product.id == is_id %}
            <option value="#" selected>{{ product.metafields.namespace.key }}</option>
            {% else %}
            <option value="{{ product.url }}">{{ product.metafields.namespace.key }}</option>
            {% endif %}
          {% endfor %}
        </select>
      {% endif %}

テストで使用したテーマはdebutです、コード的にどのテーマでも問題ないと思います。
コードは商品ページ(product-template.liquid)の表示したい場所に貼り付けてください。
以下はコードの説明です。

コレクションのハンドル名は『products』にしています。

{% assign is_products = false %}
      {% for collection in product.collections %}
        {% if collection.handle == "products" %}
          {% assign is_products = true %}
        {% endif %}
      {% endfor %}

最初のforは、商品1、2、3以外にも商品がある場合その商品ページではプルダウンメニューを表示をしないための判定です。商品自体にproductsコレクションが含まれているか判定しています。

{% if is_products %}
        {% assign is_id = product.id %}
        {% assign collection = collections['products'] %}

        <select onChange="location.href=value;">
          {% for product in collection.products %}
            {% if product.id == is_id %}
            <option value="#" selected>{{ product.metafields.namespace.key }}</option>
            {% else %}
            <option value="{{ product.url }}">{{ product.metafields.namespace.key }}</option>
            {% endif %}
          {% endfor %}
        </select>
      {% endif %}

変数is_idは、商品1だった場合選択肢Aを選ばれたときにはページ移動をしないという要件を満たすために開いている商品ページの商品IDを控えています。

あとはselect内でコレクションのループを回して、表示中の商品か否かを判断して移動先をoptionのvalueに入れています。

S_F_さんのしたいことか分かりませんが、よければ使ってください。

[S_F_]

ありがとうございます！！

理想通りのかたちが実現できそうです、大変助かりました！

重ねて御礼申し上げます！！

[S_F_]

解決済みにさせていただいたところ、

追加での質問になり申し訳ございません。

本件の実装ですが、

pristageを使用する場合は、どこにコードを書けば良いかおわかりになりますでしょうか？

度々お手数をお掛けしますが、どうぞよろしくお願いいたします。

[Sota_yohaku · Accepted solution]

この有料テーマを自分が持ち合わせてないので明確にお答えできないですが、『section』ディレクトリの中に商品ページ用のテンプレートファイルがあると思います。
その中で記述すれば商品ページに表示できると思います。
debutというテーマでは『product-template.liquid』というファイルなのでそれに似たようなファイルを探してください。

表示するHTMLの確認ですが、chromeなどから自分のストアで検証モードを開いて頂いてクラス名やID名で検索をかけてください。

デモストアで確認したところ、『shopify-section--bordered』か『Product--medium』のクラス名で検索をかければ出てくるのかなぁと思います。

どうしても見つけれない場合はテーマ制作者に問い合わせるか、コミュニティで再度質問をしてみてください。
お力になれず申し訳ないですが、頑張ってください。

[S_F_]

ご丁寧にありがとうございました！

無事実装できそうです！

重ねて御礼申し上げます！！