Instapages Installation
last updated August 03, 2021
The first step is to add the Instapages module to your store.
Instapages installation requires some minor template edits:
- the template selected to display content
- the global head template for meta information
- smart breadcrumbs template
1. Assign "instapages" Page Item to a Template
Instapages does not need it's own template, and the easiest way to get started is to utilize your About Us (ABUS) page to display Instapages content. If you decide to use a new template, make it now.
Open the page for editing that you're going to use for Instapages, and click on the ITEMS tab to assign the INSTAPAGES item to the page.
Display Instapage Content
If you use the ABUS page to display Instapages content create a conditional that displays Instapages content if it's available, and if not, displays regular ABUS content.
For ABUS or another page already in use:
<mvt:if expr="l.settings:instapages:content">
&mvt:instapages:content;
<mvt:else>
<mvt:item name="readytheme" param="contentsection( 'abus_content' )" />
</mvt:if>
For a dedicated Instapages template:
&mvt:instapages:content;
Show Instapages Content Title
Display the Instapages content title instead of the default page title with a simple conditional for the existing <h1> tag:
For the ABUS or another page already in use:
<mvt:if expr="l.settings:instapages:title">
<h1 class="c-heading-delta u-text-bold u-text-uppercase">&mvt:instapages:title;</h1>
<mvt:else>
<h1 class="c-heading-delta u-text-bold u-text-uppercase">&mvte:page:name;</h1>
</mvt:if>
For a dedicated Instapages template:
<h1 class="c-heading-delta u-text-bold u-text-uppercase">&mvt:instapages:title;</h1>
Display Instapages Content
Depending on your template, you may see something like
<mvt:item name="readytheme" param="contentsection( 'abus_content' )" />
or
<mvt:item name="content" />
or you may just see some content on the page. Regardless of how the default page content is displayed, you can make a simple conditional around it to display Instapages content if avaialble:
<mvt:if expr="l.settings:instapages:content">
&mvt:instapages:content;
<mvt:else>
[your existing content here]
</mvt:if>
Instapages Content Items
Display the title, summary, and any other data using the variables below. This is for content only, the head tag is a special case and is described below.
Title of content:
Body of content:
Formatted date content was last updated:
- &mvt:instapages:updated_formatted;
Unformatted time_t date:
Meta Information:
- &mvt:instapages:meta:description;
- &mvt:instapages:meta:head;
- &mvt:instapages:meta:image;
- &mvt:instapages:meta:keywords;
- &mvt:instapages:meta:seotitle;
- &mvt:instapages:meta:subtitle;
- &mvt:instapages:meta:summary;
2. Settings for Head Tag Meta Data (SEO)
Add a new conditional in the head tag content to make the meta data for your Instapages posts work. Go to:
user interface > global settings > head tag content
Find the conditional that starts with <mvt:if expr="'CTGY' CIN l.settings:page:code"> and update it so it looks like the code below.
<mvt:if expr="l.settings:instapages:title">
<link rel="canonical" href="&mvte:instapages:uri;" itemprop="url">
<title>&mvte:instapages:title;</title>
<meta name="description" content="&mvte:instapages:meta:description;">
<meta name="og:title" property="og:title" content="&mvte:instapages:title;">
<meta property="og:description" content="&mvte:instapages:meta:description;" />
<meta property="og:image" content="&mvte:instapages:meta:image;" />
<meta property="og:url" content="&mvte:instapages:uri;" />
<meta name="twitter:card" content="summary">
<mvt:elseif expr="'CTGY' CIN l.settings:page:code">
.............
3. Settings for Smart Breadcrumbs
user interface > global settings > smart breadcrumbs
Find
<mvt:if expr="l.settings:cats:name EQ '...'">
inside the mvt:foreach loop.
Create a new condition and change the existing condition like this:
<mvt:if expr="l.settings:instapages:title">
<li class="o-list-inline__item" data-hook="collapsing-breadcrumbs__item" itemprop="itemListElement" itemscope itemtype="">
<a class="u-color-black" href="&mvt:instapages:uri;" title="&mvt:instapages:title;" itemprop="item">
<span itemprop="name">&mvt:instapages:title;</span>
</a>
<meta itemprop="position" content="&mvt:breadcrumb:position;" />
</li>
<mvt:elseif expr="l.settings:cats:name EQ '...'">
.....
Instapages Data struct:
These variables are available in an Instapages content record.
- code
- content - rendered, &mvt:instapages:content; displays the rendered published version of the content
- created
- disp_order
- editor - editor style
- id
- orderx
- publish
- settings:
- uri_canonical
- slug
- source_d -draft source
- source_p - published source
- spage - page id the content is attached to
- stype
- title
- updated
- updated_formatted
- uri
- uri_id
- uri_system - if uri has been made live this contains structure of miva uri record
- uri_type - native miva uri type
- meta:description
- meta:head
- meta:image
- meta:keywords
- meta:seotitle
- meta:subtitle
- meta:summary
