Dropbox with image picker - Simple T-Shirt maker

This is very simple plug-in for customizing products variants. It's useful if you have products with many color variants and you want to show image of it. Plug-in shows dropboxe for each variant and for each variant you can set image layer that is changing with selection.

So if we look one example - T-Shirt maker - plug-in sets background (different T-Shirts) and stickers. You need to add new customfield to product for each layer and type selections and image for it.

It's hard to explain with words, so please look at layout images and check DEMO page!

Plug-in works on Joomla 3.x with Virtuemart 3.x!

Install:

Install plugin with Extension Manager in Joomla and enable it in Plug-in Manager.

Then go to VirtueMart 3.x and configure plug-in in Custom Fields page. Choose New and then at Custom Field Type choose Plug-ins. Type Title and at Select a plug-in choose VM - Custom - Dropbox with Image picker. You can here input default settings.

Then go to product and go to Custom Fields tab. At Custom Fields Type choose plug-in which you created. Now you can type Title, Selections and choose if you want that plug-in is shown in two columns.

Example of Dropbox Selection field:

White;white.jpg#Black;black.jpg#Green;green.jpg#Purple;purple.jpg

Example with custom price:  None;0.png#Sticker 1;sticker1.png;+2#Sticker 2;sticker2.png;+4

Other settings:

Custom Dropbox title - Unlike Title in custom field section, which is shown in add to cart area as title, Custom title is shown in cart page.

Show in two columns - Show checkboxes in one or two columns.

Image path - This is path to images used in Dropbox Selection field and shown in fronend.

Class of original VM image class - By default this is .main-image, other templates may use different class. This setting is needed so that plug-in can know where to put new images.

Image child element - First element inside image class. Most time it's div.

Image height - Height of image. Can also be auto if width is defined.

Image width - Width of image. Can also be auto if height is defined.

Hide prices on product page - If checked, price variants are hidden in checkboxes labels.

Increase sales price - If checked, sales price is changed with value, otherwise base price is changed. For example:  (10 + 1) * tax   or   (10 * tax) + 1

Show prices in cart page - This shows checkboxes descriptions and prices in cart page below product name.

How to make plug-ins work:

You must make folder for images on your server and copy images into it. You can use FTP or Joomla media manager. Then you need put this folder path into "Image path" field in Dropbow with Image picker folder.

Then you must enter some selections with images, for example black;black.jpg|White;white.jpg and input other settings like original image css class, child element, image height and with.

This will make you first layer of images and first dropbox selection. If you want several layers, you need to add more same customfield to product. One for each layer.

How should images looks like:

Plug-in works like that: First image is background and each next layer is shown over previous layer. So images needs to be PNG with transparent background, otherwise they will cover other layers. (T-SHIRT EXAMPLE)

Other options is that images are crop the way that they doesn't cover each other. (BALLONS EXAMPLE)