mardi 21 mars 2017

Getting an alternative data value based on change selection

I am having trouble coming up with the following logic. I have two checkboxes and within each checkbox is two data price values. One is the solo-price, which I want to use if only one checkbox is selected. Then I have a combined-price in which I want to use if both checkboxes are selected ... think bundled pricing.

I am having two issues, both relating to the combined pricing.

-when both checkboxes are selected, I cannot figure out how to use the combined pricing to show up in the package1-review-price or package2-price-review divs. Basically rewriting the following variables.

var package1Price = [];
var package2Price = [];

-Then my second issue is in direct relation to the issue above. When both checkboxes are selected, the total takes the sum of solo-price and combination-price. It shows the total as $46, when it should be $21.

Within the calcTotalPrice function, I tried nesting the total commands, like this... but it did not help.

if ($('#package2').not(':checked') && $('#package1').is(':checked')) {
        $('#package1:checked').each(function() {
          totalPrice += parseInt($(this).data('solo-price'));
        });
      }  

Does anyone see what is wrong with my logic?

Here is a fiddle.

    var package1Price = [];
    var package2Price = [];

    $('.product-check').on('change', function() {
      if ($('#package1').is(':checked') && $('#package2').is(':checked')) {
                                $('#packages-selected').toggle(100).html('Both packages selected');
      }
      if ($('#package2').not(':checked') && $('#package1').is(':checked')) {
        //Package 1 single Price
        var str = $('#package1:checked').map(function() {
          return "$" + $(this).data('solo-price');
        }).toArray().join(" ");
        $('#product1-price-review').toggle().html(str);
        calcTotalPrice();
        //$('#packages-selected').toggle(100).html('Package 1 Selected');
      }
      else if ($('#package1').not(':checked')) {
        $('#product1-price-review').toggle();
        package1Price = 0;
      }
      if ($('#package1').not(':checked') && $('#package2').is(':checked')) {
        var str = $('#package2:checked').map(function() {
          return "$" + $(this).data('solo-price');
        }).toArray().join(" ");
        $('#product2-price-review').html(str);
        $('#product1-price-review').hide();
        calcTotalPrice();
        // $('#packages-selected').toggle(100).html('Package 2 Selected');
      }
      else if ($('#package2').not(':checked')) {
        $('#product2-price-review').hide();
         package2Price = 0;
      }
    });

    function calcTotalPrice() {
      var totalPrice = 0;
      var tpPrice = 0;
      $('#package1:checked').each(function() {
        totalPrice += parseInt($(this).data('solo-price'));
      });
      $('#package2:checked').each(function() {
        tpPrice += parseInt($(this).data('solo-price'));
      });
      if ($('#package1').is(':checked') && $('#package2').is(':checked')) {
        $('#package1:checked,#package2:checked').each(function() {
          tpPrice += parseInt($(this).data('combined-price'));
        });
      }
      $('#package-review-total').html("Total $ " + (totalPrice + tpPrice));
    }
#packages-selected, #product1-price-review, #product2-price-review {
  display: none;
}
<script src="http://ift.tt/1qRgvOJ"></script>
<input type="checkbox" class="product-check" id="package1" value="Product 1" data-solo-price="10" data-combined-price="8">
<input type="checkbox" class="product-check" id="package2" value="Product 2" data-solo-price="15" data-combined-price="13">
<p id="product1-price-review"></p>
<p id="product2-price-review"></p>
<p id="package-review-total"></p>
<p id="packages-selected"></p>



Aucun commentaire:

Enregistrer un commentaire