shopping cart

themes/toutpratique/css/global.css

@@ -10,8 +10,8 @@ body.content_only { margin: 0 }
 **************************************************************************************************************/
 #header {
 	background: #fff;
-	position: relative;
+	/*position: relative;
-	z-index: 100010;
+	z-index: 100010;*/
 }
 	#header .bg-pink, #header .bg-blue {
 		padding: 10px 0 0 0;
@@ -4218,6 +4218,7 @@ main#categorycms { margin-bottom: 30px }
 	#order_step li.step_done div { background: #6ac5bb; color: #fff; font-family: 'pt_sans' }
 	#order_step li.step_done div a { color: #fff; }
 	#order_step li a { color: #333; }
+	
 @media(max-width: 991px) {
 	#order_step li div { padding: 20px 15px 11px 15px }
 }
@@ -4226,9 +4227,9 @@ main#categorycms { margin-bottom: 30px }
 }
 @media(min-width: 991px) {
 	#shopping-cart .header .cart_navigation .btn-cart, #shopping-cart .header .cart_navigation .btn-cancel  {
-			background-color: transparent;
+			/*background-color: transparent;
 			color: #333;
-			border: 1px solid #333;
+			border: 1px solid #333;*/
 		}
 		#shopping-cart .header .btn.btn-cancel:hover, #shopping-cart .header .cart_navigation .btn-cart:hover {
 			background-color: #333;
@@ -4243,7 +4244,7 @@ main#categorycms { margin-bottom: 30px }
 		font-size: 16px;
 		margin-top: 0;
 	}
-		#shopping-cart .header .btn.btn-cancel, #shopping-cart .header .cart_navigation .btn-cart {
+		#shopping-cart .header .btn.btn-cancel/*, #shopping-cart .header .cart_navigation .btn-cart*/ {
 			border-color: #333;
 		}
 
@@ -4642,6 +4643,125 @@ main#categorycms { margin-bottom: 30px }
 
 #order #message { background: #f9f9f9; border: 1px solid #dfdfdf }
 
+/*************************************************************************************************************
+***************************************          ORDER  REFONTE     *****************************************
+**************************************************************************************************************/
+
+#order #header .tabs, #order #header #mainmenu, #order .account_box, #order .search_header {
+	display: none;
+}
+	#header p.by {
+		margin-top: 75px;
+		margin-left: 130px;
+	}
+
+	/* steps */
+	#order-detail-content .btn.btn-cancel {
+		
+	}
+	#order-detail-content #order_step {
+		margin: 0; 
+		width: 75%;
+		margin-top: -55px;
+		float: right;
+	}
+		#shopping-cart .header .cart_navigation .btn-cart, #shopping-cart .header .cart_navigation .btn-cancel {
+			font-size: 16px;
+			line-height: 26px;
+		}
+	#order-detail-content  #order_step li.step_todo div {
+		
+	}
+	#order_step li  {
+		width: auto;
+	}
+		#order_step li div, #order_step li.step_todo.first div, #order_step li.step_todo div  {
+			font-family: 'pompiere_regular';
+			text-transform: uppercase;
+			padding: 5px 10px;
+			font-size: 21px;
+		}	
+		#order_step li.step_todo div {
+			background-color: #a9cddb;
+			color: #333333;
+		}
+		#order_step li.step_current div { 
+			color: #e4535d; 
+		}
+		
+	/* / steps */
+
+	#shopping-cart .header .btn.btn-cancel { 
+		margin-top: 0; 
+	}
+	#order-detail-content .intro_top {
+		background-image: none;
+		margin-bottom: 15px; 
+	}
+	#shopping-cart-products  .table-row:nth-child(even) {
+		/*background-color: #f6f0f0;*/
+	}
+
+	/* discount */
+	#shopping-cart #calcul .discount_form .form-group .inner {
+		max-height: 0;
+
+		overflow: hidden;
+		 -webkit-transition: all 0.5s; /* Safari */
+    	transition: all 0.5s;
+	}
+	#shopping-cart #calcul .discount_form .btn, #shopping-cart #calcul .discount_form .discount_name{
+		margin-top: 15px;
+
+	}
+	#shopping-cart #calcul .discount_form.open .form-group .inner {
+		max-height: 600px;
+	}
+	#shopping-cart #calcul .discount_form label {
+		text-decoration: underline;
+		cursor: pointer;
+		margin-bottom: 0;
+	}
+	/* / discount */
+	
+	/* ask for help */
+	#shopping-cart #calcul .shipping-politic {
+			border-radius: 0; 
+		}
+		#order-detail-content .ask-for-help {
+			font-family: 'pompiere_regular';
+			text-transform: uppercase;
+			border-radius: 0 0 3px 3px;
+			border: 1px solid #dfdfdf;
+			border-top: 0; 
+			font-size: 21px;
+			padding: 10px;
+			text-align: center;
+		}
+			#order-detail-content .ask-for-help .tel, #order-detail-content .ask-for-help .tel:hover {
+				text-decoration: none;
+				cursor: default;
+				color: #519bb6;
+			}
+	#order #netreviewsWidgetNum5544widget23av {
+		bottom: auto!important;
+		top: 15px!important;
+		right: 15px!important;
+		border-radius: 200px!important; 
+		overflow: hidden;
+		height: 150px;
+		position: absolute!important;
+	}
+@media(max-width: 1199px) {
+	#order-detail-content #order_step { width: 70%; }
+}
+@media(max-width: 990px) {
+	#order-detail-content #order_step { width: 100%; }
+	#order .load_menu { background-color: #519bb6; }
+}
+@media(max-width: 767px) {
+	#order #netreviewsWidgetNum5544widget23av { display: none; }
+}
 /*************************************************************************************************************
 ******************************          PRODUCT ACCESSORIES SHOPPING_CART     ********************************
 **************************************************************************************************************/

themes/toutpratique/js/global.js

@@ -3,6 +3,7 @@ var isMobile = false;
 
 $(document).ready(function() {
 	openSearch();
+	openPanel();
 	highdpiInit();
 	responsiveResize();
 	$(window).resize(responsiveResize);
@@ -194,6 +195,14 @@ $(document).ready(function() {
 		$('.search_category form').submit();
 	});
 });
+
+function openPanel(){
+	$('.open-panel').on('click', function(e) {
+		e.preventDefault();
+		target = $(this).data('link');
+		$(target).toggleClass('open');
+	});
+}
 function openSearch() {
 	$('#header .search-mobile').on('click', function(){
 		$('#search_block_left').toggleClass('open');

themes/toutpratique/shopping-cart.tpl

@@ -3,11 +3,7 @@
 	<section>
         <div class="intro_top order-process">
         	<div class="container">
-        		<div class="intro_cat">
+        		
-	                <h1>
-						{l s='Shopping-cart summary'}
-	                </h1>
-                </div>
 				{include file="$tpl_dir./order-steps.tpl" current_step="summary"}
 			</div>
 
@@ -177,7 +173,7 @@
 					{if $use_taxes}
 						{if $voucherAllowed}
 							{if !sizeof($discounts)}
-								<div class="discount_form">
+								<div class="discount_form" id="discount-wrap">
 									<div class="border ">
 										{if isset($errors_discount) && $errors_discount}
 											<div class="col-lg-12">
@@ -190,8 +186,8 @@
 										{/if}
 										<form action="{$link->getPageLink('order', true)}" method="post" id="voucher" class="form-inline">
 											<div class="form-group">
-												<label>{l s='You have a voucher ?'}</label>
+												<label class="open-panel" data-link ="#discount-wrap">{l s='You have a voucher ?'}</label>
-												<div class="inner">
+												<div class="inner" >
 													<input type="text" class="discount_name form-control" id="discount_name" name="discount_name" value="{if isset($discount_name) && $discount_name}{$discount_name}{/if}" placeholder="{l s='Enter your code'}" />
 													<input type="hidden" name="submitDiscount" />
 													<button type="submit" name="submitAddDiscount" class="btn">{l s='Valider'}</button>
@@ -225,6 +221,10 @@
 							</p>
 						</div>
 					</div>
+					<div class="ask-for-help">
+						<i class="icon-tel"></i><span>{l s='Besoin d\'aide ?'}</span>
+						<a class="tel" href="tel:{l s='0800 500 270'}">{l s='0800 500 270'}</a>
+					</div>
 				</div>
 			</div>