Diseño Template Overrides Virtuemart 2/3

El estilo de la plantilla por defecto de VirtueMart 2 (Hoy virtuemart 3) para la vista pública de una tienda online, es bastante liviano y la mayoría de usuarios del componente de comercio electrónico virtuemart  necesitan cambiar y adaptar el estilo y diseño para mejorarlo, tanto estéticamente, como en sus funcionalidades. Para ello, lo que se ha de hacer es crear un archivo para sobre escribir el original, sin alterar el mismo, por medio de la ya mencionada técnica Template override…

Bien, después de la introducción, hay que remarcar lo siguiente que ya publique en el foro y que incluyo en este contenido por conveniencia y comodidad del lector y como complemento al texto que seguirá.

{xtypo_rounded2}La técnica template overrides, como su nombre indica, realiza una sobre escritura de extensiones de terceros y/o el propio joomla, desde la plantilla asignada por defecto de tu joomla!, lo que permite, personalizar SIN modificar el core de una extensión o del propio joomla.{/xtypo_rounded2}

Para realizar una actuación sobre el componente virtuemart 2, tienes que copiar los archivos que necesitas modificar en la carpeta HTML de tu plantilla joomla por defecto. Una vez copiados, cualquier modificación realizada en esos archivos, afectara directamente al funcionamiento y vista del componente virtuemart 2.

Para estilizar la vista con el lenguaje CSS o LESS ….

{xtypo_rounded3}… Es un formato pre-procesador de CSS empleado para crear hojas de estilo y utilizar la tecnica Responsive Web Design y que NO es reconocido por todos los navegadores y que se debe compilar y pasar a CSS desde una herramienta externa como SimpLESS . De este tema intentare hablar en algun tutorial que realizare mas adelante.<…{/xtypo_rounded3}
 
…. si tu plantilla incluye un archivo llamado custom.css o algo por el estilo, para personalización, si no, desde el archivo template.css, situados en la carpeta CSS de tu plantilla, que casi todos incluyen, debes reañizar las modificaciones y o añadidos, según las clases asignadas para el estilo del componente virtuemart y que puedes conocer e indagar sobre ello en docs.virtuemart.net/ , aunque para empezar, te recomiendo COPIAR y PEGAR el estilo de la pantilla o theme virtuemart por defecto y realizar las modificaciones desde ahi, que te sera mas llevadero y sencillo para empezar.

Les indico que el código CSS del theme por defecto de virtuemart 2 esta situado en /components/com_virtuemart/assets y /components/com_virtuemart/assets/css.

El archivo a destacar es vmsite-ltr.css situado en /components/com_virtuemart/assets. A tener en cuenta que no es facil.

Utilizar un template override para virtuemart, creado en una plantilla joomla! diferente.

Luego si se te ocurre, tomar la carpeta com_virtuemart de la carpeta html de un template joomla! que incluye un estilo definido para una plantilla joomla!, no olvides el código CSS, que seguramente tendras que sacar de los archivos CSS de la plantilla y es posible que tambien exista un archivo llamado virtuemart.css o por el estilo y si esta, tendras que copiarlo y crear la llamada a ese archivo desde tu plantilla desde la que quieres realizar el template overrides de virtuemart 2 .

Y tampoco sera facil, debido a las siempre presente, o casi, sentencia !important que te fastidira el invento en mas de una ocasión 🙂 y funciona como una palabra clave para ignorar las reglas. Cualquier definición que vaya acompañada de un !important tendrá mayor importancia que cualquier otra. Y no se trata de eliminar ese !important a diestro y siniestro, que si esta, tendra su razon de ser. Asi que ojo tambien con eso.

Ahora el modo tradicional y básico para la personalización de la vista de categorias y detalles de productos en virtuemart joomla!.

Cómo preparar los archivos Virtuemart para realizar la técnica Templates Overrides

Hay quien renombra el archivo como vm.css o virtuemart.css, como arriba señalo, pero es suficiente con copiar el archivo VirtueMart vmsite-ltr.css, en la ubicación para la anulación del mismo . El archivo debe ser copiado en la carpeta /css de su plantilla Joomla, es decir :

DOMINIO/templates/SU_PLANTILLA/css/vmsite-ltr.css

Sin embargo, después de hacer esto, las rutas de algunas imágenes e iconos de VirtueMart, como por ejemplo la background.png para el botón ‘Añadir al carrito’ , no son válidas para la nueva ubicación del archivo vmsite-ltr.css en la carpeta /css de su plantilla .

El modo más simple de resolver este pequeño problema, es copiar la carpeta /vmgeneral situada en /components/com_virtuemart/assets/images y los archivos de imagen vm2-sprite.png (los iconos «cantidad actualización en el carrito ” y ” eliminar de la cesta ‘) color-stars.png (las estrellas para la visualización de clasificaciones de productos en la Vista detalles del producto) icon_external_link.png a la carpeta de la imagen de su plantilla :

DOMINIO/templates/SU_PLANTILLA/images

Con estos sencillos pasos, tendra un archivo de predominio de trabajo, que no llegara a ser reemplazado en las actualizaciónes siguientes de VirtueMart 2 y por tanto, los cambios, para mejorar, que realize, no se veran afectados y podra mantener su virtuemart actualizado.

Cómo sobrescribir la salida o vista de un producto con plugins VirtueMart

¿ Se pueden reemplazar mis plugins VirtueMart para sobre escribirlos ?

En VirtueMart se utiliza el sistema de plantillas joomla para crear las sustituciones de un plugin. Esto es muy útil si desea ajustar la salida de la vista de producto visible para sus compradores. Para comprobar si el plugin se puede sobre escribir con la técnica template overrides, debemos comprobar que el plugin tiene una segunda carpeta con el mismo nombre en el mismo.

Búscar la ruta y el plugin, para verificar que efectivamente, esta compuesto por dos carpetas con el mismo nombre :

/SU_DOMINIO/plugins /nombre del grupo/ . A modo de ejemplo

/plugins /vmcustom/TextInput

Cuando el plugin tiene una segunda carpeta con el mismo nombre en el mismo, entonces se está utilizando el patrón reemplazable, como por ejemplo

/plugins/vmcustom/TextInput/TextInput

Cómo reemplazar y útilizar la técnica tempalte overrides

Copie la segunda carpeta en /templates/SU_PLANTILLA/html/[grupo]/[nombre ]

Pueden ver el nombre de la carpeta del grupo que el plugin está usando . Son las siguintes opciones :

vmcalculationvmcustomvmpaymentvmshipmentvmshoppervmuserfield

Por lo que la ruta correcta para el plugin TextInput sería

/templates /SU_PLANTILLA/html /vmcustom/TextInput

Es tal y como lo acabo de describir y asi de sencillo.

6 comentarios en «Diseño Template Overrides Virtuemart 2/3»

  1. Información precisa
    Una información muy valiosa para mi a la vez que bastante precisa, pero debo hacer una pregunta que no habeis precisado… [b]¿ Se pueden personalizar también los módulos de virtuemart 2 ?[/b] y una explicación rapida, ya seria perfecto.

    Gracias Chic@s

  2. Template override para Modulos de extensiones
    Hola Rakell, para los modulos es practicamente lo mismo. Sube a la [b]carpeta /html de tu plantilla[/b] el o los archivos de modulos que necesites personalizar.
    Por ejemplo, [b]para el modulo mod_virtuemart_cart de virtuemart 2[/b], tienes que [b]subir la carpeta /tmpl y sus archivos dentro de mod_virtuemart_cart[/b]. Es decir [b]TU_PLANTILLA/html/mod_virtuemart_cart/tmpl/default.php[/b]. Y a partir de ahi modificar a tu gusto.
    Por norma general, los modulos incluyen archivo(s) de vista del mismo, y que suelen estar en la carpeta /tmpl como este ultimo caso de ejemplo para virtuemart 2 .

  3. Mas sencillo
    [b]Todo me parece mas sencillo despues de las explicaciones que dais.[/b] Os tendriais que dedicar a escribir libros para la docencia, si es que no lo haceis ya y gracias por el apunte Redlo .

  4. Renombrar archivo estilo CSS
    Tengo una duda… y la voy a comentar en el foro. Es sobre pasar un overrides de virtuemart ya creado a una pagina mia. Como se que es mejor preguntar en el foro, lo hare ahi, solo era a modo de invitación a quien quiera ayudar. Ahora paso la URL del foro.

  5. URL del foro
    Aqui > [url]https://solojoomla.com/foro-joomla/template-overrides/31828-pasar-un-template-override-de-una-plantilla-virtuemat-2-a-otro#32399[/url] la dirección del foro. A quien quiera y pueda ayudarme.

    Saludos

    [quote name=”marcolo”]Tengo una duda… y la voy a comentar en el foro. Es sobre pasar un overrides de virtuemart ya creado a una pagina mia. Como se que es mejor preguntar en el foro, lo hare ahi, solo era a modo de invitación a quien quiera ayudar. Ahora paso la URL del foro.[/quote]

Deja un comentario

Esta web utiliza cookies propias y de terceros para su correcto funcionamiento y para fines analíticos. Al hacer clic en el botón Aceptar, acepta el uso de estas tecnologías y el procesamiento de sus datos para estos propósitos. Ver
Privacidad