Tous les ajustements de code peuvent être ajoutés à la balise head dans le fichier theme.liquid ou vous pouvez contacter notre support et nous nous ferons un plaisir de vous aider en cas de problème ou de demande de personnalisation.
L'équipe Customer Success a la possibilité d'ajouter ces ajustements à un fichier config.js désigné dans notre système d'administration, l'accès à la boutique n'est donc pas nécessaire.
Sélecteurs de bouton d'ajout au panier personnalisés
Candy Rack prend en charge par défaut une variété de sélecteurs pour déclencher avec succès lorsque le bouton d'ajout au panier est cliqué, mais il peut arriver qu'un thème utilise des sélecteurs que notre application ne reconnaisse pas. Dans ce cas, il y a une option pour spécifier des sélecteurs personnalisés qui sont ajoutés au tableau des sélecteurs supportés.
// window.CANDYRACK_CUSTOM_BUTTON_SELECTORS : string[]window.CANDYRACK_CUSTOM_BUTTON_SELECTORS = ['.atc-class-1','#atc-id']
Empêcher l'affichage du Candy Rack en fonction d'une condition
Dans le cas où le magasin utilise des champs personnalisés qui doivent être remplis avant de cliquer sur le bouton Ajouter au panier et que notre validation ne les détecte pas, il existe un moyen d'empêcher manuellement l'apparition de la fenêtre contextuelle en fonction de la valeur de retour de la méthode suivante.
// 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}La variante n'est pas trouvée
Pour déclencher avec succès l'ouverture de la popup, nous avons besoin de la bonne variante du parent pour déterminer les offres, il peut arriver que nos sélecteurs par défaut échouent ou ne changent pas lorsqu'une variante différente est sélectionnée. La fonction ne remplace pas les sélecteurs par défaut et si elle renvoie undefined, le cas par défaut est traité. Si la variante ne peut être obtenue que par une requête asynchrone, la réponse peut être attendue.
// 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) }}Formatage de l'argent
Candy Rack prend en charge les applications multidevises les plus courantes, il formate également l'argent en fonction des API disponibles ou des paramètres du thème. Cependant, si le formatage n'est pas idéal, il est possible de le remplacer.
// window.CANDYRACK_CUSTOM_FORMAT_MONEY : (amount? : number, currency : string) => string;window.CANDYRACK_CUSTOM_FORMAT_MONEY = (amount, currency) => { return `${currency} ${amount}`}Supprimer la validation de formulaire
Par défaut, Candy Rack gère la validation de formulaire en déclenchant form.checkValidity(). Parfois, cela peut causer des problèmes, c'est pourquoi la validation peut être complètement désactivée.
// window.CANDYRACK_DISABLE_FORM_VALIDATION : booleanwindow.CANDYRACK_DISABLE_FORM_VALIDATION = true
Evénements personnalisés
Candy Rack offre une gamme d'événements personnalisés, qui peuvent être utilisés pour effectuer des effets secondaires - tels que l'ouverture d'un panier à tiroirs.
// Déclenché lorsque le bouton Ajouter au panier est cliquédocument.addEventListener('addToCartButtonClicked', (e) => { // Some code})// Déclenché lorsqu'une offre est ajoutéedocument.addEventListener('candyrack-offer-added', (e) => { // Some code})// Déclenché lorsqu'une offre est retiréedocument.addEventListener('candyrack-offer-removed', (e) => { // Some code})// Déclenché lorsque la popup se fermedocument.addEventListener('candyrack-closed', (e) => { // Some code})Si vous êtes également intéressé par la personnalisation visuelle de la pop-up, vous pouvez en apprendre davantage dans l'article Comment personnaliser la pop-up avec CSS.
Des questions ? Cliquez sur l'icône de chat en bas à droite de cette page ou envoyez-nous un courriel à [email protected].