Ajouter un sélecteur de taille de bague personnalisé
Last Updated:
May 22, 2026
Étape 1 :
Ajout du script tngSelect.js et des styles au fichier 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);
})();
Étape 2 :
Ajout de notre sélection personnalisée au mappeur.
Par exemple :
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
};
})();
Étape 3 :
La sélection était ajoutée lorsqu'un utilisateur cliquait sur un CTA et ouvrait le widget.
var onWidgedRendered = function() {
outsideSelect.insert();
}
Étape 4 :
Pour injecter le sélecteur, il faudrait ajouter un espace libre dans le pied de page du widget où nous devrions ajouter les classes externes (tg-size-selector/tg-color-selector) en intégration. Nous devrions également ajouter les styles ci-dessous dans le widget (fichier CSS du client).
Ajoutez un sélecteur de taille de bague personnalisé au widget Tangiblee. Options de taille recommandées, bonnes pratiques UX et étapes de configuration pour une expérience cohérente.
