Expresso Store and Drag and drop upload form during checkout

Question

I need to allow users to upload their own files during a checkout process.

I think Freform Pro should be fine but I don't know how to integrate it inside the checkout page. Should be nice to associate this file as custom order field for Expresso Store.

my goal is to handle the upload process in ajax and render the uploaded image file in the same page.. the scenario should be something similar to:

User chose the t-shirt model and size > add to cart > upload own image > preview the image stamp on the t-shirt > purchase it!.

someone have any idea?

Thank you!

Answer 1

You will need to upload the images separately from the checkout. I suggest using a channel entry form or as you mentioned, solspace freeform.

After you get your customer to upload an image, you need to remember which image they wanted printed on their tshirt (for example customer may have more than one image uploaded). The easiest way to do this is to get the ID (or URL) of the uploaded image and store it with an order.

To store the image with an order, you can either use an order custom field (e.g. order_custom1), or you can use a product modifier (just use a text modifier, and a hidden field to set it). If you use the order custom field, you can only have one per order (so customer can not order two tshirts in the same order), but this might not be an issue if customers can only order one tshirt at a time anyway.