234BS - Tabs in Product Info

[De Dokta 106]

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:

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.

[burt 2,647]

http://getbootstrap.com/css/#buttons-options

 

I like btn-block

[De Dokta 106]

i would also set all border radius to 0. (personal opinion).

 

One can do that, of course. But I like it like that! De gustibus non est disputandum.  :D 

[vampirehunter 15]

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:

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

[vampirehunter 15]

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

Edited November 25, 2014 by vampirehunter

[♥Tsimi 505]

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.

[♥Tsimi 505]

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.

Edited November 27, 2014 by Tsimi

[♥Tsimi 505]

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;
}
?>

[De Dokta 106]

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

[burt 2,647]

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

[♥Tsimi 505]

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

Edited November 27, 2014 by Tsimi

[♥Tsimi 505]

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

[vampirehunter 15]

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

[♥Dan Cole 372]

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.

[vampirehunter 15]

Ok so if im reading this correctly.

The best way to do tabs is to add both the html for the tabs and the tab contents as content modules.

[vampirehunter 15]

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

[razgre 3]

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

[♥Tsimi 505]

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

Edited February 12, 2015 by Tsimi