Sección de preguntas frecuentes en Shopify

Si compraste un template en Shopify seguramente te habrás topado con que vienen con una configuración de ciertas secciones, algunas muy buenas y otras que quizá sean muy limitadas, en mi caso el template elegido por el cliente tenía una sección de preguntas frecuentes (faqs) mucho muy limitada, por lo que tuvimos que modificarla.{loadmoduleid 114}

{% if page.metafields.imagen.imagen %} {% assign col1 = 8 %} {% assign col2 = 4 %} {% else %} {% assign col1 = 12 %} {% assign col2 = 12 %} {% endif %}

{%- assign expand_questions = section.settings.expand_questions -%}

<div class="page-faqs-content"> <div class="page-content-wrapper"> <div class="container"> <div class="row d-flex"> <div class="col-sm-12 col-md-{{ col1 }}"> <div class="page-content-inner"> <div class="section-header text-center" style="display: none"> <h2>{{ page.title }}</h2> </div> <div class="main-content"> <div class="content-faqs"> <div class="panel-group" id="accordion" role="tablist" aria-multiselectable="true"> {%- for block in section.blocks -%} {%- case block.type -%} {%- when 'separator' -%} <h3 class="faq-separator" {{ block.shopify_attributes }}>{{ block.settings.title | escape }}</h3>

                {%- when 'faqs' -%}
                  &lt;div class="panel panel-default"&gt;
                    &lt;div class="panel-heading" role="tab" id="heading{{ forloop.index }}"&gt;
                      &lt;h4 class="panel-title"&gt;
                        &lt;a class="collapsed" data-toggle="collapse" role="button" data-parent="#accordion" href="#collapse{{ forloop.index }}" aria-expanded="false" aria-controls="collapse{{ forloop.index }}"&gt;
                          &lt;span class="faq-icon"&gt;&lt;i class="fa fa-question-circle"&gt;&lt;/i&gt;&lt;/span&gt;
                          {{block.settings.title}}
                        &lt;/a&gt;
                      &lt;/h4&gt;
                    &lt;/div&gt;
                    &lt;div id="collapse{{ forloop.index }}" class="panel-collapse collapse {% if expand_questions == true or block.settings.opened == true %}in{% endif %}" role="tabpanel" aria-labelledby="heading{{ forloop.index }}"&gt;
                      &lt;div class="panel-body"&gt;
                        {{block.settings.answer}}
                      &lt;/div&gt;
                    &lt;/div&gt;
                  &lt;/div&gt;
              {%- endcase -%}
            {%- endfor -%}
            &lt;/div&gt;
          &lt;/div&gt;
        &lt;/div&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  
    {% if page.metafields.imagen.imagen %}
    &lt;div class="hidden-xs hidden-sm col-md-{{ col2 }}" style="background: url({{ page.metafields.imagen.imagen }}) no-repeat; background-size: cover; background-position: center;"&gt;
    &lt;/div&gt;
    {% endif %}

  &lt;/div&gt;
&lt;/div&gt;

</div> </div>

{% javascript %} jQuery(function ($) { var $active = $('#accordion .panel-collapse.in').prev().addClass('active'); $('#accordion').on('show.bs.collapse', function (e) { $('#accordion .panel-heading.active').removeClass('active'); $(e.target).prev().addClass('active'); }) }); {% endjavascript %}

{% schema %} { "name": "FAQs", "settings": [ { "type": "checkbox", "id": "expand_questions", "label": "Expandir todas las preguntas por default", "default": false } ], "blocks": [ { "type": "separator", "name": "Section separator", "settings": [ { "type": "text", "id": "title", "label": "Heading" } ] },
{ "type": "faqs", "name": "Faqs", "settings": [ { "type": "text", "id": "title", "label": "Question" }, { "type": "richtext", "id": "answer", "label": "Answer" }, { "type": "checkbox", "id": "opened", "label": "Abrir al cargar", "default": false } ] } ]
} {% endschema %}

Si este artículo te pareció interesante te invito a seguirme o compartir mi contenido