0

我在我的网站上使用 .change() 函数单击此处，它使用户能够选择其产品的数量。我遇到的问题是我的图表只是将我的我链接到 12 包而不是 6 包。我检查了萤火虫，我注意到矩阵创建了两个链接到 6 包的按钮按钮开始与 12 包的按钮重叠。在我的 HTML 中只有一个按钮

点击这里

最终，我希望按钮链接相对于价格发生变化。我注意到我的 Matrix 没有响应 Jquery 调用，所以我假设有一些表达式标签可以做到这一点。矩阵字段设置

这意味着当您选择 6 包时，您单击添加到图表，它会将您定向到购物车，价格为 6 包。目前它只是拿起12pack。如果您查看检查器中的页面，您会注意到一个矩阵创建了两个按钮，一个用于 6 包，一个用于 12 包。12 与六个 b 重叠，因为该按钮正在使用一个类。

<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 对象用于购物车交互的东西。表示将其设置为 that 而不是 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>

这样做的主要优点是灵活性：此代码应处理具有每个选项价格的任何选项值范围，因为 select html、添加到购物车按钮和 priceMessage 对象都是从相同的数据动态生成的EE。

于 2012-10-05T09:29:35.560 回答
0

是的，你有 12 在 6 之上。

为什么不并排显示它们，或者只显示用户选择的那个？

于 2012-10-05T00:33:41.130 回答