[D7] Themear un paragraph para hacer un acordeón de Bootstrap

acordeón de bootstrap en drupal 7

Primero de todo, que Bootstrap en Drupal 7 necesita el módulo jQuery Update.

Luego creameos un bundle de Paragraph y le metemos 2 campos: uno para el título del elemento del acordeón y otro para su contenido.

Yo lo he hecho así:

2 campos en el bundle de Paragraph: titulo y body

 

 

 

 

Vale, ahora vamos a hacer 2 plantillas; las metemos en sites/all/themes/bootstrap/templates/paragraphs:

paragraphs-items--field-acordeon.tpl.php , es la contenedora

<div class="panel-group <?php print $classes; ?>" id="accordion">
        <?php print render($content); ?>
</div>

y paragraphs-item--field-acordeon.tpl que es la que pinta cada elemento:

<br/>
<div class="panel panel-default">
    <div class="panel-heading">
      <h4 class="panel-title">
        <a data-toggle="collapse" data-parent="#accordion" href="#collapse_<?php print $n; ?>">
        <?php print render($content['field_titulo']); ?></a>
      </h4>
    </div>
    <div id="collapse_<?php print $n; ?>" class="panel-collapse collapse">

      <div class="panel-body">
        <?php print render($content['field_body']); ?>
      </div>

    </div>
</div>

 

ojo, que el suggestion no me pillaba la plantilla paragraphs-item--field-acordeon.tpl.php, por lo que he acabado poniendo esto en mi template.php del theme Bootstrap (por cierto, deberíais usar vuestro propio sub-theme de Bootstrap en lugar de hacerlo directamente):

function bootstrap_preprocess_entity(&$variables) {
  if ($variables['entity_type'] == 'paragraphs_item')
  {
    $variables['theme_hook_suggestions'][] = 'paragraphs_item__' . $variables['elements']['#entity']->field_name;
  }
}

 

vale, ahora si, ya os debería funcionar vuestro acordeón de Bootstrap en Drupal 7 :-)

 

-----

ACTUALIZACION: acordeón anidado (19/6/2017)

Si queremos poder anidar otro acordeón dentro del body de un acordeón padre, y así hasta el infinito, podemos hacer lo siguiente:

 

Primero, un acordeón hijo con los siguientes campos:
campos del acordeón padre

 

 

 

 

 

 

 

 

A continuación dejamos los campos del acordeón que será el padre como estaba, salvo que le añadiremos este acordeón hijo como campo de tipo «Paragraph».

 

Ahora os muestro las plantillas tal como yo las tengo:

paragraphs-items--field-acordeon.tpl.php se queda igual

- paragraphs-item--field-acordeon.tpl.php queda

 

<br/>
<div class="panel panel-default">
    <div class="panel-heading">
      <h4 class="panel-title">
        <a data-toggle="collapse" data-parent="#accordion" href="#collapse_<?php print $n; ?>">
        <?php print render($content['field_titulo']); ?></a>
      </h4>
    </div>
    <div id="collapse_<?php print $n; ?>" class="panel-collapse collapse">

      <div class="panel-body">
        <?php
         //print render($content['field_body']);
         ?>
        <?php print render($content); ?>
      </div>

    </div>
</div>

paragraphs-items--field-acordeon-hijo.tpl.php

<div class="panel-group <?php print $classes; ?>" id="accordion">

        <?php print render($content); ?>
  </div>

 

paragraphs-item--field-acordeon-hijo.tpl.php

 

<br/>
<div class="panel panel-default">
    <div class="panel-heading">
      <h4 class="panel-title">
        <a data-toggle="collapse" data-parent="#accordion" href="#collapse_<?php print $n; ?>">
        <?php print render($content['field_titulo']); ?></a>
      </h4>
    </div>
    <div id="collapse_<?php print $n; ?>" class="panel-collapse collapse">

      <div class="panel-body">
        <?php
         //print render($content['field_body']);
         ?>
        <?php print render($content); ?>
      </div>

    </div>
</div>

 

 

drupal7

Añadir nuevo comentario

Type the characters you see in this picture. Type the characters you see in the picture; if you can't read them, refresh the CAPTCHA or submit the form and a new image will be generated. Not case sensitive.