News:

Looking for documentation? Take a look on our wiki

Main Menu

Change image based on custom field value

Started by Kuubs, March 21, 2018, 17:55:16 PM

Previous topic - Next topic

Kuubs

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?

Studio 42


Kuubs

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.

Studio 42

If you need stock by color for eg. You have to use a child product.

Kuubs

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.

Studio 42

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.

Kuubs

#6
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();
    });

Studio 42

A solution, but you have to configure each image with each option without errors.

Kuubs

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.