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. Empezamos el artículo Magento 2 – Uso de acordeón dentro de la plantilla (collapse widget)

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:

<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:

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. En definitiva es utilizar bootstrap que lleva la plantilla o utilizar las herramientas que lleve la plantilla que utilicéos. Os lo hemos explicado con Bootstrap porque es la que llavaba nuestra plantilla.

Espero que os sea de utilidad el artículo Magento 2 – Uso de acordeón dentro de la plantilla (collapse widget).


Más información