I’m trying to install the custom image uploader, so far i’ve run into a few problems. I’ve tried the solutions from other similar topics, however nothing helped so far. Hope you can help me out!
Here’s the code i’m using so far;
Uploadcare-settings.liquid
<script>
UPLOADCARE_PUBLIC_KEY = 'e453059f9108663d476c';
UPLOADCARE_LOCALE ='nl';
var widget = uploadcare.Widget('[role=uploadcare-uploader]');
var productImage = document.querySelector('.product-featured-img');
var frameSelector = document.getElementById('frame');
var uploadedImage = null;
var currentFrame = frameSelector.options[frameSelector.selectedIndex].dataset.frameId;
widget.onUploadComplete(function (fileInfo) {
uploadedImage = fileInfo.cdnUrl;
productImage.src = uploadedImage + '-/resize/320x520/-/stretch/fill/-/resize/400x600/-/overlay/' + currentFrame + '/';
// clears the default srcset of the product image
productImage.dataset.srcset = productImage.srcset = '';
});
frameSelector.addEventListener('change', function (e) {
currentFrame = e.target.options[e.target.selectedIndex].dataset.frameId;
if (uploadedImage !== null) {
productImage.src = uploadedImage + '-/resize/320x520/-/stretch/fill/-/resize/400x600/-/overlay/' + currentFrame + '/';
}
});
</script>
First of all, i can’t find a way to enable the image editor. I would like our customers to crop, rotate, sharpen and enhance the image.
Second, it would be great if the uploaded image can replace the standard product image.
Lastly, the uploaded image is also not showing in cart. The code that should be replaced; <img class="cart__image" src="{{ properties['custom image'] | img_url: '95x95', scale: 2 }}" alt="{{ item.title | escape }}">
isn’t in my theme, the only code that looks like it is; <img class="global-border-radius" src="{{ item | img_url: '400x' }}" alt="{{ item.title | escape }}">
I’ve tried multiple solutions and i’ve followed the following instructions; Shopify integration | Uploadcare Docs. However the code isn’t working. Hope you can help me out.
I’m using Boost theme, the frameselector option is not needed.
Class names of elements in the theme you’re using may differ from the names in the Debut theme. Would you be able to share a link to your Shopify website so that we can check it live and figure out what changes need to be made to your script to make it work properly?
thanks for your reply! I’ve added the script to the uploadcare-settings.liquid, that seems to work too. However the next problem is that it doesn’t upload the edited photo, just the regular photo to the Uploadcare dashboard. Do you have a solution for that too?
@Meyro I’ve fixed the script so that it can update the product image with an image uploaded by a user
UPLOADCARE_PUBLIC_KEY = "e453059f9108663d476c";
UPLOADCARE_LOCALE = "nl";
uploadcare.registerTab("preview", uploadcareTabEffects);
var widget = uploadcare.Widget("[role=uploadcare-uploader]");
var productImage = document.querySelector(".rimage");
var uploadedImage = null;
widget.onUploadComplete(function (fileInfo) {
uploadedImage = fileInfo.cdnUrl;
productImage.src = uploadedImage + "-/resize/800x/-/format/auto/";
// clears the default srcset of the product image
productImage.dataset.srcset = productImage.srcset = "";
});
The uploader always uploads the original image even if you add some transformation via the Image Editor. Actually, the editor doesn’t transform images in the browser; it takes the original image URL and adds image operation to it to generate a new version of the image. The full URL with transformation operations will be attached to the order as a custom property. It can be accessed through the “orders” section of Shopify admin. This is what it looks like
This one should work:
