Magento 2 – Uso de acordeón dentro de la plantilla (collapse widget)

Si estás modificando tu plantilla de Magento 2, puede interesarte saber cómo añadir programando un objeto acordeón (collapse widget) en el fichero .phtml. Muy utilizado en la creación de módulos o las vistas de la tienda.

Inicialmente busqué qué librerías utilizaba mi plantilla. En mi caso, Bootstrap. Intenté mirar si podía utilizarlo, pero era complicado. Me decidí mirar qué ofrecía el propio código de Magento 2 y me llevé una grata sorpresa. Os detallo cómo hacerlo de forma sencilla:

En el cuerpo de la página .phtml de la plantilla, debes añadir el siguiente código:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
<div id="acordeon">
    <div data-role="collapsible">
        <div data-role="trigger">
            <span>Primera opción</span>
        </div>
    </div>
    <div data-role="content">Contenido 1</div>
 
    <div data-role="collapsible">
        <div data-role="trigger">
            <span>Segunda opción</span>
        </div>
    </div>
    <div data-role="content">Contenido 2</div>
 
    <div data-role="collapsible">
        <div data-role="trigger">
            <span>Tercera opción</span>
        </div>
    </div>
    <div data-role="content">Contenido 3</div>
</div>

Ahora ya tenemos el cuerpo que formará el objeto acordeón. Ahora, debemos hacer que se comporte como debe. Para ello, seguido al anterior código, añadimos el siguiente:

1
2
3
require(['jquery','accordion'], function ($) {
  $("#acordeon").accordion();
});

De esta manera utilizamos el widget que Magento 2 facilita. Ahora, tenéis que darle formato con CSS para que quede a vuestro estilo.

Espero que os sea de utilidad.

Artículos relacionados

Magento2 – Crear Crontab para magento Magento2 necesita poner en marcha tareas cada X tiempo. Esos es indexación, envío emails, actualizaciones... Para ello, hay que crear un Crontab. Pero...
Magento2 – Aumentar memoria órdenes consola En muchas ocasiones, cuando queremos ejecutar una orden por terminal (SSH) o en consola si trabajamos en local con Magento2, se muestra un error que ...
Magento2 – Restringir cookies Para mostrar el mensaje de uso de cookies en vuestro Magento 2, hay que seguir unos sencillos pasos: Vamos a: Tiendas > Configuración > Configur...
Magento2 – Traducir a Español Si instalas Magento2, y hablo de la versión Community, normalmente se instala con el panel y la tienda en inglés. Qué debemos hacer para ponerlo en es...

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

*