","short_description":"

An superb training ball, offering affordability and consistency.

","size":"SIZE 4","attributes":{"size":"SIZE 4","cover_material":"TPU","bladder":"Butyl","play":"Indoor, Outdoor, AstroTurf/Artificial, Grass","grade":"Training / Recreation, Schools","surface_texture":"Plain/Smooth","color":"Yellow","footballsize":"SIZE 4"},"attributesData":{"size":{"label":"Size","value":"SIZE 4","code":"size"},"cover_material":{"label":"Material","value":"TPU","code":"cover_material"},"bladder":{"label":"Bladder","value":"Butyl","code":"bladder"},"play":{"label":"Playing Surface","value":"Indoor, Outdoor, AstroTurf/Artificial, Grass","code":"play"},"grade":{"label":"Grade","value":"Training / Recreation, Schools","code":"grade"},"surface_texture":{"label":"Surface Texture","value":"Plain/Smooth","code":"surface_texture"},"color":{"label":"Colour","value":"Yellow","code":"color"},"footballsize":{"label":"Size","value":"SIZE 4","code":"footballsize"}}},"11583":{"sku":"F3A1000-O","name":"Molten Vantaggio 1000 Football-Orange-SIZE 3","description":"","short_description":"

An superb training ball, offering affordability and consistency.

","size":"SIZE 3","attributes":{"size":"SIZE 3","cover_material":"TPU","bladder":"Butyl","play":"Indoor, Outdoor, AstroTurf/Artificial, Grass","grade":"Training / Recreation, Schools","surface_texture":"Plain/Smooth","color":"Orange","footballsize":"SIZE 3"},"attributesData":{"size":{"label":"Size","value":"SIZE 3","code":"size"},"cover_material":{"label":"Material","value":"TPU","code":"cover_material"},"bladder":{"label":"Bladder","value":"Butyl","code":"bladder"},"play":{"label":"Playing Surface","value":"Indoor, Outdoor, AstroTurf/Artificial, Grass","code":"play"},"grade":{"label":"Grade","value":"Training / Recreation, Schools","code":"grade"},"surface_texture":{"label":"Surface Texture","value":"Plain/Smooth","code":"surface_texture"},"color":{"label":"Colour","value":"Orange","code":"color"},"footballsize":{"label":"Size","value":"SIZE 3","code":"footballsize"}}}}; component.currentSimpleId = null; component.originalName = null; component.originalSku = null; component.urlPreselectApplied = false; component.captureOriginals = function () { if (this.originalSku === null) { const skuSelectors = [ '.product-detail-attribute-sku-value' ]; const skuNode = document.querySelector(skuSelectors.join(',')); this.originalSku = skuNode ? skuNode.textContent : ''; } }; component.getSelectedSimpleId = function () { if (!this.optionConfig || !this.optionConfig.index) return null; const selected = this.selectedValues || {}; // Require all attributes selected: compare number of selected keys vs attributes config const selectedKeys = Object.keys(selected).filter((k) => Boolean(selected[k])); const totalAttrs = Object.keys(this.optionConfig.attributes || {}).length; if (selectedKeys.length < totalAttrs) return null; const entries = Object.entries(this.optionConfig.index); for (const [childId, combo] of entries) { let matches = true; for (const [attrId, optionId] of Object.entries(selected)) { if (!optionId) { matches = false; break; } if (!combo || String(combo[attrId]) !== String(optionId)) { matches = false; break; } } if (matches) return Number(childId); } return null; }; component.updateNameAndSku = function () { // Ensure original values captured this.captureOriginals(); // If not all attributes selected, revert to original and exit if (this.optionConfig && this.optionConfig.attributes) { const selected = this.selectedValues || {}; const selectedKeys = Object.keys(selected).filter((k) => Boolean(selected[k])); const totalAttrs = Object.keys(this.optionConfig.attributes || {}).length; if (selectedKeys.length < totalAttrs) { const skuSelectors0 = [ '.product-detail-attribute-sku-value' ]; document.querySelectorAll(skuSelectors0.join(',')).forEach((el) => { if (this.originalSku !== null) el.textContent = this.originalSku; }); return; } } const id = this.getSelectedSimpleId(); this.currentSimpleId = id; if (!id || !this.childMeta || !this.childMeta[id]) { return; } const meta = this.childMeta[id]; const skuSelectors = [ '.product-detail-attribute-sku-value' ]; const skuNodes = document.querySelectorAll(skuSelectors.join(',')); if (skuNodes && skuNodes.length) { skuNodes.forEach((el) => { el.textContent = meta.sku; }); } try { const detail = { productId: Number('11425'), productIndex: Number(id), selectedValues: Object.assign({}, this.selectedValues || {}), inStock: Boolean(meta.inStock) }; window.dispatchEvent(new CustomEvent('configurable-selection-changed', { detail })); window.dispatchEvent(new CustomEvent('configurable-select-changed', { detail })); } catch (e) {} const descNode = document.querySelector('#description .description'); if (descNode && meta.description !== undefined) { descNode.innerHTML = meta.description || ''; } const shortDescNode = document.querySelector('.product-description.product-short-description'); if (shortDescNode) { shortDescNode.innerHTML = meta.short_description || meta.name; } try { const attrBlocks = document.querySelectorAll('.product.attribute, .product-info-main .product-attribute'); attrBlocks.forEach((block) => { const labelEl = block.querySelector('.label, dt'); if (!labelEl) return; const labelText = (labelEl.textContent || '').trim().toLowerCase(); if (labelText === 'sku' || labelText.includes('sku')) { const valueEl = block.querySelector('.value, dd, .product-detail-value'); if (valueEl) valueEl.textContent = meta.sku; } }); } catch (e) {} try { if (meta.size) { const sizeNode = document.querySelector([ '.product-attribute-size-value', '.product-detail-attribute-size-value' ].join(',')); if (sizeNode) sizeNode.textContent = meta.size; } const applyAttributeValues = () => { if (!meta.attributesData) return; const roots = [ document.querySelector('#attributes'), document.querySelector('.additional-attributes'), document.querySelector('.product-info-main') ].filter(Boolean); Object.entries(meta.attributesData).forEach(([code, info]) => { const value = info && info.value ? String(info.value) : ''; roots.forEach((root) => { if (!root) return; const selectors = [ `.product-attribute-${code}-value` ]; let node = null; for (const sel of selectors) { node = root.querySelector(sel); if (node) break; } if (node) node.textContent = value; }); }); }; applyAttributeValues(); // Ensure updates apply after any async DOM changes this.$nextTick(() => applyAttributeValues()); } catch (e) {} }; component.__baseInit = component.init; component.init = function () { if (typeof this.__baseInit === 'function') { try { this.__baseInit.call(this); } catch (e) {} } const hasUrl = this.hasUrlPreselect(); this.$watch('selectedValues', () => { this.updateNameAndSku(); }); const runCustom = () => { if (hasUrl) { this.applyUrlPreselect && this.applyUrlPreselect(); } else { this.autoSelectIfEmpty && this.autoSelectIfEmpty(); } }; this.$nextTick(() => this.$nextTick(runCustom)); this.$watch('showSwatches', (val) => { if (!val) return; this.$nextTick(() => runCustom()); }); }; component.applyUrlPreselect = function () { if (this.urlPreselectApplied) return; // Parse query/hash pairs into map key->value const params = new URLSearchParams(window.location.search); const hash = window.location.hash.startsWith('#') ? window.location.hash.slice(1) : ''; const pairs = new URLSearchParams(hash); const desired = {}; params.forEach((v, k) => { desired[k] = v; }); pairs.forEach((v, k) => { desired[k] = v; }); if (!this.optionConfig || !this.optionConfig.attributes) return; // Map attribute code to id const attrIdByCode = {}; Object.entries(this.optionConfig.attributes).forEach(([id, cfg]) => { attrIdByCode[cfg.code] = Number(id); }); // Apply in DOM attribute order to satisfy dependencies const blocks = Array.from(document.querySelectorAll('.swatch-attribute[data-attribute-id]')); const attrIdsInOrder = blocks.map(b => Number(b.getAttribute('data-attribute-id'))); let changed = false; for (const attrId of attrIdsInOrder) { const code = Object.entries(this.optionConfig.attributes).find(([id]) => Number(id) === attrId)?.[1]?.code; if (!code) continue; const optId = desired[code]; if (!optId) continue; this.isOptionSelectable(attrId, optId); const numericOptId = Number(optId); this.changeOption(attrId, numericOptId); try { if (this.selectedValues) { this.selectedValues = Object.assign({}, this.selectedValues, { [attrId]: numericOptId }); } } catch (e) {} changed = true; } if (changed) this.updateNameAndSku(); this.urlPreselectApplied = true; }; component.urlPreselectDetected = null; component.hasUrlPreselect = function () { if (this.urlPreselectDetected !== null) return this.urlPreselectDetected; const attributes = this.optionConfig && this.optionConfig.attributes ? this.optionConfig.attributes : {}; const validAttrIds = Object.keys(attributes); const validCodes = Object.values(attributes).map(cfg => cfg.code); const searchParams = new URLSearchParams(window.location.search || ''); const hashRaw = (window.location.hash || '').replace(/^#/, ''); const hashParams = new URLSearchParams(hashRaw); const containsRelevantParam = (params) => { for (const [key, value] of params.entries()) { if (!value) continue; const m = key.match(/^super_attribute\[(\d+)\]$/); if (m && validAttrIds.includes(m[1])) return true; if (validCodes.includes(key)) return true; } return false; }; this.urlPreselectDetected = containsRelevantParam(searchParams) || containsRelevantParam(hashParams); return this.urlPreselectDetected; }; component.isOptionSelectable = function (attrId, optionId) { if (!this.optionConfig || !this.optionConfig.index) return false; const selected = this.selectedValues || {}; for (const [childId, combo] of Object.entries(this.optionConfig.index)) { let matches = true; // existing selections must match for (const [sAttr, sOpt] of Object.entries(selected)) { if (!sOpt) { matches = false; break; } if (String(combo[sAttr]) !== String(sOpt)) { matches = false; break; } } if (!matches) continue; if (String(combo[attrId]) === String(optionId)) { return true; } } return false; }; component.autoSelectIfEmpty = async function () { const hasUrlPreselect = this.hasUrlPreselect(); if (hasUrlPreselect) { return; } const selected = this.selectedValues || {}; const selectedKeys = Object.keys(selected).filter((k) => Boolean(selected[k])); if (selectedKeys.length > 0) { return; } const attributesMap = this.optionConfig && this.optionConfig.attributes ? this.optionConfig.attributes : {}; const blocks = Array.from(document.querySelectorAll('.swatch-attribute[data-attribute-id]')); const attrIdsInOrder = blocks.map(b => Number(b.getAttribute('data-attribute-id'))) .filter(id => attributesMap[id]); if (attrIdsInOrder.length === 0) { const selects = Array.from(document.querySelectorAll('select.super-attribute-select')); if (selects.length) { const sel = selects[0]; const first = Array.from(sel.options).find(o => o.value && !o.disabled); if (first) { sel.value = first.value; sel.dispatchEvent(new Event('change', { bubbles: true })); this.$nextTick(() => this.updateNameAndSku()); } } return; } const preferredLabels = ['long', 'shield', 'black']; const normalizeLabel = (html) => { const tmp = document.createElement('div'); tmp.innerHTML = String(html || ''); return tmp.textContent.trim().toLowerCase(); }; for (const attrIdStr of attrIdsInOrder) { const attrId = Number(attrIdStr); const options = this.getAllAttributeOptions ? this.getAllAttributeOptions(attrId) : (attributesMap[attrIdStr]?.options || []); let picked = false; const selectableOptions = options.filter((opt) => this.isOptionSelectable(attrId, opt.id) && this.optionIsActive(attrId, opt.id)); const preferred = selectableOptions.find((opt) => preferredLabels.includes(normalizeLabel(opt.label))); if (preferred) { this.changeOption(attrId, String(preferred.id)); try { this.selectedValues = Object.assign({}, this.selectedValues, { [attrId]: String(preferred.id) }); } catch (e) {} picked = true; } else { for (const opt of selectableOptions) { this.changeOption(attrId, String(opt.id)); try { this.selectedValues = Object.assign({}, this.selectedValues, { [attrId]: String(opt.id) }); } catch (e) {} picked = true; break; } } if (!picked) break; await this.$nextTick(); } this.$nextTick(() => this.updateNameAndSku()); }; return component; }