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

Magento 2 – Añadir noindex nofollow a las pá... Veamos de una forma sencilla cómo añadir nofollow y no index a una página en Magento 2. En los contenidos estáticos puede interesarnos añadir las...
Magento2 – Añadir fichero JS a nuestro módul... Cuando estás creando un módulo propio, te puede interesar añadir tus ficheros externos Javascript dentro del módulo. Otras veces puedes añadir el fich...
Deshabilitar módulos en Magento 2 por consola Veamos cuál son las órdenes que debemos utilizar en consola para deshabilitar los módulos en Magento 2 Aquí están las órdenes a aseguir (si está ...
Magento 2: añadir fichero js externo Partimos de la premisa que tenemos una plantilla en Magento2 y necesitamos que ésta cargue un fichero JavaScript externo porque lo necesitaremos en un...

Deja un comentario

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

*