window.mpg = window.mpg || {} mpg.getProductByHandleCustom = async (handle) => { const storedProduct = window.sessionStorage.getItem(`mpg_stored_product[${handle}]`); if (storedProduct) return JSON.parse(storedProduct); const query = ` query getProductByHandle @inContext(language: ${window.Shopify?.locale?.toUpperCase()?.split('-')?.[0] || 'EN'}, country: ${window.Shopify?.country?.toUpperCase() || 'US'}) { productByHandle(handle: "${handle}") { id title handle tags metafield(namespace: "soulandwolf", key: "Clearance") { value } options(first: 3) { name values } variants(first: 250) { nodes { id title availableForSale compareAtPrice { amount } price { amount } metafield(namespace: "soulandwolf", key: "price_vip") { value } } } selectedOrFirstAvailableVariant { id availableForSale compareAtPrice { amount } price { amount } metafield(namespace: "soulandwolf", key: "price_vip") { value } } } } `; const response = await fetch(`https://${window.Shopify.shop}/api/2025-10/graphql.json`, { method: 'POST', headers: { 'Content-Type': 'application/json', 'X-Shopify-Storefront-Access-Token': mpg.merchantConfig.storefront_access_token, }, body: JSON.stringify({ query }), }); if (!response.ok) { console.error('Error:', response.status, await response.text()); return; } const data = await response.json(); console.log(data); const product = data.data?.productByHandle; if (!product) return null; product.options.forEach((option) => { option.values = [...new Set(option.values)]; }); if ( product.options.length === 1 && ['Title', 'Titre', 'Titel', 'Titula'].includes(product.options[0].name) && product.options[0].values.length === 1 ) product.options = []; window.sessionStorage.setItem(`mpg_stored_product[${handle}]`, JSON.stringify(product)); return product; }; mpg.updatePriceCustom = async (prodCardEl, alternateProd) => { if (!prodCardEl || !alternateProd?.handle) return; const product = await (mpg.getProductByHandleCustom ? mpg.getProductByHandleCustom(alternateProd.handle) : mpg.getProductByHandle(alternateProd.handle)); if (!product) return; const variant = product.selectedOrFirstAvailableVariant; const price = Number(variant?.price?.amount || 0); const compareAtPrice = Number(variant?.compareAtPrice?.amount || 0); // Lấy giá VIP an toàn (bắt từ metafield dạng chuẩn) let vipPrice = 0; try { const metaValue = variant?.metafield?.value; if (metaValue) { vipPrice = Number(JSON.parse(metaValue)?.amount || 0); } } catch (e) { vipPrice = 0; } // Các biến logic match chính xác 100% với price.liquid const vipDiscount = (vipPrice > 0 && vipPrice < price) ? (price - vipPrice) : false; const isSale = compareAtPrice > price; const isSoldOut = !variant.availableForSale; const format = (val) => mpg.formatMoney(val * 100 * (mpg.currencyRate || 1), mpg.moneyFormat); // 1. Cập nhật Wrapper Class (Trang Collection) const priceWrapper = prodCardEl.querySelector('.f-price'); if (priceWrapper) { priceWrapper.classList.remove('f-price--on-sale', 'f-price--vip', 'f-price--sold-out'); if (isSoldOut) priceWrapper.classList.add('f-price--sold-out'); if (vipDiscount) { priceWrapper.classList.add('f-price--vip'); } else if (isSale) { priceWrapper.classList.add('f-price--on-sale'); } } // 2. Cập nhật giá Regular (.f-price__regular) prodCardEl.querySelectorAll('.f-price__regular .f-price-item--regular').forEach(el => { el.innerText = format(price); }); // 3. Xử lý khối Sale (.f-price__sale) const salePriceEl = prodCardEl.querySelector('.f-price__sale .f-price-item--sale'); const saleRrpEl = prodCardEl.querySelector('.f-price__sale .f-price-item__price'); // Thẻ chứa RRP if (salePriceEl) salePriceEl.innerText = format(price); if (saleRrpEl) saleRrpEl.innerText = isSale ? format(compareAtPrice) : ''; // 4. Xử lý khối VIP động (.f-price__vip) theo Customer Level const fPriceVipContainer = prodCardEl.querySelector('.f-price__vip'); if (fPriceVipContainer) { const vipItemRegular = fPriceVipContainer.querySelector('.f-price-item--regular'); const vipItemVip = fPriceVipContainer.querySelector('.f-price-item--vip'); const vipDiscountEl = fPriceVipContainer.querySelector('.f-price-item__discount'); const targetRegularPrice = vipItemRegular?.querySelector('.f-price-item__price'); const targetVipPrice = vipItemVip?.querySelector('.f-price-item__price'); if (targetVipPrice) { if (vipDiscount) { targetVipPrice.innerText = format(vipPrice); if (vipItemRegular) vipItemRegular.innerText = format(price); if (vipDiscountEl) vipDiscountEl.innerText = `Save ${format(vipDiscount)}`; } else { targetVipPrice.innerText = ''; if (vipItemRegular) vipItemRegular.innerText = format(price); if (vipDiscountEl) vipDiscountEl.innerText = ''; } } else if (vipItemVip) { if (vipDiscount) { vipItemVip.innerText = format(vipPrice); if (targetRegularPrice) targetRegularPrice.innerText = format(price); } else { vipItemVip.innerText = ''; if (targetRegularPrice) targetRegularPrice.innerText = format(price); } } } const isAlgoliaMain = prodCardEl.querySelector('.ais-hit--price'); const isAlgoliaAuto = prodCardEl.querySelector('.aa-item--price'); const algoliaContainer = isAlgoliaMain || isAlgoliaAuto; if (algoliaContainer) { console.log('--- ALGOLIA SEARCH PRICE DEBUG (NORMAL FLOW ONLY) ---'); console.log('1. Data Giá VIP (vipPrice):', vipPrice); console.log('2. Data Giá Gốc (price):', price); console.log('3. Data Giá Compare:', compareAtPrice); const prefix = isAlgoliaMain ? 'ais' : 'aa'; const priceClass = isAlgoliaMain ? 'ais-hit--price-striked' : 'aa-item--price-striked'; let activePriceEl = algoliaContainer.querySelector(`.${prefix}-retail-price-custom`); let vipWrapper = algoliaContainer.querySelector(`.${prefix}-vip-price`); let strikedWrapper = algoliaContainer.querySelector(`.${priceClass}`); // LUỒNG CHUNG: HIỂN THỊ GIÁ BÌNH THƯỜNG console.log('=> HIỂN THỊ LUỒNG CHUẨN (KHÔNG ĐẢO GIÁ VIP)'); // 1. Luôn hiển thị Giá Gốc vào Thẻ Số Bự if (activePriceEl) { activePriceEl.innerText = format(price); } // 2. Xử lý hiển thị VIP Badge (nếu có ưu đãi VIP) if (vipDiscount) { if (!vipWrapper) { const insertHTML = ` `; // Chèn trước thẻ gạch ngang nếu có, hoặc chèn vào cuối if (strikedWrapper) { strikedWrapper.insertAdjacentHTML('beforebegin', insertHTML); } else { algoliaContainer.insertAdjacentHTML('beforeend', insertHTML); } vipWrapper = algoliaContainer.querySelector(`.${prefix}-vip-price`); } const lbl = vipWrapper.querySelector(`.${prefix}-vip-price__label`); const prc = vipWrapper.querySelector(`.${prefix}-vip-price__price`); if (lbl) lbl.innerText = 'VIP'; if (prc) prc.innerText = format(vipPrice); vipWrapper.style.display = ''; } else if (vipWrapper) { vipWrapper.remove(); } // 3. Xử lý hiển thị Giá Gạch Ngang (Compare at price) khi có Sale if (isSale) { if (!strikedWrapper) { algoliaContainer.insertAdjacentHTML('beforeend', ` `); strikedWrapper = algoliaContainer.querySelector(`.${priceClass}`); } const strikedInner = strikedWrapper.querySelector('span'); const displayComparePrice = format(compareAtPrice); if (strikedInner) strikedInner.innerText = displayComparePrice; else strikedWrapper.innerText = displayComparePrice; } else if (strikedWrapper) { strikedWrapper.remove(); } } }; mpg.handleSwatchOnCardChange = async ({ group, prodCardEl, prod }) => { if (!prodCardEl || !prod?.handle) return; const settings = window.mpg?.settings || {}; const t = settings.translations || {}; // Alias ngắn để gọi chuỗi dịch const product = await (mpg.getProductByHandleCustom ? mpg.getProductByHandleCustom(prod.handle) : mpg.getProductByHandle(prod.handle)); if (!product) return; const variant = product.selectedOrFirstAvailableVariant; const price = Number(variant?.price?.amount || 0); const compareAtPrice = Number(variant?.compareAtPrice?.amount || 0); let vipPrice = 0; try { const metaValue = variant?.metafield?.value; if (metaValue) vipPrice = Number(JSON.parse(metaValue)?.amount || 0); } catch (e) { /* Silent */ } const isClearance = product.metafield?.value === "true"; const isInStoreOnly = product.in_store_only?.value === "true"; const isSoldOut = !variant.availableForSale; const isVip = (settings.customer_tags || []).includes('VIP') && vipPrice > 0 && vipPrice < price; const isOnSale = compareAtPrice > price; // 1. Cập nhật Input Form const formEl = prodCardEl.querySelector('.product-card__actions'); if (formEl) { const inputVariantEl = formEl.querySelector('input[name="id"]'); const inputProductEl = formEl.querySelector('input[name="product-id"]'); if (inputVariantEl) inputVariantEl.value = variant.id?.split('/')?.pop(); if (inputProductEl) inputProductEl.value = product.id?.split('/')?.pop(); } // 2. Cập nhật Badge dùng chuỗi dịch const badgeContainer = prodCardEl.querySelector('.product-card__badge'); if (badgeContainer) { badgeContainer.innerHTML = ''; if (isInStoreOnly) { badgeContainer.insertAdjacentHTML('beforeend', `${t.in_store_only || 'In-store only'}`); } if (isSoldOut && settings.pcard_show_badge_soldout) { badgeContainer.insertAdjacentHTML('beforeend', `${t.sold_out || 'Sold out'}`); } else if (isVip && settings.pcard_show_badge_vip) { badgeContainer.insertAdjacentHTML('beforeend', `${t.vip_discount || 'VIP'}`); } else if (isClearance && settings.pcard_show_badge_clearance) { badgeContainer.insertAdjacentHTML('beforeend', `${t.clearance || 'Clearance'}`); } else if (isOnSale && settings.pcard_show_sale_badge) { let badgeText = t.on_sale || 'Sale'; const type = settings.pcard_sale_badge_type; if (type === 'percentage' || type === 'fixed_amount') { let amountStr = ''; if (type === 'percentage') { amountStr = `${Math.round(((compareAtPrice - price) * 100) / compareAtPrice)}%`; } else { const amount = compareAtPrice - price; amountStr = mpg.formatMoney(amount * 100 * (mpg.currencyRate || 1), mpg.moneyFormat); } // Thay thế {{ amount }} trong chuỗi dịch nếu có badgeText = (t.save_price_html || 'Save {{ amount }}').replace('{{ amount }}', amountStr); } badgeContainer.insertAdjacentHTML('beforeend', `${badgeText}`); } // 3. Xử lý Tags const toHandle = (str) => typeof str === 'string' ? str.toLowerCase().replace(/[^a-z0-9]+/g, '-').replace(/^-+|-+$/g, '') : ''; const newHandles = (settings.new_tags || []).map(toHandle); const hotHandles = (settings.hot_tags || []).map(toHandle); const comingHandles = (settings.coming_tags || []).map(toHandle); (product.tags || []).forEach(tag => { const tagHandle = toHandle(tag); if (newHandles.includes(tagHandle)) badgeContainer.insertAdjacentHTML('beforeend', `${tag}`); else if (hotHandles.includes(tagHandle)) badgeContainer.insertAdjacentHTML('beforeend', `${tag}`); else if (comingHandles.includes(tagHandle)) badgeContainer.insertAdjacentHTML('beforeend', `${tag}`); }); } await mpg.updatePriceCustom(prodCardEl, prod); };

Dining Room

Bathrooms

Schots

Iver

Leather Collection

Teak Furniture

Our Bestsellers

Handles & Knobs

Pressed Metal

Lighting Favourites

Fireplace Favourites

Outdoor Favourites

Dining Room

Bathrooms

Schots

Iver

Leather Collection

Teak Furniture

Handles & Knobs

Pressed Metal

Collection: Cabinet & Drawer Handles

Choose your option

Choose your option

Choose your option

Choose your option

Choose your option

Choose your option

Choose your option

Choose your option

Choose your option

Choose your option

Choose your option

Choose your option

Choose your option

Choose your option

Choose your option

Choose your option

Choose your option

Recently viewed products

Popular Searches

'unearth the uncommon'

Your cart (0)

Product Comparison

Sort By

Your cart