Variation with photo

  • aluminiumtechnik
  • Topic Author
  • Offline
  • Junior Boarder
  • Junior Boarder
  • Posts: 29
  • Thank you received: 0

aluminiumtechnik created the topic: Variation with photo

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
#208121
  • helena.dobrovic
  • helena.dobrovic's Avatar
  • Offline
  • User is blocked
  • User is blocked
  • Posts: 1511
  • Karma: 48
  • Thank you received: 129

helena.dobrovic replied the topic: Variation with photo

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:
$( document ).ready(function() {
 $('[name="crbcProperties[]"]').change(function() {
  
  if($('[name="crbcProperties[]"]').val() == "VALUE1") {
  
  $("#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/large/ImageName1");
  
  }
  
  else if ($('[name="crbcProperties[]"]').val() == "VALUE2") {
  
  $("#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/large/ImageName2");
  
  
  }
  
  else if ($('[name="crbcProperties[]"]').val() == "VALUE3") {
  
  $("#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/large/ImageName3");

  }

  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");
  
  
  }
  
});
});

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

=========================================
Need to renew Pro Support?
Buy Here!
=========================================
Satisfied?
Consider a membership!
=========================================
Like us on Facebook
=========================================
Support Crosstec and get ALL EXTENSIONS and professional support for just $5
Here!
#208184
Attachments:
  • aluminiumtechnik
  • Topic Author
  • Offline
  • Junior Boarder
  • Junior Boarder
  • Posts: 29
  • Thank you received: 0

aluminiumtechnik replied the topic: Variation with photo

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
#208277
  • helena.dobrovic
  • helena.dobrovic's Avatar
  • Offline
  • User is blocked
  • User is blocked
  • Posts: 1511
  • Karma: 48
  • Thank you received: 129

helena.dobrovic replied the topic: Variation with photo

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

=========================================
Need to renew Pro Support?
Buy Here!
=========================================
Satisfied?
Consider a membership!
=========================================
Like us on Facebook
=========================================
Support Crosstec and get ALL EXTENSIONS and professional support for just $5
Here!
#208288
  • aluminiumtechnik
  • Topic Author
  • Offline
  • Junior Boarder
  • Junior Boarder
  • Posts: 29
  • Thank you received: 0

aluminiumtechnik replied the topic: Variation with photo

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
#208296
  • helena.dobrovic
  • helena.dobrovic's Avatar
  • Offline
  • User is blocked
  • User is blocked
  • Posts: 1511
  • Karma: 48
  • Thank you received: 129

helena.dobrovic replied the topic: Variation with photo

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

=========================================
Need to renew Pro Support?
Buy Here!
=========================================
Satisfied?
Consider a membership!
=========================================
Like us on Facebook
=========================================
Support Crosstec and get ALL EXTENSIONS and professional support for just $5
Here!
#208299
Time to create page: 0.153 seconds

New Icon Packs Category!

Crosstec is now offering icon packs.

If you are a paying subscriber, icon packs are automatically added to your account.

Check out our icon packs page!

Live Support Chat Opened!

Join our Discord chat here to receive live support and talk directly to the team!

Summer Sale!

50% discount on all of our extension subscription plans, templates and icon packs!

Get Your Subscription Here

News and Updates

Get informed about new downloads, updates and more in our News and Updates newsletter.

All Extensions Subscription

Get 1 year access to all of our current and future products and 1 year of professional support -- 99 for just 49! (Summer Sale)

No support per domain or website installation limits! Includes all of our current and future Joomla!® extensions, Joomla!® templates for the duration of your membership. This means, by purchasing an All Extensions Subscription you'll have it all covered!

Get it from here

3rd Party Discount - 25% Off

We help you to keep your costs under control. If you are a new member and purchased a form building tool from a different form vendor, then you'll get a 25% discount on our subscription plans.

How to receive the discount:

Send us a quick email to sales@crosstec.org with a proof of purchase (for example a paypal receipt), await payment instructions and enjoy your membership!

Live Support Chat Opened!

Join our Discord chat here to receive live support and talk directly to the team!

Community Reward

Help us to create new extensions and plugins! With only $5 you help us a lot and get unlimited download access to all of our products, professional support and even more. Get your reward now!

Read More Here