Mega Muffin Variety 11PK (2024)

` }; vueApp.component('tab', tab); const filters = { props: ['buildrule'], emits: ['selected', 'tag-selected'], data() { return { selectedOptionValues: ['','',''], // each variant must have 3 options product: this.buildrule.json_products[0], selectedTag: '' } }, compilerOptions: {delimiters: ['[[', ']]'],}, computed: { }, methods: { hasApplyToAll(filter) { return filter.type === 'apply_to_all' }, selectTag(filter) { console.log('in selectTag', this.selectedTag) filter.selectedTag = this.selectedTag this.$emit('tagSelected', this.buildrule, this.selectedTag) } }, template: ` ` }; vueApp.component('filters', filters); const productCard = { props: ['product', 'buildrulesIndex', 'buildrule', 'isTopTier', 'priceWithCurrency'], emits: ['clicked', 'reset'], compilerOptions: { delimiters: ['[[', ']]'], }, components: { 'quickview-modal': quickviewModal, 'byob-reviews': (typeof byob_reviews === 'undefined')? '' : byob_reviews, }, data() { return { selectedOptionValues: ['','',''], // each variant must have 3 options selectedVariantPrice: '', compare_at_price: '', available: this.product.available, selectedVariantID: '', pickedVariant: '', pickedVariantIndex: 0, featureImage: this.product.featured_image, NotAvailableMsg: this.$i18n.t('message.soldOut'), quantity: 1, currencySymbol: currencySymbol, currencyCode: currencyCode, linkDisabled: disable_product_link, enableQuickview: enable_quickview, showQuickviewIcon: false, showQuickviewModel: false, } }, computed: { productLink() { return byob_base_url + 'products/'+ this.product.handle }, buttonText() { return (this.available ? this.$i18n.t('message.addToBundle') : this.NotAvailableMsg); }, disableAdd() { if (!this.buildrule.operator || this.buildrule.operator === '==') return this.buildrule.isCompleted else if (this.buildrule.operator === '>=') // at least, no limit return false else if (this.buildrule.operator === '<=') return this.buildrule.remaining_quantity === 0 else if (this.buildrule.operator === '<') return this.buildrule.remaining_quantity === 1 }, notTracked() { return (this.pickedVariant.inventory_management === null || this.pickedVariant.inventory_policy === 'continue') }, maxQuantity() { // max quantity can be added to bundle if (this.notTracked) // hard code to 100 if not tracked return 100 else if (this.pickedVariant.inventory_quantity) return Math.min(this.buildrule.remaining_quantity, this.pickedVariant.inventory_quantity) else return this.buildrule.remaining_quantity }, exceedMaxQuantity() { if (this.notTracked) return false return ((!this.buildrule.operator || this.buildrule.operator == '==' || this.buildrule.operator == '<=') && this.quantity >= this.maxQuantity) }, }, mounted() { // preset first selected option to the first available variantlet firstVariant = this.product.variants.find(v => v.available) if (firstVariant === undefined) firstVariant = this.product.variants[0] if (firstVariant.option1 != null) this.selectedOptionValues[0] = firstVariant.option1 if (firstVariant.option2 != null) this.selectedOptionValues[1] = firstVariant.option2if (firstVariant.option3 != null) this.selectedOptionValues[2] = firstVariant.option3 this.selectedVariantPrice = this.toReadablePrice(firstVariant.price); this.compare_at_price = this.toReadablePrice(firstVariant.compare_at_price); this.selectedVariantID = firstVariant.id; this.pickedVariant = firstVariant; this.available = firstVariant.available; if (typeof initProductCard === 'function') initProductCard(this) }, methods: { toReadablePrice(price) { if (typeof same_as_footer_format !== 'undefined') return this.priceWithCurrency(price / 100.0) return (price / 100.0).toFixed((typeof customDecimalPlace === 'undefined')? 2 : customDecimalPlace) }, applyToAll() {// console.log('BYOB: In applyToAll method') // if (this.buildrule.filters && this.buildrule.filters.apply_to_all && if (this.buildrule.selectedOptionValues) { this.selectedOptionValues = this.buildrule.selectedOptionValues this.selectVariant() } }, resetQuantity() { this.quantity = 1 }, // use variant feature or else product feature image setFeatureImage(variant) { if (variant.featured_image && variant.featured_image.hasOwnProperty('src') && variant.featured_image.src) this.featureImage = variant.featured_image.src; else if (!variant.featured_image && this.product.featured_image) // variant has no image, use product default feature image this.featureImage = this.product.featured_image; }, selectVariant() { let variants = this.product.variants; console.log('selectedOptionValues = ' + this.selectedOptionValues); for (let i = 0; i < variants.length; i++) { let variant = variants[i]; if (this.arraysEqual(variant.options, this.selectedOptionValues.filter(this.removeEmptyString))) { this.available = variant.available; this.NotAvailableMsg = this.$i18n.t('message.soldOut'); this.selectedVariantPrice = this.toReadablePrice(variant.price) this.compare_at_price = this.toReadablePrice(variant.compare_at_price) this.setFeatureImage(variant); this.selectedVariantID = variant.id; this.pickedVariant = variant; this.pickedVariantIndex = i; return; } } // cannot find a variant with user selected option. this.available = false; this.NotAvailableMsg = this.$i18n.t('message.unavailable'); }, addVariantToBundle() { if (this.selectedVariantID !== '') { if (!this.pickedVariant.available) { alert(this.$i18n.t('message.alertSoldOut')); return; } this.pickedVariant.featureImage = this.featureImage; this.pickedVariant.selectedVariantPrice = this.selectedVariantPrice; this.pickedVariant.productID = this.product.id; // record which buildrule this variant belongs to this.pickedVariant.buildrulesIndex = this.buildrulesIndex; for (let i=0; i< this.quantity; i++)this.$emit('clicked', this.pickedVariant); this.$emit('reset'); } }, arraysEqual(a, b) { // helper func if (a == null || b == null) return false; if (a.length !== b.length) return false; for (let i = 0; i < a.length; i++) { if (a[i] != b[i]) return false; } return true; }, removeEmptyString(value) { return value != ''; }, updateQuantity() { if (this.buildrule.operator == ">=") return true console.log('this.pickedVariant', this.pickedVariant); if (this.quantity > this.maxQuantity) this.quantity = this.maxQuantity else if (this.quantity < 1) this.quantity = 1 }, link(event) { if (this.linkDisabled) event.preventDefault() }, addVariantFromQV(variant, quantity) {// console.log('variant', variant) this.pickedVariant = variant; this.quantity = quantity; this.addVariantToBundle(); } }, template: ` ` }; vueApp.component('product-card', productCard); const footerBar = { emits: ['deleted', 'addcart', 'opennote'],compilerOptions: { delimiters: ['[[', ']]'], }, props: ['variants', 'buildrules', 'isLoading', 'completedTier', 'nextTier', 'isTier', 'priceWithCurrency'], data() { return { bundlePutToCart: false, showVariantName: true, hide: false, icon_type: icon_type, beacon_color: beacon_color, progressWidth: 0, // width in % } }, watch: { isLoading(val) { if (val) var progressTimer = setInterval(() => { this.progressWidth += 10; if (this.progressWidth >= 100) {this.progressWidth = 100; clearInterval(progressTimer) } }, 1000) }, }, computed: { contrastYIQ() { let r = parseInt(this.beacon_color.substr(1,2),16); let g = parseInt(this.beacon_color.substr(3,2),16); let b = parseInt(this.beacon_color.substr(5,2),16); let yiq = ((r*299)+(g*587)+(b*114))/1000; return (yiq >= 128) ? 'black' : 'white'; }, totalVariants() { return this.variants.length; }, groupedVariants() { let variants = this.variants let reducedArr = variants.reduce((acc, cur) => { if (acc[cur.id]) acc[cur.id].quantity++ else { cur.quantity = 1 acc[cur.id] = cur; } return acc; }, {}); return Object.values(reducedArr); }, showQuantity() { // hide qty when all selected items quantity is 1 return this.totalVariants > 1 && this.groupedVariants.find(variant => variant.quantity > 1); }, itemsLeft() { return this.buildrules.reduce((a, buildrule) => { if (buildrule.optional || buildrule.isCompleted) return a + 0 else if (buildrule.operator === '<=') return a + Math.min(1, buildrule.remaining_quantity) else return a + buildrule.remaining_quantity }, 0); }, buttonTooltip() { if (!this.buildrulesCompleted && !this.isLoading && discount.type != 'TD') return this.$i18n.t('message.addToCartButtonTooltip'); }, buttonText() { if (this.isLoading) return this.$i18n.t('message.loading');// console.log('this.groupedVariants', this.groupedVariants); if (discount.type != 'TD') { if (this.itemsLeft <= 0) { // < 0 is at least, can add more than required, = 0 is any let addToCart = this.$i18n.t('message.addBundleToCart'); return this.bundlePrice ? `${addToCart} (${this.priceWithCurrency(this.bundlePrice)})` : addToCart; } else if (this.itemsLeft == 1) { let brLeft = this.getRemainingBuildrule(); return this.buildrules.length >= 2 && brLeft? this.$i18n.t('message.addMoreFrom', {title: brLeft.title}) : this.$i18n.tc('message.addMore', 1); } else return this.$i18n.tc('message.addMore', 2, {quantity: this.itemsLeft}); } else { // tiered dicounts let tier = this.completedTier let nextTier = this.nextTier // if no completed tier found, find next tier to meet return (tier == -1)? this.$i18n.tc('message.addMore', 2, {quantity: nextTier.quantity - this.totalVariants}) : this.$i18n.t('message.addBundleToCart') + ' (' + this.priceWithCurrency(this.bundlePrice) + ')' } }, totalPrice() { return byob_base_price + this.variants.reduce((a, variant) => a + variant.price / 100.0, 0); }, footerTotalPrice() { return footer_show_total_compare_at_price? this.priceWithCurrency(this.totalCompareAtPrice): this.priceWithCurrency(this.totalPrice) }, totalCompareAtPrice() { return byob_base_price + this.variants.reduce((a, variant) => a + (variant.compare_at_price? variant.compare_at_price: variant.price) / 100.0, 0); }, buildrulesCompleted() { return this.buildrules.every(buildrule => buildrule.isCompleted || buildrule.optional) }, bundlePrice() { let basicDiscount = ['PR', 'PC', 'FA'] if (!this.buildrulesCompleted) return false if (discount) if (basicDiscount.includes(discount.type)) return this.discountedPrice(discount) else if (discount.type == 'TD') { let tier = this.completedTier return this.tierPrice(tier) } else if (discount.type == 'SU') return false else if (discount.type == 'DC') { if (discount.display_discount_type && discount.display_discount_value) { discount.display_discount = { type: discount.display_discount_type, value: discount.display_discount_value } } return discount.display_discount? this.discountedPrice(discount.display_discount) : false; } }, appliedTierDiscount() { let tier = this.completedTier if (tier == -1) tier = this.nextTier if (tier.discount_type == 'PC') return (tier.discount_value)? ' / Save ' + Math.floor(tier.discount_value * 100) / 100 + '%' : ''; else if (tier.discount_type == 'FA') return ' / Save ' + currencySymbol + tier.discount_value else if (tier.discount_type == 'PR') return '' else return '' }, }, methods: { discountedPrice(discount) { if (discount.type == 'PR') return discount.value else if (discount.type == 'PC') return this.totalPrice - this.percentDiscount(this.totalPrice, discount.value) else if (discount.type == 'FA') return this.totalPrice - discount.value }, tierPrice(tier) {if (tier.discount_type == 'PR') return tier.discount_value else if (tier.discount_type == 'PC') return this.totalPrice - this.percentDiscount(this.totalPrice, tier.discount_value) else if (tier.discount_type == 'FA') return this.totalPrice - tier.discount_value }, getRemainingBuildrule() { return this.buildrules.find(buildrule => !buildrule.isCompleted); }, percentDiscount(price, discount_value) { // price: 999 (represent: $9.99) return Math.floor(price * discount_value) / 100 // round down to 2dp, simulate shopify calc }, addBundleToCart() { if (!isPublished) { alert('You cannot add draft bundle to cart! Please turn it to active'); return; } if (typeof beforeBYOBAddtoCart === 'function') { let result = beforeBYOBAddtoCart(this) if (result === 'return') return } // openNoteModal is a variable passed from metafields if (openNoteModal) this.$emit('opennote') else if (discount.type == 'SU') this.$emit('opensubscription') else this.$emit('addcart') }, scroll_left() { let content = document.querySelector(".byob-wrapper"); content.scrollLeft -= 100; }, scroll_right() { let content = document.querySelector(".byob-wrapper"); content.scrollLeft += 100; }, scrollLastCardIntoView() {// let i = this.totalVariants - 1; let i = this.groupedVariants.length - 1; const el = this.$refs['footerCard' + i]; if (el) el.scrollIntoView({behavior: "smooth"}); } },template: `

[[variant.quantity]]

[[ variant.name ]]

[[ $t('message.totalPrice') ]]:[[ footerTotalPrice ]][[appliedTierDiscount]]

See Also

Trump's proposed tariffs would raise prices for these products, experts say

[[ totalVariants ]]

` }; const ftb = vueApp.component('footer-bar', footerBar); // multi-langual support const i18n = VueI18n.createI18n({ locale: locale, // set locale fallbackLocale: 'en', // set fallback locale messages, // set locale messages compilerOptions: { delimiters: ['[[', ']]'], } }); vueApp.use(i18n); YETT_WHITELIST = [ /unpkg\.com/, /myshopify\.com/, /shopify\.com/, /www\.google-analytics\.com/, /use\.fontawesome\.com/, /cdn\.jsdelivr\.net/, /ajax\.googleapis\.com/, /www\.googletagmanager\.com/, /static\.klaviyo\.com/, /www\.youtube\.com/, /cdnjs\.cloudflare\.com/, /cdn\.lr-ingest\.io/, /cdn\.judge\.me/, /cdn\.rebuyengine\.com/ ]

default body