Shopping Cart

For an eCommerce shopping cart page, this topic contains the following:

A screen capture of the relevant part of an actual shopping cart page
The inner template on which the page is based
The Webpage source generated by tqTag Web Suite for the relevant part of the page

Shopping Cart Screen Capture

The labels on the screen-capture indicate the template code elements (of the shoppingCartInfo and shoppingCartItems tqTag) that support the shopping cart elements on the page. You can access the basic version of this page online at http://israelmint.com/?section=199. However, for a shopping cart that contains products, start from http://israelmint.com/?section=185, as described in Products Page.

Shopping cart screen capture

Inner Template #459

To access this template online, click one of the following links and then use your browser commands to view the page source.

<tqtag type="settings" imageDirectory="images"></tqtag>
<div class="Content">
    <div class="ShoppingCart">
        <div class="Process">
            <div class="Checkout">Check out process</div>
            <ul class="Levels">
                <li class="Level1"><a class="selected" href="@linkToStep1@">shopping cart</a></li>
                <li class="Level2"><a href="@linkToStep2@">user identification</a></li>
                <li class="Level3"><a href="@linkToStep3@">delivery address</a></li>
                <li class="Level4"><a href="@linkToStep4@">means of payment</a></li>
            </ul>
        </div>
        <tqtag type="alternative" name="emptyShoppingCart1"></tqtag>
        <tqtag type="alternative" name="emptyShoppingCart2">
            <div style="text-align:center; font-weight:bold; line-height:100px; vertical-align:bottom;">Your shopping cart is empty</div>
        </tqtag>
        <tqtag type="shoppingCartInfo" alternativeTag="emptyShoppingCart1" alternativeCondition="isShoppingCartEmpty">

        <table class="ShoppingItems">
            <thead>
                <tr><th>Item code</th><th>Item description</th><th>Price per unit</th><th>Quantity</th><th>Price</th><th> </th></tr>
            </thead>
            <tbody>
                </tqtag>

                <tqtag type="shoppingCartItems" alternativeTag="emptyShoppingCart2" alternativeCondition="isShoppingCartEmpty">
                <tr><td>@catalogID@</td><td>@productName@</td><td>@userCurrency@ @priceInUserCurrency@</td><td>
                <form name="f@rowID@" action="/" method="get">
                <input type="hidden" name="section" value="639" />
                <input type="hidden" name="mode" value="updateShoppingCart" />
                <input type="hidden" name="lineItemID" value="@lineItemID@" />
                <input type="hidden" name="rowID" value="@rowID@" />

                <select id="@rowID@" name="quantity" value="(-1)" onchange="document.f@rowID@.submit()">
                    <option value="1">1</option><option value="2">2</option><option value="3">3</option><option value="4">4</option><option value="5">5</option><option value="6">6</option><option value="7">7</option><option value="8">8</option><option value="9">9</option><option value="10">10</option><option value="11">11</option><option value="12">12</option><option value="13">13</option><option value="14">14</option><option value="15">15</option><option value="16">16</option><option value="17">17</option><option value="18">18</option><option value="19">19</option><option value="20">20</option>
                </select>

            </form></td>
            <script type="text/javascript">
                document.getElementById('@rowID@').selectedIndex = (-1);
            </script>
            <td>@userCurrency@ @totalPriceInUserCurrency@</td><td><span class="btnRemove"><a href="@removeItemAction@">remove</a></span></td></tr>
            </tqtag>

                <tqtag type="shoppingCartInfo" alternativeTag="emptyShoppingCart1" alternativeCondition="isShoppingCartEmpty">
            </tbody>
        </table>

        <div class="ShoppingSummary">
            <span class="info">@shippingTime@</span>
            <span class="total">Total Sum: @userCurrency@ @shoppingCartTotal@</span>
        </div>
        <div class="ShoppingOptions">

            <div class="Button">
                <div class="L"></div>
                <div class="C red"><a href="/?parentID=148" class="red">Continue Shopping</a></div>

                <div class="R"></div>
            </div>
            <div class="Button" style="float:right">
                <div class="L"></div>
                <div class="C red"><a href="@linkToStep2@" class="red">Proceed to Checkout</a></div>
                <div class="R"></div>
            </div>
        </div>

        </tqtag>
    </div>
</div>
</div>

Shopping Cart Source Code (partial)

To access the complete source code for this page, do the following:

Perform the instructions under Shopping Cart Screen Capture above.
Use your browser commands to view the page source.

<table class="ShoppingItems">
    <thead>
        <tr><th>Item code</th><th>Item description</th><th>Price per unit</th><th>Quantity</th><th>Price</th><th> </th></tr>
    </thead>
    <tbody>
        <tr><td>21862300</td><td>Parting of the Red Sea - Silver Coin</td><td>$59.00</td><td>
        <form name="fitem1" action="/" method="get">
        <input type="hidden" name="section" value="199" />
        <input type="hidden" name="mode" value="updateShoppingCart" />
        <input type="hidden" name="lineItemID" value="46" />
        <input type="hidden" name="rowID" value="item1" />
          <select id="item1" name="quantity" value="(2-1)" onchange="document.fitem1.submit()">
              <option value="1">1</option><option value="2">2</option><option value="3">3</option><option value="4">4</option><option value="5">5</option><option value="6">6</option><option value="7">7</option><option value="8">8</option><option value="9">9</option><option value="10">10</option><option value="11">11</option><option value="12">12</option><option value="13">13</option><option value="14">14</option><option value="15">15</option><option value="16">16</option><option value="17">17</option><option value="18">18</option><option value="19">19</option><option value="20">20</option>
          </select>
      </form></td>
      <script type="text/javascript">
          document.getElementById('item1').selectedIndex = (2-1);
      </script>
      <td>$118.00</td><td><span class="btnRemove"><a href="?section=199&mode=updateShoppingCart&rowID=item1&lineItemID=46&quantity=0">remove</a></span></td></tr>
    </tbody>
</table>
<div class="ShoppingSummary">
    <span class="info">Please allow up to four weeks for delivery</span>
    <span class="total">Total Sum: $118.00</span>
</div>

Shopping Cart

Shopping Cart Screen Capture

Inner Template #459

Shopping Cart Source Code (partial)

Related Topics

User Notes

Topic: Shopping Cart