TOPIC:

Variation with photo 3 years 4 months ago #208121

  • Topic Author
  • aluminiumtechnik
  • Offline
  • Junior Breezer
  • Junior Breezer
  • Posts: 29
  • Thanks: 1
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

Please Log in or Create an account to join the conversation.

Variation with photo 3 years 3 months ago #208184

  • helena.dobrovic's Avatar
  • helena.dobrovic
  • Offline
  • User is blocked
  • User is blocked
  • Posts: 1511
  • Karma: 48
  • Thanks: 130
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!
Attachments:

Please Log in or Create an account to join the conversation.

Last edit: Post by helena.dobrovic.

Variation with photo 3 years 3 months ago #208277

  • Topic Author
  • aluminiumtechnik
  • Offline
  • Junior Breezer
  • Junior Breezer
  • Posts: 29
  • Thanks: 1
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

Please Log in or Create an account to join the conversation.

Variation with photo 3 years 3 months ago #208288

  • helena.dobrovic's Avatar
  • helena.dobrovic
  • Offline
  • User is blocked
  • User is blocked
  • Posts: 1511
  • Karma: 48
  • Thanks: 130
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!

Please Log in or Create an account to join the conversation.

Variation with photo 3 years 3 months ago #208296

  • Topic Author
  • aluminiumtechnik
  • Offline
  • Junior Breezer
  • Junior Breezer
  • Posts: 29
  • Thanks: 1
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

Please Log in or Create an account to join the conversation.

Last edit: Post by helena.dobrovic.

Variation with photo 3 years 3 months ago #208299

  • helena.dobrovic's Avatar
  • helena.dobrovic
  • Offline
  • User is blocked
  • User is blocked
  • Posts: 1511
  • Karma: 48
  • Thanks: 130
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!

Please Log in or Create an account to join the conversation.

Time to create page: 0.136 seconds

BreezingForms Pro 1.4.7 for WordPress Released!

Available in the membership section.

September Discount!

Massive discounts on all subscriptions!

Get Your Subscription Here

Quick Links

Downloads

BreezingForms

ContentBuilder

BreezingCommerce

Templates

Documentation

BreezingForms

ContentBuilder

BreezingCommerce

Apprendre BreezingForms (French Community)

Apprendre et maîtriser BreezingForms par des tutoriels et exemples, le tout en français

breezingforms.eddy-vh.com

Questions et réponses sur les forums de l'AFUJ

AFUJ

Special Offer

Summer Sale! All subscriptions at a special price!

Includes prio support, all of our current and future Joomla!® extensions and Joomla!® templates for the duration of your membership.

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!