Todos los ajustes de código se pueden añadir a la etiqueta head en el archivo theme.liquid o puede ponerse en contacto con nuestro soporte y estaremos encantados de ayudarle con cualquier problema o solicitud de personalización.
El equipo de éxito del cliente tiene la capacidad de añadir estos ajustes a un archivo config.js designado en nuestro sistema de administración, por lo que no es necesario el acceso a la tienda.
Selectores personalizados del botón Añadir al carro
Candy Rack por defecto soporta una variedad de selectores para activar con éxito cuando se hace clic en el botón Añadir al carro, sin embargo, puede ocurrir que un tema utilice selectores que nuestra aplicación no reconoce. En ese caso, existe la opción de especificar selectores personalizados que se añaden al array de selectores soportados.
// window.CANDYRACK_CUSTOM_BUTTON_SELECTORS: string[]window.CANDYRACK_CUSTOM_BUTTON_SELECTORS = ['.atc-class-1','#atc-id']
Evitar que Candy Rack se muestre basándose en una condición
En caso de que la tienda utilice algunos campos personalizados que deban rellenarse antes de pulsar el botón Añadir al carrito y nuestra validación no los detecte, existe una forma de evitar manualmente que aparezca la ventana emergente basándose en el valor de retorno del siguiente método.
// 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 no se encuentra
Para activar correctamente la apertura del popup necesitamos la variante correcta del padre para determinar las ofertas, puede ocurrir, que nuestros selectores por defecto fallen o no cambien cuando se selecciona una variante diferente. La función no anula los selectores por defecto y en caso de que devuelva undefined, se maneja el caso por defecto. En caso de que la variante sólo se pueda obtener mediante una petición asíncrona, se puede esperar la respuesta.
// 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) }}Formateo del dinero
Candy Rack soporta las aplicaciones multidivisa más populares, también formatea el dinero basándose en las APIs disponibles o en la configuración del tema. Sin embargo, en caso de que el formato no sea el ideal, hay una forma de anularlo.
// window.CANDYRACK_CUSTOM_FORMAT_MONEY: (amount?: number, currency: string) => string;window.CANDYRACK_CUSTOM_FORMAT_MONEY = (amount, currency) => { return `${currency} ${amount}`}Eliminar la validación de formularios
Por defecto, Candy Rack maneja la validación de formularios activando form.checkValidity(). A veces, esto puede causar problemas, por lo que la validación se puede desactivar por completo.
// window.CANDYRACK_DISABLE_FORM_VALIDATION : booleanwindow.CANDYRACK_DISABLE_FORM_VALIDATION = true
Eventos personalizados
Candy Rack ofrece una serie de eventos personalizados, que se pueden utilizar para realizar efectos secundarios - tales como la apertura de un carrito de cajones.
// Se activa cuando se hace clic en el botón Añadir al carrodocument.addEventListener('addToCartButtonClicked', (e) => { // Some code})// Se activa cuando se añade una ofertadocument.addEventListener('candyrack-offer-added', (e) => { // Some code})// Se activa cuando se elimina una ofertadocument.addEventListener('candyrack-offer-removed', (e) => { // Some code})// Se activa cuando se cierra el popupdocument.addEventListener('candyrack-closed', (e) => { // Some code})Si también estás interesado en personalizaciones visuales de la ventana emergente, puedes aprender más en el artículo Cómo personalizar la ventana emergente con CSS.
¿Alguna pregunta? Haz clic en el icono del chat en la parte inferior derecha de esta página o envíanos un correo electrónico a [email protected].