Converting options and images addon to BS

[♥14steve14]

I use the Options_as_Images v1.8 Addon found here http://addons.oscommerce.com/info/1467

 

It does what it should and allows images to be used instead of a dropdown list which is ideal for my site. Now, since I updated my site to BS version the addon does not fit the page very well. I have had a mess and a play with the CSS on the page, but have no real idea what I am doing, and whether what I am doing is even right.

 

Could someone help with this and explain why that are doing what they are doing to I may learn something from it. The addon code is below It would be nice if it would show two images wide on a small screen and something like 6 on a large screen.

 

I do also appreciate that it needs fully converting to a module as it requires core code changes, but that is way above my pay grade.

<?php
/*
  $Id: options_images.php,v 1.0 2003/08/18 

  osCommerce, Open Source E-Commerce Solutions
  http://www.oscommerce.com

  Copyright (c) 2003 osCommerce

  Released under the GNU General Public License
*/



    $products_attributes_query = tep_db_query("select count(*) as total from " . TABLE_PRODUCTS_OPTIONS . " popt, " . TABLE_PRODUCTS_ATTRIBUTES . " patrib where patrib.products_id='" . (int)$HTTP_GET_VARS['products_id'] . "' and patrib.options_id = popt.products_options_id and popt.language_id = '" . (int)$languages_id . "'");
    $products_attributes = tep_db_fetch_array($products_attributes_query);
    if ($products_attributes['total'] > 0) {
?>
          <table border="0" cellspacing="0" cellpadding="2">
            <tr>
              <?php  echo '<td class="main" colspan="2">' . TEXT_PRODUCT_OPTIONS . '<br>Please select your desired option using the buttons provided'; ?>
							<?php if (OPTIONS_IMAGES_CLICK_ENLARGE == 'true') echo '<br>Click the images to enlarge';?>
							</td>
            </tr>
<?php
      $products_options_name_query = tep_db_query("select distinct popt.products_options_id, popt.products_options_name, popt.products_options_images_enabled from " . TABLE_PRODUCTS_OPTIONS . " popt, " . TABLE_PRODUCTS_ATTRIBUTES . " patrib where patrib.products_id='" . (int)$HTTP_GET_VARS['products_id'] . "' and patrib.options_id = popt.products_options_id and popt.language_id = '" . (int)$languages_id . "' order by popt.products_options_name");
      while ($products_options_name = tep_db_fetch_array($products_options_name_query)) {
        $products_options_array = array();
        $products_options_query = tep_db_query("select pov.products_options_values_id, pov.products_options_values_name, pov.products_options_values_thumbnail, pa.options_values_price, pa.price_prefix from " . TABLE_PRODUCTS_ATTRIBUTES . " pa, " . TABLE_PRODUCTS_OPTIONS_VALUES . " pov where pa.products_id = '" . (int)$HTTP_GET_VARS['products_id'] . "' and pa.options_id = '" . (int)$products_options_name['products_options_id'] . "' and pa.options_values_id = pov.products_options_values_id and pov.language_id = '" . (int)$languages_id . "'");
        while($products_options = tep_db_fetch_array($products_options_query)){ 
          $products_options_array[] = array('id' => $products_options['products_options_values_id'], 'text' => $products_options['products_options_values_name'], 'thumbnail' => $products_options['products_options_values_thumbnail']);
          if ($products_options['options_values_price'] != '0') {
            $products_options_array[sizeof($products_options_array)-1]['text'] .= ' (' . $products_options['price_prefix'] . $currencies->display_price($products_options['options_values_price'], tep_get_tax_rate($product_info['products_tax_class_id'])) .') ';
          }
        }
				
				  if (isset($cart->contents[$HTTP_GET_VARS['products_id']]['attributes'][$products_options_name['products_options_id']])) {
          $selected_attribute = $cart->contents[$HTTP_GET_VARS['products_id']]['attributes'][$products_options_name['products_options_id']];
        } else {
          $selected_attribute = false;
        }

?>
 
            <tr>
              <td class="main" valign="top"><?php echo $products_options_name['products_options_name'] . ':'; ?></td>
    
              
							
<?php 
							if ($products_options_name['products_options_images_enabled'] == 'false'){
							  echo '<td class="main">' . tep_draw_pull_down_menu('id[' . $products_options_name['products_options_id'] . ']', $products_options_array, $selected_attribute) . '</td></tr>';
               }     
               else {
							  $count=0;
								echo '<td class="main"><table><tr>';
                foreach ($products_options_array as $opti_array){
							    echo '<td><table cellspacing="1" cellpadding="0" border="0">';
							    if (OPTIONS_IMAGES_CLICK_ENLARGE == 'true') 
								    echo '<td align="center"><a href="javascript:popupWindow(\'' . tep_href_link(FILENAME_OPTIONS_IMAGES_POPUP, 'oID=' . $opti_array['id']) .'\')">' . tep_image(DIR_WS_IMAGES . 'options/' . $opti_array['thumbnail'], $opti_array['text'], OPTIONS_IMAGES_WIDTH, OPTIONS_IMAGES_HEIGHT) . '</a></td></tr>';
								    else echo '<tr><td align="center">' . tep_image(DIR_WS_IMAGES . 'options/' . $opti_array['thumbnail'], $opti_array['text'], OPTIONS_IMAGES_WIDTH, OPTIONS_IMAGES_HEIGHT) . '</td></tr>';
							        echo '<tr><td class="main" align="center">' . $opti_array['text'] . '</td></tr>';
							      echo '<tr><td align="center"><input type="radio" name ="id[' . $products_options_name['products_options_id'] . ']" value="' . $opti_array['id'] . '" checked></td></tr></table></td>';

											$count++;
                      if ($count%OPTIONS_IMAGES_NUMBER_PER_ROW == 0) {
							 	        echo '</tr><tr>';
								        $count = 0;
							        }
							      }
									echo '</table>';
								}

?>
        </td></tr>
<?php
      }
?>
     </table>
<?php
    }
?>

Any help gratefully received.

.

[burt]

Do it little bit by little bit...makes it much easier to understand - let's simplify and bootstrap the output at the same time;

 

<table border="0" cellspacing="0" cellpadding="2">
            <tr>
              <?php  echo '<td class="main" colspan="2">' . TEXT_PRODUCT_OPTIONS . '<br>Please select your desired option using the buttons provided'; ?>
							<?php if (OPTIONS_IMAGES_CLICK_ENLARGE == 'true') echo '<br>Click the images to enlarge';?>
							</td>
            </tr>

to

 

<h3>
  <?php 
  echo TEXT_PRODUCT_OPTIONS . '<br>Please select your desired option using the buttons provided'; 
  if (OPTIONS_IMAGES_CLICK_ENLARGE == 'true') echo '<br><small>Click the images to enlarge</small>';
  ?>
</h3>
<table border="0" cellspacing="0" cellpadding="2">

Save, upload.

[♥14steve14]

That makes sense, but why did you remove the start of the table and not replace it with anything, or is there no need to have that code in a table or div or what ever.

 

Thanks for taking the time to explain this Gary.

<table border="0" cellspacing="0" cellpadding="2">

[MrPhil]

In modern website design, it is desirable to get rid of page layouts controlled by tables within tables within tables... CSS is used to size and position div's (and do other stuff too), and that's what Bootstrap uses. If that <table> in question was part of your old code, it should not be put back in for a Bootstrapped site. If the add-on code is using tables for layout, it's best to update it to modern standards. You'll notice that Gary pulled out part of the table and put it into a heading, and left the rest of the table there (below). Eventually, the other stuff in the table will be likewise pulled out into modern format, and the table can disappear.

 

Note that I'm not saying that all tables are evil -- when your data that you want to present is naturally tabular in form, tables are ideal. It's just that back in the Stone Age of the Web, people got into the habit of minutely controlling page layout with a plethora of tables, and it's high time to get away from that. CSS is mature enough now to do all that for you, in a much better way.

[burt]

@@14steve14 exactly as @@MrPhil points out.

 

The aim is to get rid of all the tables that are of no value (eg the table is used for layout of data that could be better laid out in another way).

 

Next part of the simplification;

 

Change

 

<table border="0" cellspacing="0" cellpadding="2">

to

 

<table class="table table-striped">

Save, upload.

[♥14steve14]

Its trying to convert the options as images addon that made me ask how all this works. I understand a bit of how css works, but down understand why it works.

 

I appreciate that tables are replaced now by divs and css, but dont really get how to remove things like <td></td> in the addon code.

[♥14steve14]

Gary Now I get to know about tables and table striped, condensed and those options, as I have used that on other pages on the site where I needed the table to disappear off the edge of the page on small screens allowing the user to swipe across the table and pull the information onto the screen without messing up the layout.

[burt]

The main problematic area is here (which is just awful):

 

$count=0;
								echo '<td class="main"><table><tr>';
                foreach ($products_options_array as $opti_array){
							    echo '<td><table cellspacing="1" cellpadding="0" border="0">';
							    if (OPTIONS_IMAGES_CLICK_ENLARGE == 'true') 
								    echo '<td align="center"><a href="javascript:popupWindow(\'' . tep_href_link(FILENAME_OPTIONS_IMAGES_POPUP, 'oID=' . $opti_array['id']) .'\')">' . tep_image(DIR_WS_IMAGES . 'options/' . $opti_array['thumbnail'], $opti_array['text'], OPTIONS_IMAGES_WIDTH, OPTIONS_IMAGES_HEIGHT) . '</a></td></tr>';
								    else echo '<tr><td align="center">' . tep_image(DIR_WS_IMAGES . 'options/' . $opti_array['thumbnail'], $opti_array['text'], OPTIONS_IMAGES_WIDTH, OPTIONS_IMAGES_HEIGHT) . '</td></tr>';
							        echo '<tr><td class="main" align="center">' . $opti_array['text'] . '</td></tr>';
							      echo '<tr><td align="center"><input type="radio" name ="id[' . $products_options_name['products_options_id'] . ']" value="' . $opti_array['id'] . '" checked></td></tr></table></td>';

											$count++;

You can start by ripping out one of the nested tables, what a waste.

 

echo '<td class="main"><table><tr>';
foreach ($products_options_array as $opti_array){
  echo '<td><table cellspacing="1" cellpadding="0" border="0">';										$count++;

to

 

echo '<td class="main">';
foreach ($products_options_array as $opti_array){
  echo '<table cellspacing="1" cellpadding="0" border="0">';

AND the ending of that table (which I think is this line, what a cluster---- of code whoever wrote this needs a punch in the balls);

 

echo '<tr><td align="center"><input type="radio" name ="id[' . $products_options_name['products_options_id'] . ']" value="' . $opti_array['id'] . '" checked></td></tr></table></td>';

to

 

echo '<tr><td align="center"><input type="radio" name ="id[' . $products_options_name['products_options_id'] . ']" value="' . $opti_array['id'] . '" checked></td>';

[♥Tsimi]

...whoever wrote this needs a punch in the balls

Hahaha... good one!

[♥14steve14]

@@burt  If you are struggling sorting this code out, what hope did I have.

[burt]

Yep, that code is old... with the changes made it should now be sort of bootstrapish

[♥14steve14]

Thanks for that Gary.

 

Do I take it that is is possible to play around with the css on some of the tables and get it actually change on smaller screens, or is there no need.

 

I may have a play and see what I can come up with to get it to look nicer as well.

[burt]

For sure, it's a bit difficult to visualise just by the code.

 

Could you post up a screenshot of how it looks now on a product page?

[joe122joe]

@@14steve14 Are you planning to push an update for the addon?

It will good to have this addon works on osc 2.3 edge.

 

Joe

[♥14steve14]

@@burt

 

Gary, I had to play with the code above as it put all the options under each other instead of side by side, but that was due to the removal of the <td> or one of the nested tables.

 

Here is the current code on the site that lets users swipe the table acros to see more options on smaller screens, but looks okon large screens

            <div>
            <h6><?php echo TEXT_PRODUCT_OPTIONS; ?></h6><br />
              <?php  echo  'Please select your desired option below.<br /><br />'; ?>
							<?php if (OPTIONS_IMAGES_CLICK_ENLARGE == 'true') echo '<br />Click the images to enlarge';?>
            </div>

thats the code for the top part which looks ok. This is the code for the actual option images and text

 		<div class = "table-responsive">
 		<div>
            <tr>
              <td class="optionsAvailable"><?php echo $products_options_name['products_options_name'] . ':'; ?></td>

<?php 
							if ($products_options_name['products_options_images_enabled'] == 'false'){
							  echo '<td class="optionsAvailable">' . tep_draw_pull_down_menu('id[' . $products_options_name['products_options_id'] . ']', $products_options_array, $selected_attribute) . '</td></tr>';
               }     
               else {
							  $count=0;
								echo '<td class="optionsAvailable"><table cellspacing="0" cellpadding="0" border="0"><tr>';
                foreach ($products_options_array as $opti_array){
							    echo '<td><table cellspacing="2" cellpadding="2" border="0">';
							    if (OPTIONS_IMAGES_CLICK_ENLARGE == 'true') 
								    echo '<p class="text-center"><a href="javascript:popupWindow(\'' . tep_href_link(FILENAME_OPTIONS_IMAGES_POPUP, 'oID=' . $opti_array['id']) .'\')">' . tep_image(DIR_WS_IMAGES . 'options/' . $opti_array['thumbnail'], $opti_array['text'], OPTIONS_IMAGES_WIDTH, OPTIONS_IMAGES_HEIGHT) . '</a></p>';
								    else echo '<p class="text-center">' . tep_image(DIR_WS_IMAGES . 'options/' . $opti_array['thumbnail'], $opti_array['text'], OPTIONS_IMAGES_WIDTH, OPTIONS_IMAGES_HEIGHT) . '</p>';
							        echo '<p class="text-center">' . $opti_array['text'] . '</p>';
							      echo '<p class="text-center"><input type="radio" name ="id[' . $products_options_name['products_options_id'] . ']" value="' . $opti_array['id'] . '" checked></p></table></td>';

											$count++;
                      if ($count%OPTIONS_IMAGES_NUMBER_PER_ROW == 0) {
							 	        echo '</tr><tr>';
								        $count = 0;
							        }
							      }
									echo '</table>';
								}

?>
        </td></tr>
<?php
      }
?>
     </div>
     </div>
<?php
    }
?>

and here is an image of the current page on a large device. It is possible through the addon to alter the amount of images in a row in the admin area.

 

 

[oscMarket]

Hi steve, i like what you are doing.

 

i would like to make a call to the peep who can remember someone made a product class that had a secondary class for attributes.

He not finished it, but the idea is actually same as the oscommerce variants.

It allow adding attribute "types" in this case a product image selector. but also can be a type of weight,measurements, text entry etc etc.

 

I just want to put you all in the correct way of doing things to make it easy for you all in the end, even if it is hard and take a bit more time.

You profit from it if doing it right.

[♥14steve14]

@@wHiTeHaT#

 

I use several of the older addons that have yet to be converted to the latest BS version, on my site and I thought this would be an easy one to learn on, but I think I may have been wrong. I gues the next bit is to get some CSS in there, but its knowing how to do that properly.

[oscMarket]

@@14steve14 

 

Sure, just intent to inspire you and others to jump into it and complete it together.

[♥mattjt83]

@@14steve14

 

I think you are missing an opening <table> before the <tr> here:

<div class = "table-responsive">
 		<div>
            <tr>

Also, it seems that there is no closing </table> either. 

 

I haven't had my coffee yet this morning and those nested tables are giving me a headache so I might have missed something....

[♥14steve14]

@@mattjt83

 

That is something similar to what Gary said but he didnt put it quite so eloquently.

 

Is it possible to remove all the tables. I am having problems seeing how to get it to the same width as that set in the admin.. Whewn I try it without the tables they just line up on top of each other and not across the page.

[burt]

Sure thing, it's super-difficult to visualise someone elses code, especially if that code is not great...

 

Basically if a table is being used for layout (ie the old fashioned way of doing things), like so:

 

<table cellpadding="0" width="100%">
  <tr>
    <td>Image 1</td>
    <td>Image 2</td>
    <td>Image 3</td>
  </tr>
  <tr>
    <td>Image 4</td>
    <td>Image 5</td>
    <td> </td>
  </tr>
</table>

 

You would end up with a table displaying like this:

 

Image 1 | Image 2 | Image 3

Image 4 | Image 5

 

So far, so good ?

 

OK, in a bootstrap structure, using tables is OK!  But in this instance using the col- divs is preferable, so to get the same layout, the div structure goes like this:

 

<div class="row">
  <div class="col-sm-4">Image 1</div>
  <div class="col-sm-4">Image 2</div>
  <div class="col-sm-4">Image 3</div>
  <div class="col-sm-4">Image 4</div>
  <div class="col-sm-4">Image 5</div>
<div>

You should be able to see the similarity in the code between the table based code and the div based code. In the div based code we use the col- bootstrap structure. We know (in bootstrap) that any ROW must add up to 12. Look at the first three div's they are all col-sm-4. 3 of those fill up 1 row, so the next two div drops into the next row.

 

Hopefully this all makes some sort of sense?

 

What you need to do now is work out (in the addon code) how the table tr td structure is built, and then move it to a div based layout.

 

Pretty much the answer is:

 

1. change <table .... to <div class="row"> [opens the main holding container]

2. remove all <tr> [now defunct]

3. change all <td> to <div class="col-sm-4"> [opens the div per option]

4. change all </td> to </div> [this closes the per option div opened in # 3]

5. remove all </tr> [now defunct]

6. change </table> to </div> [this closes the opening div, opened in #1]

 

If you got this far...good on you. Time for a coffee.

[♥14steve14]

@@burt

 

That makes it about as clear as mud, but it does make sense to an idiot like me.  I will have a go at this tomorrow when time and mood permit.

 

Now all I have to do is to try and convert these few tables. Piece of cake. LOL

[oscMarket]

Keep in mind when using responsive tables from bootstrap, your items become scrollable within the viewport if they exceed the viewport..

Perhaps that is even preferable for the mobile view.

 

ref: https://www.w3schools.com/bootstrap/tryit.asp?filename=trybs_ref_table-responsive&stacked=h

[♥14steve14]

Gary

 

Thanks for the above help.

 

I now have the following. It works fine on a large monitor 6 images wide, but on a small device like a phone it does not change to two wide on a row.

 		<div>
              <?php echo $products_options_name['products_options_name'] . ':'; ?><br />
        
        	
<?php 
							if ($products_options_name['products_options_images_enabled'] == 'false'){
							  echo '<div>' . tep_draw_pull_down_menu('id[' . $products_options_name['products_options_id'] . ']', $products_options_array, $selected_attribute) . '</div>';
               }     
               else {
							  $count=0;
								echo '<div class="row">';
                foreach ($products_options_array as $opti_array){
							    echo '<div class="col-xs-2">';
								    echo '<p class="text-center">' . tep_image(DIR_WS_IMAGES . 'options/' . $opti_array['thumbnail'], $opti_array['text'], OPTIONS_IMAGES_WIDTH, OPTIONS_IMAGES_HEIGHT) . '</p>';
							        echo '<p class="text-center">' . $opti_array['text'] . '</p>';
							      echo '<p class="text-center"><input type="radio" name ="id[' . $products_options_name['products_options_id'] . ']" value="' . $opti_array['id'] . '" checked></p>
							      </div>';
								        $count = 0;
							        }
							      }
									echo '</div>';
								}
?>
	</div>
<?php
    }
?>

I have removed the code that allowed a choice in admin for number of images in a row as that was just confusing things, and me especially, and I also removed the popup window stuff from just this page. There is also less error when checked.

 

Does anyone have any ideas why it does not change to a two colum listing on small screens and stay at 6 on large ones. I have read all the info I can find on the internet and nothing seems to work.

[oscMarket]

echo '<div class="col-xs-2">';

should be then :

<!-- just example col-md-12 is NOT need, is only to show how you can extend views -->
echo '<div class="col-xs-6 col-sm-2 col-md-12">';