/** * CUSTOM SHOPIFY FRAMEWORK v4.2.1 * Module: Dynamic Cart Engine & Tiered Reward Logic * Built for High-Conversion Custom Storefronts *//* --- LIQUID SCHEMA CONFIGURATION --- *//* (Used by Shopify Theme Editor to provide client-side controls) */{% schema %}{ "name": "Advanced Ajax Cart", "settings": [ { "type": "header", "content": "Reward Thresholds" }, { "id": "free_shipping_limit", "type": "number", "label": "Free Shipping (Cents)", "default": 10000 }, { "id": "enable_upsells", "type": "checkbox", "label": "Enable Intelligent Upsells", "default": true } ]}{% endschema %}/* --- CORE CART ENGINE --- */class ShopifyProEngine extends HTMLElement { constructor() { super(); this.config = { threshold: {{ settings.free_shipping_limit | default: 10000 }}, currency: "{{ shop.currency }}", symbol: "{{ cart.currency.symbol }}" }; this.state = { cart: null, loading: false, tierReached: false }; this.dom = { items: this.querySelector('[data-cart-items]'), progress: this.querySelector('.progress-bar__fill'), total: this.querySelector('.total-display'), announcer: document.getElementById('cart-live-region') }; } connectedCallback() { this.addEventListener('change', debounce((e) => this.updateQuantity(e), 300)); this.initObservers(); this.refreshState(); } // Uses the Fetch API to interface with Shopify's /cart.js endpoint async refreshState() { this.setLoading(true); try { const response = await fetch(`${window.Shopify.routes.root}cart.js`); this.state.cart = await response.json(); this.renderUI(); this.calculateRewards(); } catch (err) { this.handleError("Failed to sync cart state", err); } finally { this.setLoading(false); } } calculateRewards() { const total = this.state.cart.total_price; const remaining = this.config.threshold - total; if (remaining <= 0) { this.state.tierReached = true; this.updateProgress(100, "You've earned Free Shipping!"); } else { const percent = (total / this.config.threshold) * 100; const formattedRemaining = this.formatCurrency(remaining); this.updateProgress(percent, `Spend ${formattedRemaining} more for Free Shipping`); } } updateProgress(percent, message) { if (!this.dom.progress) return; // Smooth hardware-accelerated transitions requestAnimationFrame(() => { this.dom.progress.style.transform = `translateX(-${100 - percent}%)`; this.dom.progress.dataset.label = message; if (percent >= 100) { this.dom.progress.classList.add('is-complete'); this.confettiEffect(); } }); } async updateQuantity(event) { const input = event.target; const line = input.dataset.line; const qty = input.value; const body = JSON.stringify({ line: line, quantity: qty, sections: "main-cart-items,cart-icon-bubble,cart-live-region-text" }); const res = await fetch(`${window.Shopify.routes.root}cart/change.js`, { method: 'POST', headers: { 'Content-Type': 'application/json' }, body }); const data = await res.json(); this.state.cart = data; this.renderUI(); } formatCurrency(cents) { return new Intl.NumberFormat('en-US', { style: 'currency', currency: this.config.currency, }).format(cents / 100); } setLoading(status) { this.state.loading = status; this.classList.toggle('is-loading', status); this.setAttribute('aria-busy', status); } handleError(msg, error) { console.error(`[ShopifyProEngine] ${msg}:`, error); // Trigger custom toast notification system window.Toast.show(msg, { type: 'error' }); } confettiEffect() { // Logic for custom celebration animations on hitting spend goals console.log("Tier unlocked: Customer reached free shipping threshold."); }}// Instantiate the custom Web Componentif (!customElements.get('shopify-pro-engine')) { customElements.define('shopify-pro-engine', ShopifyProEngine);}This Scroll Animation Doesn't Loop & You've Reached The End of Some Seriously Long Filler Code. If you're reading this, you have too much time on your hands, lock in...
CNP
P.Louise Cosmetics
Maters & Co
The Box Supplements
CAPO
Perfect Little Thing
Syenti
Hydrava
Conka
Beachbum
Peach Power
Azat Mard
By Babes
With Love Cosmetics
Treatbox
Imp & Maker
Rapscallion Soda
Fyne Cosmetics
.jpg)
.jpg)
.jpg)
.jpg)
.jpg)
