Copied to clipboard

Flag this post as spam?

This post will be reported to the moderators as potential spam to be looked at


These support forums are now closed for new topics and comments.
Please head on over to http://eureka.ucommerce.net/ for support.

  • Qaisar 31 posts 77 karma points
    Sep 22, 2014 @ 21:53
    Qaisar
    0

    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

  • Morten Skjoldager 440 posts 1499 karma points
    Sep 23, 2014 @ 10:15
    Morten Skjoldager
    0

    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.

  • Qaisar 31 posts 77 karma points
    Sep 24, 2014 @ 13:08
    Qaisar
    0

    Thanks Morten - i will give it a try :)

  • Qaisar 31 posts 77 karma points
    Oct 02, 2014 @ 14:01
    Qaisar
    0

    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. 

  • Qaisar 31 posts 77 karma points
    Oct 03, 2014 @ 13:34
    Qaisar
    0

    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?

  • Qaisar 31 posts 77 karma points
    Oct 10, 2014 @ 10:40
    Qaisar
    0

    Found a solution for the problem. I created a service class in the razor store and then called that service through Javascript.

Please Sign in or register to post replies

Write your reply to:

Draft