Jump to content
  • Checkout
  • Login
  • Get in touch

osCommerce

The e-commerce.

Attribute Images


Recommended Posts

Morning All,

I am looking for an add-on that allows the image to change based on the attribute selected. Needs to work with Phoenix or at least be recently new so it can be modified. 

Does anyone know of anything?

Thanks

Link to comment
Share on other sites

There is this one that may be what you want but it is probably not compatible with Phoenix. But the person that uploaded it is @14steve14and he's active here so maybe he has a newer version.

Support Links:

For Hire: Contact me for anything you need help with for your shop: upgrading, hosting, repairs, code written, etc.

Get the latest versions of my addons

Recommended SEO Addons

Link to comment
Share on other sites

1 hour ago, Jack_mcs said:

There is this one that may be what you want but it is probably not compatible with Phoenix. But the person that uploaded it is @14steve14and he's active here so maybe he has a newer version.

Be honest this is something that I am looking into but my coding skills are not high, so we will have to see where it leads.

REMEMBER BACKUP, BACKUP AND BACKUP

Link to comment
Share on other sites

37 minutes ago, 14steve14 said:

Be honest this is something that I am looking into but my coding skills are not high, so we will have to see where it leads.

My idea is rather than have an image with a radio button next to it you change the main image based on the selected option.

eg. I have a display stand that has 2 versions (A & B). Version A shows by default, when the customer selects their option it changes the image to whichever they choose so if it's A the image stays the same if it's B the image changes. 

Both images will be viewable regardless of which option is choosen in the current gallery style.

My guess would be that it could be done with just a new gallery that uses the image name and option name to change the main image.

Link to comment
Share on other sites

I don't know if it is a good idea or not but maybe u can write a on click function to replace  main product image with the option image.

Edited by hungryfrank

you can cut up to 4 pages of your checkout by using my three add_ons

login create account in one page

Express checkout  

login pop up modal

Link to comment
Share on other sites

@LeeFoster check this oscommerce-Options-as-images it look it has update to Frozen version  but its not uploaded to Apps Marketplace..

and on readme file typed there 
"This is a working version for osC CE Frozen version, and will only work on the community bootstrap versions of oscommerce.."

I installed on phoenix 1.0.7.2 small editing to options_images.php  (admin) I get it working there 
the shop side need to create pi module 
 

Edited by Omar_one

Get the latest Responsive osCommerce CE (community edition) here .

Link to comment
Share on other sites

12 minutes ago, hungryfrank said:

I don't know if it is a good idea or not but maybe u can write a on click function to replace  main product image with the option image.

I was just doing some research and found an already written jQuery function that will change the image but the select has a to have an onchange function. If I can work out how to move the onchange to the jQuery (I know nothing about jQuery) I think we can do this with a hook and image naming conventions.

Link to comment
Share on other sites

jQuery has a selector, which looks like

$('SELECT#css_id')

The part inside the quotes can be pretty much anything that could appear in a CSS definition.  But remember that you probably only want it to apply to one menu, so try for something unique, like ID (rather than class or HTML element).  Remember that it is possible to say something like #css_id SELECT to get the select menu inside the #css_id element.  Then you attach an onchange handler like

$('SELECT#css_id').change(function () {/* JS here */});

That would be close to the equivalent of the onchange in

<SELECT id="css_id" onchange="/* JS here */">

assuming that you have

<SELECT id="css_id">

somewhere in the HTML. 

Relevant reference:  https://stackoverflow.com/q/11179406

If you post the HTML for the select menu and the recommended jQuery, someone could probably give more help. 

Always back up before making changes.

Link to comment
Share on other sites

That's from 10 years ago and seems similar to what you need. 

I imagine (well I *know*) that 10 years ago was the time of 500 lines of core code change to do something that can now be done in none.

Even so, I think you'll struggle with a no core change, as the product_attribute page will need to be changed to allow you to assign image to attribute.

Option = Color
Attributes = blue/pink/red (each of these needs an image)

That is your first task before you start thinking about actual swapping of images.  

 

Link to comment
Share on other sites

if i wanted to do this at a minimum I would install one of these contribution's admin side so i would be able to enter the image for the options.  then I would use an Ajax to pull this image when it is selected and display it where the main image is in pi-gallery,

 

 

Edited by hungryfrank

you can cut up to 4 pages of your checkout by using my three add_ons

login create account in one page

Express checkout  

login pop up modal

Link to comment
Share on other sites

I don't see why this needs to be a case of installing something else. Using the product id from the URL and the option value from the dropdown as the image name along with a modified version of the jQuery I posted above should be a good starting point.

eg. My product id is 11 and the option values are 1 - 3 so my images would be 11_1.jpg, 11_2.jpg & 11_3.jpg

Smart naming of the images will mean that it doesn't need to be assigned against an option in admin.

 

Link to comment
Share on other sites

On 6/5/2020 at 2:32 PM, LeeFoster said:

I don't see why this needs to be a case of installing something else. Using the product id from the URL and the option value from the dropdown as the image name along with a modified version of the jQuery I posted above should be a good starting point.

eg. My product id is 11 and the option values are 1 - 3 so my images would be 11_1.jpg, 11_2.jpg & 11_3.jpg

Smart naming of the images will mean that it doesn't need to be assigned against an option in admin.

 

did u get this to work?

<script>
$(function() {
    $("#input_1").change(function(){
        val = $("#input_1 option:selected").text();
        $(".pi-gallery").html( "<img src='images/sample/lime-1.jpg'>");
     
    });
});
</script>

try this at the end of product_info.php see how it works.

see if you can pass the images somehow?

 

 

you can cut up to 4 pages of your checkout by using my three add_ons

login create account in one page

Express checkout  

login pop up modal

Link to comment
Share on other sites

16 minutes ago, hungryfrank said:

did u get this to work?


<script>
$(function() {
    $("#input_1").change(function(){
        val = $("#input_1 option:selected").text();
        $(".pi-gallery").html( "<img src='images/sample/lime-1.jpg'>");
     
    });
});
</script>

try this at the end of product_info.php see how it works.

see if you can pass the images somehow?

 

 

Didn't manage to get it to work yet but spent yesterday in bed ill. I did think about it this morning and thought maybe something similar to @burts price change on the fly could work.

This is what I got to though.

<script>
var imageList = Array();
var id = <?php echo $_GET['products_id'] ?>;
for (var i = 1; i <= 7; i++) {
    imageList[i] = new Image(70, 70);
    imageList[i].src = "images/"+ id + "_" + i + ".jpg";
}

function switchImage() {
    var selectedImage = document.getElementById("input_1").options[document.getElementById("input_1").selectedIndex].value;
    document.getElementsById("img").src = imageList[selectedImage].src;
}

document.getElementById("input_1").onchange = switchImage;
</script>

 

Edited by LeeFoster
Link to comment
Share on other sites

this one a little better

<script>
$(function() {
    $("#input_1").change(function(){
        val = $("#input_1 option:selected").text();
        $("a.lb:first").html( "<img src='images/sample/lime-1.jpg'>");
     
    });
});
</script>

 

you can cut up to 4 pages of your checkout by using my three add_ons

login create account in one page

Express checkout  

login pop up modal

Link to comment
Share on other sites

try this. the main image changes. you just have to pass the image source for the correct image

instead of 

images/sample/lime-1.jpg
Edited by hungryfrank

you can cut up to 4 pages of your checkout by using my three add_ons

login create account in one page

Express checkout  

login pop up modal

Link to comment
Share on other sites

<script>
$(function() {
    var img_option='images/sample/lime-1.jpg';
    $("#input_1").change(function(){
        val = $("#input_1 option:selected").text();
        $("a.lb:first").html( "<img src="+ img_option+">");
     
    });
});
</script>

you have to adjust the   var img_option inside of change function based inn the selected value

other than that it works

Edited by hungryfrank

you can cut up to 4 pages of your checkout by using my three add_ons

login create account in one page

Express checkout  

login pop up modal

Link to comment
Share on other sites

3 minutes ago, hungryfrank said:

<script>
$(function() {
    var img_option='images/sample/lime-1.jpg';
    $("#input_1").change(function(){
        val = $("#input_1 option:selected").text();
        $("a.lb:first").html( "<img src="+ img_option+">");
     
    });
});
</script>

you have to adjust the   var img_option inside of change function based inn the selected value

other than that it works

Where are you placing it as I can't get it to work?

Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Unfortunately, your content contains terms that we do not allow. Please edit your content to remove the highlighted words below.
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

×
×
  • Create New...