HOWTO: Integrate Image Uploader into Zen Cart

Hi everyone!

In the previous post I described how to integrate Image Uploader into Virtuemart. In this post we will make the similar solution based on the Zen Cart. Zen Cart is the free, open source shopping cart software.

How it looks

On the screenshot below you can see zen cart product page with embedded Image Uploader control.



It has been achieved by adding new product type - Product - Photo. All products with that product type will be displayed with Image Uploader on the page and have the attribute which contains image file names. Also you can add other attributes to the product, like photo size or paper type. After you create your products, customers can upload their photos and order them like any other products.

We make small customization for the cart page to display thumbnails of uploaded photos.



Uploaded files are placed to the photo_files/unordered folder. After customer confirms the order photos move to the photo_files/ordered/order_id, where order_id is the id of the order.

How to install it

1. Download and install Zen Cart.
2. Download archive photoorder-1.0.zip, unzip it and copy all files from photoorder-1.0/files folder into the directory where you install Zen Cart.
3. Open Zen Cart Admin.
4. Go to Tools -> Install SQL Patches and apply photoorder-1.0/install.sql patch.
5. Go to Tools -> Template Selection and change template to the Photo Template.
6. Go to Tools -> Layout Boxes Controller and click Reset button.

Now we have installed photoorder module and can add some products. Open Catalog -> Categories/Products, select Product - Photo type click new product button. Type Photo in the Products Name field and 1000000 in the Products Quantity field. Save product. Go to Products Price Manager and set the price for the Photo product.

Also you can add attributes to the Photo product (Paper and Size for example), but it is not nessesary.


Now you can open the store and select the Photo product. It should looks like on the first screenshot in the post.


How it works

Image Uploader is a highly customizeable control. You can customize it for your needs in the includes/templates/template_default/templates/tpl_product_photo_info_display.php file. More about Image Uploader features you can read from the documentation.

Shopping cart customization is in the includes/templates/photo/templates/tpl_shopping_cart_default.php file.

The save file functionality placed in the includes/extra_cart_actions/photo_cart_actions.php file and move files after order confirmation function is in the includes/classes/observers/class.PhotoProduct.php.

Edited by moderator Sunday, September 4, 2011 10:04:03 PM(UTC)  | Reason: Not specified

Hello!

1. No, this functionality can be achieved with any version of Image Uploader. If you choose Java or ActiveX version only you need to slightly change the configuration of Image Uploader, since by default it use dual. It is in the includes\templates\template_default\templates\tpl_product_photo_info_display.php file.

If you want to use Java version only replace this code

to this


And for ActiveX version only (ActiveX version is for IE browser only) replace this

to this


Also when you buy it and get the license keys you need to insert them instead of the trial ones. Find the line and replace this keys into yours.


2. I'm not sure that I understand your question correct, but if you asked about resize uploaded files then no, image uploader can upload resized file instead of original one, but in this configuration it is not implemented. The image uploader sends the original file without any modifications. However it uploads small thumbnail along with original file for displying it in the cart. But if you don't need this it can be disabled.


3. Well, I believe that if you copy admin directory into you Zen Cart directory, then file from admin/includes/language/english/product_photo.php will be in the YOURZENCARTDIRECTORY/admin/includes/language/english/product_photo.php. So just copy admin, includes, photo_files folders into your Zen Cart site directory.

Edited by user Tuesday, February 23, 2010 2:44:41 PM(UTC)  | Reason: Not specified

Hello Jeff!

Unfortunately, I don't think there is the easy way to do it for your existing product. In current implementation product should use special template with the embedded Image Uploader control. And since the products from the site you mentioned, also use their own custom template it requires to merge it together somehow.

About the second question you asked, the answer is no. All images are uploaded into one folder and after customer make the order, the images related to the order are moved to the folder with the order id.
And after that, the manager can go to the admin area, open orders list, look the ID of the order and take the images from the according folder for further processing.

Hello Rob,

Thanks for the link.

YouR problem is reproduced in the Java-enabled browsers. I got the error in Java console:

Please read detailed information on it in the ClassNotFoundException in plug-ins post.