Jump to content
  • Checkout
  • Login
  • Get in touch

osCommerce

The e-commerce.

234BS - Tabs in Product Info


Recommended Posts

Hi

 

Since the product info with the product details, several modules, also purchased products, reviews, maybe options and so on for my taste has too many items and thus looks a bit cluttered and messy, I have tried to make the page with product tabs somewhat clearer.
This is pretty easy to implement with the BS Tabs. The result looks like this for now:

post-315569-0-08626700-1414758352_thumb.jpgpost-315569-0-29235400-1414758363_thumb.jpg

Live-demo: video-stuff.de/demo/bootstrap/liebfrauenmilch-p-29.html

But what I still do not like is the positioning of the buy-buttons. I'm posting the whole thing here in the hope that someone has a brilliant idea for it.

 

J.J.

Link to comment
Share on other sites

  • 4 weeks later...

Hi

 

Since the product info with the product details, several modules, also purchased products, reviews, maybe options and so on for my taste has too many items and thus looks a bit cluttered and messy, I have tried to make the page with product tabs somewhat clearer.

This is pretty easy to implement with the BS Tabs. The result looks like this for now:

attachicon.gifTabs.jpgattachicon.gifTabs_collapsed.jpg

Live-demo: video-stuff.de/demo/bootstrap/liebfrauenmilch-p-29.html

 

But what I still do not like is the positioning of the buy-buttons. I'm posting the whole thing here in the hope that someone has a brilliant idea for it.

 

J.J.

hi

which tab plugin did you use?

 

thanks

Link to comment
Share on other sites

@@vampirehunter, tabs are default in Twitter-bootstrap

 

hi

thanks

 

So no need to install any seperate plugin like it was before?

I think i installed a jquery tab plugin last time, but that also added an extra field to the database, and admin and front end.

 

If i wanted an extra field on the product info, whats best way, would i still need to install a new field?

thanks

Link to comment
Share on other sites

How do you put the contents of the products_notifications box and the reviews inside tabs?

I see a reviews query inside the product_info.php but i can't find the code that is responsible for the "What our customers say..." part.

I tried to get only the data from the boxes as explained in multimixers blog but it didn't work. So either I'm doing something wrong or it doesn't work with BS anymore.

Link to comment
Share on other sites

OK i think i got the reviews part.

I added this code to the tab code area.

<?php
$average_query = tep_db_query("select AVG(r.reviews_rating) as average, COUNT(r.reviews_rating) as count from " . TABLE_REVIEWS . " r where r.products_id = '" . (int)$product_info['products_id'] . "' and r.reviews_status = 1");
$average = tep_db_fetch_array($average_query);
echo '<div class="col-sm-12 text-center alert alert-success">' . sprintf(REVIEWS_TEXT_AVERAGE, tep_output_string_protected($average['count']), ' ' . tep_draw_stars(tep_output_string_protected(round($average['average'])))) . '</div>';
?>
<?php
$reviews_query_raw = "select r.reviews_id, rd.reviews_text, r.reviews_rating, r.date_added, r.customers_name from " . TABLE_REVIEWS . " r, " . TABLE_REVIEWS_DESCRIPTION . " rd where r.products_id = '" . (int)$product_info['products_id'] . "' and r.reviews_id = rd.reviews_id and rd.languages_id = '" . (int)$languages_id . "' and r.reviews_status = 1 order by r.reviews_rating desc";
$reviews_split = new splitPageResults($reviews_query_raw, MAX_DISPLAY_NEW_REVIEWS);
$reviews_query = tep_db_query($reviews_split->sql_query);
while ($reviews = tep_db_fetch_array($reviews_query)) {
$review_name = tep_output_string_protected($reviews['customers_name']);
?>
<blockquote class="col-sm-12">
  <p><?php echo tep_output_string_protected($reviews['reviews_text']); ?></p>
  <footer><?php echo sprintf(REVIEWS_TEXT_RATED, tep_draw_stars($reviews['reviews_rating']), $review_name, $review_name); ?></footer>
</blockquote>
<?php
}
?>

now only thing left is the notification part.

Link to comment
Share on other sites

And here is the code for the notifications part.

<?php 
if (isset($HTTP_GET_VARS['products_id'])) {
if (tep_session_is_registered('customer_id')) {
  $check_query = tep_db_query("select count(*) as count from " . TABLE_PRODUCTS_NOTIFICATIONS . " where products_id = '" . (int)$HTTP_GET_VARS['products_id'] . "' and customers_id = '" . (int)$customer_id . "'");
  $check = tep_db_fetch_array($check_query);

  $notification_exists = (($check['count'] > 0) ? true : false);
} else {
  $notification_exists = false;
}

if ($notification_exists == true) {
  $notif_contents = '<a href="' . tep_href_link($PHP_SELF, tep_get_all_get_params(array('action')) . 'action=notify_remove', $request_type) . '"><span class="glyphicon glyphicon-remove"></span> ' . sprintf(MODULE_BOXES_PRODUCT_NOTIFICATIONS_BOX_NOTIFY_REMOVE, tep_get_products_name($HTTP_GET_VARS['products_id'])) .'</a>';
} else {
  $notif_contents = '<a href="' . tep_href_link($PHP_SELF, tep_get_all_get_params(array('action')) . 'action=notify', $request_type) . '"><span class="glyphicon glyphicon-envelope"></span> ' . sprintf(MODULE_BOXES_PRODUCT_NOTIFICATIONS_BOX_NOTIFY, tep_get_products_name($HTTP_GET_VARS['products_id'])) .'</a>';
}
echo $notif_contents;
}
?>
Link to comment
Share on other sites

@@Tsimi
 
Hi Lambros
 
This is one possible approach. For my demo I've embedded the boxes modules into the tabs, to allow users to control the whole thing from the admin.

Unfortunately, currently it makes no sense to post the code here, because meanwhile burt has changed the systematics of modules and moved the elements of the products page from boxes to content. My demo is still based on the previous BS version so it would only cause confusion if I would post the code here. :x

 

J.J.

Link to comment
Share on other sites

I have changed the product boxes to content modules.  I have only done the reviews module so far, this is the only one I have had time for so far.

 

Note that we don't really want code blocks like this pasted directly into the product page (if possible) - we would much rather see content modules being made...future users can then download from addons area, unzip, upload, go into admin, turn on...

Link to comment
Share on other sites

yeah, i know that my approach is not ideal. But it is the one that worked for now. If i find time i would like to do it better...but there are other things first. Besides this is not a project for osC community more a private thing.

Big picture....small details later.... ;)

Link to comment
Share on other sites

:lol:  @@wHiTeHaT very nice explanation/comparison.

Like i said it is just temporary until i can get my head around the contents modules thing but first i have to finish some other stuff. More visual stuff and then i will go for the details. I mean even burt hasn't coded the other stuff yet what makes you think that I would be capable of doing that so quickly. :wacko:

Link to comment
Share on other sites

is there any tutorials on how to make the content modules or some instructions on how to go about this? i would like to do this on mine.

you are right. it would make things a lot easier to just include a module instead of pasting a code and to have it controlled from admin.

 

I have changed the product boxes to content modules.  I have only done the reviews module so far, this is the only one I have had time for so far.

 

Note that we don't really want code blocks like this pasted directly into the product page (if possible) - we would much rather see content modules being made...future users can then download from addons area, unzip, upload, go into admin, turn on...

Link to comment
Share on other sites

  • 1 month later...

Starting to play around with the presentation of my product information on the product info page and was wondering where this development ended up?   Adding the reviews to a product tab seems like a good idea to me.

Link to comment
Share on other sites

@@vampirehunter ,

 

Sorry for the mis-understanding, to use tabs you not need any specific database tables.

you could for example load the reviews in a tab, by simply hardcode it inside.

 

However if you relate to "extra fields" , for example the product extra fields add-on, you need to call these "fields" inside each tab-content:

 

<div role="tabpanel">

  <!-- Nav tabs -->
  <ul class="nav nav-tabs" role="tablist">
    <li role="presentation" class="active"><a href="#price" aria-controls="price" role="tab" data-toggle="tab">Price</a></li>
    <li role="presentation"><a href="#description" aria-controls="description" role="tab" data-toggle="tab">Description</a></li>
    <li role="presentation"><a href="#images" aria-controls="images" role="tab" data-toggle="tab">images</a></li>

  </ul>

  <!-- Tab panes -->
  <div class="tab-content">
    <div role="tabpanel" class="tab-pane active" id="price"><php echo $product_info['products_price']; ?></div>
    <div role="tabpanel" class="tab-pane" id="description"><php echo $product_info['products_description']; ?></div>
    <div role="tabpanel" class="tab-pane" id="images"><php echo $product_info['products_image']; ?></div>
  </div>

</div>
The above snippet should work instantly in your product_info.php file.

 

You need to adapt the $vars to your requirements.

Would you recommend to add this tab code via a content module?

And have each tab reference

the required content via separate content modules.

 

So you could load reviews, etc and whatever else via admin content modules.

Link to comment
Share on other sites

  • 3 weeks later...

Hello @@Tsimi

 

As you know I am working on different project and this project I want to have products tab in products page.

 

Do you have complete code and if you don't mind share with me. I already write some to hard code since we don't have content module.

 

Thanks again

Link to comment
Share on other sites

@@razgre

 

My Products Tab code is modified and not exactly same as the stock Bootstrap version. So posting here my code wouldn't help you but more confuse you.

Here is an example how it can look like with the standard Bootstrap look.

http://pastebin.com/Ucp5HFFr

More Info on Product Tabs look here:

http://getbootstrap.com/javascript/#tabs
 

Link to comment
Share on other sites

Archived

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

×
×
  • Create New...