replace tables with divs, using templates(bootstrap)

Hi, I have a cart design I'm happy with:

http://dev2.magickitchen.com/cart-breakdown-templates.html

and the old cart is here: http://dev.magickitchen.com/cgi/cart.cgi?cmd=demo_display

The trouble I am having is that the cart is broken down into templates. One one template, it shows only the top line, with headings. Easy in tables:
<table><td colspan="6"></td><tr>
<TR>
  <TD WIDTH='90' HEIGHT='20'><span CLASS='FormHead'>Catalog #</span></TD>
  <TD >                         <span CLASS='FormHead'>Product Name</span></TD>
  <TD WIDTH='40' ALIGN='center'><span CLASS='FormHead'>Del</span></TD>
  <TD WIDTH='70' ALIGN='right'><span CLASS='FormHead'>Price</span></TD>
  <TD WIDTH='95' ALIGN='center'><span CLASS='FormHead'>Quantity</span></TD>
  <TD WIDTH='75' ALIGN='right'><span CLASS='FormHead'>Total</span></TD>

</TR> </table>

Then place the next row in another template.

But my div is more complicated. See attached. I am stumped as to how to just put that top row into the template, given this bootstrap code.
new-cart-code.doc
mel200Asked:
Who is Participating?
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

Julian HansenCommented:
Not 100% sure what you are asking - can you type slowly so those of us who should not still be in the office can keep up.
0
mel200Author Commented:
hahaha.. It is pretty complicated. Let's try it this way. Go to: http://www.magickitchen.com/menu/main_courses.html and place an item into the cart. Then go to checkout and you'll see
http://www.magickitchen.com/cgi/cart.cgi.

It should look something like this:
screenshot of cart
View source, and scroll down. You'll see lines like: <!-- ===== ABCDE ===== TEMPLATE BEGIN:  /home/mkitchen/www/www.magickitchen.com/cart/template/admin/cart_page.tmpl ======= -->

The cart is broken up into many little pages, template files. cart_page.tmpl and cart_body.tmpl are the framework.

For instance,  cart_page.tmpl holds the header that names the columns:
<TR>
  <TD WIDTH='90' HEIGHT='20'><span CLASS='FormHead'>Catalog #</span></TD>
  <TD >                         <span CLASS='FormHead'>Product Name</span></TD>
  <TD WIDTH='40' ALIGN='center'><span CLASS='FormHead'>Del</span></TD>
  <TD WIDTH='70' ALIGN='right'><span CLASS='FormHead'>Price</span></TD>
  <TD WIDTH='95' ALIGN='center'><span CLASS='FormHead'>Quantity</span></TD>
  <TD WIDTH='75' ALIGN='right'><span CLASS='FormHead'>Total</span></TD>

</TR>

But cart_line_item.tmpl holds the contents of the cart:

tr class="cart_line_item">
<td nowrap valign="middle" class="skuColumn"><span class="hoverbox"><a href="#">6147-2<img src="/img/prod/med/6147.jpg" class="preview" /></a></span></td>
<td valign="middle"        class="nameColumn">Sliced Beef au Jus - 2 servings<br> </td>
<td nowrap align='center' valign="middle">
  <form method="post" class="slim_form">
    <input type="hidden" name="cmd" value="delete" />
    <input type="hidden" name="cid" value="3" />
    <input type="image" align="center" name="del" SRC="/CUSTOM/img/btn_trash.gif"  
          ALT="Remove From Cart" title="Remove From Cart">
  </form>
</td>
<td nowrap ALIGN='right'  valign="middle" nowrap class="priceColumn">$24.99</td>
<td nowrap align='right' valign="middle">
  <form method="post" class="slim_form">
    <input type="text" name="qty"  size="2" maxlength="4" value="1"/>
    <input type="hidden" name="cmd" value="update" />
    <input type="hidden" name="cid" value="3" />
    <input class="middle_form_btn" type="image" name="btn" SRC="/CUSTOM/img/btn_update.gif" alt="Update Item Qty" title="Update Item Qty">
  </form>
</td>
<td nowrap ALIGN='right' valign="middle" class="totalColumn">$24.99</td>
</tr>

So that's easy in a table, you build two identical rows with identical columns, and fill them in. But the design for bootstrap is here: http://dev2.magickitchen.com/cart-yassir-v4.html

And the rows, when built with divs, are quite different. They are intertwined, so to speak.

So the first div holds elements which belong in cart_page.tmpl and cart_line_item.tmpl:

<div class="cartTbl">
<div class="cartHeadiingsAndLst">
<div class="row">
<div class="col-lg-2 col-md-2 col-sm-2 col-xs-2 column">
<div class="hd"><span><strong>Catalog</strong></span></div>(belongs in cart_page.tmpl)
<div class="txt"><span>7618-2</span></div>(Belongs in cart_line_item.tmpl)
<div class="hd"><span></span></div>
</div>

So my question is how do I split the divs up to give the same look? And as I write this, I realize it is too broad a question, and at the same time to specific a question, for this forum.

So have a look, see if you get what I'm saying, and if it's just too strange a question, I'll go ahead and delete it. Thanks for your patience.
0
Julian HansenCommented:
Ok I think I get it but in getting it I don't so to speak. If I understand the code correctly - using the template you provided it appears that the <div> approach is using bootstrap columns for each column in the table i.e. building them vertically.

The question is why are they doing that - why not use the same principle as a table where you create a row and put your column headings in the row like this
<div class="cartHeadiingsAndLst">
<!-- ==== ABCDE START OF HEADER TEMPLATE ==== -->
  <div class="row">
    <div class="col-lg-2 col-md-2 col-sm-2 col-xs-2 column">
      <div class="hd"><span><strong>Catalog</strong></span></div>
    </div>
    <div class="col-lg-5 col-md-5 col-sm-6 col-xs-6 column">
      <div class="hd"><span><strong>Product Description</strong></span></div>
    </div>
    <div class="col-lg-1 col-md-1 col-sm-1 col-xs-1 column" style="margin-left: -1px;">
      <div class="hd text-center"><span><strong>Delete</strong></span></div>
    </div>
    <div class="col-lg-1 col-md-1 col-sm-1 col-xs-1 column" style="margin-left: -1px;">
      <div class="hd"><span><strong>Price</strong></span></div>
    </div>
    <div class="col-lg-2 col-md-2 col-sm-1 col-xs-1 column" style="margin-left: -1px;">
      <div class="hd text-center"><span><strong>Quant</strong></span></div>
    </div>
    <div class="col-lg-1 col-md-1 col-sm-1 col-xs-1 column" style="margin-left: -1px;">
      <div class="hd text-right"><span><strong class="ttl">Total</strong></span></div>
    </div>
  </div>
<!-- ==== ABCDE HEADER TEMPLATE ENDS ==== -->
  
<!-- ==== ABCDE START OF ITEM TEMPLATE ==== -->
  <div class="row">
    <div class="col-lg-2 col-md-2 col-sm-2 col-xs-2 column">
      <div class="txt"><span>7618-2</span></div>
    </div>
    <div class="col-lg-5 col-md-5 col-sm-6 col-xs-6 column">
      <div class="txt"><span>Meals for One (8 Meals) Bundles 1 & 2</span></div>
    </div>
    <div class="col-lg-1 col-md-1 col-sm-1 col-xs-1 column" style="margin-left: -1px;">
      <div class="txt text-center"><span><a href="#"><img src="http://dev2.magickitchen.com/images/btn_trash.gif" /></a></span></div>
    </div>
    <div class="col-lg-1 col-md-1 col-sm-1 col-xs-1 column" style="margin-left: -1px;">
      <div class="txt"><span>$62.99</span></div>
    </div>
    <div class="col-lg-2 col-md-2 col-sm-1 col-xs-1 column" style="margin-left: -1px;">
      <div class="txt text-center"><span><input name="" type="text" value="1" class="quntyBx text-center">
      <!-- <input name="" type="submit" class="updateBtns" value=""> --></span></div>
    </div>
    <div class="col-lg-1 col-md-1 col-sm-1 col-xs-1 column" style="margin-left: -1px;">
      <div class="txt text-right"><span>$162.99</i></span></div>
    </div>
  </div>
<!-- ==== ABCDE ITEM TEMPLATE ENDS ==== -->
</div>

Open in new window

Working sample here
0
Ultimate Tool Kit for Technology Solution Provider

Broken down into practical pointers and step-by-step instructions, the IT Service Excellence Tool Kit delivers expert advice for technology solution providers. Get your free copy now.

mel200Author Commented:
That's a good question. It is because the template was built for me, and that's the way he did it. But I'll look into it and see if I can rebuild it that way. It will make things far easier. Thanks! I'll let you know how it goes.
0
mel200Author Commented:
I'm just working in another file. seems like the columns don't line up this way: http://dev2.magickitchen.com/test.html

I'm working on it, but I thought I'd share. :)
0
Julian HansenCommented:
I'm just working in another file. seems like the columns don't line up this way:
If you look at your markup it is not uniform - you have this.
<div class="col-lg-8 col-md-6 col-sm-8 col-xs-12 mainContentArea">
  <div class="contents">
    <div class="cartHeadiingsAndLst">
      <div class="row">...</div>
      <div class="row">...</div>
    </div>
    <div class="row">...</div>
  </div>
</div>

Open in new window

What you want is a uniform structure like this
<div class="col-lg-8 col-md-6 col-sm-8 col-xs-12 mainContentArea">
  <div class="contents">
      <div class="row">...</div>
      <div class="row">...</div>
      <div class="row">...</div>
  </div>
</div>

Open in new window

In other words all the rows with the same parent.
0

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
mel200Author Commented:
Argh, got it, thanks.
0
mel200Author Commented:
This is working spectacularly well, thanks very much!!
0
Julian HansenCommented:
You are most welcome - good luck with it.
0
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
Web Development

From novice to tech pro — start learning today.

Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.