Support & Documentation

If you have questions or need help to setup any of our products please start a support ticket on our support page. All our products come with an active subscription plan that includes our support.

VMuikit X

Article Index

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.

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.
    • "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 .

  • 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".

  • 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

    To begin using the virtuemart product details layout you have to create the page in Main Menu and link the product details 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 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.

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

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”

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.
All done now the selected badge image was applied to the product.


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.

  • 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.

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 Product Fields

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

FieldDescription
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.

FieldDescription
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.

FieldDescription
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.

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


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.

 We are a recommended expert in building extensions & websites with/for YOOtheme  


Joomla Extensions

JoomlaPro.com is not affiliated with or endorsed by the Joomla Project or Open Source Matters. The Joomla name and logo are used under a limited license granted by Open Source Matters the trademark holder in the United States and other countries.


© Copyright 2011-2020 - JoomlaPro.com - All Rights Reserved | JoomlaPro.com is part of
 WNmedia.se, Joomlaproffs.se and Webbproffs.se