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>
mvkb_shadows mvkb_faqs mvkb_instapages