- Javi Mata
- 04 ene, 2019
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.
El tema utilizado tenia una section de Faqs muy limitada, debías poner 10 preguntas, no podías poner más y si ponías menos de todos modos se mostraban los 10 cuadros, con esta modificación las faqs son ilimitadas, manejadas como blocks, además de que se puede poner un titulo de Sección para poder separar las preguntas por Temas, además de ponerlas en accordion, ej:
General
- Pregunta 1
- Respuesta 1
- Pregunta 2
- Respuesta 2
Envíos
- Pregunta 3
- Respuesta 3
- Pregunta 4
- Respuesta 4
El código lo dejo al final además de un enlace a mi Github con el para que puedas verlo mejor, solo te comento antes el como funciona.
- Respaldamos el archivo actual de las Faqs, comunmente llamado page-faqs.liquid dentro de sections, dependiendo del tema puede ser diferente.
- Crear un nuevo archivo o sobre-escribir el actual (ya respaldado) con el código de mi archivo page-faqs.liquid.
- Dentro de editor del Tema nos dirigimos a la página de Preguntas frecuentes y nos debería aparecer la sección del lado derecho llamada FAQs.
- Al entrar en la section de FAQs tenemos la sección de Configuración con un check que permite que todas las preguntas se muestren abiertas, recuerda que se muestran en un accordion, si deseamos que solo una pregunta (o ninguna) salga abierta debemos dejar este Check como desactivado, esto hará que se carguen todas las respuestas como cerradas.
- En la sección de CONTENT veremos el botón Add Content, si damos click en el tendremos 2 opciones: Section separator y Faqs.
- Section separator Es un separador de bloques de preguntas y solo requiere que le indiquemos el nombre del bloque dentro del campo Heading
- Faqs Es el contenido de la pregunta frecuente, en el tenemos las siguientes opciones:
- Question que será la pregunta
- Answer es un richtext para la respuesta
- Abrir al cargar Permite seleccionar manualmente si queremos que esta pregunta cargue abierta
Y Listo, con esto configuramos nuestras Preguntas frecuentes.
VER DEMO
Ver código en mi Github
Código:
<section class="page-heading"> <div class="page-heading-wrapper"> <div class="container-fluid"> <div class="page-heading-inner"> <div class="breadcrumb clearfix"> <span itemscope itemtype="http://data-vocabulary.org/Breadcrumb"> <a href="{{ shop.url }}" title="{{ shop.name | escape }}" itemprop="url"> <span itemprop="title">{{ 'general.breadcrumbs.home' | t }}</span> </a> </span> <span class="arrow-space">/</span> <span itemscope itemtype="http://data-vocabulary.org/Breadcrumb"> <a href="{{ page.url }}" title="{{ page.title }}" itemprop="url"><span itemprop="title">{{ page.title }}</span></a> </span> </div> </div> </div> </div> </section>{% 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' -%} <div class="panel panel-default"> <div class="panel-heading" role="tab" id="heading{{ forloop.index }}"> <h4 class="panel-title"> <a class="collapsed" data-toggle="collapse" role="button" data-parent="#accordion" href="#collapse{{ forloop.index }}" aria-expanded="false" aria-controls="collapse{{ forloop.index }}"> <span class="faq-icon"><i class="fa fa-question-circle"></i></span> {{block.settings.title}} </a> </h4> </div> <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 }}"> <div class="panel-body"> {{block.settings.answer}} </div> </div> </div> {%- endcase -%} {%- endfor -%} </div> </div> </div> </div> </div> {% if page.metafields.imagen.imagen %} <div class="hidden-xs hidden-sm col-md-{{ col2 }}" style="background: url({{ page.metafields.imagen.imagen }}) no-repeat; background-size: cover; background-position: center;"> </div> {% endif %} </div> </div></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 %}
