All code adjustments can be added to the head tag in the theme.liquid file or you can contact our support and we will happily assist you with any problem or customization request.
The customer success team has the ability to add these adjustments to a designated config.js file in our administration system, so access to the store is not required.
Custom Add To Cart button selectors
Candy Rack by default supports a variety of selectors to successfully trigger when Add To Cart button is clicked, yet it might happen that a theme uses selectors our app does not recognize. In that case, there is an option to specify custom selectors that are added to the array of supported selectors.
// window.CANDYRACK_CUSTOM_BUTTON_SELECTORS: string[]
window.CANDYRACK_CUSTOM_BUTTON_SELECTORS = ['.atc-class-1','#atc-id']
Preventing Candy Rack to show based on a condition
In case the store uses some custom fields that need to be filled before clicking the Add To Cart button and our validation does not catch them, there is a way to manually prevent the popup to appear based on the return value of the following method.
// window.CANDYRACK_CAN_ATC: (button: HTMLElement) => boolean
window.CANDYRACK_CAN_ATC = (_button) => {
const input = document.querySelector('.custom-text-input')
if(input.value.trim().length === 0) {
return false
}
return true
}
The variant is not found
To successfully trigger the opening of the popup we need the right variant of the parent to determine the offers, it might happen, that our default selectors fail or don’t change when a different variant is selected. The function does not override default selectors and in case it returns undefined, the default case is handled. In case the variant can only be obtained via an asynchronous request, the response can be awaited.
// 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)
}
}
Money formatting
Candy Rack supports the most popular multi-currency applications out of the box, it also formats the money based on the available APIs or theme settings. Yet, in case the formatting is not ideal, there is a way to override it.
// window.CANDYRACK_CUSTOM_FORMAT_MONEY: (amount?: number, currency: string) => string;
window.CANDYRACK_CUSTOM_FORMAT_MONEY = (amount, currency) => {
return `${currency} ${amount}`
}
Remove form validation
By default, Candy Rack handles form validation by triggering form.checkValidity(). Sometimes, this can cause issues, so the validation can be turned off completely.
// window.CANDYRACK_DISABLE_FORM_VALIDATION : boolean
window.CANDYRACK_DISABLE_FORM_VALIDATION = true
Custom events
Candy Rack offers a range of custom events, that can be used to perform side effects - such as opening a drawer cart.
// Triggered when Add To Cart button is clicked
document.addEventListener('addToCartButtonClicked', (e) => {
// Some code
})
// Triggered when an offer is added
document.addEventListener('candyrack-offer-added', (e) => {
// Some code
})
// Triggered when an offer is removed
document.addEventListener('candyrack-offer-removed', (e) => {
// Some code
})
// Triggered when the popup closes
document.addEventListener('candyrack-closed', (e) => {
// Some code
})
If you're also interested in visual customizations of the pop-up, you can learn more in the How to customize the pop-up with CSS article.
Any questions? Click the chat icon at the bottom right of this page or email us at support@digismoothie.com.