Hi there
I maked with breezing commerce an form that go to an product with variation,
But I want, that if the user choose an Variations, that also change the photo of the Product.

Is this possible?
to see here: konf.altec-alu.de/rollfix/rollfix-komple...len-mit-stahlspindel

Its an scaffold with different finishes and prices the prices works.

THX Roman

Hi,

Since BreezingCommerce doesn't have this feature we have made an alternative solution for you.

Go to your template and put the following script in some of your main js files into ready function:

Just make sure to trigger right values of your properties select list instead of VALUE1, VALUE2, VALUE3 in the code above. You can see it by inspecting select list.

Take a look at image preview.


Also, make sure to put correct names of your images instead of ImageName1, ImageName2, ImageName3.

Let us know if that works for you.

Kind Regards,
Helena

Hi Helena ,THX for this, but still don´t works

Here is the website: konf.altec-alu.de/rollfix
I have 2 products and its confuse me: both I use sema Options and Variations but in one appears the variations in the other not. One take the image from large with zoom , the other not, he takes from medium, but I can´t see any difference ??


This are my Options:
Fußplatten und Standardtraverse
125 mm Rollen und Standardtraverse
150 mm Rollen mit Stahlspindel
125 mm Rollen und Dreieckauslegern
125 mm Rollen und teleskopierbarer Traverse

My Imagenames in /joomla/images/breezingcommerce/products/large/ :
Rollfix_300_Fussplatte
Rollfix-300
Rollfix_300_150RolleMitSpindel
Rollfix_300_mit_Dreieckausleger
Rollfix_300_TeleskopTraverse
without .png

I putted the code here:
/templates/wt_digital_industry_free/js in main.js at last entry:
// ****************Bildwechsel*********************** //
$( document ).ready(function() {
$('[name="crbcProperties[]"]').change(function() {

if($('[name="crbcProperties[]"]').val() == "Fußplatten und Standardtraverse") {

$("#crbc-zoom-thumbnails li:first-child").addClass("current-img");
$("#crbc-zoom-thumbnails li:nth-child(2)").removeClass("current-img");
$("#crbc-zoom-thumbnails li:nth-child(3)").removeClass("current-img");

$("#crbc-zoom-thumbnail").attr("src", "/joomla/images/breezingcommerce/products/medium/Rollfix_300_Fussplatte");

}

else if ($('[name="crbcProperties[]"]').val() == "125 mm Rollen und Standardtraverse") {

$("#crbc-zoom-thumbnails li:first-child").removeClass("current-img");
$("#crbc-zoom-thumbnails li:nth-child(2)").addClass("current-img");
$("#crbc-zoom-thumbnails li:nth-child(3)").removeClass("current-img");

$("#crbc-zoom-thumbnail").attr("src", "/joomla/images/breezingcommerce/products/medium/Rollfix-300");


}

else if ($('[name="crbcProperties[]"]').val() == "150 mm Rollen mit Stahlspindel") {

$("#crbc-zoom-thumbnails li:first-child").removeClass("current-img");
$("#crbc-zoom-thumbnails li:nth-child(2)").removeClass("current-img");
$("#crbc-zoom-thumbnails li:nth-child(3)").addClass("current-img");

$("#crbc-zoom-thumbnail").attr("src", "/joomla/images/breezingcommerce/products/medium/Rollfix_300_150RolleMitSpindel");

}
else if ($('[name="crbcProperties[]"]').val() == "125 mm Rollen und Dreieckauslegern") {

$("#crbc-zoom-thumbnails li:first-child").removeClass("current-img");
$("#crbc-zoom-thumbnails li:nth-child(2)").removeClass("current-img");
$("#crbc-zoom-thumbnails li:nth-child(3)").addClass("current-img");

$("#crbc-zoom-thumbnail").attr("src", "/joomla/images/breezingcommerce/products/medium/Rollfix_300_mit_Dreieckausleger");

}
else if ($('[name="crbcProperties[]"]').val() == "125 mm Rollen und teleskopierbarer Traverse") {

$("#crbc-zoom-thumbnails li:first-child").removeClass("current-img");
$("#crbc-zoom-thumbnails li:nth-child(2)").removeClass("current-img");
$("#crbc-zoom-thumbnails li:nth-child(3)").addClass("current-img");

$("#crbc-zoom-thumbnail").attr("src", "/joomla/images/breezingcommerce/products/medium/Rollfix_300_TeleskopTraverse");

}

else {

$("#crbc-zoom-thumbnails li:first-child").removeClass("current-img");
$("#crbc-zoom-thumbnails li:nth-child(2)").removeClass("current-img");
$("#crbc-zoom-thumbnails li:nth-child(3)").removeClass("current-img");


}

});
});

I tried it with options and Variations.
On developer tools Sources templates/mytemplate/js/main.js I can find the code, but when I will change the Variatio/option he use the json_get_product_price

May you can help a bit with this?

Greetings Roman

Hi,

You will need to have pictures under the same product. As I can see you only have one picture under one product.

Can you try it like that? If that doesn't work I can provide you additional help or/and take a direct look at backend.

Let me know the result.

Regards,
Helena

Hi I tried with more images on the product rollfix300, but nothing.
Here is entry to backend:

[...]

Can you look waths wrong, please?

Greetings Roman

Hi,

ok, I will take a look at it and let you know the feedback

Note: I've removed credentials due to the security reasons.

Regards,
Helena