[Shopify] Image preview

Questions / Help
1

Hello everybody,

I follow, i think correctly, the Shopify integration document, step by step.
The button is just completed the whole process of adding the upload button is working (and in french) on my shopify store, on a product page.

When we upload a file, there is no preview. The file link is there and we can delete it if needed.

I use debut theme for the trial before to do it on Turbo.

Capture
Capture1139×614 31.5 KB

Here the code of uploadcare-settings.liquid :

<script charset="utf-8" src="https://ucarecdn.com/libs/widget/3.x/uploadcare.full.min.js">
</script>
<script>
  UPLOADCARE_PUBLIC_KEY = '71777bd13309f31cb455';
  // UPLOADCARE_EFFECTS = 'crop,rotate,mirror,flip';
  UPLOADCARE_LOCALE ='fr';
  UPLOADCARE_PREVIEW_STEP = true;
  UPLOADCARE_CLEARABLE = true;
  
  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/932x932/-/stretch/fill/-/resize/1106x1106/-/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/932x932/-/stretch/fill/-/resize/1106x1106/-/overlay/' + currentFrame + '/';
}
});
</script>

In the product-template.liquid :slight_smile:


	{% include 'uploadcare-fields' %}

	<div class="selector-wrapper product-form__item">
	    <label for="frame">Frame</label>
	    <select required class="required product-form__input" id="frame" name="properties[Frame]" >
	      <option data-frame-id="31fd867c-8bfe-4b83-840d-6573efeebbe0" value="Frame 1">Frame 1</option>
	      <option data-frame-id="2064a171-7e8c-4140-82a7-de9f33e3806b" value="Frame 2">Frame 2</option>
	    </select>
	</div>

Thank you for your help.

Have a good day.
Fab

2

Hi @Fabrice :wave:

Are there any errors in the console? Could you share a link to the page so I can check it live?

3

Hi Alex,

I don’t see any error (don’t means there isn’t).
Here my test : https://pimp-it.fr/products/sous-verre-photo

Thank you
Fabrice

4

Back to the house.
I found an error in the console :

“Uncaught ReferenceError: uploadcare is not defined
at sous-verre-photo:853”

When i click on it :

image

5

As I can see, now your script is working correctly, but you need to change the order of images in the final preview URL. Now you are placing the frame image (with no transparent area) over the uploaded one, which makes visible the frame image only.

I’d recommend you another approach – you can make the white area in the frame image transparent and use the CDN URL of the uploaded image as the CSS background-image property for the product image. It can be updated with JS as well. As the result, the transparent area will be filled with the user’s image.

Let me know if this doesn’t help.

6

Hello Alex,

Thank you i will read it 2 or 3 times and will try it.
I will be back soon with the result.

7

Hi Alex,

Great it works with the first option. I will try with the second one i like too.

Thank you.

1 Like