Looking for something? Start typing here:
Scot's Blogger is used to created this support system.
The Installation Guide walks you through basic setup. The instructions below give you ways to display content.
To get the most out of Instapages be sure to hover and/or click over all the for tips, and when editing content, click the icon for details.
1. Create Content
Click the "New" link to create new content.
The two horizontal bars to the left of the block you are editing are used to drag and drop content blocks. Clicking on them also brings up a context menu.
Colors and other styles: Click the # symbol in the menu to add styles to blocks in your content. Click Here for the general CSS guide for Shadows based readythemes.
Important Visual Editor Source View Information: The <> Visual Editor Source viewer/editor is for html/css only. Storemorph Technology (SMT) code will be corrupted. To create and edit content with SMT code, select the code editor in the SETTINGS tab.
2. Publish Content and Drafts
Only published content will be displayed live unless you are previewing a draft. Once a draft is ready, publish the updates to make the content live. Make sure the URI is set to "LIVE" if you want to display published content via URL.
3. Display Content
Display basic Instapage content using:
&mvt:instapages:content;
This will display content loaded via URL as well as optional auto-content (see #4 below.)
See the Installation docs for more information on displaying content.
4. Use Instapages for Basic Page Content
Using Instapages to create default page content is an easy way to get more out of your store pages without having to know how all the CSS and HTML works.
Go into the Instapages settings and check the "Automatically load page content" option.
The next step is to go to the page, such as the About Us page, and create some content and assign it the same code as the page, in this case, ABUS. Click on the "Settings" tab for this.
When someone visits your About Us page the content you assigned to ABUS can be displayed using the same page item as before:
&mvt:instapages:content;
Instapages leverages the built in Miva Merchant URI system. Once you set a URI to "live" mode the content will be accessible by loading the URI.
URI Settings: For most cases, set the URI type to "NORMAL" and check the "Use as Canonical URI" option.
The installation guide describes the most basic way of displaying Instapages content via URI
There are also more advanced ways to load and/or display Instapages content based on tags, codes, and a mixture of both.
When loading content into variables using the page items below, the variable name will automatically have instapages appended to it.
For example, if content is loaded into content_items via the into:content_items method (described below), it will be accessed via l.settings:instapages:content_items or &mvt:instapages:content_items;. This way instapages data stays out of the way of other store data.
Simple Load: Load a content list based on a tag. The list will be sorted by content code and order.
Use the "simple" command to load content lists when making a list of links. This method is faster and uses less resources than the load:rendered method (described below.)
The examples below loads content using the tag "support" into the variable l.settings:instapages:content_items
content_items variable can be whatever you want.<mvt:item name="instapages" param="load:simple tag:support into:content_items" />
Simple mvt:foreach loop to display the titles and links:
<mvt:foreach iterator="item" array="instapages:content_items">
<div><a href="&mvt:item:uri;">&mvt:item:title;</a></div>
</mvt:foreach>
Rendered Load: Load a list of rendered content based on a tag. Useful if you want to display multiple content items at once.
<mvt:item name="instapages" param="load:rendered tag:support into:content_items" />
Simple mvt:foreach loop to display the titles and content:
<mvt:foreach iterator="item" array="instapages:content_items">
<div>&mvt:item:title;</div>
<div>&mvt:item:content;</div>
</mvt:foreach
Dynamic Tag Loading: Tags may also be loaded using global or l.settings style variable names. This makes it easy to load tags based on category, product, or page codes for example. This also works for codes.
<mvt:item name="instapages" param="load:rendered tag:g.some_tag into:content_items" /> <mvt:item name="instapages" param="load:rendered tag:l.settings:category:code into:content_items" />
Load all tags: Loads a basic tag list array into l.settings:instapages:tags
<mvt:item name="instapages" param="load:tags" />
Load specific tags: Loads a specific tag list array into l.settings:instapages:tags
<mvt:item name="instapages" param="load:tags search:tag one,tag two,tag etc" />
Tags Menu with Content:
This will give you a list of tags and their associated content. Useful for menu systems.
<mvt:item name="instapages" param="load:tags" />
<mvt:foreach iterator="tag" array="instapages:tags">
<mvt:item name="instapages" param="load:simple tag:l.settings:tag into:menu_items" />
<mvt:if expr="NOT l.settings:instapages:menu_items">
<mvt:foreachcontinue />
</mvt:if>
<h5 class="c-heading-delta" style="margin-bottom: 10px; margin-top: 10px;"></h5>
<mvt:foreach iterator="item" array="instapages:menu_items">
<div>
<a href="&mvt:item:uri;">&mvt:item:title;</a>
</div>
</mvt:foreach>
<mvt:assign name="l.settings:menu_items" value="''" />
</mvt:foreach>
Use a tag group to make it easier to load and/or organzie a list of tags.
<mvt:item name="instapages" param="load:tag_group group:My Tag Group" />
The tags in the group will be assigned to l.settings:instapages:tags and can be treated exactly the same way as if you had manually loaded tags using the tag list page item described above.
Why use tag groups instead of creating a tag list? The only difference is that you can set up your tag groups in the Instapages admin and if you want to add new tags to a list you don't have to do any template editing. The end functionality is exactly the same and boils down to personal style.
Codes help group content. This is useful when the content is sharing a tag because the content array will be grouped via code.
For example, if you have content sharing a tag called "support" and loaded using one of the tag load page items above, all of the content sharing the "support" tag is loaded and also grouped into sections based on the codes you assigned to each content item.
Each of these "code" groups would be ordered by the "order" setting.
Example:
Let's say you have six posts that all share the tag "support". Three of the posts are about installing a product and have the code "Installation Information" and three posts are about removing a product and have the code "Removal Information."
When the "support" tag is loaded, the posts will be grouped correctly.
Basic Code Load
The easiest way to load one Instapage content item is to use a code. In this example the code for the content is instapages_demo - on the first line the page item loads it and on the second line, the page entity displays it.
<mvt:item name="instapages" param="load:rendered code:instapages_demo into:instapages_content" /> &mvt:instapages:instapages_content;
Code Example 1 - Use Codes For List Heading
We use the code as if it were a heading in a menu. When the code changes during the loop, we output a new heading and then continue with listing the content titles.
<mvt:item name="instapages" param="load:simple tag:support into:content_items" />
<mvt:foreach iterator="contentitem" array="instapages:content_items"> <mvt:if expr="l.settings:contentitem:code NE l.code_bak"> <b>&mvt:contentitem:code;</b> </mvt:if> <a href="&mvt:contentitem:uri;">&mvt:contentitem:title;</a> <mvt:assign name="l.code_bak" value="l.settings:contentitem:code" /> </mvt:foreach>
Code Example 2 - Load Tag/Code List With Non-Live URIs Becoming Headings
In this example the codes are again used to group content but instead of displaying the code for the heading, we display a content title.
To make this work we create a content item and give it 1 for the order (along with the same tag and code as other content in the group), then publish it without making the URI live.
As we loop through the list of content items we can check for non-live URIs and assume they are posts being used for headings in a menu or list. We could also check to see if it's the first item in a code group and then display the content title rather than the code.
<mvt:item name="instapages" param="load:simple tag:support into:content_items" />
<mvt:foreach iterator="contentitem" array="instapages:content_items"> <mvt:if expr="NOT l.settings:contentitem:uri_id"> <h4>&mvt:contentitem:title;<h4> <mvt:else> <a href="&mvt:contentitem:uri;">&mvt:contentitem:title;</a> </mvt:if> <div></div> </mvt:foreach>
Code Example 3: Load content based on code.
You can also load content based on the code alone. When you do this, all content that shares the code will also be loaded into the l.settings:instapages:_code_items array.
This will load content that uses the code SPECIAL:
<mvt:item name="instapages" param="load:rendered code:special into:my_instapage_content" />
Display:
&mvt:instapages:my_instapage_content;
Instapages can be used to create default content for pages.
This will automatically load the Instapages content when the page is loaded.
Display content with the ABUS code on the About Us (ABUS) page:
&mvt:instapages:_page:content;
Instapages is available in a tab when you're editing a product or category and can be automatically displayed if available.
Check the "Automatically load product and category content" option in the module settings and then assign the Instapages item to the Product Display (PROD) and/or the Category Display (CTGY) templates.
Instapages automatically uses the product or category code for this content.
When g.category_code or g.product_code are in the environment, Instapages loads the content associated with the product or category into special variables:
&mvt:instapages:_product:content;
and
&mvt:instapages:_category:content;
If more than one content item has been created for a product, a content array will be loaded into l.settings:instapages:_product_items and sorted by order.
<section>
<mvt:foreach iterator="contentitem" array="instapages:_product_items">
<a href="&mvt:contentitem:uri;">&mvt:contentitem:title;</a>
</mvt:foreach>
</section>
Note that each content item created for a product uses the product code. Changing the product code will mean extra work to manually change the codes in Instapages.
This option replaces product and category descriptions without any template work.
If you turn on the "Automatically replace product and category content if it exists." option in the module settings your Instapages content will automatically replace the default product or category content and you do not need to make any page template updates.
Content is only replaced if it exists, otherwise default product/category content will display.
You can't use page items or SMT code such as <mvt:eval expr="l.settings:something" /> in the visual editor.
However, if you open up content for editing using the <> code editor button then you can use any valid SMT and page items in the content. The one caveat is that once you add code to your content, DO NOT switch back to the visual editor or your code will be lost and/or corrupted.
You can also switch to the code editor from the Settings tab under the content you are editing. Change the editor from VISUAL to CODE and update.
In most cases you can use page entities, such as &mvt:product:name; in your Instapages content. This is not guaranteed to work in every case so you'll need to experiment.
Content can be scheduled for publishing by selecting a date in the "SETTINGS" tab.
If you use the publish scheduling features it's recommended to set up a scheduled task in Miva Merchant to do this.
Note that you can also manually run the scheduled publishing task by checking the option when editing content.
Instapages CONTENT data structure: