This blog post provides a step-by-step guide on how to use the familyPack() function in JavaScript. The function allows users to select different products and add them to their shopping cart with specific quantities. It also applies discounts based on the type of pack selected.
Code
function familyPack() {
$('.btn-custom1').click(function(){
jQuery.post('/cart/clear.js');
var attr = $(this).attr('data-discount')
console.log(attr)
var prod1
var prod2
var prod3
var prod4
var newArr = []
var items = []
if (attr == 'family-pack') {
prod1 = $('#familySelector1 option:selected').val()
prod2 = $('#familySelector2 option:selected').val()
prod3 = $('#familySelector3 option:selected').val()
prod4 = $('#familySelector4 option:selected').val()
newArr.push (prod1, prod2, prod3, prod4)
}
if (attr == 'couple-pack') {
prod1 = $('#coupleSelector1 option:selected').val()
prod2 = $('#coupleSelector2 option:selected').val()
newArr.push (prod1, prod2)
}
if (attr == 'single-pack') {
prod1 = $('#singleSelector1 option:selected').val()
newArr.push (prod1)
}
var counter = 0
for (let i = 0; i < newArr.length; i++) {
var prod = newArr[i]
var qty = 1
if (i == 0 ) {
items.push({id:prod, quantity: qty})
}
var itemlength = items.length
if (i >= 1) {
counter
if (items[counter].id == newArr[i]) {
items[counter].quantity = items[counter].quantity+1
}
else {
items.push({id:prod, quantity: qty})
counter++
}
}
}
console.log(items)
setTimeout(() => {
jQuery.post('/cart/add.js', {items});
}, 400)
var getDiscount = $(this).attr('data-discount')
var discount
if (getDiscount == 'family-pack') {
discount = "FAMILY"
}
if (getDiscount == 'couple-pack') {
discount = "COUPLE"
}
if (getDiscount == 'couple-pack' || getDiscount == 'family-pack') {
setTimeout(() => {
window.location = '/checkout?discount='+discount
}, 1300)
}
if (getDiscount == 'single-pack' ) {
setTimeout(() => {
window.location = '/checkout'
}, 1300)
}
})
}
familyPack()Code Explanation
The provided code snippet demonstrates the implementation of the familyPack() function. Let’s go through the code and understand how it works.
1. The function is triggered when a button with the class .btn-custom1 is clicked.
2. The first line of code jQuery.post('/cart/clear.js'); clears the cart.
3. The variable attr stores the value of the data-discount attribute of the clicked button.
4. The value of attr is logged to the console using console.log(attr).
5. Several variables are declared (prod1, prod2, prod3, prod4, newArr, items) to store the selected products and their quantities.
6. The code checks the value of attr and performs different actions based on the selected pack type.
a. If the value is 'family-pack', the code retrieves the selected values from different HTML elements with the IDs familySelector1, familySelector2, familySelector3, and familySelector4. The values are then pushed to the newArr array.
b. If the value is 'couple-pack', the code retrieves the selected values from HTML elements with the IDs coupleSelector1 and coupleSelector2. The values are pushed to the newArr array.
c. If the value is 'single-pack', the code retrieves the selected value from the HTML element with the ID singleSelector1 and pushes it to the newArr array.
7. A counter variable is initialized to 0.
8. The code iterates over the newArr array using a for loop. For each element, it checks if it matches the previous element in the items array.
a. If the element matches, the quantity of the matching item in the items array is incremented by 1.
b. If the element doesn’t match, a new object with the product ID and quantity 1 is pushed to the items array. The counter variable is incremented.
9. The items array, which holds the final products and quantities, is logged to the console.
10. After a delay of 400 milliseconds, the items array is sent to the server via POST request to add the items to the cart using jQuery.post('/cart/add.js', {items});.
11. The code retrieves the discount type from the clicked button using $(this).attr('data-discount') and stores it in the variable getDiscount.
12. Depending on the getDiscount value, the code assigns a corresponding discount value to the discount variable.
13. If the getDiscount value is either 'couple-pack' or 'family-pack', a delay of 1300 milliseconds is set, and the user is redirected to the checkout page with the discount parameter appended to the URL.
14. If the getDiscount value is 'single-pack', a delay of 1300 milliseconds is set, and the user is redirected to the checkout page without a discount.
That’s it! You can now use the familyPack() function to add products to the cart and apply discounts based on the selected pack type.
Remember to include the necessary HTML elements with appropriate IDs for selecting products in your application.
I hope this guide was helpful in understanding how to use the familyPack() function in JavaScript. Feel free to leave a comment if you have any questions or need further assistance. Happy coding!
Also checkout the following codes.
Program to Create a Custom Navigation Carousel in jQuery
How to Check and Limit Maximum Input Number in JavaScript Program
