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 – Quitar sufijo html de las urls Por defecto, Magento2 nos añade el sufijo .html a todas las páginas de productos y categorías. Para poder quitarlo desde el panel deberemos seguir las...
Deshabilitar módulos en Magento 2 por configuració... Si ya vimos en el artículo anterior cómo deshabilitar un módulo de Magento 2 por consola, ahora veremos cómo hacerlo modificando el fichero de configu...
Magento 2 – Añadir Url Canonical a las págin... Al igual que vimos cómo añadir Canonical a las categorías y productos en Magento 2, ahora vamos a ver cómo hacerlo en las páginas. Es tan fácil c...

Deja un comentario

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

*