1. Imagineer | Centro de ayuda
  2. Magento Guía Paso a Paso
  3. Administración de Diseño y Plantillas en Magento

¿Cómo agregar un elemento al menú de Magento que lleve a un landing page?

Este artículo servirá de gran ayuda para la creación de elementos dentro del menú de las diferentes páginas o tiendas eCommerce.

Para este tema en específico es necesario la creación de una nueva categoría. A través de esta, se creará el nuevo elemento dentro del menú. Importante ponerle un URL único, ya que este será utilizado para cambiarle la dirección de referencia una vez que se agregue al menú. 

Por ejemplo, se crea una nueva categoría con URL nueva-categoria. Entonces para llegar a ella tendremos una dirección como la siguiente: https://mitienda.ejemplo.com/nueva-categoria.html

 

Ya teniendo creada la categoría, será necesario ir a Content -> Design -> Configuration -> Se ingresa al tema -> HTML Head y vamos a trabajar en la sección llamada "Scripts and Style Sheets".

El primer elemento es el dedicado a estos cambios, lo que tendremos que hacer es agregar dos nuevos a la misma sección. Lo que vamos a agregar va a ser muy similar a lo siguiente:

1. $('a[href="https://mitienda.ejemplo.com/nueva-categoria.html"]').attr('target', '_blank');
2. $('a[href="https://mitienda.ejemplo.com/promociones/saborea-tus-vacaciones.html"]').attr('href', 'https://landing.ejemplo.com/nuevo-landing');

El primero, se dedica a ponerle a la nueva categoría la propiedad de en caso de ser seleccionada, abrir el landing en una nueva pestaña del navegador.

El segundo es el que realiza el cambio de URL. Se dice, ubique el elemento con la dirección de la categoría que se acaba de crear y cámbielo por la dirección de nuestro landing page.

 

Código de ejemplo:
<script type="text/javascript">
require(['jquery','jquery/ui'], function($) {
$('a[href="https://mitienda.ejemplo.com/promociones/saborea-tus-vacaciones.html"]').attr('target', '_blank');
$('a[href="https://mitienda.ejemplo.com/promociones/saborea-tus-vacaciones.html"]').attr('href', 'https://landing.ejemplo.com/sorteo-saborea-tus-vacaciones');
});
</script>

 

Importante recordar que estos dos elementos se deberán agregar antes de los símbolos "});" que finalizan el código. Si se ponen después, no nos va a funcionar el cambio.

Al terminar se guardan los cambios, se limpia el Cache de la página en System -> Cache Management y se refresca la página del eCommerce para verificar lo realizado. 


Felipe Hidalgo.