HOWTO: Integrate Image Uploader into Virtuemart

Hello all!

In this post I want to describe how you can integrate Image Uploader into Virtuemart (a free, open source e-commerce solution based on joomla CMS). This post was inspired by this question: how to integrate aurigma with virtuemart.

Introduced sample application provides basic functionality:

• a customer can easily upload photos and specify params like quantity & paper size;
• uploaded photos are placed into customer's shopping cart, where he/she can finish order processing.

If you are looking for similar stand-alone sample - take a look at Aurigma Image Uploader Demos - Photo Order Demo.

Short description of how it works

After installation, application creates a new product named photo in the Virtuemart database. Each ordered photo will be presented as an instance of the photo product. All additional information, like image, size, paper type, number or prints, etc. will be stored as attibutes. Here is the list of used attributes:

• *imagepath - path to the image to print
• *Quantity - number of ordered prints
• Size
• Paper type

Marked with (*) are the attributes that are obligatory and used inside the application code. The rest were added for illustration and can be edited/removed without any consequences.


Here is a screenshot of customer's front-end page of the PhotoOrder application.



It contains an embedded Image Uploader control and additional fields which automatically reflect all attributes from the photo product.

After user uploads images, the uploaded images appear in his shopping cart.




How to install PhotoOrder sample

I assume you have installed joomla and virtuemart already and have administrative access to it. If so, you need to take only a few steps to complete:

1. Download the photoorder component attached to this post. Go to the Extension Manager and install this component. It should appear in the components list.
   
   
2. Go to Product List in Virtuemart Administration and find photo product (SKU == photo). Click on it to edit and specify product's price.
   
3. Next step is to add a link to the page which will be seen by customers. Go to the Menu Manager and add a new menu item into the main menu. Set the menu item type to photoorder, title to Upload Photos, parent item is Top.
   

Thats all! Now we are ready to receive photo orders. Open the virtuemart front-end and click on the 'Upload Photos' link in the main menu. Add some images to upload and specify order details. For every image that you select for upload, you can see the order details under the filename. Then click Send button and wait until all images have been uploaded. Now you can go to the cart and make sure the uploaded images are now in the cart.

That's all, hope this was helpful. If you have any thoughts about it - feel free to post them there.

P.S.
We made a small customization of previous photoorder version. The difference is that one creates three products (photo, poster and shildersdoek) in the photo category. Also there are two views has been added. One for ordering particular product and another - photo products list. Download photoorder2.zip to get it.


Best regards,
Andrew Mironov

Edited by user Monday, May 31, 2010 11:02:40 PM(UTC)  | Reason: Not specified

Hello Davy,

You can customize this script, it is available in source code and attached to this thread.

Could you describe in detail what functionality you need in canvas order and poster order? What are differences between current implementation of photo order and these new orders?

Edited by user Friday, November 20, 2009 12:43:44 AM(UTC)  | Reason: Not specified

Hello,

If products attributes will be the same you can try the following.

PhotoOrder adds a product to VirtueMart in the installation script: /photoorder/install.photoorder.php. If you would like to add addtional product you can do it there. Order items (photo prints) are added to the cart in the addToCart method (/photoorder/site/models/photoorder.php). This way you can modify this method to add currently selected product to a cart.

Hello,

Unfortunately it is hard to say something not seeing full script. Could you give me modified plugin? You can attach it here to this forum thread or send it via support case.

Thanks, got it. I passed your version to our developer. He is working on it. As soon as it is ready, I will give you the updated version.

Edited by user Monday, November 30, 2009 5:47:23 PM(UTC)  | Reason: Not specified

thanks,
but i get a error by installing it:
There was an error uploading this file to the server.

any idea?

I run in another problem,

The upload of the total file size is maximum about 8MB (sometimes i got a error on 7MB somes on 12MB), the error is image uploader encountered ..... (on small size everything works fine also from localhost i got no problem)

Now i setup the basic demo out Joomla and they upload much faster and without any limitation of file size.
So i conclude that the server settings are ok and there is something wrong with the script, joomla or virtuemart, Any idea what's block the upload?
Also the estimate time in the pop_up is'nt correct by joomla on the demo is it ok

looking forward

i'm sorry for the late reaction thanks for the response,
we have resolved the problem, it was the time settings in PHP.ini.

Our shop is online now, and we are "fine tuning" something. but one thing i can't get resolved : after the files are uploaded i must first renew the page or go to somewhere else on the site before the shopping cart(on the main page) shows the ordered products.
some idea? maybe with a redirect after upload? (on wich file i must put it in)

thanks

How much and how to I purchase a single l license for this component?

I did email them and got this back...

This is the mail system at host mailstore35.mailforbusiness.com.

I'm sorry to have to inform you that your message could not be delivered to one or more recipients. It's attached below.

For further assistance, please send mail to postmaster.

If you do so, please include this problem report. You can delete your own text from the attached returned message.

The mail system

<incoming-forward@aurigma.com>: mail forwarding loop for
incoming-forward@aurigma.com