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 – 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...
Magento 2 – Migrar magento de local a servid... Os dejo algunos pasos a seguir para poder migrar un magento 2 de local a servidor de producción. Lo hago en forma de guía, sin detallar cada uno de lo...
Magento2 – Añadir Captcha al formulario de c... Para añadir más seguridad a nuestra web, muchos optamos por añadir el código captcha en los diferentes formularios que dispone nuestra página. Para el...

Deja un comentario

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

*