Change integration - Add mini cart

templates/default/assets/js/script.js

@@ -3,7 +3,7 @@
 
     /*	------------------------------------------------------------------
      onLoad Function -------------------------------------------------- */
-    $(document).ready(function(){
+    $(document).ready(function(){ alert(1);
 
         // Loader
         var $loader = $('<div class="loader"></div>');

templates/default/assets/less/thelia/buttons.less

@@ -22,7 +22,6 @@
     &.btn-checkout,
     &.btn-checkout-next,
     &.btn-checkout-home,
-    &.btn-filter,
     &.btn-forgot,
     &.btn-login,
     &.btn-proceed-checkout,
@@ -44,8 +43,10 @@
     // Keep old style button
     &.btn-add-address,
     &.btn-coupon,
+    &.btn-filter,
     &.btn-grid,
     &.btn-list,
+    &.btn-login-mini,
     &.btn-search,
     &.btn-subscribe { .button-variant(@btn-primary-color; @btn-primary-bg; @btn-primary-border); }
 

templates/default/assets/less/thelia/cart.less

@@ -1,5 +1,13 @@
 // Thelia : Shopping Cart
 
+
+// Cart Empty
+.cart-empty { margin: 0; padding: 40px; }
+
+// Cart Mini
+.table-cart-mini { margin-bottom: 0; }
+
+
 // Cart
 .table-cart {
     .table-bordered;

templates/default/assets/less/thelia/forms.less

@@ -9,10 +9,18 @@
 }
 
 
+// Form Login Mini
+#form-login-mini {
+    .form-control { .input-sm; }
+    .btn { .btn-sm; }
+    width: 200px;
+}
+
+
 // Form Login
 #form-login,
 #form-forgotpassword {
-    background: #f5f5f5;;
+    background: #f5f5f5;
     padding: 45px;
 
     legend {

templates/default/assets/less/thelia/import.less

@@ -1,6 +1,6 @@
 // Thelia
 @import "variables.less";
-@import "path.less";
+//@import "path.less";
 
 // Thelia : Layout
 @import "global.less";

templates/default/assets/less/thelia/navbar.less

@@ -3,35 +3,26 @@
 .navbar {
     .navbar-default;
     .navbar-brand { .visible-xs; } // Visible only Small screen
-    /*.nav-main {
-        font-size: @navbar-font-size;
 
-li > a {
+    .navbar-cart {
-            color: @navbar-default-link-color;
+        @media (min-width: @grid-float-breakpoint) {
-            padding: @navbar-link-padding;
+            .dropdown > a {
-
+                .dropdown-toggle;
-            &:hover,
+                &:after {
-            &:focus {
+                    float: none;
-                color: @navbar-default-link-hover-color;
+                }
-                background-color: @navbar-default-link-hover-bg;
-            }
-
-            // Uncollapse the nav
-            @media (min-width: @grid-float-breakpoint) {
-                padding-top: ((@navbar-height - @line-height-computed) / 2);
-                padding-bottom: ((@navbar-height - @line-height-computed) / 2);
             }
         }
-        .active > a {
+        .dropdown-menu {
-            color: @navbar-default-link-active-color;
+            @media (max-width: @grid-float-breakpoint) { display: none; }
-            background-color: @navbar-default-link-active-bg;
+            margin: 0; padding: 20px;
+            &.cart-content {
+                width: 350px;
+                > p { margin: 0; }
+            }
         }
-
+        .cart-not-empty .cart-content { border-top: none; padding: 0; }
-        .open > a {
+    }
-            color: @navbar-default-link-hover-color!important;
-            background-color: @navbar-default-link-hover-bg!important;
-        }
-    }*/
 
     // Subnav Links
     @media (min-width: @grid-float-breakpoint) {
@@ -40,13 +31,6 @@ li > a {
             border: 1px solid @navbar-subnav-border;
             border-radius: @navbar-subnav-border-radius;
             .box-shadow(@navbar-subnav-shadow);
-/*
-            float: left;
-            min-width: 160px;
-            position: absolute;
-            top: 100%; left: 0;
-            z-index: @zindex-dropdown;
-*/
 
             // Links within the sub navigation
             > li > a {
@@ -89,106 +73,6 @@ li > a {
             }
         }
     }
-
-/*
-    .subnav {
-        position: relative;
-        > ul {
-            //display: none; // none by default, but block on "open" of the menu
-            font-size: @font-size-base;
-            list-style: none;
-            margin: 0; padding: 0;
-
-            // Links within the sub navigation
-            > li > a {
-                clear: both;
-                display: block;
-                font-weight: normal;
-                line-height: @line-height-base;
-                white-space: nowrap; // prevent links from randomly breaking onto new lines
-
-                &:hover,
-                &:focus {
-                    text-decoration: none;
-                }
-            }
-
-            // Active state
-            > .active > a {
-                &,
-                &:hover,
-                &:focus {
-                    outline: 0;
-                    text-decoration: none;
-                }
-            }
-
-            @media (min-width: @grid-float-breakpoint) {
-                background-color: @navbar-subnav-bg;
-                background-clip: padding-box;
-                border: 1px solid @navbar-subnav-border;
-                border-radius: @navbar-subnav-border-radius;
-                .box-shadow(@navbar-subnav-shadow);
-                float: left;
-                min-width: 160px;
-                position: absolute;
-                top: 100%; left: 0;
-                z-index: @zindex-dropdown;
-
-                // Links within the sub navigation
-                > li > a {
-                    color: @navbar-subnav-link-color;
-                    padding: @navbar-subnav-link-padding;
-
-                    // Hover/Focus state
-                    &:hover,
-                    &:focus {
-                        color: @navbar-subnav-link-hover-color;
-                        background-color: @navbar-subnav-link-hover-bg;
-                    }
-                }
-
-                // Active state
-                > .active > a {
-                    &,
-                    &:hover,
-                    &:focus {
-                        background-color: @navbar-subnav-link-hover-bg;
-                        color: @navbar-subnav-link-hover-color;
-                    }
-                }
-            }
-        }
-
-        /* Add support for multilevel dropdown menus
-        .subnav {
-            > ul {
-                top:0; left: 100%;
-            }
-
-            .accordion-toggle:after {
-                float:right;
-                padding-left: .3em;
-                .icon(@chevron-down);
-                @media (min-width: @screen-desktop) { .icon(@chevron-right); margin-right: -14px; padding-left: 0; }
-            }
-        }*/
-        // Sub
-        /*
- > .active > a,
-        > .open > a {
-            &,
-            &:hover,
-            &:focus {
-                background-color: @navbar-subnav-link-hover-bg;
-                color: @navbar-subnav-link-hover-color;
-           }
-        }
-*//*
-    }
-
-    .navbar-nav > .subnav > ul { border-top-color: @navbar-default-link-hover-bg; }
-*/
 }
 
 

templates/default/assets/less/thelia/price.less

@@ -6,9 +6,10 @@
 
 .price {
     color: @brand-primary;
-    font-size: ceil(@font-size-base * 1.5);
+    font-size: ceil(@font-size-base * 1.4);
     font-weight: bold;
     font-style: italic;
+    white-space: nowrap;
 }
 
 // Regular price

templates/default/assets/less/thelia/variables.less

@@ -5,7 +5,7 @@
 @FontAwesomePath:                   "../font/fontawesome";
 
 //bootstrap font
-@icon-font-path: "../font/bootstrap/";
+@icon-font-path:                    "../font/bootstrap/";
 
 // Grid system
 @grid-float-breakpoint:             @screen-desktop;

templates/default/assets/themes/default/less/theme.less

@@ -1,9 +1,11 @@
 // Body padding required with the fixed navbar (By default, the navbar is 50px high.)
+/*
 body { padding-top: 80px; }
 
 .navbar {
     .navbar-fixed-top;
 }
+*/
 
 .page-header {
     border: none;
@@ -64,25 +66,36 @@ label { font-weight: 600; }
             }
         }
         > a.cart {
-            background-color: @brand-primary;
-            color: #fff;
-
-            > .badge {
-                background-color: #fff;
-                color: @brand-primary;
-            }
-
             &:hover,
             &:focus {
+                > .badge {
+                    background-color: #fff;
+                    color: @brand-primary;
+                }
+            }
+        }
+        &.cart-not-empty {
+            > a.cart {
                 background-color: @brand-primary;
                 color: #fff;
-            }
 
-            &:before {
+                > .badge {
-                .icon(@shopping-cart);
+                    background-color: #fff;
-                color: #fff;
+                    color: @brand-primary;
-                font-size: 24px; line-height: 0;
+                }
-                margin-right: .4em;
+
+                &:hover,
+                &:focus {
+                    background-color: @brand-primary;
+                    color: #fff;
+                }
+
+                &:before {
+                    .icon(@shopping-cart);
+                    color: #fff;
+                    font-size: 24px; line-height: 0;
+                    margin-right: .4em;
+                }
             }
         }
     }
@@ -151,7 +164,7 @@ header {
 
 
 /* Custom button */
-.btn-primary {
+.page .btn-primary {
     border-left: 3px solid lighten(@brand-primary, 20%);
     .border-radius(0);
     color: #fff;
@@ -410,6 +423,7 @@ td.product,
             @media (min-width: @screen-desktop) {
                 .product-image { padding-bottom: 40px; }
                 .product-info {
+                    .transition(height 300ms linear);
                     position: absolute;
                     bottom: 0;
                     width: 100%; height: 50px;
@@ -419,7 +433,6 @@ td.product,
                     &:focus {
                         cursor: pointer;
                         height: 140px;
-                        .transition(height 300ms linear);
                     }
                 }
             }
@@ -1124,7 +1137,6 @@ td.product,
         > tr {
             > td {
                 &.price,
-                &.unitprice,
                 &.qty,
                 &.subprice { padding: 35px 10px; }
             }

templates/default/layout.tpl

@@ -23,7 +23,7 @@ URL: http://www.thelia.net
     <meta charset="utf-8">
 
     {* Page Title *}
-    <title>{block name="page-title"}{strip}{if $breadcrumbs}{foreach from=$breadcrumbs|array_reverse item=breadcrumb}{$breadcrumb.title} | {/foreach}{/if}Thelia{/strip}{/block}</title>
+    <title>{block name="page-title"}{strip}{if $breadcrumbs}{foreach from=$breadcrumbs|array_reverse item=breadcrumb}{$breadcrumb.title} | {/foreach}{/if}{config key="company_name"}{/strip}{/block}</title>
 
     {* Meta Tags *}
     <meta name="description" content="">
@@ -32,10 +32,14 @@ URL: http://www.thelia.net
     <meta name="viewport" content="width=device-width,initial-scale=1.0">
     {block name="meta"}{/block}
 
-    <!-- StyleSheet -->
+    {* Stylesheets *}
     {stylesheets file='assets/less/styles.less' filters='less,cssembed,cssrewrite'}
         <link rel="stylesheet" href="{$asset_url}">
     {/stylesheets}
+
+
+    <!--link rel="stylesheet" href="//netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.min.css"-->
+
     {debugbar_rendercss}
     {block name="stylesheet"}{/block}
 </head>
@@ -60,17 +64,11 @@ URL: http://www.thelia.net
                     <span class="icon-bar"></span>
                     <span class="icon-bar"></span>
                 </button>
-                <a class="navbar-brand" href="{navigate to="index"}">Thelia</a>
+                <a class="navbar-brand" href="{navigate to="index"}">{config key="company_name"}</a>
             </div>
 
             <!-- Place everything within .nav-collapse to hide it until above 768px -->
             <nav class="navbar-collapse collapse nav-main" role="navigation" aria-label="{intl l="Main Navigation"}">
-                <ul class="nav navbar-nav navbar-categories">
-                    <li><a href="{navigate to="index"}" class="home">{intl l="Home"}</a></li>
-                    {loop type="category" name="category.navigation" parent="0"}
-                        <li><a href="{$URL}">{$TITLE}</a></li>
-                    {/loop}
-                </ul>
                 <ul class="nav navbar-nav navbar-cart navbar-right">
                     {loop type="auth" name="customer_info_block" roles="CUSTOMER" context="front"}
                         <li><a href="{url path="/logout"}" class="logout">{intl l="Log out!"}</a></li>
@@ -78,14 +76,95 @@ URL: http://www.thelia.net
                     {/loop}
                     {elseloop rel="customer_info_block"}
                     <li><a href="{url path="/register"}" class="register">{intl l="Register!"}</a></li>
-                    <li><a href="{url path="/login"}" class="login">{intl l="Log In!"}</a></li>
-                    {/elseloop}
                     <li class="dropdown">
-                        <a href="{url path="/cart"}" class="cart" data-toggle="dropdown">
+                        <a href="{url path="/login"}" class="login">{intl l="Log In!"}</a>
+                        <div class="dropdown-menu">
+                            <form id="form-login-mini" action="login.php" method="post" role="form">
+                                <div class="form-group group-email-mini">
+                                    <label for="email-mini">Email address:</label>
+                                    <input type="email" name="email" id="email-mini" class="form-control" value="" aria-required="true" required>
+                                </div>
+                                <div class="form-group group-email">
+                                    <label for="password-mini">Password</label>
+                                    <input type="password" name="password" id="password-mini" class="form-control" value="" aria-required="true" required>
+                                </div>
+                                <div class="group-btn">
+                                    <button type="submit" class="btn btn-login-mini">Sign In</button>
+                                    <a href="register.php" class="btn btn-register-mini">Register</a>
+                                </div>
+                            </form>
+                        </div>
+                    </li>
+                    {/elseloop}
+                    <li class="dropdown cart-not-empty">
+                        <a href="{url path="/cart"}" rel="nofollow" class="cart">
                             Cart <span class="badge">{cart attr="count_item"}</span>
                         </a>
+                        <div class="dropdown-menu cart-content">
+                            <p>You have no items in your shopping cart.</p>
+                        </div>
+                        <div class="dropdown-menu cart-content">
+                            <form id="form-cart-mini" action="cart-step2.php" method="post" role="form">
+                                <table class="table table-cart-mini">
+                                    <colgroup>
+                                        <col width="70">
+                                        <col>
+                                        <col width="100">
+                                    </colgroup>
+                                    <tbody>
+                                        <tr>
+                                            <td class="image">
+                                                <a href="product-details.php" class="thumbnail"><img src="img/product/1/118x85.png" alt="Product #1"></a>
+                                            </td>
+                                            <td class="product">
+                                                <h3 class="name" style="margin:0"><a href="product-details.php">
+                                                    Product #1
+                                                </a></h3>
+                                                <a href="?item=1&amp;qty=0" class="btn btn-remove" data-tip="tooltip" data-title="Delete" data-original-title=""><i class="icon-trash"></i> <span>Remove</span></a>
+                                            </td>
+                                            <td class="unitprice text-center">
+                                                <span class=="qty">2</span> X <span class="price" style="font-size:1em;">$50.00</span></div>
+                                            </td>
+                                        </tr>
+                                        <tr>
+                                            <td class="image">
+                                                <a href="product-details.php" class="thumbnail"><img src="img/product/1/118x85.png" alt="Product #2"></a>
+                                            </td>
+                                            <td class="product">
+                                                <h3 class="name" style="margin:0"><a href="product-details.php">
+                                                    Product with very long name #2
+                                                </a></h3>
+                                                <a href="?item=1&amp;qty=0" class="btn btn-remove" data-tip="tooltip" data-title="Delete" data-original-title=""><i class="icon-trash"></i> <span>Remove</span></a>
+                                            </td>
+                                            <td class="unitprice text-center">
+                                                <span class=="qty">2</span> X <span class="price" style="font-size:1em;">$50.00</span></div>
+                                            </td>
+                                        </tr>
+                                    </tbody>
+                                    <tfoot>
+                                        <tr >
+                                            <td colspan="2" class="empty">
+                                                <a href="cart.php" role="button" class="btn btn-default btn-sm"><span>View Cart</span></a>
+                                                <button type="submit" name="checkout" class="btn btn-warning btn-sm"><span>Checkout</span></button>
+                                            </td>
+                                            <td class="total">
+                                                <div class="total-price">
+                                                    <span class="price">$200.00</span>
+                                                </div>
+                                            </td>
+                                        </tr>
+                                    </tfoot>
+                                </table>
+                            </form>
+                        </div>
                     </li>
                 </ul>
+                <ul class="nav navbar-nav navbar-categories">
+                    <li><a href="{navigate to="index"}" class="home">{intl l="Home"}</a></li>
+                    {loop type="category" name="category.navigation" parent="0"}
+                        <li><a href="{$URL}">{$TITLE}</a></li>
+                    {/loop}
+                </ul>
             </nav>
         </div>
     </div>
@@ -94,8 +173,8 @@ URL: http://www.thelia.net
     <header class="container" role="banner">
         <div class="header">
             <h1 class="logo">
-                <a href="{navigate to="index"}" class="{intl l="Thelia * Since 2006 *"}">
+                <a href="{navigate to="index"}" title="{config key="company_name"}">
-                    {images file='assets/img/logo.gif'}<img src="{$asset_url}" alt="Thelia">{/images}
+                    {images file='assets/img/logo.gif'}<img src="{$asset_url}" alt="{config key="company_name"}">{/images}
                 </a>
             </h1>
 
@@ -290,7 +369,7 @@ URL: http://www.thelia.net
                     <section class="block block-contact" itemscope itemtype="http://schema.org/Organization">
                         <div class="block-heading"><h3 class="block-title">Contact Us</h3></div>
                         <div class="block-content">
-                            <meta itemprop="name" content="Thelia V2">
+                            <meta itemprop="name" content="{config key="company_name"}">
                             <ul>
                                 <li class="contact-address">
                                     <address class="adr" itemprop="address" itemscope itemtype="http://schema.org/PostalAddress">
@@ -350,11 +429,11 @@ URL: http://www.thelia.net
 
 {javascripts file='assets/js/bootstrap/bootstrap.js'}
     <script src="{$asset_url}"></script>
-{/javascripts}'}
+{/javascripts}
 
 {javascripts file='assets/js/plugins/bootbox/bootbox.js'}
     <script src="{$asset_url}"></script>
-{/javascripts}'}
+{/javascripts}
 
 {block name="after-javascript-include"}{/block}