Miva Merchant Modules and Development
Want to start an online store? We work with you from start to finish, from commerce platform to design to SEO.
Experience counts, and we have a lot.

FAQ: Instapages Dynamic FAQ System

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>


https://www.scotsscripts.com/mvblog/faq-instapages-dynamic-faq-system.html

mvkb_shadows mvkb_faqs mvkb_instapages