Hair Band Accessories
Shels Design-10
Total: ₹35.00
const swatchInputs = document.querySelectorAll('.swatch-input');
// Helper: format cents → "Rs. X,XXX.xx"
const formatMoney = cents => {
return 'Total: ₹' + (cents / 100).toLocaleString('en-IN', {
minimumFractionDigits: 2
});
};
// Store the unit price (and compare‑at price) for a given variant
const storeUnitPrices = variant => {
const priceMainEl = document.querySelector('.price-main');
const priceCompEl = document.querySelector('.price-compare');
priceMainEl.dataset.price = variant.price; // price already in cents
if (priceCompEl) {
if (variant.compare_at_price) {
priceCompEl.dataset.compare = variant.compare_at_price;
priceCompEl.style.display = 'inline';
} else {
priceCompEl.style.display = 'none';
}
}
};
// When a swatch changes, find the matching variant & store its prices
function updateVariant () {
const selectedOptions = {};
document.querySelectorAll('.option-row').forEach(row => {
const idx = row.getAttribute('data-index');
const checked = row.querySelector('.swatch-input:checked');
if (checked) selectedOptions[idx] = checked.value;
});
const matched = productVariants.find(v =>
Object.keys(selectedOptions).every(k => v[k] === selectedOptions[k])
);
if (matched) {
// hidden field for form submit
document.getElementById('FinalVariantId').value = matched.id;
// Store unit prices for later multiplication
storeUnitPrices(matched);
// Update total price now that we have a fresh unit price
updateTotalPrice();
// Stock status UI
const stock = document.querySelector('.stock-status');
const addBtn = document.querySelector('.btn-primary');
const checkoutBtn = document.getElementById('checkoutBtn');
if (matched.available) {
stock.innerHTML = 'In Stock';
stock.className = 'stock-status in-stock';
if (addBtn) {
addBtn.disabled = false;
addBtn.innerHTML = 'Add to Cart';
addBtn.style.background = '';
addBtn.style.cursor = '';
}
if (checkoutBtn) checkoutBtn.style.display = 'flex';
} else {
stock.innerHTML = 'Out of Stock';
stock.className = 'stock-status out-stock';
if (addBtn) {
addBtn.disabled = true;
addBtn.innerHTML = 'Out of Stock';
addBtn.style.background = '#999';
addBtn.style.cursor = 'not-allowed';
}
if (checkoutBtn) checkoutBtn.style.display = 'none';
}
}
}
swatchInputs.forEach(input => input.addEventListener('change', updateVariant));
// -----------------------------------------------------------------
// 2️⃣ Wishlist handling (unchanged – kept for context)
// -----------------------------------------------------------------
const wishlistBtn = document.getElementById('WishlistButton');
if (wishlistBtn) {
const productHandle = wishlistBtn.getAttribute('data-handle');
const heartIcon = wishlistBtn.querySelector('.heart');
const wishText = wishlistBtn.querySelector('.wish-text');
let wishlist = [];
try { wishlist = JSON.parse(localStorage.getItem('user_wishlist')) || []; }
catch (e) { /* ignore */ }
// Initialise UI state
if (wishlist.includes(productHandle)) {
wishlistBtn.classList.add('is-active');
heartIcon.innerHTML = '♥';
wishText.innerHTML = 'In Wishlist';
}
wishlistBtn.addEventListener('click', function (e) {
e.preventDefault();
let current = [];
try { current = JSON.parse(localStorage.getItem('user_wishlist')) || []; }
catch (e) { /* ignore */ }
if (current.includes(productHandle)) {
// REMOVE
current = current.filter(item => item !== productHandle);
this.classList.remove('is-active');
heartIcon.innerHTML = '♡';
wishText.innerHTML = 'Add to Wishlist';
} else {
// ADD
current.push(productHandle);
this.classList.add('is-active');
heartIcon.innerHTML = '♥';
wishText.innerHTML = 'In Wishlist';
}
localStorage.setItem('user_wishlist', JSON.stringify(current));
if (window.updateWishlistDot) window.updateWishlistDot(); // ← ADD THIS
});
}
// -----------------------------------------------------------------
// 3️⃣ Total‑price calculation based on quantity
// -----------------------------------------------------------------
function updateTotalPrice () {
/* -------------------------------------------------------------
1️⃣ Grab quantity (fallback to 1)
------------------------------------------------------------- */
const qtyInput = document.querySelector('.c2c-qty-input');
const qty = parseInt(qtyInput?.value, 10) || 1;
/* -------------------------------------------------------------
2️⃣ Locate the price containers – bail out gracefully if missing
------------------------------------------------------------- */
const priceMainEl = document.querySelector('.price-main');
if (!priceMainEl) return; // nothing to update
/* -------------------------------------------------------------
3️⃣ Determine the *unit* price (cents)
• Primary source: data‑price attribute (set by init / swatch)
• Fallback: read the hidden variant ID and pull the price from
the productVariants array (always correct cents value)
• Final fallback: parse the rendered text (old behaviour)
------------------------------------------------------------- */
let unitPrice = parseInt(priceMainEl.dataset.price, 10);
if (!unitPrice) {
// hidden input may already contain the correct variant ID
const hiddenId = document.getElementById('FinalVariantId')?.value;
const variant = productVariants.find(v => v.id == hiddenId) ||
productVariants[0]; // safeguard
unitPrice = variant?.price || 0;
// store it for future clicks
priceMainEl.dataset.price = unitPrice;
}
// Guard against a zero price (should never happen, but just in case)
if (!unitPrice) unitPrice = 0;
/* -------------------------------------------------------------
4️⃣ Compute total and render
------------------------------------------------------------- */
const total = unitPrice * qty;
priceMainEl.innerHTML = formatMoney(total);
/* -------------------------------------------------------------
5️⃣ Compare‑at price (if any)
------------------------------------------------------------- */
const priceCompEl = document.querySelector('.price-compare');
if (priceCompEl) {
let compareUnit = parseInt(priceCompEl.dataset.compare, 10);
if (!compareUnit) {
// fallback – same logic as above
const hiddenId = document.getElementById('FinalVariantId')?.value;
const variant = productVariants.find(v => v.id == hiddenId) ||
productVariants[0];
compareUnit = variant?.compare_at_price || 0;
priceCompEl.dataset.compare = compareUnit;
}
if (compareUnit) {
priceCompEl.innerHTML = formatMoney(compareUnit * qty);
priceCompEl.style.display = 'inline';
} else {
priceCompEl.style.display = 'none';
}
}
}
const plusBtns = document.querySelectorAll('.c2c-qtyplus');
const minusBtns = document.querySelectorAll('.c2c-qtyminus');
const qtyInputs = document.querySelectorAll('.c2c-qty-input');
function getCurrentVariant() {
const hiddenId = document.getElementById('FinalVariantId')?.value;
return productVariants.find(v => String(v.id) === String(hiddenId)) || productVariants[0];
}
function getInventoryLimit() {
const variant = getCurrentVariant();
return parseInt(variant?.inventory_quantity, 10) || 0;
}
function updateQtyUI() {
const qtyInput = document.querySelector('.c2c-qty-input');
const qty = parseInt(qtyInput?.value, 10) || 1;
const inventory = getInventoryLimit();
plusBtns.forEach(btn => {
if (inventory > 0 && qty >= inventory) {
btn.disabled = true;
btn.setAttribute('data-tooltip', `${inventory} items available in stock`);
btn.style.opacity = '0.5';
btn.style.cursor = 'not-allowed';
} else {
btn.disabled = false;
btn.removeAttribute('data-tooltip');
btn.style.opacity = '1';
btn.style.cursor = 'pointer';
}
});
minusBtns.forEach(btn => {
btn.disabled = qty <= 1;
});
}
plusBtns.forEach(btn => {
btn.addEventListener('click', function (e) {
e.preventDefault();
const input = this.parentElement.querySelector('.c2c-qty-input');
const inventory = getInventoryLimit();
let val = parseInt(input.value, 10) || 1;
if (val < inventory) {
input.value = val + 1;
input.dispatchEvent(new Event('input', { bubbles: true }));
updateTotalPrice();
}
updateQtyUI();
});
});
minusBtns.forEach(btn => {
btn.addEventListener('click', function (e) {
e.preventDefault();
const input = this.parentElement.querySelector('.c2c-qty-input');
let val = parseInt(input.value, 10) || 1;
if (val > 1) input.value = val - 1;
updateTotalPrice();
updateQtyUI();
});
});
qtyInputs.forEach(input => {
input.addEventListener('input', function () {
this.value = this.value.replace(/[^0-9]/g, '');
if (!this.value || parseInt(this.value, 10) < 1) this.value = '1';
const inventory = getInventoryLimit();
if (inventory > 0 && parseInt(this.value, 10) > inventory) {
this.value = inventory;
}
updateTotalPrice();
updateQtyUI();
});
});
(function initQtyLimit() {
updateQtyUI();
})();
// -----------------------------------------------------------------
// 5️⃣ Initialise on first load – **critical for Wishlist pages**
// -----------------------------------------------------------------
(function initOnPageLoad () {
// The hidden input is already populated by Liquid with the default variant ID
const hiddenId = document.getElementById('FinalVariantId').value;
const initialVariant = productVariants.find(v => v.id == hiddenId);
if (initialVariant) {
// Store unit prices in data‑attributes (so the +/‑ logic works even if no swatch is clicked)
storeUnitPrices(initialVariant);
} else {
// Safety fallback – parse the rendered price text (should rarely happen)
const priceMainEl = document.querySelector('.price-main');
const priceCompEl = document.querySelector('.price-compare');
const extractCents = txt => {
// Remove everything except digits and the decimal point
const cleaned = txt.replace(/[^0-9.]/g, '');
const parts = cleaned.split('.');
const rupees = parseInt(parts[0] || '0', 10);
const paisa = parts[1] ? parseInt((parts[1] + '00').slice(0,2), 10) : 0;
return rupees * 100 + paisa;
};
priceMainEl.dataset.price = extractCents(priceMainEl.textContent);
if (priceCompEl && priceCompEl.textContent.trim()) {
priceCompEl.dataset.compare = extractCents(priceCompEl.textContent);
priceCompEl.style.display = 'inline';
}
}
// Compute the total for the default quantity (1)
updateTotalPrice();
updateQtyUI();
})();
});
// -----------------------------------------------------------------
// 6️⃣ "Buy it now" – unchanged
// -----------------------------------------------------------------
function buyItNow(form) {
if (!form) return;
const formData = new FormData(form);
fetch('/cart/add.js', { method: 'POST', body: formData })
.then(() => { window.location.href = '/pages/checkout'; })
.catch(() => { window.location.href = '/pages/checkout'; });
}
