View product
Free U.S. Shipping Over $40, and a risk-free guarantee!
Display list of products in your cart
20% Off ALL Auto-ship products
25% Off 2-3 Auto-ship products
30% Off 4+ Auto-ship products
' : '20% Off 2 products
25% Off 3-4 products
30% Off 5+ products
+ Free Shipping
' progress = isAutoShip ? 1 : 2 empty_placeholder = isAutoShip ? 5 : 5 min_limit = isAutoShip ? 1 : 2 discount_percentage = isAutoShip ? 20 : 20 discount_code = isAutoShip ? '' : '' tier_2_limit = isAutoShip ? 2 : 3 tier_2_discount_percentage = isAutoShip ? '25' : '25' tier_3_limit = isAutoShip ? 4 : 5 tier_3_discount_percentage = isAutoShip ? '30' : '30' inits() }" x-data="{ isAutoShip: false, sidebarTitle: 'BUILD YOUR BUNDLE', sidebarSubTitle: '20% Off 2 products
25% Off 3-4 products
30% Off 5+ products
+ Free Shipping
', progress: 2, bag: [ { id: 1, title: 'item', img: null, status: 'demo' }, { id: 2, title: 'item', img: null, status: 'demo' }, { id: 3, title: 'item', img: null, status: 'demo' }, { id: 4, title: 'item', img: null, status: 'demo' }, { id: 5, title: 'item', img: null, status: 'demo' } ], empty_placeholder: 5, min_limit: 2, threshold: 2, autoShipThreshold: 1, discount_percentage: 20, discount_code: '', tier_2_limit: 3, tier_2_discount_percentage: '25', tier_3_limit: 5, tier_3_discount_percentage: '30', counter: 0, loadingCheckout: false, formError: '', previousFocus: null, activeProduct: { title: '', details: ``, img: '', id: null, price: '', review: ``, }, viewProductModal: false, addToBag(id, title, img, price, planId = null){ // create object let obj = { id, title, img, price, status: 'product', planId }; // add object to bag this.bag[this.counter] = obj; // increment counter this.counter++; this.threshold--; this.autoShipThreshold--; $dispatch('offer-carousel-toggle', { show: (this.isAutoShip ? this.autoShipThreshold : this.threshold) }); this.viewProductModal = false; }, getOriginalPrice(){ let total = 0; for(let i = 0; i < this.bag.length; i++){ if(this.bag[i].status == 'product'){ total += this.bag[i].price; } } return total; }, getDiscountedPrice(){ let total = 0; for(let i = 0; i < this.bag.length; i++){ if(this.bag[i].status == 'product'){ total += this.bag[i].price; } } let final = total - (total * (this.discount_percentage / 100)); if(this.tier_2_limit != '0' && this.counter >= this.tier_2_limit){ final = 0; final = total - (total * (this.tier_2_discount_percentage / 100)); } if(this.tier_3_limit != 0 && this.counter >= this.tier_3_limit){ final = 0; final = total - (total * (this.tier_3_discount_percentage / 100)); } return final; }, addToCart(openCart = true){ let cartObj = []; for(let i = 0; i < this.bag.length; i++){ if(this.bag[i].status == 'product'){ // if already in the cartObj, increment the quantity let found = cartObj.find(obj => obj.id == this.bag[i].id); if(found){ found.quantity++; }else{ cartObj.push({...{ quantity: 1, id: this.bag[i].id, properties: { '_byob': true, '_isBundleBuilder': 'true', } }, ...(this.isAutoShip ? {selling_plan: parseInt(this.bag[i].planId)} : {} )}); } } } data = { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({items : cartObj, attributes: {_byob: true} }) }; fetch(routes.cart_add_url + '.js', data) .then(response => { if (response.ok) { return response.json(); } return Promise.reject(response); }) .then(response => { if(openCart){ // Update cart with event dispatch this.$dispatch('cart-updated', { cart: response }); // Open cart after adding product this.$dispatch('toggle-cart'); this.formError = null; } }) .catch((error) => { this.formError = 'Error adding product to cart, please try later'; }); }, checkout(){ this.loadingCheckout = true; this.addToCart(false); // redirect to checkout and apply discount if applicable setTimeout(() => { if(this.discount_code != ''){ window.location.href = '/checkout?discount=' + this.discount_code; }else{ window.location.href = '/checkout'; } },200); }, isInCart(id){ // check if item is in bag return this.bag.some(item => item.id == id); }, removeItem(id){ // remove last item found this.bag.splice(this.bag.findIndex(item => item.id == id), 1); this.threshold++; this.autoShipThreshold++; $dispatch('offer-carousel-toggle', { show: (this.isAutoShip ? this.autoShipThreshold : this.threshold)}); this.counter--; if(this.bag.length < this.empty_placeholder){ this.bag.push({ id: this.counter, title: 'item', img: null, status: 'demo' }); } }, getItemCount(id){ // get item count return this.bag.filter(item => item.id == id).length; }, viewProduct(title, details, img, id, price, review){ this.activeProduct.title = title; this.activeProduct.details = details; this.activeProduct.img = img; this.viewProductModal = true; this.activeProduct.id = id; this.activeProduct.price = price; this.previousFocus = this.$event.target; this.activeProduct.review = review; }, setSidebarTop(){ let headerHeight = this.$refs.sticky_sidebar_head?.offsetHeight; // change headerHeight to negative number headerHeight = -headerHeight; // set top of sidebar to header height if(window.innerWidth < 1024 && this.$refs.sticky_sidebar){ this.$refs.sticky_sidebar.style.top = headerHeight + 'px'; } }, inits() { if(this.tier_2_limit != 0 ){ this.progress = this.tier_2_limit; } if(this.tier_3_limit != 0 ){ this.progress = this.tier_3_limit; } this.setSidebarTop(); } }" x-init="$nextTick(() => inits()); setTimeout(() => $dispatch('get-product-filters', { productsWithFilters: ',sunscreens,redness,dryness,aging**,sunscreens,eye-care-1,eye-care**,moisturizers,aging,redness,dryness**,aging,acne,cleansers**,moisturizers,aging,redness,dryness**,aging,masks-treatments,eye-care,eye-care-1,texture**,aging,cleansers,redness,dryness**,eye-care-1,eye-care,masks-treatments**,serums,aging,redness,dryness,texture**,aging,serums,uneven-skin-tone**,texture,large-pores**,aging,serums,neck-care,texture**,aging,serums,masks-treatments,uneven-skin-tone**,moisturizers,aging,serums,dryness**,aging,serums,masks-treatments,exfoliants,texture,uneven-skin-tone**,acne,serums,masks-treatments,large-pores**,sunscreens,redness,dryness,aging**,sunscreens,eye-care-1,eye-care**,aging,sunscreens**,moisturizers,aging,sunscreens,redness,uneven-skin-tone**,moisturizers,acne,sunscreens,large-pores,uneven-skin-tone,aging**,sunscreens,acne,aging,redness**,sunscreens**,acne,sunscreens,large-pores**,eye-care-1,eye-care,masks-treatments**,aging,masks-treatments,eye-care,eye-care-1,texture**,moisturizers,aging,masks-treatments,dryness,eye-care-1,eye-care**,aging,masks-treatments,texture,uneven-skin-tone**,aging,acne,masks-treatments,exfoliants,texture,uneven-skin-tone**,aging,acne,cleansers**,aging,masks-treatments,eye-care,eye-care-1,texture**,moisturizers,aging,redness,dryness**,moisturizers,aging,masks-treatments,dryness,eye-care-1,eye-care**,moisturizers,aging,masks-treatments,body-care,neck-care**,aging,acne,moisturizers,redness**,moisturizers,aging,redness,uneven-skin-tone**,moisturizers,aging,acne,large-pores**,masks-treatments,aging,large-pores,texture**,moisturizers,masks-treatments,redness**,eye-care-1,eye-care,masks-treatments**,aging,acne,cleansers**,aging,cleansers,redness,dryness**,acne,cleansers,large-pores**,large-pores**,acne,aging,masks-treatments,exfoliants,toners,large-pores,texture**,aging,toners**,acne,toners,large-pores**,body-care,dryness**,body-care,uneven-skin-tone**,moisturizers,exfoliants,aging,body-care,texture**' }), 1000) $watch('viewProductModal', (value) => { if(value){ setTimeout(() => { $refs.close_modal.focus(); }, 500); }else{ previousFocus.focus(); } })" @window.resize="setSidebarTop()" @keyup.escape="viewProductModal = false;" >Free U.S. Shipping Over $40, and a risk-free guarantee!