FAQ: Instapages Dynamic FAQ System

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>