Jump to content

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

Share this post


Link to post
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.

Share this post


Link to post
Share on other sites
50 minutes 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.

Not quite what I want but might make a good starting point.

Share this post


Link to post
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

Get the latest Responsive osCommerce CE (community edition) here

It's very easy to over complicate what are simple things in life

Share this post


Link to post
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.

Share this post


Link to post
Share on other sites
Posted (edited)

@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 .

Share this post


Link to post
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.

Share this post


Link to post
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.

Share this post


Link to post
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.  

 


Help shape the future of Phoenix; join the Phoenix Club

Share this post


Link to post
Share on other sites
Posted (edited)

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

Share this post


Link to post
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.

 

Share this post


Link to post
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

Share this post


Link to post
Share on other sites
Posted (edited)
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

Share this post


Link to post
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

Share this post


Link to post
Share on other sites
Posted (edited)
<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

Share this post


Link to post
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?

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

×