Scot Ranney • September 04, 2024
Use the tag system in Instapages to create a dynamic FAQ system for products and categories by assigning product and category codes to FAQ entries in Instapages along with a bit of template voodoo.
<mvt:comment>
#
# instapages faqs display:
# First we try to load faqs for the product code if it exists.
# If not, we use category code.
# Show FAQs if loaded.
#
</mvt:comment>
<mvt:if expr="l.settings:product:code">
<mvt:item name="instapages" param="load:rendered tag:l.settings:product:code into:content_items" />
<mvt:elseif expr="l.settings:category:code">
<mvt:item name="instapages" param="load:rendered tag:l.settings:category:code into:content_items" />
</mvt:if>
<mvt:if expr="miva_array_elements( l.settings:instapages:content_items )">
<div id="faqs-start"></div>
<div class="o-layout">
<div class="o-layout__item u-width-1--m"></div>
<div class="o-layout__item u-width-12 u-width-10--m">
<div class="c-category-footer o-layout__item" style="margin: 0; background-color: white;">
<h2 class="c-type-title-2">Frequently Asked Questions</h2>
<mvt:foreach iterator="item" array="instapages:content_items">
<mvt:assign name="l.counter" value="l.counter + 1" />
<mvt:if expr="l.settings:item:code">
<h4 class="c-type-title-3" style="margin-top: 25px;">&mvt:item:code;</h4>
</mvt:if>
<div class="x-accordion__category">
<details class="x-accordion--inner x-accordion--&mvts:item:title;" data-component-code="&mvts:item:title;" style="margin-left: 0;">
<summary class="x-accordion__label-container" style="background-color: #EFEFEF; padding: 15px; margin-bottom: 5px;">
<span class="x-accordion__label-inner">
<span class="x-accordion__label"><b>Q.</b> &mvte:item:title;</span><span class="x-accordion__toggle" aria-hidden="true"></span>
</span>
</summary>
<div class="x-accordion__copy u-styled-html-elements" style="background:#fff;padding: 1.125rem 1rem 1rem 1rem; margin-bottom: 0;">&mvt:item:content;</div>
</details>
</div>
<mvt:if expr="NOT g.show_all AND l.counter GT 6">
<mvt:foreachstop />
</mvt:if>
</mvt:foreach>
</div>
<mvt:if expr="NOT g.show_all">
<div class="o-layout o-layout--justify-center">
<div class="c-form-list__item o-layout__item u-width-3--l u-width-4--m u-width-5" style="padding-bottom: 50px;">
<a href="&mvt:category:link;?show_all=1&#faqs-start" class="c-button-primary c-button-width--full">View All FAQs</a>
</div>
</div>
</mvt:if>
</div>
</div>
</mvt:if>
<mvt:comment>
#
# end instapages faqs
#
</mvt:comment>