Añadir un selector de tamaño de anillo personalizado
Last Updated:
May 22, 2026
Paso 1:
Agregar el script tngSelect.js and the estilos al tangiblee-mapper.js.
//=require 'shared/helpers/tngSelect/tngSelect.js'
(function() {
var tgcarousel = tngCarouselModule.getCss();
var tgSelect = tngSelectModule.getCss();
var css = tgcarousel + tgSelect + '<< style.css >>';
var style = document.createElement('style');
if (style.styleSheet) {
style.styleSheet.cssText = css;
} else {
style.appendChild(document.createTextNode(css));
}
document.getElementsByTagName('head')[0].appendChild(style);
})();
Paso 2:
Agregar nuestra selección personalizada al mapeador.
Per example:
var origSelect = document.querySelector('#js-sku-change');
var handlerSizeSelectClick = function(event) {
origSelect.value = event.target.dataset.value;
};
var outsideSelect = (function() {
var selectInstance = null;
var getActiveItemIndex = function() {
if (!origSelect) return -1;
var activeIndex = origSelect.selectedIndex;
return activeIndex;
};
var insert = function() {
remove();
selectInstance = new tngSelectModule.tngSelect(origSelect, {
current: getActiveItemIndex()
},
handlerSizeSelectClick,
triggerPdpATCClick);
};
var remove = function() {
[].forEach.call(document.querySelectorAll('.tng-select-wrapper'), function(el) {
el && el.parentNode && el.parentNode.removeChild(el);
});
};
return {
insert: insert,
remove: remove
};
})();
Paso 3:
La selección se añadiría cuando un usuario hiciera clic en una CTA y abriera el widget.
var onWidgedRendered = function() {
outsideSelect.insert();
}
Paso 4:
Para insertar el selector, necesitaríamos agregar un espacio libre en el pie de página del widget donde deberíamos agregar las clases externas (tg-size-selector/tg-color-selector) en la integración. También deberíamos añadir los siguientes estilos en el widget (el archivo css del cliente).
Añade un selector de talla de anillos personalizado al widget de Tangiblee. Incluye opciones recomendadas, buenas prácticas de UX y pasos de configuración para una experiencia consistente.
