Results 1 to 8 of 8
  1. #1
    Join Date
    Dec 2007
    Posts
    1
    Plugin Contributions
    0

    help question Swapping Main Product Image Respective To Attributes In A Dropdown Menu

    I have seen several posts reguarding popup images for various attribute options and values.

    However, I am wondering if anyone knows if there is a way to actually swap the main image on a product page respective to a selected option value in a dropdown menu.

    Example: I have a clothing website, and I sell the same style of sweatshirt in 7 different colors. I have a dropdown menu for the color attributes and I want to display a picture of each color in place of the default(main)image as its respective color is selected in the dropdown menu.

  2. #2
    Join Date
    Apr 2006
    Location
    London, UK
    Posts
    10,569
    Plugin Contributions
    25

    Default Re: Swapping Main Product Image Respective To Attributes In A Dropdown Menu

    It can be done. On way would be to write a javascript function which could be called whenever a value is selected to change the image name from say sweatshirt_MED.jpg to sweatshirt_MED_blue.jpg. However, this may not play nicely with image management tools such as Image Handler.
    Kuroi Web Design and Development | Twitter

    (Questions answered in the forum only - so that any forum member can benefit - not by personal message)

  3. #3
    Join Date
    Dec 2007
    Posts
    54
    Plugin Contributions
    0

    Default Re: Swapping Main Product Image Respective To Attributes In A Dropdown Menu

    Quote Originally Posted by nostylgia View Post
    I am wondering if anyone knows if there is a way to actually swap the main image on a product page respective to a selected option value in a dropdown menu.

    This would be SOOO great for me. I have a shoe store here. For shoe colors this is so much better. Right now when I add image swatches, it adds each FULL SIZE image to the page, making the page really long and weird.

    Any suggestions or ideas what we can do??

  4. #4
    Join Date
    May 2009
    Posts
    2
    Plugin Contributions
    0

    red flag Re: Swapping Main Product Image Respective To Attributes In A Dropdown Menu

    I'm looking for the same answer as the top of the reply. If someone can specifically (not generally) describe how to have the product image change when a customer selects a dropdown choice...i.e. the dropdown menu with a color attribute, once selected changes the picture of the product image to match that selected color...What I'm selling is t-shirts and I want the customer to see the image of each color as they select it, instead of the default image....Whoever has the specific answer to this is the bees knees.

  5. #5
    Join Date
    Dec 2007
    Posts
    54
    Plugin Contributions
    0

    Default Re: Swapping Main Product Image Respective To Attributes In A Dropdown Menu

    Quote Originally Posted by chindeep.net View Post
    If someone can specifically (not generally) describe how to have the product image change when a customer selects a dropdown choice...
    Ajax image swapper: webextremecustomiser.com/index.php?main_page=product_info&products_id=1

    Here is my example: shopwalkthisway.com/index.php?main_page=product_info&cPath=1_11&products_id=26

    You can also use image handler 2 in combo with some other modules, but this is the only one I've used and it's good. (my version is from v1.x ... and the newest version is much better, fyi).

    L8R
    C

  6. #6
    Join Date
    May 2009
    Posts
    2
    Plugin Contributions
    0

    Default Re: Swapping Main Product Image Respective To Attributes In A Dropdown Menu

    Thanks Chucki, I'll look into that. Looks like there's no way of doing this in Zencart itself. I'm new to Zen as well as website development, so I'll be dragging my way through this...

  7. #7
    Join Date
    Nov 2010
    Posts
    2
    Plugin Contributions
    0

    Default Re: Swapping Main Product Image Respective To Attributes In A Dropdown Menu

    Quote Originally Posted by nostylgia View Post
    I have seen several posts reguarding popup images for various attribute options and values.
    I did more research on this because I haven't found any answers.
    I found this
    <script language="javascript" type="text/javascript">
    function changebgcolor(id,color) {

    document.getElementById(id).style.backgroundColor=color;
    }
    function changevalue(field,color)
    {
    for(var i=0;i<document.cart_quantity.elements.length;i++)
    {
    if(document.cart_quantity.elements[i].name==field)
    {
    document.cart_quantity.elements[i].value=color;
    }
    }
    }

    var xmlHttp
    function getattribimage(attribfield,width,height,products_options_values_id,products_id)
    {


    xmlHttp=GetXmlHttpObject();
    if (xmlHttp==null)
    {
    alert ("Your browser does not support AJAX!");
    return;
    }

    var url="attrib_prod_info.php";
    url=url+"?width="+width+"&height="+height+"&products_options_values_id="+product s_options_values_id+"&products_id="+products_id;
    xmlHttp.onreadystatechange=stateChanged;
    xmlHttp.open("GET",url,true);
    xmlHttp.send(null);

    }

    function stateChanged()
    {
    if (xmlHttp.readyState==4)
    {

    var product_color_image=xmlHttp.responseText;
    if(product_color_image!=''){
    document.getElementById('productMainImage').innerHTML = product_color_image;
    }
    }
    }
    //--------------------------------------------------------

    function GetXmlHttpObject()
    {
    var xmlHttp=null;
    try
    {
    // Firefox, Opera 8.0+, Safari
    xmlHttp=new XMLHttpRequest();
    }
    catch (e)
    {
    // Internet Explorer
    try
    {
    xmlHttp=new ActiveXObject("Msxml2.XMLHTTP");
    }
    catch (e)
    {
    xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");
    }
    }
    return xmlHttp;
    }


    function GetXmlHttpObject()
    {
    var xmlHttp=null;
    try
    {
    // Firefox, Opera 8.0+, Safari
    xmlHttp=new XMLHttpRequest();
    }
    catch (e)
    {
    // Internet Explorer
    try
    {
    xmlHttp=new ActiveXObject("Msxml2.XMLHTTP");
    }
    catch (e)
    {
    xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");
    }
    }
    return xmlHttp;
    }
    </script>
    on this website codingforums.com/archive/index.php/t-184030.html

    You can read the post if you want but this guy said this is the code for the attribute thing we want to do. I was hoping someone could tell me how to set this up.

  8. #8
    Join Date
    Nov 2010
    Posts
    2
    Plugin Contributions
    0

    Default Re: Swapping Main Product Image Respective To Attributes In A Dropdown Menu

    Does any one know where to put this java code? Like what folder? How do I exicute it, or does it do it auto?

 

 

Similar Threads

  1. Attributes... dropdown menu with images
    By flax in forum Setting Up Categories, Products, Attributes
    Replies: 1
    Last Post: 1 Jan 2014, 12:07 AM
  2. Attributes Dropdown menu extra characters
    By Lmichael in forum Setting Up Categories, Products, Attributes
    Replies: 2
    Last Post: 2 Dec 2010, 09:38 PM
  3. Dropdown menu of downloads folder in attributes???
    By pamelabd in forum Setting Up Categories, Products, Attributes
    Replies: 1
    Last Post: 3 Jun 2009, 05:45 AM
  4. Product Attributes wrapping around main product image...
    By TracNez411 in forum Templates, Stylesheets, Page Layout
    Replies: 0
    Last Post: 5 Sep 2007, 11:49 PM

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
disjunctive-egg
Zen-Cart, Internet Selling Services, Klamath Falls, OR