When you purchase vDesigner Plugin for Virtuemart from our site, you will receive an email contain a link to download the extension in a zip file called plg_vmcustom_vdesigner.zip for Joomla 3.x.
Notice: Before we begin, please ensure that you have met the Minimum System Requirement for installing vDesigner on your site.
# you must have PHP: [upload_max_filesize => min 25MB] and PHP: [post_max_size => min 25MB] in you php.ini file on your Server.
Follow the instructions below and you will be able to install the extension easily
Install the Plugin
VDesigner Plugin for Virtuemart is a Joomla Plugin and like any other Joomla Plugin, it can be installed within two clicks! The installation process is simple:
- Login to back-end of your site.
- Access to Extensions => Extension Manager Menu item.
- Browse for the file plg_vmcustom_vdesigner.zip.
- Click on “Upload and Install” button
- You will get an installation successful message and the links to our support forum and other social media links.
- In case you need to get in contact with us. We will always be responsive within a short span of time.
- Once Package in installed you can reach it Plugin section and enabled this Plugin.
Create your Custom field for vDesigner in Virtuemart
- Go to the Plugin Manager and Enabled the Plugin.
- Go to Components > Virtuemart > Custom Fields and press New. Then as Custom Field Type select “Plug-ins”. Fill in the rest fields till the end of the page.
- Once you created custom field then apply Save.
Assign Custom field for vDesigner to the products
- After the creation of the custom field for vDesigner let’s go to assign it to a product.
- Select a product and go to the Custom Fields Tab.
- Then from the Custom Field Type list select the custom field i.e. vDesigner for Virtuemart, you have created previously.
- Only for the First Time of using vDesinger for Virtuemart plugin, you will have to verify your subscription by your login credentials listed on www.wdmtech.com site.
- After the verification of your subscription, you will see the vDesigner Configuration Section.
- vDesigner configuration settings are categorised in various section. you can configure the vDesigner for Virtuemart Plugin as per your need.
vDesigner jQuery Options
| Property | Description |
|---|---|
| Load jQuery | Choose “YES” only if jQuery file is not being loaded by Joomla CMS or some other extension otherwise keep set this option as “NO”. (it may give jQuery conflict error if jQuery file loaded twice on the page) |
| Load jQuery-UI | Choose “YES” to Load jQuery-UI Files to make jQuery UI operation (like sortable, draggable, resizable etc.) smoothly. |
vDesigner Main Options
| Property | Description |
|---|---|
| Allow to Design File on Product Detail. | Select “YES” if you want to show vDesigner on Product Detail Page and allow your customers to create/customize their own designs. |
| Allow to Upload Pre-Designed File. | Select “YES” if you want to allow your customers to Upload their Pre-Designed File along with Virtuemart Order. (supported formats: JPG, PNG, JPEG, GIF and PDF). |
| Pre-Designed File Size Limit. |
Please set the Pre-Designed File Size Limit to restrict oversized file being uploaded.
|
| Allow Design to send Later by Email. | Select “YES” if you want to allow your customers to send their Design File Later by Email. |
| Allow Customer to Update Design Later. | Select “YES” if you want to allow your customers to Update their Design Later in Order Section of Virtuemart in Frontend. After login in Joomla CMS, customer can find and update their order in My Orders Section. |
vDesigner Product Options
| Property | Description |
|---|---|
| Design Type |
Please choose a product from the given list to show on vDesigner Canvas (Available options: T-shirts, sweaters, hoodies, scoop tee, shorts, Safety Vest, hats, cards, buttons, business cards, mugs, phone cases, Glass, Photo Frame, Bottle, Mouse Pad, Cake, Shoe, Travel Bag etc.) Additionally, you can also generate Geometrical Shapes like Circular/Oval/Square/Rectangular shapes or any custom product design.
|
| Custom Design |
If you chose “Custom Design” then some additional fields will be appear. Set the custom design width and height according to your need. You can also set your custom design Background image (PNG) {relative path of image} and dimension of image should be equal to custom Design width and height. For e.g. Custom Design Width: 1200 (in px) Custom Design Height: 600 (in px) Custom Design Background (PNG): 1200 x 600 (in px)
|
| Allow to Resize Canvas Dimensions |
Enable it if you want to allow to Resize the vDesigner Canvas Dimensions. If this option set to “YES”, customer can resize the Canvas Dimensions by giving their custom width and height (in the Frontend). (this option will only display for Custom Design)
|
| Custom Rectangle/Square Shape |
If you chose “Custom Rectangle/Square Shape” then some additional fields will be appear. Set the custom design width and height whether to create a Rectangle Shape or Square Shape. For e.g. Custom Design Width: 1200 (in px) Custom Design Height: 600 (in px)
|
| Custom Oval Shape |
if you chose “Custom Oval Shape” then some additional fields will be appear. Set the custom design width and height as per your need. You can also set your custom width of Ellipse as well as custom Height of the Ellipse to generate Oval/Ellipse Shape using GD Library of PHP. For e.g. Custom Design Width: 1200 (in px) Custom Design Height: 600 (in px) Custom Design Ellipse Width: 800 (in px) Custom Design Ellipse Height: 500 (in px)
|
| Custom Circle Shape |
if you chose “Custom Circle Shape” then some additional fields will be appear. Set the custom design width and height as per your need. You can also set custom Diameter of the Circle to generate Circle Shape using GD Library of PHP. For e.g. Custom Design Width: 1200 (in px) Custom Design Height: 600 (in px) Custom Design Circle Diameter: 600 (in px)
|
| Pick Colour for Custom Shape |
Choose the colour from colour picker to colorize the generated custom shapes. (this option will only display for custom Shapes)
|
vDesigner Canvas Actions Options
| Property | Description |
|---|---|
| Use Custom Colour Palettes | Please choose YES if you want to show Custom Colour Palettes instead of colour picker. You need to enter comma separated hex-colour values in the Custom Colour Palettes field in case you chose YES. |
| Custom Colour Palettes (comma separated hex-colour values) |
Please enter comma separated hex-colour values to show Custom Colour Palettes on vDesigner Canvas (e.g. #b33939, #2ecc71)
|
| Show Rear View of Product (if any) | Select “YES” if you want to allow your customers to design Rear View (another view or Back Side) of Product if it exist (e.g. Shirt, Cake etc.) |
| Allow to Add Custom Text on Canvas | Select “YES” if you want to allow your customers to Add Custom Text on vDesigner Canvas. |
| Allow to Add Custom Image on Canvas | Select “YES” if you want to allow your customers to Add/Upload Custom Image on vDesigner Canvas. |
| Allow to Choose from predefined Icons on Canvas | Select “YES” if you want to allow your customers to Choose from Icons/clip-arts designs (only PNG file format) on vDesigner Canvas. |
| Allow to Manage Layers on Canvas | Select “YES” if you want to allow your customers to Manage Layers on vDesigner Canvas |
| Allow to Save Design in Cart from Canvas | Select “YES” if you want to allow your customers to Save Design in Cart from vDesigner Canvas (File format supported: PNG, JPG and PDF). |
| Allow to Print Design from Canvas | Select “YES” if you want to allow your customers to Print Design from vDesigner Canvas. |
| Allow to Display Snap to set a custom Grid on Canvas | Select “YES” if you want to allow to your customers to Display Snap of a custom Grid on vDesigner Canvas |
| Allow to Preview the Design of Canvas | Select “YES” if you want to allow to your customers to Preview the Design of vDesigner Canvas |
| Allow to Display Custom Information on Canvas | Select “YES” if you want to allow to Display Custom Information for your customers on vDesigner Canvas. |
| Allow to View Design by Magnify Glass on Canvas | Select “YES” if you want to allow your customers to View Design by Magnify Glass on vDesigner Canvas. |
| Allow to Zoom the Design on canvas | Select “YES” if you want to allow your customers to Zoom the Design on vDesigner canvas |
| Allow to Reset the Canvas Elements | Select “YES” if you want to allow your customers to Reset the vDesigner Canvas Elements |
| Allow to add QR-Code in Design on Canvas | Select “YES” if you want to allow your customers to add QR-Code in Design on vDesigner Canvas. Additionally, you can generate a colourful QR-Code instead of Black and White. |
| Allow to Show Custom Ruler Bar on Canvas | Select “YES” if you want to allow your customers to Show Custom Ruler Bar on vDesigner Canvas |
| Allow to Redo Action on Canvas | Select “YES” if you want to allow a Redo Action on vDesigner Canvas |
| Allow to Undo Action on Canvas | Select “YES” if you want to allow an Undo Action on vDesigner Canvas |
| Show Image Filters for Custom Image on Canvas | Select “YES” if you want to allow your customers to apply Image Filters for Custom Image on vDesigner Canvas |
| Show Patterns for Custom Text on Canvas | Select “YES” if you want to allow your customers to apply Patterns for Custom Text on vDesigner Canvas |
vDesigner Design Icons Options
| Property | Description |
|---|---|
| Path to your Custom Icons Directory |
Please enter the relative path of your Icons/clip-arts or designs Folder to load on vDesigner Canvas. You can put the small size image or thumbnails in main folder and its larger image in “Large” folder. vDesigner will load larger image on canvas on click its thumbnail. If no large image found, thumbnail will be loaded on canvas. For e.g. Badges => thumbnails of clipart Badges/Large => large image of clipart |
| Select Design Folders | Please choose Design Folders from the list from which you want to show Icons/clip-arts or designs on vDesigner Canvas |
vDesigner Design Fonts Options
| Property | Description |
|---|---|
| Select Fonts |
Please choose Fonts from the list which you want to load on vDesigner Canvas initially. NOTE: To add your own custom font, you must upload your own custom fonts in "fonts" folder (i.e. path: plugins/vmcustom/vdesigner/fonts). |
Apply save button and go to frontend product detail page where you can find different options of vDesigner.
