VMuikit X - A big revolutionary change to our Joomlapro VMuikit family.

This new ultimate package allows you to load virtuemart content into your website layouts and create site-wide templates with the following virtueMart views using the YOOtheme Pro page builder and dynamic content.

• Category view
• Product Details view
• Manufacturers view
• Manufacturers Details view

If you are here you probably are and have been using YOOthemes Builder and the quite new Dynamic Content features available. With the release of VMuikit X we have implemented full support for this for VirtueMart. This open incredible new doors for web designers and agencies to freely create templates for VirtueMarts different views.

How to install:

VMuikit X supports YOOtheme PRO page builder / UIkit 3 templates

• Download the latest “vmuikit_package_10.x.x” from “VMuikit X” product page.
• Install the downloaded “vmuikit_package_10.x.x.zip” using the Extension Manager menu in the administrator section of your Joomla website.

• After vmuikit_package_10.0.X successfully installed in your website then go to the next step.

• From the main joomla menu click “Extensions -> Manage -> Manage”. Use the Search or Filter feature to find the installed VMuikit X plugins.
• VMuikit X installation also comes with several additional plugins like VMuikit One Page Checkout, VMuikit Custom Elements and VMuikit Shortcode Plugin. By default the installation enables all the plugins .
• If you want to use any other plugin for cart page then please disable our VMuikit One Page Checkout plugin. 

• This installation creates the override files to "plugins/system/vmuikitx_override/html_override/" . However you can also override these by adding the same files in /html/ in your template path. This way you can update VMuikit X without your custom code being touched.

Recommended Virtuemart configurations for VMuikitX

Open the administration section of your joomla website and go to “Virtuemart → Configuration”.

Then go to the “Shopfront” tab and set all the below recommended settings

Then go to the “Templates” tab and checkout the settings

And found the settings for “Pricing” tab.

Finally marked the settings for “Checkout” tab.

Content Sources (Dynamic Content)

With the release of VMuikit X we have implemented full support of new Dynamic Content with VirtueMart. This new feature open incredible various options for web designers and agencies to freely create templates for VirtueMarts different views.

Custom Category :

• Now open "YOOtheme" website builder inside the Joomla admin and edit the page you want to add the elements with dynamic content.

• Then you can easily select the preferred builder elements from Yootheme PRO Website Builder elements list.

• Click on the selected element here we used "GRID" element .

• Then click "ADD ITEM" to add the new item to the element.

• Click "Advanced" menu in the new item and then select the option from "DYNAMIC CONTENT".

• Select a predefined virtuemart content source to make its fields available for mapping. Here for example "Custom Category" and simultaneously select the related options below for the selected content source.
  • "CATEGORY" - Listed the available categories in the virtuemart store or you can also search for your preffered category by name..
  • "LIMIT BY FEATURED PRODUCTS" - Enable this option will displayed the featured products only from the selected VM category .
  • "START" - Desired value in which the listing of products started from the selected category.
  • "QUANTITY" - Desired value in which the number of products are being listed .

• Once a virtuemart content source is selected, its fields are available for mapping.
• To map a content field to an element's field, open the Content tab of an element. Each element field shows a Dynamic button on the right which opens a dropdown with a list of all available content fields.

• Select the content field to map it to the element's field. For example, you can map the title and image to the name and image fields of the selected virtuemart product category .

• To sort VM product grid list from custom category to work as per setting of "Default product sort order" in virtuemart, set "group by -> None" in advanced tab.

• Once finished all the settings for the element , Click "Save layout" and "Close" the website builder.

Custom Product :

• Open "YOOtheme" website builder inside the Joomla admin and edit the page you want to add the elements with simple custom product using dynamic content.
• Select the preferred builder elements from Yootheme PRO Website Builder elements list with the row settings as Halves.

• Add the elements to the section here we used "Image","Heading","Text","HTML" elements.

• Click "Advanced" menu in the image element and then select the option "Custom Product" from "DYNAMIC CONTENT" and select the product you want to show from "Select Product" or you can also search for your preffered product by name.

• Once a virtuemart content source is selected, its fields are available for mapping.
• To map a content field to an element's field, open the Content tab of an element. Each element field shows a Dynamic button on the right which opens a dropdown with a list of all available content fields.

• Select the content field to map it to the element's field. For example, you can map the image field to the selected virtuemart product image , image alt field to the selected virtuemart product image alt and link field to the selected virtuemart product link.

• Once finished all the settings for the element , Click "Save layout" and "Close" the website builder.

• Repeat the same "Advanced" menu settings described above for Heading element.

• Select the content field to map it to the element's field. For example, you can map the content field to the selected virtuemart product name , and link field to the selected virtuemart product link.

• Repeat the same "Advanced" menu settings described above for Text element.

• Select the content field to map it to the element's field. For example, you can map the content field to the selected virtuemart product short description .

• Repeat the same "Advanced" menu settings described above for HTML element.

• Select the content field to map it to the element's field. For example, you can map the content field to the selected virtuemart product add-to-cart.

How to use In-built templates for virtuemart layouts:

VirtueMart Product Details Layout

• Open "YOOtheme" website builder inside the Joomla admin and open product details page in-built layout template was applied to the page with builder elements using dynamic content of the virtuemart product.

• Click on the Yootheme PRO Website "Builder" and then click "Open Templates".

• From the listed templates, click "Builder" of the product details template layout.

• Here you found the predefined virtuemart product details template layout using yootheme elements with virtuemart dynamic content sources.

• Click on the image element and click "Advanced" menu in the element, then the option "VM Product details" was selected from "DYNAMIC CONTENT".

• Once a virtuemart dynamic content source is selected, its fields are available for mapping.
• To map a content field to an element's field, open the Content tab of an element. Each element field shows a Dynamic button on the right which opens a dropdown with a list of all available content fields.
• Select the content field to map it to the element's field. For example, you can map the image field to the selected virtuemart product image.

• In Heading element, select the content field to map it to the element's field. For example, you can map the content field to the selected virtuemart product price (html) and click the edit icon of the field to change the options of which price to be displayed as per your requirements.

• If you want to hide any of the price value with empty or zero value, you can use "Hide price if empty" in any of the price dynamic fields.

• Repeat the same and check the settings for other elements used in template.

Child Products table

Using this feature you can list all the child products in parent product details page and effective way to list multiple products in a single page.

Add child products dynamic content source:

• Open "YOOtheme" website builder inside the Joomla admin and go to the product details page of any virtuemart product in your site.

• Click on the Yootheme PRO Website "Builder" and then click "Open Templates".

• From the listed templates, click "Builder" of the product details template layout.

• Here you found the predefined virtuemart product details template layout using yootheme elements with virtuemart dynamic content sources.

• Then click "Add element" on the builder under which element you want to place "Child Products" table.

• Select "Text" element on the builder and add it into the product details page .

• Click on the "Text" element to configure for Child Products.

• Click "Advanced" menu and then select the option "VM Product Details" from "DYNAMIC CONTENT".

• Once a virtuemart content source is selected, its fields are available for mapping.
• Each element field shows a Dynamic button on the right which opens a dropdown with a list of all available content fields. Select "Child Products" field to content field.

• click the edit icon of the field to change the options of child products table to be displayed as per your requirements.

• Once finished all the settings for the element , Click "Save layout" and "Close" the website builder.

Custom Badges for VM Products

Product badges, are an effective way to highlight products in your VM store. You can apply a product badge to best selling products by an image with some design flair to make the badge stand out.

Add VM Custom field for badges:

• From the main joomla menu or extensions menu, click “Virtuemart → Custom Fields”

• Create a new custom field for badges for VM product with all the below settings in the screenshot and must set the layout position as “badge_top_right”, "Searchable" option as "Yes"

Add the custom fields created to the virtuemart products

• Click “Extensions -> Virtuemart -> Products” in the admin menu.
• Click the name of a product or create a new product.
• Click the Custom Fields tab.
• Select and add the newly created field for badges from the dropdown list.

• Select the image from the list of VM media files in which you want to use as a badge.

• Click "Save&Close" to save the changes to the specified product.

• Open "YOOtheme" website builder inside the Joomla admin and go to the product details page of that product.
• In product details page template, use text element to integrate image with badge instead of default image element used.

All done now the selected badge image was applied to the product.

• In category view, must assign "Image with Badges" dynamic content in Badge field under VM Grid element and it will not work with "Image" field.

Add Ask a question button

Using this feature you can create a link or button that opens in a new popup or new window and allows customers to send a question to the vendor about the related virtuemart product.

• Open "YOOtheme" website builder inside the Joomla admin and go to the product details page of any virtuemart product in your site.

• Click on the Yootheme PRO Website "Builder" and then click "Open Templates".

• From the listed templates, click "Builder" of the product details template layout.

• Here you found the predefined virtuemart product details template layout using yootheme elements with virtuemart dynamic content sources.

• Then click "Add element" on the builder under which element you want to place "Ask a question about product" link or button.

• Select "Button" element on the builder and add it into the product details page .

• Click on the "Button" element to configure for the ask question link.

• Then click "ADD ITEM" to add the new item to the element.

• Click "Advanced" menu in the new item and then select the option "VM Product Details" from "DYNAMIC CONTENT".

• Once a virtuemart content source is selected, its fields are available for mapping.
• To map a content field to an element's field, open the Content tab of an element. Each element field shows a Dynamic button on the right which opens a dropdown with a list of all available content fields.

• Enter the content field with the desired text to be shown with the link and title of the button. For ex: "Ask question about a product". Dynamic source is not recommended for content field

• You can map the following fields to the recommended corresponding dynamic source .
• "Link" -> "Ask Question Link"
• "Link Title" -> "Name"
• "Link Target" -> "Modal"
• "Lightbox Width" -> "700"
• "Lightbox Height" -> "760"
• "Icon" -> "question"
• "Icon Alignment" -> "Left"
• "Style" -> "Primary" .

• Once finished all the settings for the element , Click "Save layout" and "Close" the website builder.

Adding Virtuemart custom fields to product details template

This document gives you the basic knowledge of configuring and use the custom fields in product details template.

• Initially create the custom fields in virtuemart:
• Go to "Components -> Virtuemart -> Custom Fields" and press New.
• Fill all the required fields as per your requirements.
• Click "Save&Close" to save the settings.

• Assign Custom Fields to the virtuemart product
• After creating the custom field lets go to assign it to your prefrred products.
• Select a product and go to the Custom Fields Tab.
• Then from the Custom Field Type list select the custom field you have created .

• Then open "YOOtheme" website builder inside the Joomla admin and go to the product details template of the product in which you want to add the corresponding custom fields.

• Then open "YOOtheme" website builder inside the Joomla admin and go to the product details template of the product in which you want to add the corresponding custom fields.

• Then add the text element from the builder and then go to "Advanced" menu in the element. Set the dynamic content settings as per below

• To map a content field to an element's field, open the Content tab of an element. Each element field shows a Dynamic button on the right which opens a dropdown with a list of all available content fields.
• Select the newly created custom field from the list.

• In category view, must set the Cart Attribute as "Yes" and layout position as "vmuikit_category" for custom fields to work properly.

• Click "Save Layout" and repeat the same for other custom fields in the product.

Add Product Ratings & Reviews

Using this feature you can create a virtuemart product rating and review layout in product details view.

• Open "YOOtheme" website builder inside the Joomla admin and go to the product details page of any virtuemart product in your site.

• Click on the Yootheme PRO Website "Builder" and then click "Open Templates".

• From the listed templates, click "Builder" of the product details template layout.

• Here you found the predefined virtuemart product details template layout using yootheme elements with virtuemart dynamic content sources.

• Then click "Add element" on the builder under which element you want to place "product rating and review" layout.

• Select "Text" element on the builder and add it into the product details page .

• Click on the "Text" element to configure .

• Click "Advanced" menu in the new item and then select the option "VM Product Details" from "DYNAMIC CONTENT".

• Once a virtuemart content source is selected, its fields are available for mapping.
• To map a content field to an element's field, open the Content tab of an element. Each element field shows a Dynamic button on the right which opens a dropdown with a list of all available content fields.

• Select the content field with the desired dynamic source "Product Reviews System".

• Once finished all the settings for the element , Click "Save layout" and "Close" the website builder.

Add Related Products

Using this feature you can create a grid which displays the related virtuemart products.

• Initially create the custom fields in virtuemart:
• Go to "Components -> Virtuemart -> Custom Fields" and press New.
• Fill all the required fields as per your below screenshot.
• Click "Save&Close" to save the settings.

• After creating the custom field for "Related Products", let's go to your preferred product .
• Select a prefferred product and go to the Custom Fields Tab.
• Then from the "Related Products", search for related products from the text box and assigned.

• Open "YOOtheme" website builder inside the Joomla admin and go to the product details page of that product in which related products are added.

• Click on the Yootheme PRO Website "Builder" and then click "Open Templates".

• From the listed templates, click "Builder" of the product details template layout.

• Here you found the predefined virtuemart product details template layout using yootheme elements with virtuemart dynamic content sources.

• Then click "Add element" on the builder under which element you want to place "Related products" .

• Select "Grid" element on the builder and add it into the product details page .

• Click on the "Grid" element to configure new item.

• Then click "ADD ITEM" to add the new item to the element.

• Click "Advanced" menu in the new item, then select the option "VM Product Details" from "DYNAMIC CONTENT" and "VM Related Products" from "MULTIPLE ITEMS SOURCE".

• Once a virtuemart content source is selected, its fields are available for mapping.
• To map a content field to an element's field, open the Content tab of an element. Each element field shows a Dynamic button on the right which opens a dropdown with a list of all available content fields.

• Once finished all the settings for the element , Click "Save layout" and "Close" the website builder.

Add Previous & Next Product link

Using this feature you can create a previous or next product link in the product details page.

• Open "YOOtheme" website builder inside the Joomla admin and open the product details page of any product.

• Click on the Yootheme PRO Website "Builder" and then click "Open Templates".

• From the listed templates, click "Builder" of the product details template layout.

• Here you found the predefined virtuemart product details template layout using yootheme elements with virtuemart dynamic content sources.

• Then click "Add element" on the builder in which element you want to add "Previous or Next Product" links .

• Select "Heading" element on the builder and add it into the product details page .

• Add the content of the new element as per your choice.

• Click "Advanced" menu in the new item, then select the option "VM Product Details" from "DYNAMIC CONTENT" .

• Once a virtuemart content source is selected, its fields are available for mapping.
• To map a content field to an element's field, open the Content tab of an element. Each element field shows a Dynamic button on the right which opens a dropdown with a list of all available content fields.

• Same way you can add more elements as per your requirements.

• Once finished all the settings for the element , Click "Save layout" and "Close" the website builder.

VirtueMart Category Layout

To use the virtuemart category layout you create the page in Main Menu and link the category layout as below .

• Open "YOOtheme" website builder inside the Joomla admin and go to the page newly created and the in-built layout template was applied to the page with builder elements using dynamic content of the virtuemart product.

• Click on the Yootheme PRO Website "Builder" and then click "Open Templates".

• From the listed templates, click "Builder" of the category template layout.

• Predefined template from VMUIKITX package
• Here you found the predefined virtuemart category template layout using yootheme elements with virtuemart dynamic content sources.

• Click on the grid element and click "VM Sub Categories" item then go to "Advanced" menu in the element.
• Select the option "VM Category" from "DYNAMIC CONTENT" dropdown list.
• Again select the option "VM Sub Categories" from "MULTIPLE ITEMS SOURCE" dropdown list.

• Once a virtuemart dynamic content source is selected, its fields are available for mapping.
• To map a content field to an element's field, open the Content tab of an element. Each element field shows a Dynamic button on the right which opens a dropdown with a list of all available content fields.
• Select the content field to map it to the element's field. For example, you can map the title field to the virtuemart category title.

• Repeat the same and check the settings for other elements used in template.

VirtueMart Child Categories

• To use the virtuemart sub or child categories you create the page in Main Menu and configure the category layout as below .

• Then continue with the above category layout builder configurations with this new menu.
• After all settings you will get the list of subcategories in the active category.

VM Category Module

• Custom template which supports VM category module and corresponding products grid.
• Here you designed virtuemart category template layout using yootheme elements Module and grid with virtuemart dynamic content sources.

Select VM category module from the list.

• Click on the grid element and add item then go to "Advanced" menu in the element.
• Select the option "VM Category Products" from "DYNAMIC CONTENT" dropdown list.
• Once a virtuemart dynamic content source is selected, its fields are available for mapping.
• To map a content field to an element's field, open the Content tab of an element. Each element field shows a Dynamic button on the right which opens a dropdown with a list of all available content fields.
• Select the content field to map it to the element's field. For example, you can map the title field to the "Name" of the product.

VM Category Sorting Filter

• Click on the HTML element and then go to "Advanced" menu in the element.
• Select the option "VM Category" from "DYNAMIC CONTENT" dropdown list.
• Then select the option "VM Category Sorting Filter" from "MULTIPLE ITEMS SOURCE" dropdown list.

• Once a virtuemart dynamic content source is selected, its fields are available for mapping.
• To map a content field click on a Dynamic button on the right which opens a dropdown with a list of available content fields. Select the content field "Category Filter" from the list .

VM Category Products Prices Display

• Using VM Grid element in category layout you can display various prices during offer periods.
• Select the element "VM Grid" in VMuikitX Category template.
• Then select the option "VM Category Products" from Items and then set the displayed prices with styles as per your requirements.

VirtueMart Manufacturer Default Layout

To use the virtuemart manufacturer default layout you create the page in Main Menu and link the manufacturer default layout as below in Menu Item Type.

• Open "YOOtheme" website builder inside the Joomla admin and go to the page newly created and the in-built layout template was applied to the page with builder elements using dynamic content of the virtuemart product.

• Click on the Yootheme PRO Website "Builder" and then click "Open Templates".

• From the listed templates, click "Builder" of the VM Manufacturer template layout.

• Here you found the predefined virtuemart category template layout using yootheme elements with virtuemart dynamic content sources.

• Click on the grid element and click "VM Manufacturer" item then go to "Advanced" menu in the element.
• Select the option "VM Manufacturer" from "DYNAMIC CONTENT" dropdown list.

• Once a virtuemart dynamic content source is selected, its fields are available for mapping.
• To map a content field to an element's field, open the Content tab of an element. Each element field shows a Dynamic button on the right which opens a dropdown with a list of all available content fields.
• Select the content field to map it to the element's field. For example, you can map the title field to the virtuemart manufacturer title.

VM Order Thank You Page Layout

To use the virtuemart order thank you page layout, first you will create the new menu item in Main Menu and link the "Order Done" layout as below in Menu Item Type.

• Open "YOOtheme" website builder inside the Joomla admin and then go to the newly created menu item page .

• Click "Templates" and then "New Template", give the name to the new template. Finally select "VM Order Thank You Page" as "Page".
• Click "Save" to add the new template.

• From the listed templates, click "Builder" of the VM Order Thank You Page.

• Here you build a new layout for VM order thanks page using yootheme elements with virtuemart dynamic content sources.
• Add any element and then go to "Advanced" menu in the element.
• Select the option "VM Thank You Page" from "DYNAMIC CONTENT" dropdown list.

• Once a virtuemart dynamic content source is selected, its fields are available for mapping.
• To map a content field to an element's field, open the Content tab of an element. Each element field shows a Dynamic button on the right which opens a dropdown with a list of all available content fields.
• Select the content field to map it to the element's field.

• You can create the VM thanks page layout using different content fields as per your requirements.

• You can unpublished the VM order thanks page menu item or make it as hidden, once finished all the page layout settings..

VM Product Fields

All fields listed below are used to render different VM product content to the product view.

Field	Description
Name	Field which renders the selected virtuemart product name, used to identify the product.
Short Description	Field which renders a short description of the selected virtuemart product.
Description	Field which renders a long description of the selected virtuemart product in more detail.
Product SKU	Field renders a short code identifier - (Stock Keeping Unit) of the product
Price (integer)	Price (Integer) displays the different types of prices assigned to the product in simple integer format.
Price (html)	Price (html) displays the different types of prices assigned to the product with separator and currency symbol.

Image	The first or main image on the product is used by this field which will be mapped with image element.
Image Meta	Field which renders the image alt-text of the main image in which the viewer or user has to hear the describe of this image.
Ask a question	Field which gives you the "Ask a Question" button option allows the users to raise a question prior to purchase of a product using a modal form. Recommended to use with a "Button" element and set open target option as "Modal"
Product Link	Product Link connects customers to the corresponding product details page.
Add to Cart	Field which includes the product quantity increament options with add to cart button, simply adds the product to the cart.
Stock Level	Field which renders the product stock availability and displayed in a graphical view.
Stock Level (Integer)	Field which renders the product stock availability and output as a simple integer .
GTIN	Field which renders the Global Trade Item Number assigned with the product. An international number e.g. ISBN, EAN, UPC .
Product Review	Product review field is used to display the customer reviews given to the product after they have purchased and used. Other consumers can use this when making a purchase decision.
Weight	Renders the weight of the product if any value was defined already to explore the weight of the product . And also often used in shipping rate calculations.
Height	Renders the height measurement of the product if it was defined during the product creation and used to expose the height dimension to the buyer .
Length	Renders the length measurement of the product if it was defined during the product creation.
Width	Renders the width measurement of the product if it was defined during the product creation.

VM Category Fields

All fields listed below are used to render different VM category content to the categories listing view.

Field	Description
Title	Field which renders the virtuemart categories name, used to identify the category.
Description	Field which renders a description of the virtuemart category .
Image	The image on the product category is used by this field which will be mapped with image field.
Image Meta	Field which renders the image alt-text of the image in which the viewer or user has to hear the describe of this image.
Link	Field which link to the corresponding product listing page of the category.

VM Manufacturer Fields

All fields listed below are used to render virtuemart manufacturers content listing in grid view.

Field	Description
Title	Field which renders the virtuemart manufacturers name, used to identify the manufacturer.
Image	The image on the product category is used by this field which will be mapped with image field.
Image Meta	Field which renders the image alt-text of the image in which the viewer or user has to hear the describe of this image.
Manufacturer URL	Field which renders a given manufacturers official URL in the virtuemart .
Link	Field which link to the corresponding product listing page of the category.

Custom Elements

VMuikitX comes with additional custom elements for YOOtheme Pro Builder. These new elements makes it easy to add VirtueMart 'Add to cart' buttons, products and categories directly in your YOOtheme Pro layout. This lets to easily create awesome custom product pages with Add to cart buttons etc.

• VMuikitX YOOtheme Pro Builder Custom Elements are now installed along with the VMuikitX package installation smartly and added to the builder for instant usage without any additional installations.

VM AddtoCart Custom Element :

• Now open "YOOtheme" website builder inside the Joomla admin and edit the page you want to add the "VM AddtoCart" custom element.
• Then you can easily add listed VMUIKITX custom builder element VM AddtoCart from the list of Vmuikit X custom elements. .

• You can customise the settings for the element under "Content" tab in which how it will be displayed in your website.

• Once finished all the settings for the element , Click "Save layout" and "Close" the website builder.

VM Category Custom Element :

• Open your site "YOOtheme" website builder inside the Joomla admin and edit the page section in which you want to add the "VM Category" custom element.
• Then you can easily add listed VMUIKITX custom builder element VM Category from the list of Vmuikit X custom elements.

• You can add the VM Category and customise the settings for the element under "Content" tab in which how it will be displayed in your website.

• Once finished all the settings for the element , Click "Save layout" and "Close" the website builder.

VM Category Grid Custom Element

• Open your site "YOOtheme website builder" inside the Joomla admin and edit the page section in which you want to add the "VM Category Grid" custom element.
• Then you can easily add VM Category Grid element from the list of Vmuikit X custom elements.

• You can add the VM Categories list from the "Add Item" option and select one from the list of your VM store Categories.

• Repeat the same for adding more categories to the grid item.

• You can change the settings for the element under "Settings" tab in which how it will be displayed in your website.

• Once finished all the settings for the element , Click "Save layout" and "Close" the website builder.

VM Product Custom Element :

• Open your site "YOOtheme" website builder inside the Joomla admin and edit the page section in which you want to add the "VM Product" custom element.
• Then you can easily add listed VMUIKITX custom builder element VM Product from the list of Vmuikit X custom elements.

• You can add the VM Product and customise the settings for the element under "Content" tab in which how the selected product will be displayed in your website.

• Once finished all the settings for the element , Click "Save layout" and "Close" the website builder.

VM Product Grid Custom Element :

• Open your site "YOOtheme" website builder inside the Joomla admin and edit the page section in which you want to add the "VM Product" custom element.
• Then you can easily add listed VMUIKITX custom builder element VM Product Grid from the list of Vmuikit X custom elements.

• Now you can add the VM Products list from the "Add Item" option and select one from the list of your VM store product.

• Repeat the same for adding more products to the grid item.

• You can change the settings for the element under "Settings" tab in which how it will be displayed in your website.

• Once finished all the settings for the element , Click "Save layout" and "Close" the website builder.

VM Grid Custom Element :

• Open your site "YOOtheme" website builder inside the Joomla admin and edit the page section in which you want to add the "VM Grid" custom element.
• Then you can easily add listed VMUIKITX custom builder element VM Grid from the list of Vmuikit X custom elements.

• Now you can add a new item from the "Add Item" option .

• Click the "Advanced" option in the newly added item and select the "dynamic content" type for your grid element. Here we used "Virtuemart->Custom Category"

• Also you can set the various settings which supports the selected "dynamic content" source. change the settings for the element under "Settings" tab in which how it will be displayed in your website.

• To map various dynamic content source fields to an element's field, open the Content tab of an element. Each element field shows a Dynamic button on the right which opens a dropdown with a list of all available content fields.

• Select the content field to map it to the element's field. For example, you can map the title to the name of the product in the selected category , image field to the product images and so on.

• Apart from the default grid element fields "VM Grid" element has some more additional fields for your layout design conveniences. You can also mapped for the desired layout.

• "Link to panel" grid settings not worked if "Show Add to cart" enabled.

Add Custom Field Text content Badge to the product

• Create a new VM custom field with type text area as per the below settings and make sure "Searchable" option is enabled.

• Now assign the newly created custom field to the product you want to add

• Once assigned you can map the custom field to "Badge" as a dynamic content source.

• Once finished all the settings for the element, Click "Save layout" and "Close" the website builder.

Modules :

Virtuemart Shopping Cart:

VMuikit X modules comes with a look of UIKIT on various VM modules.

• To add uikit shopping cart button, create a new module of type "Virtuemart Shopping Cart" in module manager.
• Open "Extensions->Modules" in your joomla backend.

• Create a new module of type "Virtuemart Shopping Cart"
• Open "Extensions->Modules" in your joomla backend.

• Now assign the position for the new "Virtuemart Shopping Cart" module.

• Assign the newly created module to the site pages.

Component :

VMuikit X Component comes with the simple configuration supporting for auto joomla update settings, enable template override settings, VM modules settings and link for VMuikit One Page Checkout Settings.

• Fill the “Download ID” you get along with the product order in the text box at the top of the component to enable the joomla auto update of the package when we release upcoming versions.

• Click “Save” to check the download id in the server, once checked and activated then sit and relax with all the future updates.

If you want to customize the plugin files which also supports new versions then you need to do overrides of the files by adding the files in /html/ in your template path. This way you can update VMuikit X without your custom code being touched.

• To take effect your custom template override changes you must enable “Override Template HTML”.

• If you use the virtuemart category and shopping cart modules then these settings are helpful to design its layout and alignment things in a effective ways.

• From the virtuemart shopping cart module the shopper will get the current cart list details by gentle click on the cart button.

In VMuikit X, you can go to the VMuikit One Page Checkout Settings right away from the component for easy access of the cart settings. And also you can get multiple quick links to “Renew Subscription”,”Documentation and FAQ”, “Support Tickets” and “Video Tutorials”.

One Page Checkout Plugin :

From the VMuikit X component you can access the below One Page Checkout Settings page from the link or from the main joomla menu click “Extensions -> Plugins”. Use the Search or Filter feature to find the installed "VMuikit One Page Checkout", and then click on the plugin.

• VMuikit X installation by default enables VMuikit One Page Checkout Plugin.
• If you want to use any other plugin for cart page then please disable our VMuikit One Page Checkout plugin. 

• VMuikit One Page Checkout plugin has various configuration options to meet your exact need of the cart page. Proceed to the configuration one by one and click "Save&Close" to save the settings.

• At the front end, visit the cart page and all things displayed on one page for checkout. Customers fill full information with Bill to address, Ship to address, shipping method, Payment method and coupons(if any). Finish with one click on ''Confirm Purchase'' button.

Shortcode Plugin :

From the VMuikit shortcode plugin you can implement "Add to cart" buttons within other builder elements like Grid, Text, Overlays etc. Full flexibility to create the good shopping experience for the shopper.

• From the main joomla menu click “Extensions -> Plugins”. Use the Search or Filter feature to find the installed "VMuikit shortcode plugin", and then click on the plugin. And check for the plugin is enabled.

• Now open "YOOtheme" website builder inside the Joomla admin and edit the page you want to add the VMUIKIT shortcode add-to-cart.
• Then you can easily add any listed custom builder elements which supports content editor in Yootheme PRO Website Builder. Here we take text element.

• You can use the shortcode add-to-cart in two ways: Basic or Advanced.
• In basic usage you simply use as {vmuikit_add_to_cart 1}, where "vmuikit_add_to_cart" - Keyword and "1" - Virtuemart product ID
• In advanced usage you additionally use params as {vmuikit_add_to_cart 1 size="small" style="danger" quantity="1" text="Buy"}, where
  • "vmuikit_add_to_cart" - Keyword
  • "1" - Virtuemart product ID
  • "size" - Add to cart button size values are "large,small"
  • "style" - Add to cart button style to be displayed values are "primary, secondary, danger"
  • "quantity" - Default values for quantity box
  • "text" - Text to be displayed on Add to cart button

• Once finished all the settings for the element , Click "Save layout" and "Close" the website builder.

Override VMuikit X virtuemart layout files

If you want to upgrade VMuikit X in the future when we release new versions without losing your custom changes you need to do overrides for the custom files .

• Enable "Override Template HTML" param in "Components -> VMuikit X"
• To override the vmuikit x layouts, check your template folders e.g. if your default template name is “yootheme ”, then check “ /templates/yootheme ” and assure that there is a folder called “ /html ”. If folder “ /html ” is not exist in your default template folder (templates/yootheme ) create a new “ /html ” folder.

 

• Now you are ready for template override. Create a new folder in your default template"/html" folder with the component name “com_virtuemart”.

 

• Create a new folder for which you want to override from the vmuikit x override plugin original path “[joomla-root/webroot]\plugins\system\vmuikitx_override\html_override\com_virtuemart ” for example “productdetails” here. Now you can ready to override the layout file.

 

• Copy the layout file you want to override from the original path “[joomla-root/webroot]\plugins\system\vmuikitx_override\html_override\com_virtuemart\ productdetails ” to the override folder path in your default template "[joomla-root/webroot]\templates\yootheme\html\com_virtuemart\productdetails". Now you can edit this override layout file for all your customizations.

 

Override VMuikit X virtuemart module layout files

If you want to upgrade VMuikit X in the future when we release new versions without losing your custom changes you need to do overrides for all the custom code changes in layout files .

• Enable "Override Template HTML" param in "Components -> VMuikit X"
• To override the vmuikit x layouts, check your template folders e.g. if your default template name is “yootheme ”, then check “ /templates/yootheme ” and assure that there is a folder called “ /html ”. If folder “ /html ” is not exist in your default template folder (templates/yootheme ) create a new “ /html ” folder.

 

• Now you are ready for template override.
• Just copy the tmpl layout file from "[joomla-root/webroot]\plugins\system\vmuikitx_override\html_override\mod_virtuemart_cart\default.php" in which you need customization, for example virtuemart cart module layout file "default.php" here

• To your default template override folder as "[joomla-root/webroot]\templates\yootheme\html\mod_virtuemart_cart\default.php". Now you can edit this override file for all your custom changes .

 

Note: Follow the same override procedure for all other virtuemart module layout files in "mod_virtuemart_category","mod_virtuemart_currencies","mod_virtuemart_manufacturer"."mod_virtuemart_product" and "mod_virtuemart_search".

 

Override VMuikit X OPC layouts

To override the VMuikit X onepage layout, check your default template folder for e.g. if your template name is “yootheme ”, then check “ /templates/yootheme ” and assure that there is a folder called “ /html ”. If folder “ /html ” is not exist in your templates folder (templates/yootheme ) create a new “ /html ” folder.

 

• Create a new folder with the plugin name “plg_content_vmuikitx_onepage” in your default template folder for eg: "yootheme" here "[joomla-root/webroot]\templates\yootheme\html\" folder.

• Copy the layout file you want to override from the original path “[joomla-root/webroot]\plugins\system\vmuikitx_onepage\cart\tmpl” to the override "[joomla-root/webroot]\templates\yootheme\html\plg_content_vmuikitx_onepage" folder. Now you can edit the override layout file you want.

Override VM dynamic content fields in VMuikit X

To override the VM dynamic content fields in VMuikit X templates, you have to check whether your default template folder has override folder. For e.g. if your template name is “yootheme ”, then check “ /templates/yootheme ” and assure that there is a folder called “ /html ”. If folder “ /html ” is not exist in your templates folder (templates/yootheme ) create a new “ /html ” folder.

 

• Create a new folder with the plugin name “plg_system_vmuikitx_override” in your default template folder for eg: "yootheme" here "[joomla-root/webroot]\templates\yootheme\html\" folder.

• Copy the VM dynamic content fields you want to override from the original path “[joomla-root/webroot]\plugins\system\vmuikitx_override\dynamic\templates” to the override path"[joomla-root/webroot]\templates\yootheme\html\plg_system_vmuikitx_override\dynamic" folder. Now you can edit the override file as per your requirements without affecting your future updates.

VMuikit X onepage checkout language issues recommended fixes

Fix 1:

• For VMuikitX core language strings we use the Virtuemart language files only . So just install your required language from: http://virtuemart.net/community/translations/virtuemart . If still issue persist try the next fix.

Fix 2:

• Language file for One Page Checkout is in the path [webroot]/administrator/language. Here you find the english file as [webroot]/administrator/language/en-GB/en-GB.plg_system_vmuikitx_onepage.ini and you need to create this for your language as new folder and rename the file. (for example “/administrator/language/de-DE/de-DE.plg_system_vmuikitx_onepage.ini” for german).

VMuikit X layout issues recommended fixes

Issue 1:

In the product details view, the add-to-cart quantity is not visible.

Issue 2:

When adding products to the shopping cart in Safari browser, products list part was overlapped by country & state part in one page checkout.

Fix 1:

• For layout issues please check that the virtuemart default css overrides the OPC css .
• You can disable the VM default css "Virtuemart->Configuration->Templates-> Core Css Styles & Javascripts (only for experts)-> Use the VirtueMart CSS".

Issue 1:

In the "New User Registration" page the virtuemart default css overrides our plugin css.

Fix 1:

• You can disable the VM default css "Virtuemart->Configuration->Templates-> Core Css Styles & Javascripts (only for experts)-> Use the script ajax Countries / Regions"
• You can disable the VM default css "Virtuemart->Configuration->Templates-> Core Css Styles & Javascripts (only for experts)-> Use jQuery chosen for dropdowns in FE"

Click below for list of video tutorials

VMuikit X Video Tutorials