Hinzufügen eines benutzerdefinierten Ringgrößen-Selektors
Last Updated:
May 12, 2026
Schritt 1:
Hinzufügen des Skripts tngSelect.js und der Stile zur 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);
})();
Schritt 2:
Hinzufügen unserer benutzerdefinierten Auswahl zum Mapper.
Zum Beispiel:
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
};
})();
Schritt 3:
Die Auswahl würde hinzugefügt, wenn ein Benutzer auf einen CTA klickt und das Widget öffnet.
var onWidgedRendered = function() {
outsideSelect.insert();
}
Schritt 4:
Um den Selektor einzufügen, müssten wir in der Fußzeile des Widgets einen freien Platz hinzufügen, an dem wir die externen Klassen (tg-size-selector/tg-color-selector) in der Integration hinzufügen sollten. Außerdem sollten wir die folgenden Stile in das Widget (die CSS-Datei des Kunden) einfügen.
Erfahren Sie, wie kundenspezifische Ring Größe Selektor Konfiguration funktioniert und wie es für das beste Einkaufserlebnis konfiguriert wird. Der Leitfaden behandelt empfohlene Optionen, UX-Aspekte und praxisnahe Details, um Engagement und Konsistenz zu verbessern.
