Jump to content
  • Checkout
  • Login
  • Get in touch

osCommerce

The e-commerce.

Attribute Images


Recommended Posts

global $_SERVER

first if it didn't work

then global $PHP_SELF;

if($PHP_SELF='product_info.php'){

instead of 

if (in_array(basename($_SERVER['PHP_SELF']), $this->safe_pages)) {

 check the spelling 

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

17 minutes ago, hungryfrank said:

global $_SERVER

first if it didn't work

then global $PHP_SELF;

if($PHP_SELF='product_info.php'){

instead of 


if (in_array(basename($_SERVER['PHP_SELF']), $this->safe_pages)) {

 check the spelling 

Tried this and still not working. I used the showPassword hook as my basis and that that doesn't declare any globals so don't see why this would need to. The hook doesn't seem to be getting called though. 

Link to comment
Share on other sites

Couldn't get it to work as a hook, rather than wait for someone else to come up with a solution I decided to take a different approach and create it as a header tag module and now I have a working image change function. 

And then I realise the reason the hook isn't working is because notepad++ isn't saving the file as .php and I have it working as a hook.

Edited by LeeFoster
Link to comment
Share on other sites

1 hour ago, LeeFoster said:

Couldn't get it to work as a hook, rather than wait for someone else to come up with a solution I decided to take a different approach and create it as a header tag module and now I have a working image change function. 

And then I realise the reason the hook isn't working is because notepad++ isn't saving the file as .php and I have it working as a hook.

I prefer the header tag. removing a hook file is dangerous

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

you can probably add the images to the product like a regular large image.  

name the image the same thing as the option, and access it like that.

this way you also have them in the thumbs 

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:

@LeeFoster

you can probably add the images to the product like a regular large image.  

name the image the same thing as the option, and access it like that.

this way you also have them in the thumbs 

The images are named after the product id combined with the option id and added in the same way as a normal image. So you see them like this - 

image.png.06efe8781114af31a6056ab7ef2e36ee.png

Link to comment
Share on other sites

1 hour ago, LeeFoster said:

Yes it does need there to be an image for all options.

so lets say you have two attributes

color  red/greenn/blue

shape.  circle/square

so do we want to show blue when blue is selected

and when they choose circle then blue is replaced with circle

it would be better to show a blue circle

but this makes the whole thing more complicated.

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

34 minutes ago, hungryfrank said:

so lets say you have two attributes

color  red/greenn/blue

shape.  circle/square

so do we want to show blue when blue is selected

and when they choose circle then blue is replaced with circle

it would be better to show a blue circle

but this makes the whole thing more complicated.

My current range of products only have one attribute, I'll address multiple attributes when it comes up unless @burt
has an idea?

Link to comment
Share on other sites

23 hours ago, LeeFoster said:

My current range of products only have one attribute, I'll address multiple attributes when it comes up unless @burt
has an idea?

I am going  to work on this and make an add-on. I think I am almost there.  i got it to work or all attributes, but not showing blue circle. just showing blue and circle independently. 

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

On 6/6/2020 at 11:18 PM, LeeFoster said:

My current range of products only have one attribute, I'll address multiple attributes when it comes up unless @burt
has an idea?

Too difficult to handle in the current system of options/attributes. 
On the to-do list is a remake of the options/attributes area from the bottom up, but I cannot say when or even if it will ever be done.

 

If what you have made works for you as is; :thumbsup: and well done.

When you swap out the image, what image shows in the modal gallery popup?  The original or the new?

 

If you had 3 options each with 3 attributes, you would have to create 27 images, the way that you are thinking this system. 
It's inflexible, though it would be easily doable, assuming shopowner had time to make and name images appropriately.

Link to comment
Share on other sites

1 hour ago, burt said:

Too difficult to handle in the current system of options/attributes. 
On the to-do list is a remake of the options/attributes area from the bottom up, but I cannot say when or even if it will ever be done.

 

If what you have made works for you as is; :thumbsup: and well done.

When you swap out the image, what image shows in the modal gallery popup?  The original or the new?

 

If you had 3 options each with 3 attributes, you would have to create 27 images, the way that you are thinking this system. 
It's inflexible, though it would be easily doable, assuming shopowner had time to make and name images appropriately.

please if u get to do it also implement option type 

27 images only if I add a button to click to get the result. since there might be instances that one is not selected.

I have resolved other issues, like not having an image, and working for all attributes.

I wil post as soon as I cleanup. a little

original. image I will figure it out

 

 

 

to

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

@burt

I got the image in the Lightbox to. change, but the original is gone. I have no idea how to go forward. 

$(".carousel-item.active").html(`<img src="${source}" style="width: 100%" class="img-fluid" />`);

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

4 hours ago, LeeFoster said:

How did you get around this?

this is what I have so far  with a lot of help from stack

<script>
$(function() {
   var img_option = "<?php echo $_GET['products_id']; ?>";
   const inputs = $('[id^=input_]').filter(function () {
      return this.id.match(/input_\d+$/); //regex for the pattern "input_ followed by a number"
   });
   inputs.on('change', function() {
      let text = this.options[this.selectedIndex].text;
      let value = this.options[this.selectedIndex].value;
      let parenthesis = text.indexOf("(")-1;
      if( parenthesis > -1) text = text.substring(0,parenthesis);
      text=img_option + "_" +text;
      let source = `images/sample/${text}.jpg`;
      $.get("images/sample/"+text)
      .done(function() { 
        if( value > 0) $("a.lb:first").html(`<img src="${source}" style="width: 100%" class="img-fluid" />`);
        $(".carousel-item.active").html(`<img src="${source}" style="width: 100%" class="img-fluid" />`);
      // $( '<div class="carousel-item text-center active"><img src="images/Image-10-22-1398-AP-at-18.40.gif" alt="" width="1680" height="1050" class="img-fluid" loading="lazy"></div>' ).insertBefore( "div.carousel-item:first" );
      }).fail(function() { 
      //  if( value > 0) $("a.lb:first").html(`<img src="${source}" style="width: 350px" class="img-fluid" />`);

    });
      
   });
}); 



</script>

 

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 have this line but it doesn't work  100%. maybe 50%

// $( '<div class="carousel-item text-center "><img src="images/store_logo.png" alt="" width="1680" height="1050" class="img-fluid" loading="lazy"></div>' ).insertBefore( "div.carousel-item:last" );
   

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

30 minutes ago, hungryfrank said:

this is what I have so far  with a lot of help from stack


<script>
$(function() {
   var img_option = "<?php echo $_GET['products_id']; ?>";
   const inputs = $('[id^=input_]').filter(function () {
      return this.id.match(/input_\d+$/); //regex for the pattern "input_ followed by a number"
   });
   inputs.on('change', function() {
      let text = this.options[this.selectedIndex].text;
      let value = this.options[this.selectedIndex].value;
      let parenthesis = text.indexOf("(")-1;
      if( parenthesis > -1) text = text.substring(0,parenthesis);
      text=img_option + "_" +text;
      let source = `images/sample/${text}.jpg`;
      $.get("images/sample/"+text)
      .done(function() { 
        if( value > 0) $("a.lb:first").html(`<img src="${source}" style="width: 100%" class="img-fluid" />`);
        $(".carousel-item.active").html(`<img src="${source}" style="width: 100%" class="img-fluid" />`);
      // $( '<div class="carousel-item text-center active"><img src="images/Image-10-22-1398-AP-at-18.40.gif" alt="" width="1680" height="1050" class="img-fluid" loading="lazy"></div>' ).insertBefore( "div.carousel-item:first" );
      }).fail(function() { 
      //  if( value > 0) $("a.lb:first").html(`<img src="${source}" style="width: 350px" class="img-fluid" />`);

    });
      
   });
}); 



</script>

 

And this uses the image naming convention of ProductId_optionID?

Link to comment
Share on other sites

I completely forgot to give you the PROTO-code I used. 
PROTO-code is code that is made to test a concept and should not be used in a production environment, but it might give you ideas...

<script>
$('select').change(function() {
  a = $(this).find('option:selected').attr('value');
  
  img = (a) ? "images/<?php echo $product_info['products_id']; ?>_" + a + ".jpg" : "images/<?php echo $product_info['products_image']; ?>";
  
  $('.pi-gallery img:first').attr('src', img); 
});
</script>

 

Link to comment
Share on other sites

17 minutes ago, burt said:

I completely forgot to give you the PROTO-code I used. 
PROTO-code is code that is made to test a concept and should not be used in a production environment, but it might give you ideas...


<script>
$('select').change(function() {
  a = $(this).find('option:selected').attr('value');
  
  img = (a) ? "images/<?php echo $product_info['products_id']; ?>_" + a + ".jpg" : "images/<?php echo $product_info['products_image']; ?>";
  
  $('.pi-gallery img:first').attr('src', img); 
});
</script>

 

When put inside my existing hook this doesn't work for me. That said you did say you had it hard coded.

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