0

私は自分のサイトで .change() 関数を使用しています ここをクリックして、ユーザーが製品の数量を選択できるようにします。私が抱えている問題は、チャートが私の私を 12 パックのみにリンクしており、6 パックにはリンクしていないことです。firebug をチェックインしたところ、マトリックスが 6 パックにリンクする 2 つのボタン ボタンを作成し、12 パックのボタンが重なっていることに気付きました。私のHTMLにはボタンが1つあります

ここをクリック

最終的には、価格に応じてボタンのリンクを変更したいと考えています。マトリックスが Jquery 呼び出しに応答しないことに気付いたので、これを行うための式タグがいくつかあると想定しています。マトリックス フィールドの設定

6 パックを選択してチャートに追加をクリックすると、6 パックの価格でショッピング カートに移動します。現時点では、12 パックをピックアップしています。インスペクターでページを見ると、マトリックスが 6 パック用と 12 用の 2 つのボタンを作成していることに気付くでしょう。

<div class="pricing-assets">
<h4>select a quantity</h4>
 <select id="item_select">
  <option value="1">6 pack</option>
  <option value="2">12 pack</option>
</select>

  <script type="text/javascript">
   var message = new Array();
     message[1] = "$15.00";
      message[2] = "$25.00";


      $(document).ready(function(){            
      $("#item_select").change(function(){
       var message_index
       message_index = $("#item_select").val();
        $(".price-item h3").empty();
         if (message_index > 0)
          $(".price-item h3").append(message[message_index]);
           });

           });

           </script>




    <div class="price-item right"><h3>$15.00</h3>
    {p_cartlink}
    <a href="http://store.bodyworksforme.com/ShoppingCart.asp?ProductCode={id}" class="button_atc atc_{url_title}"></a>
    {/p_cartlink}
4

2 に答える 2

1

マトリックス ループ内で、製品 ID と一致するようにリンク要素にクラス/ID を追加し、それを選択オプションの値として使用して、選択が変更されたときにリンクを切り替えることができるようにします。詳細に：

まず、選択で、マトリックス フィールドの内容に基づいて選択項目を動的に生成します (オプション名は {option_name} と呼ばれていると思います。必要に応じて置き換えます。

<div class="pricing-assets">
<h4>select a quantity</h4>
 <select id="item_select">
  {p_cartlink}
    <option value="{id}">{option_name}</option>
  {/p_cartlink}
</select>

カートに追加するリンクで、関連するオプションの ID に基づいてクラスを設定.add_cart_します。既存のスタイルでの衝突を避けるために、そのクラスに名前空間を設定しました。

    <div class="price-item right"><h3>$15.00</h3>
    {p_cartlink}
        <a href="http://store.bodyworksforme.com/ShoppingCart.asp?ProductCode={id}" class="button_atc atc_{url_title} add_cart_{id}"></a>
    {/p_cartlink}

次に、JS (同じテンプレートにある必要があります) で、オプションを含むオブジェクトを指す onReady JS からアクセスできるグローバル変数を作成します。これは、マトリックスを再度ループすることによって入力されます。

配列ではなくオブジェクトを使用することで、オプション ID をオブジェクト キーとして使用し、価格文字列を値として使用できます。

(余談: ここで誰かがおそらく JS グローバルは悪いことであり、避けるべきだと指摘するでしょう。これは一般的に正しいことですが、これは私の意見では有効な使用法です - カートの相互作用に適した親 JS オブジェクトがあればon ではなく on のプロパティとして設定することを意味しますwindow) :

<script type="text/javascript">
   window.priceMessage = {};
      {p_cartlink}
        message["{id}"] ='$' + parseFloat({option_price}).toFixed(2);
      {/p_cartlink}
</script>

メインアプリのJSファイルで、またはドキュメントの準備ができている場所でこれを行います：

    $(document).ready(function(){
      //cache some selectors to minimise DOM queries and for clarity below
      var $select = $("#item_select"),
          $priceOutput = $(".price-item h3"),
          $addToCartBtns = $(".button_atc"),
          initialVal = $("#item_select").val();

      //hide add to cart buttons except for the current valid one
      function showCartButton(value){
        $addToCartBtns.hide().filter('.add_cart_' + value).show();  
      }
      //bind to the change event
      $select.change(function(e){
        var messageVal = $(e.target).val();//get the current value of the select as of the change
        //empty the current price container
        $priceOutput.empty();
        if ( messageVal !== '')
          //append the message
          $priceOutput.append(priceMessage[messageVal]);
          //show hide add to cart
          showCartButton(messageVal);
        });
      });
      //show correct button for state of select at page load
      showCartButton(initialVal);
</script>

このようにすることの主な利点は柔軟性です。このコードは、選択 html、カートに追加ボタン、priceMessage オブジェクトがすべて同じデータから動的に生成されるため、オプションごとの価格を持つ任意の範囲のオプション値に対処する必要があります。ええ。

于 2012-10-05T09:29:35.560 に答える
0

はい、6 の上に 12 があります。

それらを並べて表示したり、ユーザーが選択したものだけを表示したりしないのはなぜですか?

于 2012-10-05T00:33:41.130 に答える