I haven’t implemented your tool into our site yet because I want to make sure certain options are possible.
I’d like to allow the customer to upload an image but have the crop / min size attributes change when selecting another size / ratio variant within the Product. Is this something that can be done?
I’d prefer not to have to set up our products within Shopify as individual sizes, but rather have one product (canvas print), then different variants (8x10, 8x12, etc…) within the same product.
Uploadcare widget doesn’t support changing settings on-the-fly after initialization, so there are two ways you can achieve that:
Predefine a list of cropping presets so that a user can switch them while cropping an image. See the reference here
Use Dialog API instead of the widget. In this case, you’ll be able to open a dialog with necessary settings which you can define depending on user’s choice. See this demo to learn more: https://codepen.io/optlsnd/pen/OZVWxN
I’m trying to implement this, but (please excuse my ignorance), I don’t understand what to do with the HTML & JS code so that it works with the widget. Is there a tutorial or some other documentation for this you can point me to?
@gerardo It seems I’ve found another solution that allows keeping using the widget instead of the dialog. The widget has the “openDialog” method that can receive a settings object as an argument and open the widget with provided settings. We’ll open the widget with crop settings that depend on the product variant selected, but first, we’ll need to disable the default button handler. I’ve made this pen to show the course of action
Using this approach you can still link the value of the widget’s input with a custom product property to be able to use the CDN URL of the uploaded image in the cart and email templates.
@Alex Thanks you, this is perfect! Now, I was able to integrate the upload widget into gravity forms (I’m using Woocommerce). I have no code experience at all, but I was able to follow the instructions to build the widget and integration with Gravity Forms without a problem. I’m not able to figure out how to use the 3 sections in CodePen. Could you please tell me where do I paste the HTML, CSS, and JS codes?
Does the JS code go in the funtions.php file?