Archivo de la etiqueta: javascript

Compilando los ficheros Sass de Magento utilizando Gulp y Node-sass

Sass

Antes de todo dar las gracias a Damián por invitarme a escribir en su blog, es un honor escribir en un blog del que hemos aprendido tanto, espero estar a la altura.

Desde la versión 1.9.0.0 de Magento se nos introdujo de forma nativa en los themes Sass con el famoso theme rwd. Trabajando como Freelance, me he encontrado con infinidad de proyectos en los que tocan directamente el css sin compilar los SCSS, lo que lleva a una perdida de tiempo y a unos buenos dolores de cabeza cuando el proyecto lo toca otra persona.

Para simplificar todo el proceso de compilación de los ficheros Sass a los css, después de muchos dolores de cabeza con Ruby, me decanté hace tiempo en hacerlo con Node.js.

Sigue leyendo

Dc_Minifier 0.1.0 (mergeando y comprimiendo)

Bien es sabido que la opción de mergear archivos css y js en Magento no comprime. Lo que hace la funcionalidad es generar muchísimos menos archivos con el contenido de todos aquellos que estemos utilizando (tanto para los archivos css como para los archivos js).

El módulo no reemplaza funcionalidad, sino que suma la posibilidad de comprimir o css o js si es que tenemos activada la opción nativa de merge.

Configuración Dc_Minifier en Magento

Sigue leyendo

Agregar validaciones javascript en Magento de forma no obstrusiva

Pequeño tip en pro de seguir con las buenas prácticas.

Hace no mucho tiempo me tocó hacer una personalización en la cual el requerimiento pedía agregar una regla adicional de validación para ciertos campos del checkout.

Lo que vamos a a ver es cómo agregar reglas propias de validación haciendo uso de la clase Validation. Por supuesto, la idea es no tocar el código original agregando código en js/prototype/validation.js o dentro de un phtml (como todavía seguimos viendo incluso en extensiones pagas).

Para el ejemplo vamos a necesitar 3 archivos.

El escenario con el cual voy a trabajar será el siguiente: “Agregar una nueva validación Javascript a ciertos campos del formulario del checkout sin por esto crear un nuevo módulo” (más adelante voy a volver sobre este punto).

Lo primero que vamos a hacer es crear nuestra función javascript de validación. Dado que la regla en si misma va más allá del skin, voy a crear el archivo dentro del directorio js. En mi caso, el archivo será /js/dc/validacion.js.

Dentro del archivo, vamos a declarar una nueva regla.

Validation.add('mi-nueva-validacion', 'Mensaje de error a mostrar.', function (v) {
    return /^[ INGRESAMOS NUESTRA VALIDACION ]*$/.test(v);
});

El siguiente paso será lograr que el layout agregue nuestro nuevo archivo junto con todos los demás.

Sigue leyendo