Link to home
Start Free TrialLog in
Avatar of Melody Scott
Melody ScottFlag for United States of America

asked on

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
Avatar of Julian Hansen
Julian Hansen
Flag of South Africa image

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.
Avatar of Melody Scott

ASKER

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:
User generated image
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.
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
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.
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. :)
ASKER CERTIFIED SOLUTION
Avatar of Julian Hansen
Julian Hansen
Flag of South Africa image

Link to home
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Start Free Trial
Argh, got it, thanks.
This is working spectacularly well, thanks very much!!
You are most welcome - good luck with it.