{
if(counter == minProducts){
counter--;
addProductToBundle($event.detail);
}else{
addProductToBundle($event.detail);
}
})"
@scroll.window="$nextTick(() => {
// var st = window.pageYOffset || document.documentElement.scrollTop; or mobile
let AddToCart = document.querySelector('.bundle-header__cta-top');
if(AddToCart?.getBoundingClientRect().top < 33 || window.innerWidth < 768){
showSticky = true;
}else{
showSticky = false;
}
})"
x-init="$watch('selectedProducts', (value) => {
if(value.length > 0){
bundleItems = value.filter(item => item.status != 'demo');
bundleTotal = bundleItems.length;
if(bundleItems.length > 0){
bundle_price = bundleItems.reduce((acc, item) => acc + item.price, 0);
}
}
})"
x-data="{
bundleItems: [],
bundleTotal: 1,
showSticky: false,
bundle_price: 0,
mainProduct: {
id: 42900112703669,
title: 'Bottle Free Beauty Travel Case',
image: '//www.mykitsch.com/cdn/shop/files/62361-TravelCase-BottleFreeBeauty-Terracotta-4-1280x1280px_300x.jpg?v=1709838540',
price: 260000,
selling_plan_id: 0,
},
selectedProducts: [
{ id: 1, title: 'item', image: null, status: 'demo' },
{ id: 2, title: 'item', image: null, status: 'demo' }
],
counter: 0,
minProducts: 2,
addProductToBundle(product){
this.selectedProducts[this.counter] = product;
this.counter++;
},
removeProductFromBundle(product_id){
const index = this.selectedProducts.findIndex(p => p.id === product_id);
if(index > -1){ this.selectedProducts.splice(index, 1); }
this.counter--;
if(this.selectedProducts.length < this.minProducts){
this.selectedProducts.push({ id: this.counter, title: 'item', image: null, status: 'demo' });
}
},
addToCart(){
let dataArray = [];
// push main product to selected products
if(this.mainProduct.selling_plan_id != 0){
dataArray.push({
id: parseInt(this.mainProduct.id),
quantity: 1,
properties: {
'_bundle': true,
'_bundle_title': document.title.split('–')[0],
'_bundle_handle': 'bottle-free-beauty-travel-case',
'_bundle_price': this.bundle_price,
'_bundle_count': 2,
},
selling_plan: parseInt(this.mainProduct.selling_plan_id)
});
}else{
dataArray.push({
id: parseInt(this.mainProduct.id),
quantity: 1,
properties: {
'_bundle': true,
'_bundle_title': document.title.split('–')[0],
'_bundle_handle': 'bottle-free-beauty-travel-case',
'_bundle_price': this.bundle_price,
'_bundle_count': 2,
}
});
}
this.selectedProducts.forEach((item, index) => {
if(item.status != 'demo'){
if(item.selling_plan_id != 0){
dataArray.push({
id: parseInt(item.id),
quantity: 1,
properties: {
'_bundle': true,
'_bundle_title': document.title.split('–')[0],
'_bundle_handle': 'bottle-free-beauty-travel-case',
'_bundle_price': this.bundle_price,
'_bundle_count': 2,
'_bundle_index': index
},
selling_plan: parseInt(item.selling_plan_id)
});
}else{
dataArray.push({
id: parseInt(item.id),
quantity: 1,
properties: {
'_bundle': true,
'_bundle_title': document.title.split('–')[0],
'_bundle_handle': 'bottle-free-beauty-travel-case',
'_bundle_price': this.bundle_price,
'_bundle_count': 2,
'_bundle_index': index
}
});
}
}
});
let data = {
method: 'POST',
headers: {
'Content-Type': 'application/json'
},
body: JSON.stringify({ items : dataArray })
};
fetch(routes.cart_add_url +'.js', data)
.then(response => {
if (response.ok) {
return response.json();
}
return Promise.reject(response);
})
.then(response => {
// Update cart with event dispatch
this.$dispatch('cart-updated', { cart: response });
// Open cart after adding product
this.$dispatch('open-cart');
});
}
}">
+
Get a free travel case when you subscribe!
travel case
¥0
¥2,600
select your items
Add bundle to cart
add bundle to cart