We can add the images in the matrix table dynamically
For that, first of all, we need to save all the images of the matrix items in a particular format.
Then we can create an extension to generate and add the URL of the images based on the condition used to save those images
here in our example we using the format Product code_{size}.{color}.{packaging}.EXT
Code used to create the dynamic URL:
getContext: function () {
console.log('this.model123', this.model.get('internalid'));
console.log('this.model', this.model);
var available = this.model.get('quantityavailable_detail');
var condition2 = false;
var seltd = this.getCookie('selectedLocation');
var confgid;
var quantityavailable;
var eta = this.model.get('custitem62')
console.log('eta', eta);
console.log('available', available);
console.log('seltd', seltd);
_.each(SC.CONFIGURATION.popup.data, function (eachResult) {
var text2 = JSON.stringify(eachResult.text2);
if (text2 == JSON.stringify(seltd)) {
confgid = eachResult.text1;
}
});
console.log('confgid', confgid);
if (available) {
_.each(available.locations, function (eachResult) {
if (eachResult.internalid == confgid) {
condition2 = true;
quantityavailable = eachResult.quantityavailable;
// console.log('quantityavailable', quantityavailable)
}
});
}
if (eta) {
eta = eta;
} else {
eta = "TBA";
}
console.log('quantityavailable', quantityavailable);
var profile = ProfileModel.getInstance();
//console.log('profile',profile)
var isLogged = false
if (profile.get("isLoggedIn") === "T")
isLogged = true;
var colorCol = this.model.get('custitem_jj_color_matrix');
var color = true;
// colorCol = colorCol.trim();
if (colorCol === ' ' || !colorCol) {
color = false;
}
var packagingCol = this.model.get('custitem_jj_pkg_matrix');
var packaging = true;
// packagingCol = packagingCol.trim();
if (packagingCol === ' ' || !packagingCol) {
packaging = false;
}
var sizeCol = this.model.get('custitem_jj_size_matrix');
var size = true;
//sizeCol = sizeCol.trim();
if (sizeCol === ' ' || !sizeCol) {
size = false;
}
if (size == false) {
var size_url = "0";
} else {
var str = this.model.get('custitem_jj_size_matrix');
size_url = str.replace(/[&\/\\#, +()$~%.'":*?<>{}]/g, ' ');
console.log("size_url11", size_url);
size_url = size_url.replace(/ +/g, ' ');
size_url = size_url.replace(' ', "%20");
console.log("size_url22", size_url);
}
if (packaging == false) {
var packaging_url = "0";
} else {
var packstr = this.model.get('custitem_jj_pkg_matrix');
packaging_url = packstr.replace(/[&\/\\#, +()$~%.'":*?<>{}]/g, ' ');
packaging_url = packaging_url.replace(' ', "%20");
}
if (color == false) {
var color_url = "0";
} else {
var colorstr = this.model.get('custitem_jj_color_matrix');
color_url = colorstr.replace(/[&\/\\#, +()$~%.'":*?<>{}]/g, ' ');
color_url = color_url.replace(/ +/g, ' ');
color_url = color_url.replace(' ', "%20");
}
var name_url = this.model.attributes.product.attributes.item.attributes._matrixParent.attributes.item.attributes.itemid;
var domain = SC.ENVIRONMENT.shoppingDomain;
var image_url = "https://" + domain + "/bastionpacific%20website%20item%20images/" + name_url + "_" + size_url + "." + color_url + "." + packaging_url + "." + "jpg"
console.log("URLLLLLLL", image_url);
return {
selected: this.model.get('selected'),
quantity: this.model.get('quantity'),
ispreorder: this.model.get('_ispreorder'),
isbackorderable: this.model.get('_isBackorderable'),
shouldCheckQtyAvailable: this.model.get('_ispreorder') || this.model.get('_isBackorderable'),
quantityAvailable: this.model.get('quantityavailable'),
size: this.model.get('custitem_jj_size_matrix'),
color: this.model.get('custitem_jj_color_matrix'),
packaging: this.model.get('custitem_jj_pkg_matrix'),
// Get price from parent due to quantity pricing.
//price: this.model.getPrice().price_formatted,
price: this.model.getPrice().price_formatted,
sku: this.model.getSku(),
//upc: this.model.getUpc(),
isBuyButtonEnabled: this.model.get('quantity') && this.model.get('selected'),
//thumbnail: this.model.getItem().getThumbnail(),
thumbnail: this.model.get('custitem_item_image'),
notAvailableStr: 'N/A',
itemIsAlreadyInCart: this.model.get('itemIsAlreadyInCart'),
internalid: this.model.get('internalid'),
addAllToCartEnabled: this.model.get("addAllToCartEnabled"),
isLogin: isLogged || false,
buyButton: this.buyButton || false,
quantityavailable: quantityavailable,
condition2: condition2,
eta: eta,
url: image_url,
sizeCol:size,
colorCol: color,
packagingCol:packaging
//maxQty: this.matrix_modal.maxQty,
//showMaxqty:this.matrix_modal.showMaxqty,
};
},