sterivein/templates/frontOffice/default/cart.html

{extends file="layout.tpl"}

{* Body Class *}
{block name="body-class"}page-cart{/block}

{* Breadcrumb *}
{block name='no-return-functions' append}
    {$breadcrumbs = [
        ['title' => {intl l="Cart"}, 'url'=>{url path="/cart"}]
    ]}
{/block}

{block name="main-content"}
    <div class="main">
        <article id="cart" class="col-main" role="main" aria-labelledby="main-label">

            <h1 id="main-label" class="page-header">{intl l="Your Cart"}</h1>

            {nocache}
            {ifloop rel="cartloop"}
            {include file="misc/checkout-progress.tpl" step="cart"}

            <table class="table table-cart">
                <colgroup>
                    <col width="150">
                    <col>
                    <col width="150">
                    <col width="150">
                    <col width="150">
                </colgroup>
                <thead>
                <tr>
                    <th class="image">&nbsp;</th>
                    <th class="product">
                        <span class="hidden-xs">{intl l="Product Name"}</span>
                        <span class="visible-xs">{intl l="Name"}</span>
                    </th>
                    <th class="unitprice">
                        <span class="hidden-xs">{intl l="Unit Price"}</span>
                        <span class="visible-xs">{intl l="Price"}</span>
                    </th>
                    <th class="qty">
                        <span class="hidden-xs">{intl l="Quantity"}</span>
                        <span class="visible-xs">{intl l="Qty"}</span>
                    </th>
                    <th class="subprice">
                        <span class="hidden-xs">{intl l="Total"}</span>
                        <span class="visible-xs">{intl l="Total"}</span>
                    </th>
                </tr>
                </thead>
                <tbody>
                    {loop type="cart" name="cartloop"}
                    <tr>
                        <td class="image">
                            <a href="{$PRODUCT_URL}" class="thumbnail">
                                {assign "cart_count" $LOOP_COUNT}
                                {ifloop rel='product-image'}
                                    {loop type="image" name="product-image" product=$PRODUCT_ID limit="1" width="118" height="85" force_return="true"}
                                        <img src="{$IMAGE_URL}" alt="Product #{$cart_count}"></a>
                                    {/loop}
                                {/ifloop}
                                {elseloop rel="product-image"}
                                    {images file='assets/img/product/1/118x85.png'}<img itemprop="image" src="{$asset_url}" alt="Product #{$cart_count}">{/images}
                                {/elseloop}
                        </td>
                        <td class="product" >
                            <h3 class="name"><a href="{$PRODUCT_URL}">
                                    {$TITLE}
                                </a></h3>
                            <div class="product-options">
                                <dl class="dl-horizontal">
                                    <dt>{intl l="Available"} :</dt>
                                    {if $STOCK > 0}
                                            <dd>{intl l="In Stock"}</dd>
                                        {else}
                                            <dd>{intl l="Out of Stock"}</dd>
                                    {/if}
                                    <dt>{intl l="No."}</dt>
                                    <dd>{$REF}</dd>
                                    {loop type="attribute_combination" name="product_options" product_sale_elements="$PRODUCT_SALE_ELEMENTS_ID"}
                                        <dt>{$ATTRIBUTE_TITLE}</dt>
                                        <dd>{$ATTRIBUTE_AVAILABILITY_TITLE}</dd>
                                    {/loop}
                                </dl>
                            </div>
                            <a href="{url path="/cart/delete/{$ITEM_ID}"}" class="btn btn-remove"><i class="icon-trash"></i> {intl l="Remove"}</a>
                        </td>
                        <td class="unitprice">
                            {if $IS_PROMO == 1}
                                {assign "real_price" $PROMO_TAXED_PRICE}
                                <div class="special-price"><span class="price">{$PROMO_TAXED_PRICE} {currency attr="symbol"}</span></div>
                                <small class="old-price">{intl l="instead of"} <span class="price">{$TAXED_PRICE} {currency attr="symbol"}</span></small>
                            {else}
                                {assign "real_price" $TAXED_PRICE}
                                <div class="special-price"><span class="price">{$TAXED_PRICE} {currency attr="symbol"}</span></div>
                            {/if}
                        </td>
                        <td class="qty">
                            <div class="form-group group-qty">
                                <form action="{url path="/cart/update"}" class="form-inline" method="post">
                                    <input type="hidden" name="cart_item" value="{$ITEM_ID}">
                                    <div class="form-group">
                                        <select name="quantity" class="form-control" onchange="jQuery(this).parent('form').submit();">
                                            {for $will=1 to $STOCK}
                                                <option {if $QUANTITY == $will}selected="selected"{/if}>{$will}</option>
                                            {/for}
                                        </select>
                                    </div>
                                    <button type="submit" title="{intl l="Update Quantity"}" class="btn btn-cart-update">{intl l="+"}</button>
                                </form>
                            </div>
                        </td>
                        <td class="subprice">
                            <span class="price">{$real_price * $QUANTITY} {currency attr="symbol"}</span>
                        </td>
                    </tr>

                    {/loop}
                </tbody>
                <tfoot>
                <tr >
                    <td colspan="3" class="empty">&nbsp;</td>
                    <th class="total">{intl l="Total"}</th>
                    <td class="total">
                        <div class="total-price">
                            <span class="price">{cart attr="total_taxed_price"} {currency attr="symbol"}</span>
                        </div>
                    </td>
                </tr>
                </tfoot>
            </table>

            <a href="{navigate to="index"}" role="button" class="btn btn-continue-shopping"><span>{intl l="Continue Shopping"}</span></a>
            <a href="{url path="/order/delivery"}" class="btn btn-checkout">{intl l="Proceed checkout"}</a>

            {/ifloop}
            {elseloop rel="cartloop"}
                <div class="cart-warning">
                    <strong>{intl l="Warning"}!</strong> {intl l="You have no items in your shopping cart."}
                </div>
            {/elseloop}
            {/nocache}
        </article>

        {ifloop rel="product_upsell"}
            <aside id="products-upsell" role="complementary" aria-labelledby="products-upsell-label">
                <div class="products-heading">
                    <h3 id="products-upsell-label">{intl l="Upsell Products"}</h3>
                </div>

                <div class="products-content">
                    <ul class="products-grid product-col-5 hover-effect">
                        {loop name="product_upsell" type="product" promo="yes" limit="5"}
                            {include file="includes/single-product.html" product_id=$ID hasBtn=false hasDescription=true width="218" height="146"}
                        {/loop}

                    </ul>
                </div>
            </aside><!-- #products-upsell -->
        {/ifloop}

    </div>
{/block}