VMuikit 5

VMuikit is a Joomla component that install a override theme for Virtuemart. The component also adds a lot of extra settings to customize your Virtuemart/webshop setup. All the layouts/overrides in VMuikit is based on the UIkit framework from YOOTheme (all YOOtheme templates are built in UIkit framework).

The UIkit framework gives endless of possibilities for web designers to customize the look and feel of the website/webshop.

The full potential is that with one of YOOthemes templates you can actually build so many different webshop/websites with completely different look and feel (design and user interface). Are you serious about web design you should really give YOOtheme templates a go. Check out their templates: http://yootheme.com/

How to install:

VMuikit 5.x supports YOOtheme PRO page builder / UIkit 3 templates and VMuikit 4.x supports YOOtheme Warp 7 / UIkit 2 templates.

• You install the vmuikit_package_x.x.x.zip in the Extension Manager (like you install any other extension for Joomla).
• This installation also installs all the override files to "plugins/system/vmuikit_override/html_override/" . However you can override these in the old fashion of adding same files in /html/ in you chosen template.
• This way you can update VMuikit without your custom code being touched.
• The installation also installs and enables the VMuikit One Page Checkout plugin and enables this by default.
• If you want to use other cart then please disable this plugin. 

Installation video tutorial

Recommended VM settings for vmuikit

• Open the Joomla administration 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.

• Then found the settings for “Pricing” tab .

• Finally marked the “Checkout” tab.

• Click “Save & Close” to save all the settings.

Custom changes in VMuikit override files

If you want to upgrade VMuikit in the future when we release new versions you need to do overrides of the files .

• Enable "Override Template HTML" param in "Components -> VMuikit"
• To override the vmuikit layouts, check your template folders 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.

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

• Create a new folder in which you want to override from the vmuikit override plugin “[joomla-root/webroot]\plugins\system\vmuikit_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\vmuikit_override\html_override\com_virtuemart\ productdetails ” to the override folder. Now you can edit the override layout file.

Installing VMuikit custom elements

VMuikit comes with extra elements in the 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 your easily create awesome custom product pages with Add to cart buttons etc.

• VMuikit YOOtheme Pro Builder Custom Elements are now installer plugins so its installed along with the VMuikit package installation smartly.

• From the main joomla menu click “Extensions -> Plugins”. Use the Search or Filter feature to find the installed VMUIKIT Custom Elements plugin, and then make sure the installed plugin is enabled.

Add VMUIKIT custom element:

• Now open "YOOtheme" website builder inside the Joomla admin and edit the page you want to add the installed VMUIKIT custom element.

• Then you can easily add listed VMUIKIT custom builder elements in Yootheme PRO Website Builder.

• You can customise 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.

Override vmuikit OPC layouts

To override the vmuikit onepage layout, check your template folders 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.

• Now you are ready for template override. Create a new folder in your template /html folder for the plugin name “plg_content_vmuikit_onepage”.

• Copy the layout file you want to override from the original plugin “/tmpl” folder.Now you can edit the override file.

Yootheme PRO 2.O update fixes

For yootheme pro 2.0 update , in the recent versions of VMUIKIT we removed few modules from the package so during direct update, old module folders remain stayed in your site installed package. If you found this "mod_menu" in plugin override path "/root/plugins/system/vmuikit_override/html_override/", then just rename "mod_menu" folder generally will fix the below error.

Thanks for watching :)