Alle Code-Anpassungen können zum head-Tag in der theme.liquid-Datei hinzugefügt werden, oder Sie können sich an unseren Support wenden, der Ihnen bei Problemen oder Anpassungswünschen gerne weiterhilft.
Das Customer Success Team hat die Möglichkeit, diese Anpassungen zu einer bestimmten config.js-Datei in unserem Verwaltungssystem hinzuzufügen, so dass kein Zugriff auf den Shop erforderlich ist.
Benutzerdefinierte Selektoren für die Schaltfläche "In den Warenkorb"
Candy Rack unterstützt standardmäßig eine Reihe von Selektoren, die erfolgreich ausgelöst werden, wenn auf die Schaltfläche "In den Warenkorb" geklickt wird, doch es kann vorkommen, dass ein Theme Selektoren verwendet, die unsere App nicht erkennt. In diesem Fall gibt es die Möglichkeit, benutzerdefinierte Selektoren anzugeben, die dem Array der unterstützten Selektoren hinzugefügt werden.
// window.CANDYRACK_CUSTOM_BUTTON_SELECTORS: string[]window.CANDYRACK_CUSTOM_BUTTON_SELECTORS = ['.atc-class-1','#atc-id']
Candy Rack auf der Grundlage einer Bedingung verhindern
Für den Fall, dass der Shop einige benutzerdefinierte Felder verwendet, die ausgefüllt werden müssen, bevor man auf die Schaltfläche "In den Warenkorb" klickt, und unsere Validierung sie nicht erfasst, gibt es eine Möglichkeit, das Erscheinen des Popups auf der Grundlage des Rückgabewerts der folgenden Methode manuell zu verhindern.
// window.CANDYRACK_CAN_ATC: (button: HTMLElement) => booleanwindow.CANDYRACK_CAN_ATC = (_button) => { const input = document.querySelector('.custom-text-input') if(input.value.trim().length === 0) { return false } return true}Die Variante wird nicht gefunden
Um das Öffnen des Popups erfolgreich auszulösen, benötigen wir die richtige Variante des Parent, um die Angebote zu bestimmen, es kann vorkommen, dass unsere Standardselektoren versagen oder sich nicht ändern, wenn eine andere Variante ausgewählt wird. Die Funktion setzt die Standard-Selektoren nicht außer Kraft und falls sie undefined zurückgibt, wird der Standardfall behandelt. Falls die Variante nur über eine asynchrone Anfrage ermittelt werden kann, kann die Antwort abgewartet werden.
// window.CANDYRACK_VARIANT_SELECTOR_FUNCTION: (button: HTMLElement) => Promise<number>;window.CANDYRACK_VARIANT_SELECTOR_FUNCTION = (button) => { const selectedVariant = button.closest('.variant-select')?.value if(value) { return Number(value) }}Geldformatierung
Candy Rack unterstützt die gängigsten Mehrwährungsanwendungen und formatiert das Geld auf der Grundlage der verfügbaren APIs oder Themeneinstellungen. Falls die Formatierung jedoch nicht ideal ist, gibt es eine Möglichkeit, sie zu überschreiben.
// window.CANDYRACK_CUSTOM_FORMAT_MONEY: (amount?: number, currency: string) => string;window.CANDYRACK_CUSTOM_FORMAT_MONEY = (amount, currency) => { return `${currency} ${amount}`}Formularvalidierung entfernen
Standardmäßig behandelt Candy Rack die Formularvalidierung durch Auslösen von form.checkValidity(). Manchmal kann dies zu Problemen führen, so dass die Validierung komplett ausgeschaltet werden kann.
// window.CANDYRACK_DISABLE_FORM_VALIDATION : booleanwindow.CANDYRACK_DISABLE_FORM_VALIDATION = true
Benutzerdefinierte Ereignisse
Candy Rack bietet eine Reihe von benutzerdefinierten Ereignissen, die verwendet werden können, um Seiteneffekte auszuführen - wie z. B. das Öffnen eines Schubladenkorbs.
// Ausgelöst, wenn die Schaltfläche "In den Warenkorb" angeklickt wirddocument.addEventListener('addToCartButtonClicked', (e) => { // Some code})// Ausgelöst, wenn ein Angebot hinzugefügt wirddocument.addEventListener('candyrack-offer-added', (e) => { // Some code})// Ausgelöst, wenn ein Angebot entfernt wirddocument.addEventListener('candyrack-offer-removed', (e) => { // Some code})// Ausgelöst, wenn das Popup geschlossen wirddocument.addEventListener('candyrack-closed', (e) => { // Some code})Wenn Sie auch an visuellen Anpassungen des Pop-ups interessiert sind, erfahren Sie mehr im Artikel Wie man das Pop-up mit CSS anpasst.
Noch Fragen? Klicken Sie auf das Chat-Symbol unten rechts auf dieser Seite oder schreiben Sie uns eine E-Mail an [email protected].