Question

I am new to PHP and am trying to figure out how to code some specific functionality. I have a product page that shows a photo and has two dropdown menus, one for size and one for color. What I would like to do is when the page first loads I set a variable that has the default product SKU. When the menus change I want to change the variable to the combined values of the two menu items selected. As the variable changes I want to reflect this in the photo and in a hidden form value (for eventual submission to a cart).

So when the page loads it shows picture A with the associated values in the size and color dropdowns. Then when either of the dropdowns change the photo dynamically changes to reflect it (while also updating the hidden form value).

Any suggestions would be much appreciated.

Answer 1

JavaScript, or a JS library like jQuery, is what you need here.

For jQuery (preferred, way easier):

var $select = $('#Dropdown'),
    $img = $('#Picture');

$select.on('change',function(){
    $img.attr('src',$(this).val());
});

For JavaScript:

var dropdown = document.getElementById('Dropdown'),
    img = document.getElementById('Picture');

dropdown.addEventListenter('change',function(){
    img.src = this.value;
});

Not tested, but should work.

Edit: when using the JavaScript solution, make sure the window is loaded first (it won’t work if the elements dont exist yet).

window.onload = function(){
    // do your magic here
}