【cart attribute】【javascript】配送日時選択のプルダウンメニューを動的に変更したい。

日本語 ディスカッション 技術的なQ＆A
,

Topic summary

課題:
Shopifyのカート画面で、配送日時選択機能を実装中。店頭受取と配送でプルダウンメニューを切り替える際、非表示にした入力フィールドの値もカート属性として送信されてしまう問題が発生。

解決策:
Qcoltd氏が提案したJavaScriptコードを使用:

  • 非表示時に入力フィールドのname属性にプレフィックス（_）を追加
  • 表示時にプレフィックスを削除
  • nameがattributes[xxxx]形式でない場合、カート属性として認識されないShopifyの仕様を利用

結果:
提案されたコードで問題が解決。質問者は感謝の意を表明し、今後は自力で解決できるよう精進すると述べた。

技術要素:
JavaScript、jQuery UI、Shopify Liquid、cart attributes、動的フォーム制御

Summarized with AI on November 14. AI used: claude-sonnet-4-5-20250929.
1

【現状】

配送日時指定をcart attributeを利用し、カート画面に実装しました。

要件として、店頭受取と配送で指定できる日時を変更したいので、ラジオボタンで店頭受取か配送かを選択し、表示するプルダウンメニューを切り替える形で実装しました。

以下コードです。(snipetファイルに記述しrenderでカート画面に挿入しています。)

{{ '//code.jquery.com/ui/1.9.2/themes/base/jquery-ui.css' | stylesheet_tag }}
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.9.2/jquery-ui.min.js" defer="defer"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1/i18n/jquery.ui.datepicker-ja.min.js" type="text/javascript" defer="defer"></script>

<p class="cart-attribute__field">
  <label>受取日時選択</label><br>
  <input required class="required" type="radio" name="attributes[受取日時選択]" value="発送" onclick="formSwitch()" {% if cart.attributes["受取日時選択"] == "発送" %} checked{% endif %} > <span>発送</span><br>
  <input required class="required" type="radio" name="attributes[受取日時選択]" value="店頭受取" onclick="formSwitch()" {% if cart.attributes["受取日時選択"] == "店頭受取" %} checked{% endif %} > <span>店頭受取</span><br>
</p>

<p class="cart-attribute__field">
  <div id="delivery">
    <label for="date">発送希望日:</label>
    <input id="date2" type="text" name="attributes[発送希望日]" value="{{ cart.attributes.date }}" placeholder="希望日を選択" form="cart" />
  <br>
    <label>発送希望時間帯:</label>
    <select id="" name="attributes[発送希望時間]" form="cart">
      <option value="8:00〜12:00"{% if cart.attributes["発送希望時間"] == "8:00〜12:00" %} selected{% endif %}>8:00〜12:00</option>
      <option value="12:00〜14:00"{% if cart.attributes["発送希望時間"] == "12:00〜14:00" %} selected{% endif %}>12:00〜14:00</option>
      <option value="14:00〜16:00"{% if cart.attributes["発送希望時間"] == "14:00〜16:00" %} selected{% endif %}>14:00〜16:00</option>
      <option value="18:00～20:00"{% if cart.attributes["発送希望時間"] == "18:00～20:00" %} selected{% endif %}>18:00～20:00</option>
      <option value="19:00～21:00"{% if cart.attributes["発送希望時間"] == "19:00～21:00" %} selected{% endif %}>19:00～21:00</option>
      <option value="20:00～21:00"{% if cart.attributes["発送希望時間"] == "20:00～21:00" %} selected{% endif %}>20:00～21:00</option>
     </select>
  </div>
</p>

<p class="cart-attribute__field">
 <div id="pick-up">
    <label for="date2">受取希望日:</label>
    <input id="date" type="text" name="attributes[受取希望日]" value="{{ cart.attributes.date }}" placeholder="希望日を選択" form="cart" />
  <br>
    <label>受取希望時間帯:</label>
    <select  id="" name="attributes[受取希望時間]" form="cart">
      <option value="10:00～10:30"{% if cart.attributes["受取希望時間"] == "10:00～10:30" %} selected{% endif %}>10:00～10:30</option>
      <option value="10:30～11:00"{% if cart.attributes["受取希望時間"] == "10:30～11:00" %} selected{% endif %}>10:30～11:00</option>
      <option value="11:00～11:30"{% if cart.attributes["受取希望時間"] == "11:00～11:30" %} selected{% endif %}>11:00～11:30</option>
      <option value="11:30～12:00"{% if cart.attributes["受取希望時間"] == "11:30～12:00" %} selected{% endif %}>11:30～12:00</option>
      <option value="12:00～12:30"{% if cart.attributes["受取希望時間"] == "12:00～12:30" %} selected{% endif %}>12:00～12:30</option>
      <option value="12:30～13:00"{% if cart.attributes["受取希望時間"] == "12:30～13:00" %} selected{% endif %}>12:30～13:00</option>
      <option value="13:00～13:30"{% if cart.attributes["受取希望時間"] == "13:00～13:30" %} selected{% endif %}>13:00～13:30</option>
      <option value="13:30～14:00"{% if cart.attributes["受取希望時間"] == "13:30～14:00" %} selected{% endif %}>13:30～14:00</option>
      <option value="14:00～14:30"{% if cart.attributes["受取希望時間"] == "14:00～14:30" %} selected{% endif %}>14:00～14:30</option>
      <option value="14:30～15:00"{% if cart.attributes["受取希望時間"] == "14:30～15:00" %} selected{% endif %}>14:30～15:00</option>
      <option value="15:00～15:30"{% if cart.attributes["受取希望時間"] == "15:00～15:30" %} selected{% endif %}>15:00～15:30</option>
      <option value="15:30～16:00"{% if cart.attributes["受取希望時間"] == "15:30～16:00" %} selected{% endif %}>15:30～16:00</option>
      <option value="16:00～16:30"{% if cart.attributes["受取希望時間"] == "16:00～16:30" %} selected{% endif %}>16:00～16:30</option>
      <option value="16:30～17:00"{% if cart.attributes["受取希望時間"] == "16:30～17:00" %} selected{% endif %}>16:30～17:00</option>
      <option value="17:00～17:30"{% if cart.attributes["受取希望時間"] == "17:00～17:30" %} selected{% endif %}>17:00～17:30</option>
      <option value="17:30～18:00"{% if cart.attributes["受取希望時間"] == "17:30～18:00" %} selected{% endif %}>17:30～18:00</option>
      <option value="18:00～18:30"{% if cart.attributes["受取希望時間"] == "18:00～18:30" %} selected{% endif %}>18:00～18:30</option>
      <option value="18:30～19:00"{% if cart.attributes["受取希望時間"] == "18:30～19:00" %} selected{% endif %}>18:30～19:00</option>
      <option value="19:00～19:30"{% if cart.attributes["受取希望時間"] == "19:00～19:30" %} selected{% endif %}>19:00～19:30</option>
      <option value="19:30～20:00"{% if cart.attributes["受取希望時間"] == "19:30～20:00" %} selected{% endif %}>19:30～20:00</option>
     </select>
 </div>
</p>

<script>
	  window.addEventListener('load', function() {
      if (window.jQuery) {
        let $ = window.jQuery;
        $(function() {
          $.datepicker.setDefaults( $.datepicker.regional[ "ja" ] );
          
          $("#date").datepicker({
          minDate: +3,
          maxDate: '+1M',
          showButtonPanel: true
        });
          $("#date2").datepicker({
          minDate: +5,
          maxDate: '+1M',
          showButtonPanel: true
        });
      });
    }
    
  });

  function formSwitch() {
    hoge = document.getElementsByName('attributes[受取日時選択]')
    if (hoge[0].checked) {
        // 発送が選択されたら下記を実行します
        document.getElementById('delivery').style.display = "";
        document.getElementById('pick-up').style.display = "none";
    } else if (hoge[1].checked) {
        // 店頭受取が選択されたら下記を実行します
        document.getElementById('delivery').style.display = "none";
        document.getElementById('pick-up').style.display = "";
    } else {
        document.getElementById('delivery').style.display = "none";
        document.getElementById('pick-up').style.display = "none";
    }
}
window.addEventListener('load', formSwitch());
</script>

【問題】

プルダウンメニューを２つ記述し、javasriptで表示を切り替える方法だと、商品購入後の注文状況画面や

メール、注文管理画面に、２つのプルダウンメニューのオプションが表示されてしまいます。(画面表示をコントロールしているだけであるため）

ですので、改善案として以下を考えました。

１、プルダウンメニューを１つにし、オプションをjavascriptで動的に操作する。

２、プルダウンメニューは２つのまま、ラジオボタンの選択によって、注文状況などに表示される属性であるform=“cart” をjavascriptで動的に付与する。

どちらかで実現できるのかなと考えています。

ですがjavascriptの知見がなく、見よう見まねで書いたので、細かい要件になるとどのように書けばいいのか全く分かりません。

上記以外でも簡単に実現できる方法があればコード込みでお教えいただけますととてもありがたいです。

よろしくお願いします。

2

@Anonymous_137eeb8730065ff8b1765f1b6ac7d8c3 様

十分に検証できていませんが下記ではいかがでしょうか？

こちらのコードを、

function formSwitch() {
    hoge = document.getElementsByName('attributes[受取日時選択]')
    if (hoge[0].checked) {
        // 発送が選択されたら下記を実行します
        document.getElementById('delivery').style.display = "";
        document.getElementById('pick-up').style.display = "none";
    } else if (hoge[1].checked) {
        // 店頭受取が選択されたら下記を実行します
        document.getElementById('delivery').style.display = "none";
        document.getElementById('pick-up').style.display = "";
    } else {
        document.getElementById('delivery').style.display = "none";
        document.getElementById('pick-up').style.display = "none";
    }
}
window.addEventListener('load', formSwitch());

下記に変更します。

function formSwitch() {
    hoge = document.getElementsByName('attributes[受取日時選択]')
    const delivery = document.getElementById('delivery');
    const pickup = document.getElementById('pick-up');
    const deliveryInputs = delivery.querySelectorAll('input, select');
    const pickupInputs = pickup.querySelectorAll('input, select');
    const prefix = '_';
    
    if (hoge[0].checked) {
        // 発送が選択されたら下記を実行します
        delivery.style.display = "";
        pickup.style.display = "none";
        toggleInputNamePrefix(deliveryInputs, prefix, false);
        toggleInputNamePrefix(pickupInputs, prefix, true);
    } else if (hoge[1].checked) {
        // 店頭受取が選択されたら下記を実行します
        delivery.style.display = "none";
        pickup.style.display = "";
        toggleInputNamePrefix(deliveryInputs, prefix, true);
        toggleInputNamePrefix(pickupInputs, prefix, false);
    } else {
        delivery.style.display = "none";
        pickup.style.display = "none";
        toggleInputNamePrefix(deliveryInputs, prefix, true);
        toggleInputNamePrefix(pickupInputs, prefix, true);
    }
}
window.addEventListener('load', formSwitch());

function toggleInputNamePrefix(elements, prefix, isAdd) {
  elements.forEach(element => {
    if(isAdd){
      if (element.name.indexOf(prefix) < 0) {
        element.name = prefix + element.name;      
      }
    } else {
      if (element.name.indexOf(prefix) === 0) {
        element.name = element.name.slice(1);
      }
    }
  });
}

nameがattributes[xxxx]の時に、カートアトリビューションとして機能しますので、

nameに文字を加えて_attributes[xxxx]にすることで、

注文情報に付与されるのを回避します。

もっとスマートな方法もありそうですが、ご参考まで。

(キュー田辺)

1 Like
3

ご提示いただいたコードにて解決いたしました。

助かりました。

自力解決できるよう精進していきます。