My product images are served from https://website-list.s3.amazonaws.com/xxxxxx.jpg where xxxxxx is the product sku. I have created a module to change the Image URL on several templates, following the very useful instructions here: https://magento.stackexchange.com/questions/309817/how-to-change-product-images-with-external-image-.... However it doesn't work for me on 2.4.2 for the minicart, checkout table and Recently viewed widget so I am doing those individually.
For the Recently Viewed I seem to need to edit:
mytheme/Magento_Catalog/web/template/product/list/columns/image_with_borders.html
and
mytheme/Magento_Catalog/web/js/product/list/columns/image.js
In image_with_borders.html I changed the js function that is calling the image :
<img class="product-image-photo"
data-bind="attr: {src: getImageUrl($row()),
alt: getLabel($row()), title: getLabel($row())}" />
to
<img class="product-image-photo"
data-bind="attr: {src: getNewImageUrl('160253'),
alt: getLabel($row()), title: getLabel($row())}" />And added a function in the image.js file:
getImageUrl: function (row) {
return this.getImage(row.images).url;
},
getNewImageUrl: function (sku) {
return "https://website.s3.amazonaws.com/" + sku + ".jpg";
},
This works with a hardcoded sku but I need to be able to get the actual sku in the initial image_with_borders.html page, to send it through to the js file. How can I do that? All that's in that image_with_borders.html page to start with is:
<if args="isAllowed()">
<a if="imageExists($row())"
class="product-item-photo"
attr="href: $row().url">
<span class="product-image-container"
data-bind="style: {width: getWidth($row()) + 'px'}">
<span class="product-image-wrapper"
data-bind="style: {'padding-bottom': getHeight($row())/getWidth($row()) * 100 + '%'}">
<img class="product-image-photo"
data-bind="attr: {src: getNewImageUrl('160253'),
alt: getLabel($row()), title: getLabel($row())}" />
</span>
</span>
</a>
I used the code here: https://github.com/nans/Magestudy/tree/master/RecentlyViewed to add SKU to the widget and it appears in the back end and sporadically in the front end - updating a module seems to be a black art, sometimes it works and sometimes it doesn't, unless I'm missing something (I have tried uninstalling, reinstalling, enabling, disabling, deleting lines from database etc etc etc, all the time using the upgrade, compile, cache:clean CLI commands)
But even if I were to get that to work, what I have done following that code is create a sku.js and a sku.html template - how would I call the sku in the image.js?
Thanks!
