I'm not understanding how to accomplish this without hardcoding an if else statement.
I have two table examples. One has 4 quantity breaks and the other has 5 quantity breaks below. Some may have 1,2,3,4,5,6,7,8,9, and up to 10.
I also have an input box for the quantity the customer wants to buy. When the quantity break is updated and it is within another quantity break I want to "do this" (which isn't my problem) it's the dynamic if-else statement that I'm unsure how to build.
I'm looking for a solution that will 1) Add up the number of quantity breaks. In these two examples it's 4 and 5. 2) Create an if - else if where the last else if will be => 99999. Or can I create an infinite => ??? Sorry I'm new to jQuery. 3) Not allow me to order less than minimum quantity - first quantity break (I have a button that says add to order... I tried an on click function but it alerts twice, so annoying!)
Maybe this will help: As the front-end user, when I enter in a number with a different quantity break I should only see the option code that is available for that quantity break so that the price matches the quantity break.
I've put together this:
text1 =$('.priceGrid > thead > tr > th:eq(1)').text();
number1 = parseInt(text1,10);
text2 =$('.priceGrid > thead > tr > th:eq(2)').text();
number2 = parseInt(text2,10);
text3 =$('.priceGrid > thead > tr > th:eq(3)').text();
number3 = parseInt(text3,10);
text4 =$('.priceGrid > thead > tr > th:eq(4)').text();
number4 = parseInt(text4,10);
number10 = number2-1;
number20 = number3-1;
number30 = number4-1;
//find all unique option codes
tab_attribs = [];
$('[name^=optionCode_]').each(function () {
tab_attribs.push( $(this).attr("value") );
});
//var unique;
unique = $.grep(tab_attribs, function(v, i) {
return $.inArray(v, tab_attribs) === i
});
//count how many price breaks
//var size;
size = $('.priceGrid > thead > tr > th').size();
$('.qty_input').keyup(function(){
value = $('.qty_input').val();
});
if (size === 5){
$('.qty_input').keyup(function () {
//var value = $('.qty_input').val();
if (value >= number1 && value <= number10){
$('.productOptionName .option').addClass('hide-option'),
$("select[name^="+unique[0]+"]").parent().parent().parent().removeClass('hide-option');
}
else if (value >= number2 && value <= number20){
$('.productOptionName .option').addClass('hide-option'),
$("select[name^="+unique[1]+"]").parent().parent().parent().removeClass('hide-option');
}
else if (value >= number3 && value <= number30){
$('.productOptionName .option').addClass('hide-option'),
$("select[name^="+unique[2]+"]").parent().parent().parent().removeClass('hide-option');
}
else if (value >= number4 && value <= 999999){
$('.productOptionName .option').addClass('hide-option'),
$("select[name^="+unique[3]+"]").parent().parent().parent().removeClass('hide-option');
}
//else if (size === 4) {}
});
<div class="qty_input_wrapper">
<input type="text" autocomplete="off" maxlength="5" value="25" class="qty_input form-control" name="quantity_610597" id="quantity_610597">
<input type="hidden" value="610597" name="product.id" id="productId">
<div name="show_inventory" id="show_inventory" style="text-align:center;">
</div>
</div>
table.priceGrid thead tr th {
font-weight: bold;
background: #F2F2F2;
text-align: center;
}
table.priceGrid tbody tr th {
font-weight: bold;
background: #F2F2F2;
text-align: center;
}
table.priceGrid tbody tr td {
font-weight: normal;
text-align: center;
}
table.priceGrid tbody tr.saving_percentage th {
color: red;
}
table.priceGrid tbody tr.saving_percentage td {
color: red;
}
table.priceGrid tr th.disabled,
table.priceGrid tr td.disabled {
position: relative;
opacity: 0.7;
filter: alpha(opacity=70);
}
table.priceGrid tr th.disabled:before,
table.priceGrid tr td.disabled:before {
display: block;
content: "";
background: repeating-linear-gradient(45deg, transparent, transparent 5px, #000 5px, #000 10px);
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
width: 100%;
height: 100%;
opacity: 0.2;
filter: alpha(opacity=20);
}
<table class="priceGrid table table-bordered">
<thead>
<tr>
<th>Quantity</th>
<th>
25+
</th>
<th>
50+
</th>
<th>
100+
</th>
<th>
250+
</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">Price</th>
<td style="color: #000000;">
<span class="prod-price">
$28.10
</span>
</td>
<td style="color: #000000;">
<span class="prod-price">
$26.38
</span>
</td>
<td style="color: #000000;">
<span class="prod-price">
$24.97
</span>
</td>
<td style="color: #000000;">
<span class="prod-price">
$23.83
</span>
</td>
</tr>
<tr class="saving_percentage">
<th scope="row">You Save</th>
<td>
-
</td>
<td>
<span class="prod-price">
$1.72
</span> (6.12%)
</td>
<td>
<span class="prod-price">
$3.13
</span> (11.14%)
</td>
<td>
<span class="prod-price">
$4.27
</span> (15.20%)
</td>
</tr>
</tbody>
</table>
<span>OR</span>
<div class="priceGridWrapper table-responsive">
<table class="priceGrid table table-bordered">
<thead>
<tr>
<th>Quantity</th>
<th>
48+
</th>
<th>
96+
</th>
<th>
192+
</th>
<th>
384+
</th>
<th>
768+
</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">Price </th>
<td style="color: #000000;">
$10.94
</td>
<td style="color: #000000;">
$10.55
</td>
<td style="color: #000000;">
$10.06
</td>
<td style="color: #000000;">
$9.40
</td>
<td style="color: #000000;">
$9.00
</td>
</tr>
<tr class="saving_percentage">
<th scope="row" style="color:#1FA814;">Quantity Savings</th>
<td style="color:#1FA814;">
-
</td>
<td style="color:#1FA814;">
$0.39 (3.56%)
</td>
<td style="color:#1FA814;">
$0.88 (8.04%)
</td>
<td style="color:#1FA814;">
$1.54 (14.08%)
</td>
<td style="color:#1FA814;">
$1.94 (17.73%)
</td>
</tr>
</tbody>
</table>
</div>
Here is a snippit of all the option codes... this is what I'm working with. I don't have access to the java, I need to do this with jQuery. I don't have any real syntax knowledge of Javascript, I know that's weird...
I know that only one of the option codes has a different price, it won't always be that way. Sometimes they will sometimes they won't. My main goal is to think of a way where I don't have to hardcode any of this.
<div class="product_options">
<div class="productOptionName">
<input type="hidden" name="optionCode_610597_" value="BENTO8">
<input type="hidden" name="optionCode_610597" value="BENTO8">
<div class="option">
<label for="" class="control-label fs-16">M&Ms:</label>
<input type="hidden" name="BENTO8-option_610597" value="0">
<div class="row">
<div class="col-sm-8 col-md-7 col-lg-6">
<select class="form-control" name="BENTO8-option_values_610597_0" onchange="showAttachmentInput('0', this.value)" id="PRODUCT-610597-0">
<option class="opt" value="0" id="OPTION-610597-0-0-0">
No
</option>
<option class="opt" value="1" id="OPTION-610597-0-0-1">
Yes + $2.89
</option>
<option class="opt" value="2" id="OPTION-610597-0-0-2">
Yes + $2.89
</option>
<option class="opt" value="3" id="OPTION-610597-0-0-3">
Yes + $2.89
</option>
<option class="opt" value="4" id="OPTION-610597-0-0-4">
Yes + $2.89
</option>
</select>
</div>
</div>
</div>
<input type="hidden" name="optionCode_610597_" value="BENTO8">
<input type="hidden" name="optionCode_610597" value="BENTO8">
<div class="option">
<label for="" class="control-label fs-16">Espresso Coffee Beans:</label>
<input type="hidden" name="BENTO8-option_610597" value="1">
<div class="row">
<div class="col-sm-8 col-md-7 col-lg-6">
<select class="form-control" name="BENTO8-option_values_610597_1" onchange="showAttachmentInput('1', this.value)" id="PRODUCT-610597-1">
<option class="opt" value="0" id="OPTION-610597-1-1-0">
No
</option>
<option class="opt" value="1" id="OPTION-610597-1-1-1">
Yes + $4.34
</option>
<option class="opt" value="2" id="OPTION-610597-1-1-2">
Yes + $4.34
</option>
<option class="opt" value="3" id="OPTION-610597-1-1-3">
Yes + $4.34
</option>
<option class="opt" value="4" id="OPTION-610597-1-1-4">
Yes + $4.34
</option>
</select>
</div>
</div>
</div>
<input type="hidden" name="optionCode_610597_" value="BENTO8">
<input type="hidden" name="optionCode_610597" value="BENTO8">
<div class="option">
<label for="" class="control-label fs-16">Optional Inside Label Run Charge:</label>
<input type="hidden" name="BENTO8-option_610597" value="2">
<div class="row">
<div class="col-sm-8 col-md-7 col-lg-6">
<select class="form-control" name="BENTO8-option_values_610597_2" onchange="showAttachmentInput('2', this.value)" id="PRODUCT-610597-2">
<option class="opt" value="0" id="OPTION-610597-2-2-0">
No
</option>
<option class="opt" value="1" id="OPTION-610597-2-2-1">
Yes + $50.00
</option>
<option class="opt" value="2" id="OPTION-610597-2-2-2">
Yes + $1.75
</option>
<option class="opt" value="3" id="OPTION-610597-2-2-3">
Yes + $1.50
</option>
<option class="opt" value="4" id="OPTION-610597-2-2-4">
Yes + $1.25
</option>
</select>
</div>
</div>
</div>
<input type="hidden" name="optionCode_610597_" value="BENTO8">
<input type="hidden" name="optionCode_610597" value="BENTO8">
<div class="option">
<label for="" class="control-label fs-16">Laser Engraving Run Charge (Silver Only):</label>
<input type="hidden" name="BENTO8-option_610597" value="3">
<div class="row">
<div class="col-sm-8 col-md-7 col-lg-6">
<select class="form-control" name="BENTO8-option_values_610597_3" onchange="showAttachmentInput('3', this.value)" id="PRODUCT-610597-3">
<option class="opt" value="0" id="OPTION-610597-3-3-0">
No
</option>
<option class="opt" value="1" id="OPTION-610597-3-3-1">
Yes + $1.15
</option>
<option class="opt" value="2" id="OPTION-610597-3-3-2">
Yes + $1.15
</option>
<option class="opt" value="3" id="OPTION-610597-3-3-3">
Yes + $1.15
</option>
<option class="opt" value="4" id="OPTION-610597-3-3-4">
Yes + $1.15
</option>
</select>
</div>
</div>
</div>
<input type="hidden" name="optionCode_610597_" value="BENTO8">
<input type="hidden" name="optionCode_610597" value="BENTO8">
<div class="option">
<label for="" class="control-label fs-16">Heat Transfer Run Charge (Silver Only):</label>
<input type="hidden" name="BENTO8-option_610597" value="4">
<div class="row">
<div class="col-sm-8 col-md-7 col-lg-6">
<select class="form-control" name="BENTO8-option_values_610597_4" onchange="showAttachmentInput('4', this.value)" id="PRODUCT-610597-4">
<option class="opt" value="0" id="OPTION-610597-4-4-0">
No
</option>
<option class="opt" value="1" id="OPTION-610597-4-4-1">
Yes + $2.50
</option>
<option class="opt" value="2" id="OPTION-610597-4-4-2">
Yes + $2.50
</option>
<option class="opt" value="3" id="OPTION-610597-4-4-3">
Yes + $2.50
</option>
<option class="opt" value="4" id="OPTION-610597-4-4-4">
Yes + $2.50
</option>
</select>
</div>
</div>
</div>
</div>
</div>
Thank you.
Aucun commentaire:
Enregistrer un commentaire