ISML y plantillas ISML en Salesforce Commerce Cloud

Bienvenidos de nuevo,

Uso de ISML y plantillas ISML

hoy vamos tratar el tema de ISML y plantillas ISML. ISML significa Internet Store Markup Language. Es un conjunto de tags utilizados en las plantillas ISML.

Estas plantillas son utilizadas en el SFRA usando el MVC que vimos en videos anteriores. Si no vistes ese video haz click aquí para verlo.

Las plantillas son renderizadas por los controladores.

Estas plantillas reciben un JSON model del controlador como pudimos ver en el video anterior. Ellos renderizan estos datos usando una mezcla de HTML y tags ISML.

Estas plantillas pueden utilizar css y JavaScript personalizado usando el tag isscript.

A la derecha de la imagen podemos ver la estructura de carpetas que contiene cartridge por defecto del app_storefront_base

Si miras este código podrás ver, la carpeta default donde aparecen todos los templates del SFRA. También podemos ver temnplates en locales diferentes.

Un ejemplo bastante común de plantilla ISML es productDetails.ISML que aparece dentro de la carpeta product en la carpeta default.

Si revisamos este fichero productDetails nos encontramos con los tags isscript que te permiten incluir JavaScript y css en la parte de arriba del template.

Otro tag muy común es isset, esto es usado para crear variables locales y asignar un valor.

iobject es un tag usado por active data collection.

Como hemos dicho antes todo esto es una combinación de tags ISML y HTML como puedes ver en estas clases, además podemos identificar algunas clases de botstrapp que no tienen nada que ver con los tags ISML.

Otro tag comun que podemos usar es isinclude, que hace referencia a otro local ISML.

También podemos ver un loop que usa product.variation attributes. Como podemos ver este loop usará un include de otra template.

Isif es un condicional basado en un true condition. Por ejemplo Si esta condición es true llamará a un tag isinclude…

Mejores prácticas en el uso de ISML en SFRA.

Ahora hablaremos sobre las mejores práctica en el uso de ISML en SFRA.

iscache: no lo uses, use en su lugar el método de middleware cache.js que está disponible en los controladores

isset: úsalo solo para declarar variables usadas por un isinclude tag como en este ejemplo

isscript: Es solo para añadir javascript de cliente y css en plantillas.

ismodule: es usado para crear custom tags

iscontent: Usalo como en el ejemplo que estamos viendo de resetPassword

is cookie: Usa la funcion getCookie en cookie.js. No hay equivalentes a setCookie entonces usa el ejemplo que vemos localStorage Setitem

isredirect: No uses este tag, en su lugar usa el metodo redirect URL

isstatus: En lugar de esto usa el status codigo del response en el controlador

Como conclusión vemos que la finalidad el ISML es usar la lógica que viene del controlador. Por ello, seguir un correcto patrón de Modelo vista Controlador usando SFRA te ayudará a crear un software de calidad.

 

¡Todos los videos en Español!

Si te gustó y quieres saber más, dale a like y suscríbete al canal.

⭐ Ver el siguiente video:

🔥 Suscríbete: https://www.youtube.com/channel/UCebvN-T3Kjo03_tSjwT8Z0g