Jump to content
  • Checkout
  • Login
  • Get in touch

osCommerce

The e-commerce.

Bootstrap grid layout on Product_info.php page


peterpil19

Recommended Posts

Hi,

 

I am still getting my head around the 2.4.3 BS. I would like to understand better the grid layout system and have been doing reading on how to use bootstrap grids generally.

 

However I cannot seem to follow the layout  at all in product_info.php sufficiently enough to make changes. 

 

I want to achieve the layout in the attached photo for product information (when clicking on a product).  Product image on the left, to the right are names and details of extra product fields which I created (with the names in one column and the details in another simply so that they align), and at the bottom (spanning the length of the image and product fields) is a general description of the product. 

 

I am able to achieve this layout below using conventional html tables etc. However when I attempt to use a bootstrap grid I fail miserably. My product fields end up on top of the product image and scattered all over the shop (literally). 

 

I can't follow whether the the product image is in a column or row. In other words I cannot work out the beginning of the containers and what is where. In other words I cannot visualise the grid in which I am trying to make changes.

 

When I try and put the entire code relating to the product image in its own column, it makes no difference at all.

 

Some general help on how the product_info.php page is laid out from the product onwards would be helpful.  If I could visualise the grid then that would be a great starting point. 

 

Peter

post-75543-0-02742500-1484294324_thumb.png

CE PHOENIX SUPPORTER

Support the Project, go PRO and get access to certified add ons

Full-time I am a C-suite executive of a large retail company in Australia. In my spare time, I enjoying learning about web-design.

Download the latest version of CE Phoenix from gitHub here

Link to comment
Share on other sites

Thanks,

 

I have been doing quite a bit of reading on that site about bootstrap and it's been very helpful and I'm continuing to learn.

What would be helpful  to me specifically is understanding of the default layout in oscommerce in the products info page. Nothing I am doing (by reference to the material on bootstrap) is working. If someone could quickly explain what the default grid looks like on that page thens that will help me understand what I'm reading in the product_info.php page. 

 

If it helps, I can be a bit more specific.

Let's take the product image. Is that in a column? It simply says <div class="piGal pull-right">, no reference to a column. Do I need to place it in a column to then create my product fields in the column to the right? (I've tried that and it doesn't work).   Is it already in a row? etc. 

 

Thanks

 

 

 

Peter

CE PHOENIX SUPPORTER

Support the Project, go PRO and get access to certified add ons

Full-time I am a C-suite executive of a large retail company in Australia. In my spare time, I enjoying learning about web-design.

Download the latest version of CE Phoenix from gitHub here

Link to comment
Share on other sites

Link to comment
Share on other sites

@@peterpil19 Peter having an understanding of CSS definitely helped me to get a better grasp on bootstrap and how to work with some of its helper classes.  For that I found W3Schools to be a big help.  Their TRY ME feature is an excellent learning tool.

 

Best of luck.

 

Dan

Link to comment
Share on other sites

Hi

 

Thank you for your responses, I am grateful however I would be even more grateful for some practical direction or tips. I've spent hours looking at the resources provided and gotten nowhere and am stuck... ( I'm not a programmer).

 

There must be a basic approach to achieve what I am after: image on the left, product details on the right (2 columns, 1 column has the subject, the other the detail) with the entire product details stacking under the image on smaller devices. It's not a complicated layout so I'm sure someone can give a few pointers in a few words.

 

In any event,  this is the approach I have taken:

 

1. Created a row:

 

a. put the image into a column

b. created another column:

i. into that column put the 2 columned list, using the list-group function.

i. I've had to specify widths for each column in that list, e.g. <li class="list-group-item borderless col-sm-8">. Otherwise the columns match the width of their contents and then run consecutively rather than maintaining a dual column format.

 

Here is the link to my page. On a full screen it works the way i want it to, however when you resize the screen or view it on a phone, the 2 columned list does not collapse under the image. I can't figure it out why and I've googled the subject to death...

 

Thanks again if anyone can point me in the right direction.

 

http://www.ancientcointraders.com/product_info.php/cPath/23/products_id/36

 

Peter

CE PHOENIX SUPPORTER

Support the Project, go PRO and get access to certified add ons

Full-time I am a C-suite executive of a large retail company in Australia. In my spare time, I enjoying learning about web-design.

Download the latest version of CE Phoenix from gitHub here

Link to comment
Share on other sites

@@peterpil19

 

I got the code in my file to move the image to the left. It's simple to do. It will be a day or so before I could send it. I'm out of town at the moment.

 

These might help with your layout. All work with v2.3:

 

Tab Menu Section (TMS) - Content Templates Manager - Product Tabs

You can see some images of the Contents Template Manager here:

http://www.hava.ge/modules.php?name=Webmaster&prj=osCommerce&op=Content-Templates-Manager

 

Take care

Bill

Link to comment
Share on other sites

 

the 2 columned list does not collapse under the image. I can't figure it out why and I've googled the subject to death...

 

@@peterpil19  Peter the text is dropping below the images when I look at it.  Have you cleared your cashe?

 

Dan

Link to comment
Share on other sites

I worked it out with a little bit of trial and error.

 

For those that are interested :

 

I changed the column in which I had placed the  product details to 'pull-left' which allowed the product details column to stack under the image on a smaller screen.

 

The other issue I solved was the image overflowing its column. In CSS it was defined to have a fixed width (and auto height) which meant it would not reduce in size when reducing the screen size. I changed the width to 100% in user.css and that has solved the problem

 

Now all I have to work out is:

1. How to get some space between the image and the product details which stack underneath the image on a small phone. Margin-bottom (on the image) or margin- top (on the product details column) doesn't seem to be having any effect.

2. The 2 columns are also collapsing into each other rather than remaining horizontal and collapsing beneath the image as a whole. I'll keep reading to see what I can do to stop this.

 

Peter

CE PHOENIX SUPPORTER

Support the Project, go PRO and get access to certified add ons

Full-time I am a C-suite executive of a large retail company in Australia. In my spare time, I enjoying learning about web-design.

Download the latest version of CE Phoenix from gitHub here

Link to comment
Share on other sites

<div class="row">

  <div class="col-sm-6">6/12 on SM and above, 12/12 on XS</div>
  <div class="col-sm-3">6/12 on SM and above, 12/12 on XS</div>
  <div class="col-sm-3">6/12 on SM and above, 12/12 on XS</div>
  <!-- row above totals 12 units ( 6+3+3 ), next row therefore drops below it -->

  <div class="col-md-9">
    <!-- 9/12 wide on MD and above.  12/12 wide on SM and XS -->
    <!-- lets split this 9 wide column into 3 equal sized columns on SM and above, and 2 equal sized columns on XS -->
    <div class="row">
      <div class="col-xs-6 col-sm-4">4/12 on SM and above.  12/12 on XS.</div>
      <div class="col-xs-6 col-sm-4">4/12 on SM and above.  12/12 on XS.</div>
      <div class="hidden-xs col-sm-4">4/12 on SM and above.  HIDDEN on XS.</div>
      <!-- row above totals 12 units ( 4+4+4 ) , next row (if you add another) drops below it -->
    </div>
  </div>
  <div class="col-md-3">
    3/12 on MD and above.  12/12 on SM and below       
  </div>
  <!-- row above totals 12 units ( 9 + 3) , next row (if you add another) drops below it -->

</div>
That is a super-simple example.

 

Always work in rows and columns.  Always work in multiples of 12.

Link to comment
Share on other sites

Thanks again,

 

All issues are now solved and the page works across all different sizes (desktop, ipad, iphone).  All had to do with being able to count  to 12...who knew that could be so hard... ;)

 

Peter

CE PHOENIX SUPPORTER

Support the Project, go PRO and get access to certified add ons

Full-time I am a C-suite executive of a large retail company in Australia. In my spare time, I enjoying learning about web-design.

Download the latest version of CE Phoenix from gitHub here

Link to comment
Share on other sites

Archived

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

×
×
  • Create New...