VirtueMart Forum

VirtueMart 2 + 3 + 4 => General Questions => Topic started by: Kuubs on March 21, 2018, 17:55:16 PM

Title: Change image based on custom field value
Post by: Kuubs on March 21, 2018, 17:55:16 PM
Hello,

Is it possible to change the image based on the custom field value, and also the other way around. So if I choose an image, the dropdown gets changed to that particular color. Is this possible?
Title: Re: Change image based on custom field value
Post by: Studio 42 on March 22, 2018, 14:29:03 PM
I dont think, you can do this, but you can use child and my plugin https://shop.st42.fr/en/products/product-child-variants.htm.
Demo https://pro.st42.fr/fr/android/xiaomi-redmi-note-4x.html
Result with custom overides to add lightSlider https://www.elite-hair.fr/index.php/boutique/turban/turban-foulard-aquarelle-0523.htm for a customer
Title: Re: Change image based on custom field value
Post by: Kuubs on March 26, 2018, 12:16:34 PM
Hmm, that seems way to troublesome. Isn't their an option to just do this via javascript? I like the custom fields and that every product is just one product and you can select the options with the custom field. That way my store is way more organized.
Title: Re: Change image based on custom field value
Post by: Studio 42 on March 26, 2018, 13:05:20 PM
If you need stock by color for eg. You have to use a child product.
Title: Re: Change image based on custom field value
Post by: Kuubs on March 26, 2018, 15:41:02 PM
Quote from: Studio 42 on March 26, 2018, 13:05:20 PM
If you need stock by color for eg. You have to use a child product.

No I don't use the stock functionality. So I just use the custom field option.
Title: Re: Change image based on custom field value
Post by: Studio 42 on March 26, 2018, 17:50:14 PM
I don't think that a plugin exist, you need to write your own product custom field plugin. Or modify the template render and use own code to show option as an image in the main image.
Plugin i have do here for eg : https://ongallery.com/en/themes/animal-world/dust-bath-small-detail to add dynamical frames to photos.
Title: Re: Change image based on custom field value
Post by: Kuubs on March 29, 2018, 13:47:50 PM
I have fixed it with Javascript. With giving title attributes to the images.

This is the working code:

jQuery('.product-image').click(function() {

var colorThing = $(this).attr("alt");
var correctValue;
$("select option").each(function(index,value)
{

    if(value.innerHTML.trim()==colorThing.trim())
{

    correctValue=value.value
}
});
jQuery('select').val(correctValue);
jQuery('select').trigger("liszt:updated");
       
    });

    $(".vm-chzn-select").chosen().change(function (event) {

        var colorText = $(".vm-chzn-select option:selected").text().trim();
        $(".additionalimages .col img.product-image[alt='" + colorText + "']").click();
    });
Title: Re: Change image based on custom field value
Post by: Studio 42 on March 29, 2018, 15:51:31 PM
A solution, but you have to configure each image with each option without errors.
Title: Re: Change image based on custom field value
Post by: Kuubs on April 03, 2018, 12:26:01 PM
Quote from: Studio 42 on March 29, 2018, 15:51:31 PM
A solution, but you have to configure each image with each option without errors.
Yes, that is indeed the case.