Template Language
ReadyThemes Documentation
Download ReadyTheme Element Framework HereReadyThemes is functionality built into the core of Miva Merchant Version 9. It allows you build themes or integrate with an existing CSSUI store to better manage your Miva Merchant store from the admin. This includes updating your logo, managing social media links, managing promotional images, content, product lists, and navigation.
There are 6 different tabs available within ReadyThemes which provide different functionality. Below are code samples and an item reference guide to help you build a new theme or customize an existing Miva Merchant store.
Interested in building and selling a ReadyTheme in our Theme Marketplace? Click here to download our Theme Checklist.
Settings
Logo Sample code:
Available Entities:
Background Image, Color and Font:
There is an item which must be placed in the Global Head Tag which controls these settings. It outputs a single body style to control the default font, background color and background image.
3rd Party Social Sharing Snippet and Trust Symbol Code
Images
ReadyThemes has the ability to manage all your sites promotional images. They can be placed anywhere on the website. Miva will automatically resize them to any specifications you need. Common use cases are: homepage sliders, homepage banners, global promotional images, Category/Product Specific promotional images.
* Search Friendly Links will automatically be used in URLs if configured in Miva Merchant Domain Settings
Text Banners
Text banners allow you to create text based banners which can be used for promotional messaging, or site notifications.
They can be placed anywhere on the site using the item generated when the banner is created. An optional link can be defined which will wrap the entire text banner.
Each Text Banner will be contained with a div tag with a class of "readytheme-banner" and and id of the code given to the banner.
Content Sections
Content Sections are a place to manage your sites content pages. Content such about us, policy pages, or other content needs.
Each Content Section will be contained with a div tag with a class of "readytheme-contentsection" and and id of the code given to the banner.
Function Variables
All the functions within the param tag for all ready theme items accept a string value (contained in single quotes) or a variable. This allows you to dynamically call in an image, banner, nav set or content item by reading in a parameter from the URL.
Product Listings
Product Listings allow you to add featured products to any page of your Miva Store. Typically this will be used on the storefront. There are two options for which products get pulled in. It will use All Products, or products from a specific category. This will allow the store owner to create a new category to assign products to, or pull products from an existing category. Management of which products display and their order is all controlled at the category level.
Multiple product listing items can appear on the same page. The products listing item will inherit all the items for the page it is used on. So if you need to used toolkit or another items code within the product listing template, as long as toolkit is assigned to the page template it is used on it will work.
The product listing item have a complete page template which can be customized to support any layout needed. Because the ReadyTheme feature used the product listing component, things like additional images, sorting, number of products to display are all built in.
The layout of any product listing can be controlled though the Advanced Mode setting.
Navigation Sets
Navigation Sets allow you to create custom navigation structures to control different parts of your Miva Merchant store. Currently Miva has a built in category tree, and a navigation bar. With Navigation Sets, you can define your own navigational structures to be used anywhere. Examples include footer navigation, custom content page navigation or even replacing the built in navbar and category tree.
Each Navigation Set has its own Template to control the layout. By default it will output a nested ul/li structure to allow for easy styling. Included in ready themes is a built in stylesheet with 4 layouts. Each layout provides different styles for the type of navigation menu you would like to use. The stylesheet automatically gets added to the store under CSS list when readythemes is activated.
The goal of these built in menu styles for the theme developer to use as a starting point and customize for their specific theme.
Below is an example of a navigational set structure that can be created within the admin. It supports up to 3 levels deep (parent plus two sub cats) A nav item can be just text or contain a link to a product, page, category or custom external page.
Here is the HTML code output by the navigation set item:
CSS Classes
- Each Navigation Set will be contained in a div with a class of "navigation-element" plus a class of the code of the navigation set
- The first ul will have a class of "navigation-set" plus a class of the layout chosen in the admin. The four layout classes are: horizontal-drop-down, horizontal-mega-menu, vertical-fly-out or single-navigation-column
- The li for each level will have a class of "level-X" where X is the 1, 2, or 3 depending on the level of the navigation item
Default Navigation Set Template
Urls for the links are automatically generated. In the event you need more control over the link there are item available to build your own custom link.
Available Entities
Entities above are available at all three levels.
Template Language Functions
As of 9.0001 there are 5 functions available to any page the readytheme item is assigned. These functions can be used to pre-load the data for a image, banner, navigation set, content section or product listing. The main use of this would be to check to see if the readytheme element was active, however it can be used for other conditionals as well.
Example:
Parameter Definition
Code: The readytheme element code you want to reference
Output: The variable where you want the data will be loaded
Note: if output is omitted or left blank the data is automatically loaded into l.settings:readytheme:loaded
Full Function List