let compiledTemplates = {}; function getTemplatizedValue(template, context, maxLength=undefined) { if (!(template in compiledTemplates)) { compiledTemplates[template] = Hogan.compile(template); } var renderedValue = compiledTemplates[template].render(context); if (maxLength !== undefined && maxLength > 0) { if (renderedValue.length > maxLength) { renderedValue = renderedValue.substr(0, maxLength) + '...'; } } return renderedValue; }function getNestedValue(obj, ...keys) { return keys.reduce((previous, current) => previous && previous[current], obj); } function getProductAttributeValue(attributeString, attributes) { return eval(attributeString); }function isConditionMet(override, context) { // Check for customer group const customerGroupOverrides = getNestedValue(override, 'customerGroups') || []; if (customerGroupOverrides.length > 0 && !customerGroupOverrides.includes(context.customer_group)) { return false; }// Check for language const languageOverrides = getNestedValue(override, 'languages') || []; if (languageOverrides.length > 0 && !languageOverrides.includes(context.language)) { return false; }// Check for product attribute const productAttributeOverrides = getNestedValue(override, 'productAttributes') || []; if (productAttributeOverrides.length > 0) { return productAttributeOverrides.reduce((previous, current) => previous || getProductAttributeValue(current, context.attributes), false); }// Check for global conditions (like keyphrase is null) -> later return true; } function getOverriddenValue(value, context, defaultValue) { if (value === undefined || value === null) { return defaultValue; } if (typeof (value) !== "object") { return value; } for (const override of (value.overrides || [])) { if (isConditionMet(override.overrideCheck, context)) { return override.overriddenValue; } } return value.default || defaultValue; }function getValue(property, defaultValue = null) { if (property === undefined || property === null) { return defaultValue; } return property; } function getNumberWithUnit(value) { if (getValue(value) !== null && getValue(value.value) !== null) { return value.value + '' + value.unit; } return ''; } function getColor(color) { if (getValue(color) === null) { return ''; } return `rgba(${getValue(color.r, 0)}, ${getValue(color.g, 0)}, ${getValue(color.b, 0)}, ${getValue(color.a, 0)})`; } function getImageStyle(config, onHover=false) { let style = {}; if (config === null || config === undefined) { return style; } if (onHover) { config = config.onHover; if (config === undefined || config === null) { return style; } } return { "background-color": getColor(config.backgroundColor), "object-fit": config.objectFit || 'initial', padding: getBoundaryProperty(config.padding), margin: getBoundaryProperty(config.margin), }; } function getTextStyle(config, onHover=false) { let style = {}; if (config === null || config === undefined) { return style; } if (onHover) { config = config.onHover; if (config === undefined || config === null) { return style; } } if (config.typography) { style = getTypographyStyle(config.typography); } if (config.textShadow) { style = { ...style, ...getTextShadowStyle(config.textShadow) } } style = { ...style, color: getColor(config.textColor), "background-color": getColor(config.backgroundColor), padding: getBoundaryProperty(config.padding), margin: getBoundaryProperty(config.margin), } return style; } function getBackgroundColor(config, onHover=false) { let style = ''; if (config === null || config === undefined) { return style; } if (onHover) { config = config.onHover; if (config === undefined || config === null) { return style; } } return getColor(config); } function getBoundaryProperty(property) { if (getValue(property) !== null && ( getValue(property.left) !== null || getValue(property.right) !== null || getValue(property.bottom) !== null || getValue(property.top) !== null )) { return [getValue(property.top, 0), getValue(property.right, 0), getValue(property.bottom, 0), getValue(property.left, 0), ''].join(property.unit + ' '); } return '' } function getBoxShadowProperty(config) { if (config === undefined || config === null) { return ''; } if (((config.horizontal !== undefined && config.horizontal !== null) || (config.vertical !== undefined && config.vertical !== null)) && config.color !== undefined && config.color !== null) { return [ getNumberWithUnit(config.horizontal), getNumberWithUnit(config.vertical), getNumberWithUnit(config.blur), getNumberWithUnit(config.spread), getColor(config.color)].join(' '); } return ''; } function getBorderStyle(config, onHover=false) { let style = {}; if (config === undefined || config === null) { return style; } if (onHover) { config = config.onHover; if (config === undefined || config === null) { return style; } } style = { "border-style": config.type, "border-width": getNumberWithUnit(config.width), "border-color": getColor(config.color), "border-radius": getBoundaryProperty(config.radius), "box-shadow": getBoxShadowProperty(config.boxShadow) }return style; } function getPositioningStyle(config) { let style = {}; if (config === undefined || config === null) { return style; }if (config.width !== undefined && config.width !== null) { switch (config.width.type) { case '100%': style = { width: '100%', }; break; case 'custom': style = { width: getNumberWithUnit(config.width.width) } break; case 'default': break; default: style = { width: config.width.type }; break;} } if (config.maxWidth !== undefined && config.maxWidth !== null) { switch (config.maxWidth.type) { case '100%': style = { ...style, "max-width": '100%', }; break; case 'default': break; case 'custom': style = { ...style, "max-width": getNumberWithUnit(config.maxWidth.width) } break; default: style = { ...style, "max-width": config.maxWidth.type }; break;} } if (config.height !== undefined && config.height !== null) { switch (config.height.type) { case '100%': style = { ...style, height: '100%', }; break; case 'default': break; case 'custom': style = { ...style, height: getNumberWithUnit(config.height.width) } break; default: style = { ...style, height: config.height.type }; break;} } if (config.position !== undefined && config.position !== null) { switch (config.position.type) { case 'absolute': style = { ...style, position: 'absolute', left: config.position.horizontalOrientation === 'left' ? getNumberWithUnit(config.position.horizontalOffset) : '', right: config.position.horizontalOrientation === 'right' ? getNumberWithUnit(config.position.horizontalOffset) : '', top: config.position.verticalOrientation === 'top' ? getNumberWithUnit(config.position.verticalOffset) : '', bottom: config.position.verticalOrientation === 'bottom' ? getNumberWithUnit(config.position.verticalOffset) : '', }; break; case 'fixed': style = { ...style, position: 'fixed', left: config.position.horizontalOrientation === 'left' ? getNumberWithUnit(config.position.horizontalOffset) : '', right: config.position.horizontalOrientation === 'right' ? getNumberWithUnit(config.position.horizontalOffset) : '', top: config.position.verticalOrientation === 'top' ? getNumberWithUnit(config.position.verticalOffset) : '', bottom: config.position.verticalOrientation === 'bottom' ? getNumberWithUnit(config.position.verticalOffset) : '', }; break; case 'relative': style = { ...style, position: 'relative', left: config.position.horizontalOrientation === 'left' ? getNumberWithUnit(config.position.horizontalOffset) : '', right: config.position.horizontalOrientation === 'right' ? getNumberWithUnit(config.position.horizontalOffset) : '', top: config.position.verticalOrientation === 'top' ? getNumberWithUnit(config.position.verticalOffset) : '', bottom: config.position.verticalOrientation === 'bottom' ? getNumberWithUnit(config.position.verticalOffset) : '', }; break; case 'default': break; default: style = { ...style, position: 'relative' }; } } if (config.display !== undefined && config.display !== null) { style = { ...style, display: config.display, }; } if (config.verticalAlign !== undefined && config.verticalAlign !== null) { style = { ...style, "vertical-align": config.verticalAlign }; } if (config.textAlign !== undefined && config.textAlign !== null && config.textAlign !== 'default') { style = { ...style, "text-align": config.textAlign }; }return style;} function getAdvancedContainerStyle(config) { let style = {}; if (config === undefined || config === null) { return style; } return { margin: getBoundaryProperty(config.margin), padding: getBoundaryProperty(config.padding), "z-index": config.zIndex } } function getDefaultAdvancedStyle(config, onHover=false) { let style = {}; if (config === undefined || config === null) { return style; } style = { ...getAdvancedContainerStyle(config.container), "background-color": getBackgroundColor(config.backgroundColor, onHover), ...getBorderStyle(config.border, onHover), ...getPositioningStyle(config.positioning) }; return style; } function getDefaultBaseStyle(config, onHover=false) { if (config === null || config === undefined) { return {}; } const textStyle = config.textStyle || {}; let style = getTextStyle(textStyle, onHover);style = { ...style, ...getBorderStyle(config.border, onHover), ...getPositioningStyle(config.positioning) } return style; } function getDefaultImageStyle(config, onHover=false) { if (config === null || config === undefined) { return {}; } const imageStyle = config.imageStyle || {}; return { ...getImageStyle(imageStyle, onHover), ...getBorderStyle(config.border, onHover), ...getPositioningStyle(config.positioning) }; } function getAdvancedCSSProperties(config, extraClasses='') { if (config === undefined || config === null) { if (extraClasses.length > 0) { return { class: extraClasses }; } return {}; } let classNames = (config.cssClasses || '') + ' ' + extraClasses; return { id: config.cssId || '', class: classNames } } function getCamelCase(input) { words = input.split('-'); let output = words.length > 0 ? words[0] : undefined; if (words.length > 1) { words.shift(); for (let word of words) { output += word.charAt(0).toUpperCase() + word.slice(1); } } return output; } function getTypographyStyle(config) { let style = {}; if (config === undefined || config === null) { return style; } ['font-family', 'font-weight', 'text-transform', 'font-style', 'text-decoration'].map(x => { if (getCamelCase(x) in config) { if (config[getCamelCase(x)].toLowerCase() !== 'default') { style[x] = config[getCamelCase(x)]; } } }); ['font-size', 'line-height', 'letter-spacing'].map(x => { if ((getCamelCase(x) in config) && ('unit' in config[getCamelCase(x)]) && ('value' in config[getCamelCase(x)])) { style[x] = getNumberWithUnit(config[getCamelCase(x)]); } }); return style; }function getTextShadowStyle(config) { let style = {}; if (config === undefined || config === null) { return style; } if (((config.horizontal !== undefined && config.horizontal !== null) || (config.vertical !== undefined && config.vertical !== null)) && config.color !== undefined && config.color !== null) { style['text-shadow'] = [ getNumberWithUnit(config.horizontal), getNumberWithUnit(config.vertical), getNumberWithUnit(config.blur), getColor(config.color)].join(' '); } return style; }function getStyleFromDict(config) { let output = ""; for (const [key, value] of Object.entries(config)) { if (value !== null && value !== undefined && value.toString().length > 0) { output += `${key}:${value};`; } } return output; } function getStyleFromDictConfig(style) { let output = ''; for (const [key, value] of Object.entries(style)) { output += `${key} { ${getStyleFromDict(value)} } `; } return output; }function getStylesFromConfig(config) { let style = {}; // Search Bar Style style['#search-box-shadow'] = getDefaultBaseStyle(getNestedValue(config, 'searchBar', 'style')); style['#search-box-shadow:hover'] = getDefaultBaseStyle(getNestedValue(config, 'searchBar', 'style'), true); // Result Layout // -- General style['#resultsShadow'] = { position: 'relative', width: 'auto', ...getDefaultAdvancedStyle(getNestedValue(config, 'resultLayout', 'general', 'advanced')) }; style['#resultsShadow:hover'] = getDefaultAdvancedStyle(getNestedValue(config, 'resultLayout', 'general', 'advanced'), true); style['#resultsShadow .uplift-result-layout-header'] = getDefaultBaseStyle(getNestedValue(config, 'resultLayout', 'general', 'style')); style['#resultsShadow .uplift-result-layout-header:hover'] = getDefaultBaseStyle(getNestedValue(config, 'resultLayout', 'general', 'style'), true); // -- View All Results Button style['#resultsShadow .uplift-button-container'] = { position: 'relative', width: 'auto', ...getDefaultAdvancedStyle(getNestedValue(config, 'resultLayout', 'viewAllResultsButton', 'advanced')) }; style['#resultsShadow .uplift-button-container:hover'] = getDefaultAdvancedStyle(getNestedValue(config, 'resultLayout', 'viewAllResultsButton', 'advanced'), true); style['#resultsShadow .uplift-button-container .uplift-button'] = getDefaultBaseStyle( getNestedValue( config, 'resultLayout', 'viewAllResultsButton', 'style')); style['#resultsShadow .uplift-button-container .uplift-button:hover'] = getDefaultBaseStyle( getNestedValue( config, 'resultLayout', 'viewAllResultsButton', 'style'), true);// Product // -- General Style & Advanced style['#resultsShadow .uplift-results-list.ui.cards'] = { position: 'relative', "overflow-y": 'auto', ...getDefaultAdvancedStyle(getNestedValue(config, 'product', 'general', 'advanced')) }; style['#resultsShadow .uplift-results-list.ui.cards:hover'] = getDefaultAdvancedStyle(getNestedValue(config, 'product', 'general', 'advanced'), true); style['#resultsShadow .uplift-results-list.ui.cards .uplift-result.ui.card'] = getDefaultBaseStyle(getNestedValue(config, 'product', 'general', 'style')); style['#resultsShadow .uplift-results-list.ui.cards .uplift-result.ui.card:hover'] = getDefaultBaseStyle(getNestedValue(config, 'product', 'general', 'style'), true); // -- Image Style & Advanced style['#resultsShadow .uplift-results-list.ui.cards .uplift-result.ui.card .uplift-image-container'] = { "margin-left": 'auto', "margin-right": 'auto', ...getDefaultAdvancedStyle(getNestedValue(config, 'product', 'image', 'advanced')) }; style['#resultsShadow .uplift-results-list.ui.cards .uplift-result.ui.card .uplift-image-container:hover'] = getDefaultAdvancedStyle(getNestedValue(config, 'product', 'image', 'advanced'), true); style['#resultsShadow .uplift-results-list.ui.cards .uplift-result.ui.card .uplift-image-container img.uplift-image'] = getDefaultImageStyle( getNestedValue( config, 'product', 'image', 'style' ) ); style['#resultsShadow .uplift-results-list.ui.cards .uplift-result.ui.card .uplift-image-container img.uplift-image:hover'] = getDefaultImageStyle( getNestedValue( config, 'product', 'image', 'style' ), true ); // -- Product Property 1-10 Style & Advanced for (let i = 1; i <= 10; i++) { style['#resultsShadow .uplift-results-list.ui.cards .uplift-result.ui.card .uplift-product-property-container.property' + i] = { position: 'relative', width: 'auto', ...getDefaultAdvancedStyle(getNestedValue(config, 'product', 'property' + i, 'advanced')) }; style['#resultsShadow .uplift-results-list.ui.cards .uplift-result.ui.card .uplift-product-property-container.property' + i + ':hover'] = getDefaultAdvancedStyle(getNestedValue(config, 'product', 'property' + i, 'advanced'), true); style['#resultsShadow .uplift-results-list.ui.cards .uplift-result.ui.card .uplift-product-property-container.property' + i + ' .uplift-product-property'] = getDefaultBaseStyle( getNestedValue(config, 'product', 'property' + i, 'style') ); style['#resultsShadow .uplift-results-list.ui.cards .uplift-result.ui.card .uplift-product-property-container.property' + i + ' .uplift-product-property:hover'] = getDefaultBaseStyle( getNestedValue(config, 'product', 'property' + i, 'style'), true ); } // -- Product Footer 1-5 Style & Advanced for (let i = 1; i <= 5; i++) { style['#resultsShadow .uplift-results-list.ui.cards .uplift-result.ui.card .uplift-product-property-container.footer' + i] = { position: 'relative', width: 'auto', ...getDefaultAdvancedStyle(getNestedValue(config, 'product', 'footer' + i, 'advanced')) }; style['#resultsShadow .uplift-results-list.ui.cards .uplift-result.ui.card .uplift-product-property-container.footer' + i + ':hover'] = getDefaultAdvancedStyle(getNestedValue(config, 'product', 'footer' + i, 'advanced'), true); style['#resultsShadow .uplift-results-list.ui.cards .uplift-result.ui.card .uplift-product-property-container.footer' + i + ' .uplift-product-property'] = getDefaultBaseStyle( getNestedValue(config, 'product', 'footer' + i, 'style') ); style['#resultsShadow .uplift-results-list.ui.cards .uplift-result.ui.card .uplift-product-property-container.footer' + i + ' .uplift-product-property:hover'] = getDefaultBaseStyle( getNestedValue(config, 'product', 'footer' + i, 'style'), true ); }// -- Facet 1-5 Style & Advanced for (let i = 1; i <= 5; i++) { style['#facet' + i] = { position: 'relative', width: 'auto', ...getDefaultAdvancedStyle(getNestedValue(config, 'facets', 'facet' + i, 'advanced')) }; style['#facet' + i + ':hover'] = getDefaultAdvancedStyle(getNestedValue(config, 'facets', 'facet' + i, 'advanced'), true); for (const component of ['header', 'content']) { style['#facet' + i + ' .facet-' + component] = getDefaultBaseStyle( getNestedValue(config, 'facets', 'facet' + i, 'style', component) ); style['#facet' + i + ' .facet-' + component + ':hover'] = getDefaultBaseStyle( getNestedValue(config, 'facets', 'facet' + i, 'style', component), true ) } } // -- Button Style & Advanced style['#resultsShadow .uplift-results-list.ui.cards .uplift-result.ui.card .uplift-button-container'] = { position: 'relative', width: 'auto', ...getDefaultAdvancedStyle(getNestedValue(config, 'product', 'button', 'advanced')) }; style['#resultsShadow .uplift-results-list.ui.cards .uplift-result.ui.card .uplift-button-container:hover'] = getDefaultAdvancedStyle(getNestedValue(config, 'product', 'button', 'advanced'), true); style['#resultsShadow .uplift-results-list.ui.cards .uplift-result.ui.card .uplift-button-container .uplift-button'] = getDefaultBaseStyle(getNestedValue( config, 'product', 'button', 'style')); style['#resultsShadow .uplift-results-list.ui.cards .uplift-result.ui.card .uplift-button-container .uplift-button:hover'] = getDefaultBaseStyle(getNestedValue( config, 'product', 'button', 'style'), true); return getStyleFromDictConfig(style); } function getPropertiesFromDict(config, existingProperties={}) { let output = ""; for (let [key, value] of Object.entries(config)) { if (value !== null && value !== undefined && value.length > 0) { if (key in existingProperties) { value = value + ' ' + existingProperties[key]; delete existingProperties[key]; } output += ` ${key}="${value}"`; } } for (const [key, value] of Object.entries(existingProperties)) { if (value !== null && value !== undefined && value.length > 0) { output += ` ${key}="${value}"`; } } return output; }const contentFlexStyle = "-webkit-box-flex:1; flex-grow:1;"; const extraContentFlexStyle = "-webkit-box-flex:0; flex-grow:0;"; const getAlternateImageSrc = (attributes) => { const variations = getNestedValue(attributes, 'variations') || []; const alternate_image_urls = variations.map((x) => x.image_url).filter((x) => x !== attributes.image_url); let alternate_image_src = null; if (alternate_image_urls.length > 0) { alternate_image_src = alternate_image_urls[0]; } return alternate_image_src; }function getLabelConfig(config, context) { const visible = getOverriddenValue( getNestedValue(config, 'content', 'labelVisible'), context, false); if (!visible) { return null; } const nestedValue = getNestedValue(config, 'content', 'labelText'); const overriddenValue = getOverriddenValue(nestedValue, context, ''); const value = getTemplatizedValue( overriddenValue, context); // If value is null, don't render. if (!value || value.length === 0) { return null; } const icon = getNestedValue(config, 'content', 'labelIcon'); const position = getNestedValue(config, 'style', 'labelStyle', 'position') === 'left' ? 'left' : 'right'; const shape = getNestedValue(config, 'style', 'labelStyle', 'shape') === 'corner' ? 'corner' : 'ribbon'; const color = getNestedValue(config, 'style', 'labelStyle', 'color'); const size = getNestedValue(config, 'style', 'labelStyle', 'size'); return { shape: shape, position: position, icon: icon, content: shape === 'ribbon' ? value : '', color: color, size: size } }const buildRequiredAttributes = (result, productConfig) => { let attributes = result.attributes; attributes.num_variations = (getNestedValue(attributes, 'variations') || []).length; attributes.has_multiple_variations = attributes.num_variations > 1; attributes.has_single_variation = !attributes.has_multiple_variations;attributes.is_in_stock = (attributes.availability === 'in stock'); attributes.is_out_of_stock = !attributes.is_in_stock; // Prices attributes.price_without_taxes = getNestedValue(attributes, 'localized_prices', globalContext['currency_iso_code'], 'prices', 'final_price_without_taxes') || getNestedValue(attributes, 'prices', 'final_price_without_taxes') || 0; attributes.price_with_taxes = getNestedValue(attributes, 'localized_prices', globalContext['currency_iso_code'], 'prices', 'final_price_with_taxes') || getNestedValue(attributes, 'prices', 'final_price_with_taxes') || 0; attributes.list_price_without_taxes = getNestedValue(attributes, 'localized_prices', globalContext['currency_iso_code'], 'prices', 'price_without_taxes') || getNestedValue(attributes, 'prices', 'price_without_taxes') || 0; attributes.list_price_with_taxes = getNestedValue(attributes, 'localized_prices', globalContext['currency_iso_code'], 'prices', 'price_with_taxes') || getNestedValue(attributes, 'prices', 'price_with_taxes') || 0; attributes.has_non_zero_price = attributes.price_without_taxes > 0; attributes.has_zero_price = !attributes.has_non_zero_price; attributes.has_non_zero_list_price = attributes.list_price_without_taxes > 0; attributes.has_zero_list_price = !attributes.has_non_zero_list_price; // Compute discount percentage attributes.discount_percentage = attributes.list_price_without_taxes > 0 ? parseInt((attributes.list_price_without_taxes - attributes.price_without_taxes) * 100 / attributes.list_price_without_taxes) : 0; attributes.is_on_sale = attributes.discount_percentage > 0; attributes.is_not_on_sale = !attributes.is_on_sale; // Image attributes.alternate_image_url = getAlternateImageSrc(attributes); // Condition attributes.is_new = attributes.condition === 'new'; attributes.is_used = attributes.condition === 'used'; attributes.is_refurbished = attributes.condition === 'refurbished'; // Availability for order attributes.is_available_to_order = attributes.available; attributes.is_not_available_to_order = !attributes.is_available_to_order; // Convert Prices to string ['price_without_taxes', 'price_with_taxes', 'list_price_without_taxes', 'list_price_with_taxes'].map( (x) => { attributes[x] = parseFloat(attributes[x]).toLocaleString( 'es', { minimumFractionDigits: 2, maximumFractionDigits: 2 }); } ) result.attributes = attributes; result.currency = '€'; result.language = 'es';// Configured Values const context = { ...globalContext, attributes: attributes }; result.config = { image: { visible: getOverriddenValue( getNestedValue(productConfig, 'image', 'content', 'visible'), context, false ), alternateImageVisible: getOverriddenValue( getNestedValue(productConfig, 'image', 'content', 'alternateImageVisible'), context, false ), label: getLabelConfig(getNestedValue(productConfig, 'image'), context) }, button: { visible: getOverriddenValue(getNestedValue(productConfig, 'button', 'content', 'visible'), context, ''), size: getNestedValue(productConfig, 'button', 'content', 'size') || 'medium', link: getTemplatizedValue(getOverriddenValue(getNestedValue(productConfig, 'button', 'content', 'link'), context, ''), context), triggerJavascript: getOverriddenValue(getNestedValue(productConfig, 'button', 'content', 'triggerJavascript'), context, ''), icon: getNestedValue(productConfig, 'button', 'content', 'icon'), text: getOverriddenValue(getNestedValue(productConfig, 'button', 'content', 'text'), context) } }; for (property of [ 'property1', 'property2', 'property3', 'property4', 'property5', 'property6', 'property7', 'property8', 'property9', 'property10', 'footer1', 'footer2', 'footer3', 'footer4', 'footer5' ]) { const propertyConfig = getNestedValue(productConfig, property, 'content'); const maxLength = getNestedValue(propertyConfig, 'maxLength'); result.config[property] = { visible: getOverriddenValue( getNestedValue(propertyConfig, 'visible'), context, false ), value: getTemplatizedValue( getOverriddenValue( getNestedValue(propertyConfig, 'value'), context, ''), context, maxLength), icon: getNestedValue(propertyConfig, 'icon') } } return result; }const horizontalVariant1Template = (productConfig) => { return `
{{#config.image}} {{#config.image.visible}} {{#config.image.alternateImageVisible}} {{#attributes.alternate_image_url}}
{{#config.image.label}}
{{#config.image.label.icon}} {{/config.image.label.icon}} {{config.image.label.content}}
{{/config.image.label}}
{{/attributes.alternate_image_url}} {{^attributes.alternate_image_url}}
{{#config.image.label}}
{{#config.image.label.icon}} {{/config.image.label.icon}} {{config.image.label.content}}
{{/config.image.label}}
{{/attributes.alternate_image_url}} {{/config.image.alternateImageVisible}} {{^config.image.alternateImageVisible}}
{{#config.image.label}}
{{#config.image.label.icon}} {{/config.image.label.icon}} {{config.image.label.content}}
{{/config.image.label}}
{{/config.image.alternateImageVisible}} {{/config.image.visible}} {{/config.image}}{{#config.property1.visible}} {{#config.property1.value}}
{{#config.property1.icon}} {{/config.property1.icon}} {{config.property1.value}}
{{/config.property1.value}} {{/config.property1.visible}}{{#config.property2.visible}} {{#config.property2.value}}
{{#config.property2.icon}} {{/config.property2.icon}} {{config.property2.value}}
{{/config.property2.value}} {{/config.property2.visible}}{{#config.property3.visible}} {{#config.property3.value}}
{{#config.property3.icon}} {{/config.property3.icon}} {{config.property3.value}}
{{/config.property3.value}} {{/config.property3.visible}}{{#config.property4.visible}} {{#config.property4.value}}
{{#config.property4.icon}} {{/config.property4.icon}} {{config.property4.value}}
{{/config.property4.value}} {{/config.property4.visible}}{{#config.property5.visible}} {{#config.property5.value}}
{{#config.property5.icon}} {{/config.property5.icon}} {{config.property5.value}}
{{/config.property5.value}} {{/config.property5.visible}}{{#config.property6.visible}} {{#config.property6.value}}
{{#config.property6.icon}} {{/config.property6.icon}} {{config.property6.value}}
{{/config.property6.value}} {{/config.property6.visible}}{{#config.property7.visible}} {{#config.property7.value}}
{{#config.property7.icon}} {{/config.property7.icon}} {{config.property7.value}}
{{/config.property7.value}} {{/config.property7.visible}}{{#config.property8.visible}} {{#config.property8.value}}
{{#config.property8.icon}} {{/config.property8.icon}} {{config.property8.value}}
{{/config.property8.value}} {{/config.property8.visible}}{{#config.property9.visible}} {{#config.property9.value}}
{{#config.property9.icon}} {{/config.property9.icon}} {{config.property9.value}}
{{/config.property9.value}} {{/config.property9.visible}}{{#config.property10.visible}} {{#config.property10.value}}
{{#config.property10.icon}} {{/config.property10.icon}} {{config.property10.value}}
{{/config.property10.value}} {{/config.property10.visible}}
{{#config.footer1.visible}} {{#config.footer1.value}}
{{#config.footer1.icon}} {{/config.footer1.icon}} {{config.footer1.value}}
{{/config.footer1.value}} {{/config.footer1.visible}}{{#config.footer2.visible}} {{#config.footer2.value}}
{{#config.footer2.icon}} {{/config.footer2.icon}} {{config.footer2.value}}
{{/config.footer2.value}} {{/config.footer2.visible}}{{#config.footer3.visible}} {{#config.footer3.value}}
{{#config.footer3.icon}} {{/config.footer3.icon}} {{config.footer3.value}}
{{/config.footer3.value}} {{/config.footer3.visible}}{{#config.footer4.visible}} {{#config.footer4.value}}
{{#config.footer4.icon}} {{/config.footer4.icon}} {{config.footer4.value}}
{{/config.footer4.value}} {{/config.footer4.visible}}{{#config.footer5.visible}} {{#config.footer5.value}}
{{#config.footer5.icon}} {{/config.footer5.icon}} {{config.footer5.value}}
{{/config.footer5.value}} {{/config.footer5.visible}}
{{#config.button.visible}}
{{/config.button.visible}}
`; } const verticalVariant1Template = (productConfig) => { return `
{{#config.image}} {{#config.image.visible}} {{#config.image.alternateImageVisible}} {{#attributes.alternate_image_url}}
{{#config.image.label}}
{{#config.image.label.icon}} {{/config.image.label.icon}} {{config.image.label.content}}
{{/config.image.label}}
{{/attributes.alternate_image_url}} {{^attributes.alternate_image_url}}
{{#config.image.label}}
{{#config.image.label.icon}} {{/config.image.label.icon}} {{config.image.label.content}}
{{/config.image.label}}
{{/attributes.alternate_image_url}} {{/config.image.alternateImageVisible}} {{^config.image.alternateImageVisible}}
{{#config.image.label}}
{{#config.image.label.icon}} {{/config.image.label.icon}} {{config.image.label.content}}
{{/config.image.label}}
{{/config.image.alternateImageVisible}} {{/config.image.visible}} {{/config.image}}
{{#config.property1.visible}} {{#config.property1.value}}
{{#config.property1.icon}} {{/config.property1.icon}} {{config.property1.value}}
{{/config.property1.value}} {{/config.property1.visible}}{{#config.property2.visible}} {{#config.property2.value}}
{{#config.property2.icon}} {{/config.property2.icon}} {{config.property2.value}}
{{/config.property2.value}} {{/config.property2.visible}}{{#config.property3.visible}} {{#config.property3.value}}
{{#config.property3.icon}} {{/config.property3.icon}} {{config.property3.value}}
{{/config.property3.value}} {{/config.property3.visible}}{{#config.property4.visible}} {{#config.property4.value}}
{{#config.property4.icon}} {{/config.property4.icon}} {{config.property4.value}}
{{/config.property4.value}} {{/config.property4.visible}}{{#config.property5.visible}} {{#config.property5.value}}
{{#config.property5.icon}} {{/config.property5.icon}} {{config.property5.value}}
{{/config.property5.value}} {{/config.property5.visible}}{{#config.property6.visible}} {{#config.property6.value}}
{{#config.property6.icon}} {{/config.property6.icon}} {{config.property6.value}}
{{/config.property6.value}} {{/config.property6.visible}}{{#config.property7.visible}} {{#config.property7.value}}
{{#config.property7.icon}} {{/config.property7.icon}} {{config.property7.value}}
{{/config.property7.value}} {{/config.property7.visible}}{{#config.property8.visible}} {{#config.property8.value}}
{{#config.property8.icon}} {{/config.property8.icon}} {{config.property8.value}}
{{/config.property8.value}} {{/config.property8.visible}}{{#config.property9.visible}} {{#config.property9.value}}
{{#config.property9.icon}} {{/config.property9.icon}} {{config.property9.value}}
{{/config.property9.value}} {{/config.property9.visible}}{{#config.property10.visible}} {{#config.property10.value}}
{{#config.property10.icon}} {{/config.property10.icon}} {{config.property10.value}}
{{/config.property10.value}} {{/config.property10.visible}}
{{#config.footer1.visible}} {{#config.footer1.value}}
{{#config.footer1.icon}} {{/config.footer1.icon}} {{config.footer1.value}}
{{/config.footer1.value}} {{/config.footer1.visible}}{{#config.footer2.visible}} {{#config.footer2.value}}
{{#config.footer2.icon}} {{/config.footer2.icon}} {{config.footer2.value}}
{{/config.footer2.value}} {{/config.footer2.visible}}{{#config.footer3.visible}} {{#config.footer3.value}}
{{#config.footer3.icon}} {{/config.footer3.icon}} {{config.footer3.value}}
{{/config.footer3.value}} {{/config.footer3.visible}}{{#config.footer4.visible}} {{#config.footer4.value}}
{{#config.footer4.icon}} {{/config.footer4.icon}} {{config.footer4.value}}
{{/config.footer4.value}} {{/config.footer4.visible}}{{#config.footer5.visible}} {{#config.footer5.value}}
{{#config.footer5.icon}} {{/config.footer5.icon}} {{config.footer5.value}}
{{/config.footer5.value}} {{/config.footer5.visible}}
{{#config.button.visible}}
{{/config.button.visible}}
`; }const resultTemplate = (productConfig) => { const template = getNestedValue(productConfig, 'general', 'content', 'productTemplate'); switch(template) { case 'HorizontalVariant1': return horizontalVariant1Template(productConfig); default: return verticalVariant1Template(productConfig); } }function getElementByXpath(path) { return document.evaluate(path, document, null, XPathResult.FIRST_ORDERED_NODE_TYPE, null).singleNodeValue; } const onloadFunction = function() { const ui_config = JSON.parse(`{\"enabled\":true,\"product\":{\"general\":{\"content\":{\"numResults\":\"12\",\"numResultsPerRow\":\"four\",\"productTemplate\":\"VerticalVariant1\"},\"advanced\":{},\"style\":{\"border\":{\"type\":\"solid\",\"boxShadow\":{\"blur\":{\"value\":0,\"unit\":\"px\"},\"horizontal\":{\"value\":0,\"unit\":\"px\"},\"vertical\":{\"value\":0,\"unit\":\"px\"},\"spread\":{\"value\":0,\"unit\":\"px\"},\"color\":{\"r\":0,\"g\":0,\"b\":0,\"a\":0.43},\"position\":\"outline\"},\"width\":{\"unit\":\"px\",\"value\":1},\"color\":{\"r\":227,\"g\":226,\"b\":226,\"a\":1},\"onHover\":{\"type\":\"none\",\"boxShadow\":{\"blur\":{\"value\":10,\"unit\":\"px\"},\"horizontal\":{\"value\":2,\"unit\":\"px\"},\"vertical\":{\"value\":2,\"unit\":\"px\"},\"spread\":{\"value\":0,\"unit\":\"px\"},\"color\":{\"r\":0,\"g\":0,\"b\":0,\"a\":0.43},\"position\":\"outline\"}}},\"textStyle\":{\"padding\":{\"top\":20,\"unit\":\"px\",\"right\":20,\"bottom\":20,\"left\":20}}}},\"image\":{\"content\":{\"visible\":{\"default\":true,\"overrides\":[]},\"alternateImageVisible\":{\"default\":false,\"overrides\":[]},\"labelVisible\":{\"default\":true,\"overrides\":[{\"overrideCheck\":{\"customerGroups\":[],\"languages\":[],\"productAttributes\":[\"attributes.is_out_of_stock\",\"attributes.is_available_for_order\"]},\"overriddenValue\":false}]},\"labelText\":{\"default\":\"Entrega en 24\\/48h\",\"overrides\":[]},\"labelIcon\":\"shipping fast\"},\"style\":{\"border\":{\"type\":\"none\",\"boxShadow\":{\"blur\":{\"value\":0,\"unit\":\"px\"},\"horizontal\":{\"value\":0,\"unit\":\"px\"},\"vertical\":{\"value\":0,\"unit\":\"px\"},\"spread\":{\"value\":0,\"unit\":\"px\"},\"color\":{\"r\":0,\"g\":0,\"b\":0,\"a\":0.43},\"position\":\"outline\"},\"radius\":{\"top\":null,\"unit\":\"px\",\"right\":null}},\"labelStyle\":{\"color\":\"green\",\"size\":\"large\",\"shape\":\"ribbon\",\"position\":\"right\"},\"positioning\":{\"width\":{\"type\":\"100%\"},\"height\":{\"type\":\"custom\",\"width\":{\"unit\":\"px\",\"value\":169}}},\"imageStyle\":{\"objectFit\":\"fill\"}},\"advanced\":{}},\"property1\":{\"content\":{\"visible\":{\"default\":false,\"overrides\":[]},\"value\":{\"default\":\"{{{attributes.primary_category_name}}}\",\"overrides\":[]},\"icon\":null},\"style\":{\"positioning\":{\"display\":\"default\"},\"textStyle\":{\"typography\":{\"fontSize\":{\"value\":12,\"unit\":\"px\"},\"letterSpacing\":{\"value\":0.025,\"unit\":\"em\"},\"fontWeight\":\"400\",\"fontFamily\":\"Helvetica\",\"textTransform\":\"capitalize\"},\"padding\":{\"left\":null,\"unit\":\"em\"},\"textColor\":{\"r\":155,\"g\":155,\"b\":155,\"a\":1}}},\"advanced\":{\"positioning\":{\"display\":\"default\",\"width\":{\"type\":\"100%\",\"width\":{\"value\":58,\"unit\":\"%\"}}}}},\"button\":{\"content\":{\"visible\":false,\"text\":{\"default\":\"View Product\",\"overrides\":[{\"overrideCheck\":{\"customerGroups\":[],\"languages\":[\"fr\"],\"productAttributes\":[]},\"overriddenValue\":\"View Products\"}]},\"link\":{\"default\":\"{{{attributes.url}}}\",\"overrides\":[]}},\"style\":{\"textStyle\":{\"backgroundColor\":{\"r\":255,\"g\":255,\"b\":255,\"a\":1}}}},\"property2\":{\"content\":{\"visible\":{\"default\":true,\"overrides\":[]},\"value\":{\"default\":\"{{{attributes.name}}}\",\"overrides\":[]}},\"advanced\":{\"positioning\":{\"display\":\"block\",\"width\":{\"type\":\"100%\",\"width\":{\"value\":19,\"unit\":\"%\"}},\"verticalAlign\":\"top\"}},\"style\":{\"textStyle\":{\"typography\":{\"textDecoration\":\"default\",\"fontSize\":{\"value\":14,\"unit\":\"px\"},\"lineHeight\":{\"value\":20,\"unit\":\"px\"},\"fontFamily\":\"Helvetica\"},\"textColor\":{\"r\":0,\"g\":0,\"b\":0,\"a\":1}},\"positioning\":{\"display\":\"block\",\"textAlign\":\"center\",\"height\":{\"type\":\"custom\",\"width\":{\"unit\":\"px\",\"value\":60}}}}},\"footer1\":{\"content\":{\"value\":{\"default\":\"{{currency}} {{attributes.price_with_taxes}}\",\"overrides\":[]},\"visible\":{\"default\":true,\"overrides\":[]}},\"style\":{\"textStyle\":{\"textColor\":{\"r\":14,\"g\":93,\"b\":2,\"a\":1},\"typography\":{\"fontSize\":{\"unit\":\"px\",\"value\":22},\"fontFamily\":\"Helvetica\",\"fontWeight\":\"700\",\"lineHeight\":{\"value\":18,\"unit\":\"px\"},\"letterSpacing\":{\"unit\":\"px\",\"value\":0.9}},\"margin\":{\"top\":null,\"unit\":\"em\"}},\"positioning\":{\"textAlign\":\"center\",\"height\":{\"type\":\"default\"}}}},\"footer2\":{\"content\":{\"value\":{\"default\":\"{{currency}} {{attributes.list_price_with_taxes}}\",\"overrides\":[{\"overrideCheck\":{\"customerGroups\":[],\"languages\":[],\"productAttributes\":[\"attributes.is_not_on_sale\"]},\"overriddenValue\":\" \"}]},\"visible\":{\"default\":true,\"overrides\":[]}},\"style\":{\"textStyle\":{\"textColor\":{\"r\":199,\"g\":199,\"b\":198,\"a\":1},\"typography\":{\"fontFamily\":\"Arial\",\"fontSize\":{\"unit\":\"px\",\"value\":16},\"textDecoration\":\"line-through\"}},\"positioning\":{\"height\":{\"type\":\"custom\",\"width\":{\"unit\":\"px\",\"value\":16}}}}},\"footer3\":{\"content\":{\"value\":{\"default\":\"OFERTA! {{attributes.discount_percentage}}%\",\"overrides\":[{\"overrideCheck\":{\"customerGroups\":[],\"languages\":[],\"productAttributes\":[\"attributes.is_not_on_sale\"]},\"overriddenValue\":\" \"}]},\"visible\":{\"default\":true,\"overrides\":[]}},\"style\":{\"textStyle\":{\"textColor\":{\"r\":5,\"g\":179,\"b\":249,\"a\":1},\"typography\":{\"fontFamily\":\"Arial\",\"fontSize\":{\"unit\":\"px\",\"value\":12},\"letterSpacing\":{\"unit\":\"px\",\"value\":0.6}}},\"positioning\":{\"height\":{\"type\":\"custom\",\"width\":{\"unit\":\"px\",\"value\":16}}}},\"advanced\":{\"positioning\":{\"height\":{\"type\":\"custom\",\"width\":{\"unit\":\"px\",\"value\":0}}}}}},\"resultLayout\":{\"general\":{\"content\":{\"trendingResultsHeader\":{\"default\":\"Te Recomendamos ...\",\"overrides\":[]},\"searchResultsHeader\":{\"default\":\"{{num_results}} Resultados para {{keyphrase}}\",\"overrides\":[]}},\"advanced\":{\"backgroundColor\":{\"r\":255,\"g\":255,\"b\":255,\"a\":1},\"container\":{\"zIndex\":20000,\"cssId\":\"\",\"cssClasses\":\"\",\"margin\":{\"top\":null,\"unit\":\"px\"},\"padding\":{\"top\":1,\"unit\":\"em\",\"right\":1,\"bottom\":1,\"left\":1}},\"border\":{\"type\":\"solid\",\"radius\":{\"top\":5,\"unit\":\"px\",\"right\":5,\"bottom\":5,\"left\":5},\"width\":{\"value\":1,\"unit\":\"px\"}},\"positioning\":{\"width\":{\"type\":\"custom\",\"width\":{\"value\":90,\"unit\":\"vw\"}},\"position\":{\"type\":\"absolute\",\"horizontalOrientation\":\"right\",\"horizontalOffset\":{\"value\":5,\"unit\":\"vw\"},\"verticalOrientation\":\"top\",\"verticalOffset\":{\"value\":120,\"unit\":\"px\"}},\"maxWidth\":{\"type\":\"default\",\"width\":{\"value\":64,\"unit\":\"vw\"}}}},\"style\":{\"positioning\":{\"display\":\"default\",\"textAlign\":\"center\"},\"textStyle\":{\"margin\":{\"bottom\":1,\"unit\":\"em\"}},\"positionRelativeToSearchBar\":false}},\"viewAllResultsButton\":{\"content\":{\"text\":{\"default\":\"Ver todos los resultados\",\"overrides\":[]},\"visible\":true,\"link\":{\"default\":\"\\/search?controller=search&search_query={{keyphrase}}&s={{keyphrase}}\",\"overrides\":[]}},\"advanced\":{},\"style\":{\"textStyle\":{\"backgroundColor\":{\"r\":204,\"g\":204,\"b\":204,\"a\":1},\"typography\":{\"fontWeight\":\"600\",\"fontFamily\":\"Helvetica\",\"fontSize\":{\"unit\":\"px\",\"value\":16}},\"margin\":{\"top\":1,\"unit\":\"em\"}},\"positioning\":{\"textAlign\":\"center\",\"width\":{\"type\":\"100%\"}}}}},\"searchBar\":{\"content\":{\"searchBarPlaceholder\":{\"default\":\"Encu\\u00e9ntralo todo aqu\\u00ed!\",\"overrides\":[]},\"existingSearchBarID\":{\"default\":\"search_query_top\",\"overrides\":[]},\"existingSearchBarCSSClasses\":{\"default\":\"fff\",\"overrides\":[]}},\"advanced\":{},\"style\":{}},\"facets\":{\"facet1\":{\"content\":{\"attribute\":\"all_category_names\",\"visible\":true,\"attributeDisplayName\":{\"default\":\"Categor\\u00edas\",\"overrides\":[]},\"maxValues\":6},\"style\":{\"positioning\":{\"textAlign\":\"left\"},\"content\":{\"textStyle\":{\"typography\":{\"fontFamily\":\"Helvetica\",\"fontSize\":{\"unit\":\"px\",\"value\":13}},\"margin\":{\"left\":null,\"unit\":\"px\"}}},\"header\":{\"textStyle\":{\"typography\":{\"fontFamily\":\"Helvetica\"}}}}},\"facet2\":{\"content\":{\"attribute\":\"manufacturer\",\"attributeDisplayName\":{\"default\":\"Marcas\",\"overrides\":[]},\"type\":\"refinementList\",\"visible\":true,\"maxValues\":6},\"style\":{\"content\":{\"textStyle\":{\"typography\":{\"fontFamily\":\"Helvetica\",\"fontSize\":{\"unit\":\"px\",\"value\":13}}}},\"header\":{\"textStyle\":{\"typography\":{\"fontFamily\":\"Helvetica\"}}}}},\"facet3\":{\"content\":{\"attribute\":\"prices.final_price_with_taxes\",\"type\":\"rangeSlider\",\"visible\":true,\"attributeDisplayName\":{\"default\":\"Precio\",\"overrides\":[]}},\"style\":{\"header\":{\"textStyle\":{\"typography\":{\"fontFamily\":\"Helvetica\"}}},\"content\":{\"textStyle\":{\"typography\":{\"fontFamily\":\"Helvetica\",\"fontSize\":{\"unit\":\"px\",\"value\":13}}}}}}},\"customCSS\":\"ul.UpliftRefinementListWidgetRefinements {padding: 0 0 0 12px;}\"}`.replaceAll('"', '"').replaceAll('&', '&').replaceAll(''', "'")); var client_document_version = '1'; const productConfig = getNestedValue(ui_config, 'product'); const resultLayoutConfig = getNestedValue(ui_config, 'resultLayout'); const searchBarConfig = getNestedValue(ui_config, 'searchBar'); const facetsConfig = getNestedValue(ui_config, 'facets') || {}; const viewAllResultsButtonConfig = getNestedValue(resultLayoutConfig, 'viewAllResultsButton'); const showFacetsSection = Object.keys(facetsConfig).reduce((acc, curr) => acc || getNestedValue(facetsConfig, curr, 'content', 'visible'), false); // Search bar DOM selection. var searchBoxRoot = document.getElementById('searchBox'); var previous_search_bar_css_id = getOverriddenValue( getNestedValue(searchBarConfig, 'content', 'existingSearchBarID'), globalContext); if (previous_search_bar_css_id) { var previousSearchBarElement = document.getElementById(previous_search_bar_css_id); if (previousSearchBarElement === null) { previousSearchBarElement = getElementByXpath(previous_search_bar_css_id); } if (previousSearchBarElement) { let div = document.createElement('div'); previousSearchBarElement.parentNode.insertBefore(div, previousSearchBarElement); searchBoxRoot.style.display='none'; searchBoxRoot = div; previousSearchBarElement.style['display'] = 'none'; } } // Add required ID/Classes const searchBarID = getNestedValue(searchBarConfig, 'advanced', 'container', 'cssId'); if (searchBarID) { searchBoxRoot.setAttribute("id", searchBarID); } const searchBarCSSClasses = getNestedValue(searchBarConfig, 'advanced', 'container', 'cssClasses'); if (searchBarCSSClasses) { searchBarCSSClasses.split(' ').map((x) => x !== '' ? searchBoxRoot.classList.add(x) : null); } searchBoxRoot.classList.add('uplift-search-box'); // Add Search Box Root styling let styleTag = document.createElement('style'); document.body.appendChild(styleTag); styleTag.innerHTML = ` .uplift-search-box { ${getStyleFromDict( getDefaultAdvancedStyle( getNestedValue(searchBarConfig, 'advanced')))} } .uplift-search-box:hover { ${getStyleFromDict( getDefaultAdvancedStyle( getNestedValue(searchBarConfig, 'advanced'), true))} } `;var searchBoxShadow = searchBoxRoot.attachShadow({mode: 'open'}); var resultsBoxShadow = null; const positionResultsRelativeToSearchBar = getNestedValue(resultLayoutConfig, 'general', 'style', 'positionRelativeToSearchBar') || false; // Prep work for rendering search bar. if (positionResultsRelativeToSearchBar) { searchBoxShadow.innerHTML = `
${showFacetsSection ? `
` : ''}
`; resultsBoxShadow = searchBoxShadow; } else { searchBoxShadow.innerHTML = `
`; let div = document.createElement('div'); document.body.appendChild(div); div.setAttribute('id', 'resultsRoot'); resultsBoxShadow = div.attachShadow({mode: 'open'});; resultsBoxShadow.innerHTML = `
${showFacetsSection ? `
` : ''}
` }// When results should be displayed var isSearchBoxFocused = false; var isResultsFocused = false; var areResultsForKeyphrase = false; resultsBoxShadow.getElementById('resultsShadow').onmouseenter = function() { isResultsFocused = true; } resultsBoxShadow.getElementById('resultsShadow').onmouseleave = function() { isResultsFocused = false; } function shouldRenderResults() { const shouldRender = (isSearchBoxFocused || isResultsFocused) && areResultsForKeyphrase; resultsBoxShadow.getElementById('resultsShadow').style.display = shouldRender ? '' : 'none'; return shouldRender; } function titleCase(str) { return str.trim().toLowerCase().replace(/\s\s+/g, ' ').split(' ').map(function(word) { return word.replace(word[0], word[0].toUpperCase()); }).join(' '); }// Results rendering logic. const titleHook = (params, numResults, results) => { if (!areResultsForKeyphrase) { areResultsForKeyphrase = numResults > 0; } const keyphrase = getNestedValue(params, 'searchParams', 'keyphrase') || ''; const context = { ...globalContext, keyphrase: keyphrase, num_results: numResults }; const resultLayoutConfig = getNestedValue(ui_config, 'resultLayout'); const generalConfig = getNestedValue(resultLayoutConfig, 'general'); const trendingHeaderTemplate = getOverriddenValue( getNestedValue(generalConfig, 'content', 'trendingResultsHeader'), context, ''); const searchHeaderTemplate = getOverriddenValue( getNestedValue(generalConfig, 'content', 'searchResultsHeader'), context, ''); const headerTemplate = keyphrase.length > 0 ? searchHeaderTemplate : trendingHeaderTemplate; const header = getTemplatizedValue(headerTemplate, context); const buttonConfig = getNestedValue(resultLayoutConfig, 'viewAllResultsButton'); return { title: `
${header}
`, numResults: numResults, keyphrase: keyphrase, button: { visible: getNestedValue(buttonConfig, 'content', 'visible'), size: getNestedValue(buttonConfig, 'content', 'size') || 'medium', link: getTemplatizedValue(getOverriddenValue(getNestedValue(buttonConfig, 'content', 'link'), context, ''), context), triggerJavascript: getOverriddenValue(getNestedValue(buttonConfig, 'content', 'triggerJavascript'), context, ''), icon: getNestedValue(buttonConfig, 'content', 'icon'), text: getOverriddenValue(getNestedValue(buttonConfig, 'content', 'text'), context) } }; } const ui = new uplift.UpliftUI( { domainId: 'abbbc3b1-10c4-53db-a2a4-ff5577256953', apiClient: new uplift.UpliftAPIClient(), container: resultsBoxShadow.getElementById('root') } ); let refinementWidgets = []; for (let ctr = 1; ctr <= 5; ctr++) { const name = ('facet' + ctr); if (name in facetsConfig) { const currFacetConfig = getNestedValue(facetsConfig, name, 'content'); if (getNestedValue(currFacetConfig, 'visible')) { const attribute = getNestedValue(currFacetConfig, 'attribute'); const container = resultsBoxShadow.getElementById(name); const refinementType = getNestedValue(currFacetConfig, 'type') || 'refinementList'; const title = getOverriddenValue(getNestedValue(currFacetConfig, 'attributeDisplayName'), globalContext, getNestedValue(currFacetConfig, 'attribute')); if (refinementType === 'refinementList') { refinementWidgets.push( new uplift.RefinementListWidget({ container: container, attribute: attribute, maxValues: getNestedValue(currFacetConfig, 'maxValues') || 5, sortFacetValuesBy: getNestedValue(currFacetConfig, 'sortFacetValuesBy') || 'count', renderHook: (refinements) => (shouldRenderResults()), templates: { title: '
' + title +'
', item: '
{{label}} ({{numResults}})
' }, itemsTransformationHook: (item, index) => { return { ...item, label: titleCase(item.label) }; } }) ); } else if (refinementType === 'rangeSlider') { refinementWidgets.push( new uplift.RangeSliderWidget({ container: container, attribute: attribute, templates: { title: '
' + title +'
', sliderStyle: { trackFill: { backgroundColor: "grey" }, } }, itemsTransformationHook: (selectedMin, selectedMax, rangeMin, rangeMax) => { return [Math.floor(selectedMin), Math.ceil(selectedMax), Math.floor(rangeMin), Math.ceil(rangeMax)]; } }), ); } else if (refinementType === 'radioList') { const allItemsDisplayText = getOverriddenValue( getNestedValue(currFacetConfig, 'allValuesText'), globalContext); refinementWidgets.push( new uplift.RadioListWidget({ container: container, attribute: attribute, maxValues: getNestedValue(currFacetConfig, 'maxValues') || 5, sortFacetValuesBy: getNestedValue(currFacetConfig, 'sortFacetValuesBy') || 'count', renderHook: (refinements) => (shouldRenderResults()), templates: { title: '
' + title +'
', item: '
{{label}} ({{numResults}})
' }, itemsTransformationHook: (item, index) => { return { ...item, label: (item.key === undefined && allItemsDisplayText !== undefined) ? allItemsDisplayText : titleCase(item.label) }; } }) ); } else if (refinementType === 'select') { const allItemsDisplayText = getOverriddenValue( getNestedValue(currFacetConfig, 'allValuesText'), globalContext); refinementWidgets.push( new uplift.SelectWidget({ container: container, attribute: attribute, maxValues: getNestedValue(currFacetConfig, 'maxValues') || 5, sortFacetValuesBy: getNestedValue(currFacetConfig, 'sortFacetValuesBy') || 'count', renderHook: (refinements) => (shouldRenderResults()), templates: { title: '
' + title +'
', item: '
{{label}} ({{numResults}})
' }, itemsTransformationHook: (item, index) => { return { ...item, label: (item.key === undefined && allItemsDisplayText !== undefined) ? allItemsDisplayText : titleCase(item.label) }; } }) ); } else if (refinementType === 'multiSelect') { refinementWidgets.push( new uplift.SelectWidget({ container: container, attribute: attribute, allowMultipleSelections: true, maxValues: getNestedValue(currFacetConfig, 'maxValues') || 5, sortFacetValuesBy: getNestedValue(currFacetConfig, 'sortFacetValuesBy') || 'count', renderHook: (refinements) => (shouldRenderResults()), templates: { title: '
' + title +'
', item: '
{{label}} ({{numResults}})
' }, itemsTransformationHook: (item, index) => { return { ...item, label: titleCase(item.label) }; } }) ); } } } } ui.addCatalogs([ new uplift.Catalog({ catalogId: '4235ff0f-12dc-506d-9a33-994b980b61bc' }).addContexts([ new uplift.SearchContext({ searchParams: { paginationParams: { hitsPerPage: parseInt(getNestedValue(productConfig, 'general', 'content', 'numResults') || '6'), page: 0 }, filters: "active != '0' AND (visibility = 'both' OR visibility = 'search') AND client_document_version=1", language: 'es', attributesToRetrieve: ['variations', 'image_url', 'localized_prices', 'prices', 'price_till_two_decimals', 'availability', 'url', 'document_id', 'name', 'primary_category_name', 'mpn', 'manufacturer', 'condition' ] } }).addWidgets([ new uplift.SearchBoxWidget({ container: searchBoxShadow.getElementById('search-box-shadow'), searchAsYouType: true, showLoadingIndicator: true, placeHolder: getOverriddenValue( getNestedValue(searchBarConfig, 'content', 'searchBarPlaceholder'), globalContext), templates: { icon: 'search' }, cssClasses: { input: "fluid upliftSearchBox" }, onFocusHook: (propagateFocusChange) => { isSearchBoxFocused = true; propagateFocusChange(); }, onBlurHook: (propagateFocusChange) => { isSearchBoxFocused = false; propagateFocusChange(); }, onSubmitHook: (keyphrase) => { const context = { ...globalContext, keyphrase: keyphrase } const link = getTemplatizedValue(getOverriddenValue(getNestedValue(viewAllResultsButtonConfig, 'content', 'link'), context, ''), context); window.location = link; } }), new uplift.ResultsWidget({ container: resultsBoxShadow.getElementById('products'), showIfEmpty: true, resultTransformationHook: (result, index) => { return buildRequiredAttributes(result, productConfig); }, templates: { item: resultTemplate(productConfig), empty: `
No Results
`, resultsContainer: `
{{{title.title}}}
{{#items}} {{>item}} {{/items}}
{{#title.button.visible}} {{#title.numResults}} {{#title.keyphrase}}
{{#title.button.icon}} {{/title.button.icon}} {{title.button.text}}
{{/title.keyphrase}} {{/title.numResults}} {{/title.button.visible}}
` }, renderHook: shouldRenderResults, titleHook: titleHook }) ]).addWidgets(refinementWidgets) ]),]); ui.render(); }; window.addEventListener ? window.addEventListener("load",onloadFunction,false) : window.attachEvent && window.attachEvent("onload",onloadFunction);

Pantallas Cabinets

Más info acerca de Pantallas Cabinets

pantallas para cabezales de amplificadores de guitarra y amplificadores de bajo