Jump to content
  • Checkout
  • Login
  • Get in touch

osCommerce

The e-commerce.

Bootstrap Tables


Recommended Posts

I have a question about product description content and bootstrap.

 

How will tables in the product description affect the responsiveness on smaller devices?

 

 I use tables for sizing charts for various items.  I don't set a table width such as 400px, 100% or such but rather allow the table to grow with whatever the content dictates.

I am not a professional webmaster or PHP coder by background or training but I will try to help as best I can.

I remember what it was like when I first started with osC. It can be overwhelming.

However, I strongly recommend considering hiring a professional for extensive site modifications, site cleaning, etc.

There are several good pros here on osCommerce. Look around, you'll figure out who they are.

Link to comment
Share on other sites

I have a question about product description content and bootstrap.

 

How will tables in the product description affect the responsiveness on smaller devices?

 

 I use tables for sizing charts for various items.  I don't set a table width such as 400px, 100% or such but rather allow the table to grow with whatever the content dictates.

Tables will be fine, no problem. See http://getbootstrap.com/css/#tables

Link to comment
Share on other sites

Tables will be fine, no problem. See http://getbootstrap.com/css/#tables

 

Good resource.

 

I see there a responsive table class discussed there.   Specifically with table-responsive

 

Researching around I found a page showing a bootstrap table responsive code example as so:

<div class="table-responsive">
    <table class="table">
        <thead>
            <tr>
                <th>#</th>
                <th>Table heading</th>
                <th>Table heading</th>
                <th>Table heading</th>
                <th>Table heading</th>
                <th>Table heading</th>
                <th>Table heading</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>1</td>
                <td>Table cell</td>
                <td>Table cell</td>
                <td>Table cell</td>
                <td>Table cell</td>
                <td>Table cell</td>
                <td>Table cell</td>
            </tr>
            <tr>
                <td>2</td>
                <td>Table cell</td>
                <td>Table cell</td>
                <td>Table cell</td>
                <td>Table cell</td>
                <td>Table cell</td>
                <td>Table cell</td>
            </tr>
            <tr>
                <td>3</td>
                <td>Table cell</td>
                <td>Table cell</td>
                <td>Table cell</td>
                <td>Table cell</td>
                <td>Table cell</td>
                <td>Table cell</td>
            </tr>
        </tbody>
    </table>
</div>

I looked around to see if CKeditor had an add on for that, couldn't find any.

 

So this may take manual table coding if a responsive table is desired?

 

Without see how a non responsive table shows in bootstrap I'm not sure what I'd want in a shop.  Maybe an alternative to a table ....... using some other method to let the customer see sizing (attribute) options for the product would be better in responsive design. 

I am not a professional webmaster or PHP coder by background or training but I will try to help as best I can.

I remember what it was like when I first started with osC. It can be overwhelming.

However, I strongly recommend considering hiring a professional for extensive site modifications, site cleaning, etc.

There are several good pros here on osCommerce. Look around, you'll figure out who they are.

Link to comment
Share on other sites

@@altoid

 

The list groups work pretty well and are easy enough to code up:

 

http://getbootstrap.com/components/#list-group

 

Thanks @@GLWalker , another good resource.   I've got that site bookmarked now.

 

Attached is an example of one of my sizing charts showing lots of info for the customer to consider when buying the right size.

 

post-231701-0-42465900-1420285944_thumb.jpg

 

In this case on a desktop display it's coming in at over 800 px.

 

The chart issue seems to lean toward a responsive table.  But perhaps a modification to the product_info page that will let the customers view a pop up of the sizing information may work better.  I'll have to think about that.

 

Thanks

I am not a professional webmaster or PHP coder by background or training but I will try to help as best I can.

I remember what it was like when I first started with osC. It can be overwhelming.

However, I strongly recommend considering hiring a professional for extensive site modifications, site cleaning, etc.

There are several good pros here on osCommerce. Look around, you'll figure out who they are.

Link to comment
Share on other sites

@@altoid

 

Basically, you could take your current markup, and just add the table classes to the start : <table class="table table-striped" etc;  and remove any older inline markup such as width, cellspacing align, etc;

A single div with table-responsive class would need to wrap around the table markup - IF needed.

Ive found a lot of time that if I take an older table full of inline markup and remove all the align, width, valign, yada yada from all the rows and cells, replacing aligns with class="text-right or text-center" then the table usually will fit into the need format pretty well.

Of course the bigger the table the chance of still needing a responsive wrapper - which works but I feel it still needs something more.

 

But the idea you suggested of using a popup may work out very well too, try using a modal with your table inside it.

Follow the community build:

BS3 to osCommerce Responsive from the Get Go!

Check out the new construction:

Admin Gone to Total BS!

Link to comment
Share on other sites

@@Gergely

 

I had a similar issue with a bootstrap 2 site I did a couple of years ago, the cart was very close to what was developed here for this version, a few customers were complaining they could not update their quantities - basically they did not know what the refresh icon next to the quantity field was for. So I placed the word "update" next to it and that seemed to work.

 

The bad thing was that one of the stores employees who had been in website development in the past could not figure out the refresh icon to update - which leads me to always keep in mind the ignorance of the end user when building, sometimes we have to go out of the way for something that seems so simple - or vice avers.

Follow the community build:

BS3 to osCommerce Responsive from the Get Go!

Check out the new construction:

Admin Gone to Total BS!

Link to comment
Share on other sites

@@GLWalker  Tested out a basic table in 234 bs on my uniserver setup with table class="table table-striped".  Screenshot below.

 

post-231701-0-71054200-1420316289_thumb.jpg

 

No responsive table set up as I am only working with desktop at this time but we'll see what bootstrap css can do for the table when I get around to putting something on my web server.

 

I am not a professional webmaster or PHP coder by background or training but I will try to help as best I can.

I remember what it was like when I first started with osC. It can be overwhelming.

However, I strongly recommend considering hiring a professional for extensive site modifications, site cleaning, etc.

There are several good pros here on osCommerce. Look around, you'll figure out who they are.

Link to comment
Share on other sites

We have a few tables in the responsive build, so far as I recall none of them have that responsive div surrounding them...

 

Typical example:  when shopper has items in cart, and is looking at shopping_cart.php

 

https://github.com/gburton/osCommerce-234-bootstrap/blob/master/shopping_cart.php#L75

 

If I recall correctly, the extra div forces the user to have to scroll horizontally to see the full table, whereas not having it makes the table expand and contract with the size of the viewport.  So I guess it's best to try both and see what works best in the context of your own shop(s)..

Link to comment
Share on other sites

We have a few tables in the responsive build, so far as I recall none of them have that responsive div surrounding them...

 

Typical example:  when shopper has items in cart, and is looking at shopping_cart.php

 

https://github.com/gburton/osCommerce-234-bootstrap/blob/master/shopping_cart.php#L75

 

If I recall correctly, the extra div forces the user to have to scroll horizontally to see the full table, whereas not having it makes the table expand and contract with the size of the viewport.  So I guess it's best to try both and see what works best in the context of your own shop(s)..

 

You memory is correct on that.  In doing some research the one article discussed the responsive tables and in the authors case, there was a plus to letting the visitor scroll the table.

 

I'm not sure about that in my case, it may be a bit of a turn off when viewing in a small device.   When I get something live we'll see how the presentation goes.

 

For small tables, OK I think. But for larger multi column tables, not sure.  table-condensed may help.

 

Thanks

I am not a professional webmaster or PHP coder by background or training but I will try to help as best I can.

I remember what it was like when I first started with osC. It can be overwhelming.

However, I strongly recommend considering hiring a professional for extensive site modifications, site cleaning, etc.

There are several good pros here on osCommerce. Look around, you'll figure out who they are.

Link to comment
Share on other sites

Archived

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

×
×
  • Create New...