Jump to content

Archived

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

Recommended Posts

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

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites

@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

 

Share this post


Link to post
Share on other sites

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>';

Share this post


Link to post
Share on other sites

×