Jump to content
dev osCommerce
Forum
  • Checkout
  • Login
  • Contact Us
  • Get in touch

osCommerce

The e-commerce.

New Demo
Our Partners

Bootstrap Tables

PupStar

Recommended Posts

PupStar

PupStar

Posted
Posted

Hi Guys,

 

Whats is the correct way to apply bootstrap tables into a modified product_listing.php module

 

As it stands I have the following code

<?php
  $listing_query = tep_db_query($listing_split->sql_query);

  $prod_list_contents = NULL;

  while ($listing = tep_db_fetch_array($listing_query)) {

    $prod_list_contents .= '<div>';
    $prod_list_contents .= '  <div>';

    $prod_list_contents .= '' . $listing['products_id'] . '';

    if (isset($HTTP_GET_VARS['manufacturers_id']) && tep_not_null($HTTP_GET_VARS['manufacturers_id'])) {
      $prod_list_contents .= '    <a href="' . tep_href_link(FILENAME_PRODUCT_INFO, 'manufacturers_id=' . $HTTP_GET_VARS['manufacturers_id'] . '&products_id=' . $listing['products_id']) . '">' . $listing['products_name'] . '</a>';
    } else {
      $prod_list_contents .= '    <a href="' . tep_href_link(FILENAME_PRODUCT_INFO, ($cPath ? 'cPath=' . $cPath . '&' : '') . 'products_id=' . $listing['products_id']) . '">' . $listing['products_name'] . '</a>';
    }

    $prod_list_contents .= '' . $listing['mediacat_part_no'] . '';

    $prod_list_contents .= '' . $listing['products_mediacat_quantity'] . '';

    if (tep_not_null($listing['specials_new_products_price'])) {
      $prod_list_contents .= '' .  $currencies->display_price($listing['products_price'], tep_get_tax_rate($listing['products_tax_class_id'])) . '</span>  <span class="productSpecialPrice">' . $currencies->display_price($listing['specials_new_products_price'], tep_get_tax_rate($listing['products_tax_class_id'])) . '';
    } else {
      $prod_list_contents .= '' . $currencies->display_price($listing['products_price'], tep_get_tax_rate($listing['products_tax_class_id'])) . '';
    }
    $prod_list_contents .= '' . tep_draw_button(IMAGE_BUTTON_BUY_NOW, 'cart', tep_href_link(basename($PHP_SELF), tep_get_all_get_params(array('action')) . 'action=buy_now&products_id=' . $listing['products_id']), NULL, NULL, 'btn-success btn-sm') . '';

    $prod_list_contents .= '  </div>';
    $prod_list_contents .= '</div>';

  }

  echo '<div>' . $prod_list_contents . '</div>';
} else {
?>

  <div class="alert alert-info"><?php echo TEXT_NO_PRODUCTS; ?></div>

<?php
}
?>

which displays as in the attached image

 

I have studied lots of examples around the interweb but not entirely sure how to apply it.

 

There are 6 colums all squished together in the image

 

Thanks

 

Mark

Link to comment
Share on other sites
PupStar

PupStar

Posted
  • Author
Posted

@@wHiTeHaT

 

thanks mate, so far so good

 

I now just need a pointer on how to move the column headers outsite of the while loop.

 

Everytime I tried it showed the first row of the data in the table and then the rest outside of the table.

<?php
/*
  $Id$

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

  Copyright (c) 2010 osCommerce

  Released under the GNU General Public License
*/

    $listing_split = new splitPageResults($listing_sql, '16', 'pd.mediacat_part_no');

?>

<?php
  if ($messageStack->size('product_action') > 0) {
    echo $messageStack->output('product_action');
  }
?>

<?php

  if ($listing_split->number_of_rows > 0) { ?>

  <?php
  $listing_query = tep_db_query($listing_split->sql_query);

  $prod_list_contents = NULL;

  while ($listing = tep_db_fetch_array($listing_query)) {

    $prod_list_contents .= '<div>';
    $prod_list_contents .= '  <div>';
    $prod_list_contents .= '<table class="table table-striped table-bordered">';
    $prod_list_contents .= '    <thead>';
    $prod_list_contents .= '        <tr>';
    $prod_list_contents .= '            <th>No.</th>';
    $prod_list_contents .= '            <th>Part No.</th>';
    $prod_list_contents .= '            <th>Name</th>';
    $prod_list_contents .= '            <th>Qty</th>';
    $prod_list_contents .= '            <th>Price</th>';
    $prod_list_contents .= '            <th>Buy Now</th>';
    $prod_list_contents .= '        </tr>';
    $prod_list_contents .= '    </thead>';
    $prod_list_contents .= '<tbody>';
    $prod_list_contents .= '    <tr>';
    $prod_list_contents .= '        <td class="col-md-2">' . $listing['products_id'] . '</td>';
    $prod_list_contents .= '        <td class="col-md-2">' . $listing['mediacat_part_no'] . '</td>';

	if (isset($HTTP_GET_VARS['manufacturers_id']) && tep_not_null($HTTP_GET_VARS['manufacturers_id'])) {
	$prod_list_contents .= '        <td class="col-md-2"><a href="' . tep_href_link(FILENAME_PRODUCT_INFO, 'manufacturers_id=' . $HTTP_GET_VARS['manufacturers_id'] . '&products_id=' . $listing['products_id']) . '">' . $listing['products_name'] . '</a></td>';
    } else {
	$prod_list_contents .= '        <td class="col-md-2"><a href="' . tep_href_link(FILENAME_PRODUCT_INFO, ($cPath ? 'cPath=' . $cPath . '&' : '') . 'products_id=' . $listing['products_id']) . '">' . $listing['products_name'] . '</a></td>';
    }

	$prod_list_contents .= '        <td class="col-md-2">' . $listing['products_mediacat_quantity'] . '</td>';

    if (tep_not_null($listing['specials_new_products_price'])) {
      $prod_list_contents .= '<td class="col-md-2">' .  $currencies->display_price($listing['products_price'], tep_get_tax_rate($listing['products_tax_class_id'])) . '</span>  <span class="productSpecialPrice">' . $currencies->display_price($listing['specials_new_products_price'], tep_get_tax_rate($listing['products_tax_class_id'])) . '</td>';
    } else {
      $prod_list_contents .= '<td class="col-md-2">' . $currencies->display_price($listing['products_price'], tep_get_tax_rate($listing['products_tax_class_id'])) . '</td>';
    }

    $prod_list_contents .= '<td class="col-md-2">' . tep_draw_button(IMAGE_BUTTON_BUY_NOW, 'cart', tep_href_link(basename($PHP_SELF), tep_get_all_get_params(array('action')) . 'action=buy_now&products_id=' . $listing['products_id']), NULL, NULL, 'btn-success btn-sm') . '</td>';

	$prod_list_contents .= '    </tr>';
	$prod_list_contents .= '    </tbody>';
	$prod_list_contents .= '</table>';

    $prod_list_contents .= '  </div>';
    $prod_list_contents .= '</div>';

  }

  echo '<div>' . $prod_list_contents . '</div>';
} else {
?>

  <div class="alert alert-info"><?php echo TEXT_NO_PRODUCTS; ?></div>

<?php
}
?>

Also if you spot any other problems please advise.

 

Thanks

 

Mark

Link to comment
Share on other sites
bruyndoncx

♥bruyndoncx

Posted
Posted

upto including tbody above the while

and last 4 lines starting from (including /tbody) below the while ending bracket

KEEP CALM AND CARRY ON

I do not use the responsive bootstrap version since i coded my responsive version earlier, but i have bought every 28d of code package to support burts effort and keep this forum alive (albeit more like on life support).

So if you are still here ? What are you waiting for ?!

 

Find the most frequent unique errors to fix:

grep "PHP" php_error_log.txt | sed "s/^.* PHP/PHP/g" |grep "line" |sort | uniq -c | sort -r > counterrors.txt

Link to comment
Share on other sites
PupStar

PupStar

Posted
  • Author
Posted

this is how I ended up doing it

<?php
/*
  $Id$

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

  Copyright (c) 2010 osCommerce

  Released under the GNU General Public License
*/

    $listing_split = new splitPageResults($listing_sql, '16', 'pd.mediacat_part_no');

?>

<?php
  if ($messageStack->size('product_action') > 0) {
    echo $messageStack->output('product_action');
  }
?>

<div class="table-responsive">
	<table class="table table-border">
		<thead>
			<tr>
				<th class="col-xs-1">No.</th>
				<th class="col-xs-3">Part No.</th>
				<th class="col-xs-3">Description</th>
				<th class="col-xs-1">Qty</th>
				<th class="col-xs-2">Price</th>
				<th class="col-xs-2">Buy Now</th>
			</tr>
		</thead>
	</table>
</div>

<?php

  if ($listing_split->number_of_rows > 0) { ?>

  <?php
  $listing_query = tep_db_query($listing_split->sql_query);

  $prod_list_contents = NULL;

  while ($listing = tep_db_fetch_array($listing_query)) {

$prod_list_contents .= '<div class="table-responsive">';
	$prod_list_contents .= '<table class="table table-condensed table-striped table-no-border">';

    $prod_list_contents .= '<tbody>';
    $prod_list_contents .= '    <tr>';
    $prod_list_contents .= '        <td class="col-xs-1">' . $listing['products_id'] . '</td>';
    $prod_list_contents .= '        <td class="col-xs-3">' . $listing['mediacat_part_no'] . '</td>';

	if (isset($HTTP_GET_VARS['manufacturers_id']) && tep_not_null($HTTP_GET_VARS['manufacturers_id'])) {
	$prod_list_contents .= '        <td class="col-xs-3"><a href="' . tep_href_link(FILENAME_PRODUCT_INFO, 'manufacturers_id=' . $HTTP_GET_VARS['manufacturers_id'] . '&products_id=' . $listing['products_id']) . '">' . $listing['products_name'] . '</a></td>';
    } else {
	$prod_list_contents .= '        <td class="col-xs-3"><a href="' . tep_href_link(FILENAME_PRODUCT_INFO, ($cPath ? 'cPath=' . $cPath . '&' : '') . 'products_id=' . $listing['products_id']) . '">' . $listing['products_name'] . '</a></td>';
    }

	$prod_list_contents .= '        <td class="col-xs-1">' . $listing['products_mediacat_quantity'] . '</td>';

    if (tep_not_null($listing['specials_new_products_price'])) {
      $prod_list_contents .= '<td class="col-xs-2">' .  $currencies->display_price($listing['products_price'], tep_get_tax_rate($listing['products_tax_class_id'])) . '</span>  <span class="productSpecialPrice">' . $currencies->display_price($listing['specials_new_products_price'], tep_get_tax_rate($listing['products_tax_class_id'])) . '</td>';
    } else {
      $prod_list_contents .= '<td class="col-xs-2">' . $currencies->display_price($listing['products_price'], tep_get_tax_rate($listing['products_tax_class_id'])) . '</td>';
    }

    $prod_list_contents .= '<td class="col-xs-2">' . tep_draw_button(IMAGE_BUTTON_BUY_NOW, 'cart', tep_href_link(basename($PHP_SELF), tep_get_all_get_params(array('action')) . 'action=buy_now&products_id=' . $listing['products_id']), NULL, NULL, 'btn-success btn-xs') . '</td>';

	$prod_list_contents .= '    </tr>';
	$prod_list_contents .= '    </tbody>';
	$prod_list_contents .= '</table>';
	$prod_list_contents .= '</div>';

  }

  echo '<div>' . $prod_list_contents . '</div>';
} else {
?>

  <div class="alert alert-info"><?php echo TEXT_NO_PRODUCTS; ?></div>

<?php
}
?>

just need to sort out the niggles with the row header alignment and pretify it for mobile view

Link to comment
Share on other sites
bruyndoncx

♥bruyndoncx

Posted
Posted

now read my instructions and then it does align properly, now just created a table mess

KEEP CALM AND CARRY ON

I do not use the responsive bootstrap version since i coded my responsive version earlier, but i have bought every 28d of code package to support burts effort and keep this forum alive (albeit more like on life support).

So if you are still here ? What are you waiting for ?!

 

Find the most frequent unique errors to fix:

grep "PHP" php_error_log.txt | sed "s/^.* PHP/PHP/g" |grep "line" |sort | uniq -c | sort -r > counterrors.txt

Link to comment
Share on other sites
PupStar

PupStar

Posted
  • Author
Posted

@bruyndoncx

@wHiTeHaT

 

I have now the layout I require for large devices but not sure about the breakpoints for small devices

 

The code I have is

echo '<div class="alert alert-info">' . $category_image['category_image_name'] . '</div>';
echo '<div id="parts_container">';
echo ' <div id="image_column">';
echo '	<div class="sp-wrap"><a href="'.tep_href_link(DIR_WS_IMAGES_PARTS . $category_image['categories_image_large']).'">' . tep_image_maps(DIR_WS_IMAGES_PARTS . $category_image['categories_image'], '', '', '', '', 'class="img-responsive"') . '</a></div>';
echo ' </div>';
echo ' <div id="parts_column">';
        include(DIR_WS_MODULES . FILENAME_PRODUCT_LISTING_LIST);
echo ' </div>';
echo '</div>';

and the css

#parts_container {
  width: 100%;
}
#image_column {
  float: left;
  width: 50%;
}
#parts_column {
  float: right;
  width: 50%;
}

As it stands the when viewing on small devices it the 'parts_column' overflows below the image but not in a nice way

 

Mark

 

Link to comment
Share on other sites
PupStar

PupStar

Posted
  • Author
Posted

ok I have managed to rework the divs and now this works for the colums but I can not seem to get the image responsive and it makes the page scroll right on small devices

echo '<div class="row">';
echo ' <div class="col-md-6 col-sm-6 col-xs-12">';
echo '	<div class="sp-wrap"><a href="'.tep_href_link(DIR_WS_IMAGES_PARTS . $category_image['categories_image_large']).'">' . tep_image_maps(DIR_WS_IMAGES_PARTS . $category_image['categories_image'], NULL, NULL, 'class="img-responsive"') . '</a></div>';
echo ' </div>';
echo ' <div class="col-md-6 col-sm-6 col-xs-12">';
         include(DIR_WS_MODULES . FILENAME_PRODUCT_LISTING_LIST);
echo ' </div>';
echo '</div>';
Link to comment
Share on other sites

Archived

This topic is now archived and is closed to further replies.

Go to topic listing
×
×
  • Create New...