FROM CACHE - jp_header
このコミュニティはピアツーピアサポートに移行しました。Shopify サポートは今後、このコミュニティへのサービスを提供いたしません。これからもぜひ、他のマーチャントやパートナーとつながり、サポートし合い、経験を共有してください。 当社の行動規範に違反する行動や削除を希望するコンテンツがありましたら、引き続きご報告ください

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

解決済

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

ななし
観光客
8 1 1
‎11-29-2023 05:37 AM

【現状】

配送日時指定を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の知見がなく、見よう見まねで書いたので、細かい要件になるとどのように書けばいいのか全く分かりません。

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

よろしくお願いします。

ラベル：
1,222 件の閲覧回数
0 件の「いいね！」
問題を報告
2 件の受理された解決策

Qcoltd
Shopify Partner
1290 513 494
‎11-30-2023 05:40 AM

成功

@ななし 様

 

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

 

こちらのコードを、

  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/

元の投稿で解決策を見る

967 件の閲覧回数
1 件の「いいね！」
問題を報告
Qcoltdに対する応答

ななし
観光客
8 1 1
‎12-02-2023 01:34 AM

成功

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

助かりました。

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

元の投稿で解決策を見る

889 件の閲覧回数
0 件の「いいね！」
問題を報告
2件の返信2

Qcoltd
Shopify Partner
1290 513 494
‎11-30-2023 05:40 AM

成功

@ななし 様

 

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

 

こちらのコードを、

  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/
968 件の閲覧回数
1 件の「いいね！」
問題を報告
Qcoltdに対する応答

ななし
観光客
8 1 1
‎12-02-2023 01:34 AM

成功

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

助かりました。

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

890 件の閲覧回数
0 件の「いいね！」
問題を報告

コミュニティ・ブログ記事

Academy marketing image.webp
Shopify アカデミーで、ビジネスのグローバル成長の機会を見つけましょう。

Shopify アカデミーの学習パスと認定スキルバッジExpanding Your Shopify Business Internationallyを活用して、国際的にビジネ...

By Shopify Feb 7, 2025
page_thumb_general_black.png
Shopify アカデミーの学習パスと検証済みスキルでB2Bの成功を実現

Shopify アカデミーの学習パスB2B on Shopify：立ち上げとカスタマイズで卸売販売に進出しましょう。これら3つの無料コースは、ShopifyストアでB2B機能...

By Shopify Jan 31, 2025
mobile-contact-us-form.webp
問題の解決に最適なサポートチャネルを見つけよう！

サポートの選択肢が増えていく中、最適となる選択の判断が難しくなっているかと存じます。今回は問題の解決に最適となるサポートの選択方法を、紹介させて頂きます。 選択肢のご紹介...

By Mirai Oct 6, 2024
利用規約 プライバシーポリシー