Changing the image with respect to a variant property
Hi,
I am new to Ucommerce and trying to find my way around. I have a product which has a variant property "color" and corresponding images as properties. I want to able to change the Image when the color is changes. Can you guide me how to do it ?
I am trying to do it in ucommerce.demostore.productpage.js and have the following function
function getProductImage(sku, color) { $.uCommerce.getProductVariations( { productSku: sku.val() }, function (data) {
$.each(data.Variations, function (i, v) {
var variationColor = getObjectsByKey(v.Properties, 'Name', 'Color')[0]; var variationImage = getObjectsByKey(v.Properties, 'Name', 'PImage')[0]; if (variationColor.Value == color) { alert(color + " has " + variationImage.Value); } }); success(); }, false ); };
when the variant proprerty color changes this function triggers. I am getting the ID of the variationImage but i don't know how to get the Image url for that ID. Do i need to make a webservice for that? or is there any other way to acheive it.
Changing the image with respect to a variant property
Hi,
I am new to Ucommerce and trying to find my way around. I have a product which has a variant property "color" and corresponding images as properties. I want to able to change the Image when the color is changes. Can you guide me how to do it ?
regards,
Qaisar
You can hook into the save pipeline of product and check the properties on the product and match up if they have the right image:
http://docs.ucommerce.net/ucommerce/v6/extending-ucommerce/create-pipeline-task.html
You can find the right properties by product["propertyName"].
Please note you want to do this on the variants collection since you uses variants.
so something like:
foreach(var product in Product.Variants) { ... }
Hope that helps you in the right direction.
Thanks Morten - i will give it a try :)
Hi Morten,
I am trying to do it in ucommerce.demostore.productpage.js and have the following function
function getProductImage(sku, color)
{
$.uCommerce.getProductVariations(
{ productSku: sku.val() },
function (data) {
$.each(data.Variations, function (i, v) {
var variationColor = getObjectsByKey(v.Properties, 'Name', 'Color')[0];
var variationImage = getObjectsByKey(v.Properties, 'Name', 'PImage')[0];
if (variationColor.Value == color) {
alert(color + " has " + variationImage.Value);
}
});
success();
},
false
);
};
when the variant proprerty color changes this function triggers. I am getting the ID of the variationImage but i don't know how to get the Image url for that ID. Do i need to make a webservice for that? or is there any other way to acheive it.
I found a way to solve this by using the ImageUrl webservice from the following http://localhost:4089/ucommerceapi/json/metadata list
following is the code
$.ajax({
url: location.protocol + "//" + location.host + '/ucommerceapi/Content/ImageUrl/' + variationImage.Value
}).then(function (data) {
$('#imgColor1').attr('src', data);
});
There is one problem now. It doesn't work if i am not logged into the ucommerce backend. Can anyone help me?
Found a solution for the problem. I created a service class in the razor store and then called that service through Javascript.
is working on a reply...