FROM CACHE - jp_header
解決済

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

ななし
観光客
8 1 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>

【問題】

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

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

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

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

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

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

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

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

よろしくお願いします。

2 件の受理された解決策

Qcoltd
Shopify Partner
1023 415 392

成功

@ななし 様

 

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

 

こちらのコードを、

  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]にすることで、

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

 

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

(キュー田辺)

株式会社Q (キュー)
グラフィックデザイン、アパレル事業、Web制作など色々やっている渋谷区代々木の会社です。ShopifyでのECサイトの運営・開発も行なっています。
私たちについて: https://web.q-co.jp/ テックブログ: https://techlab.q-co.jp/

元の投稿で解決策を見る

ななし
観光客
8 1 1

成功

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

助かりました。

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

元の投稿で解決策を見る

2件の返信2

Qcoltd
Shopify Partner
1023 415 392

成功

@ななし 様

 

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

 

こちらのコードを、

  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]にすることで、

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

 

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

(キュー田辺)

株式会社Q (キュー)
グラフィックデザイン、アパレル事業、Web制作など色々やっている渋谷区代々木の会社です。ShopifyでのECサイトの運営・開発も行なっています。
私たちについて: https://web.q-co.jp/ テックブログ: https://techlab.q-co.jp/
ななし
観光客
8 1 1

成功

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

助かりました。

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