replace new css files location to modules/themeconfigurator/css

modules/themeconfigurator/css/theme-style1.css

@@ -0,0 +1,183 @@
+body {
+  background: #282828;
+}
+
+.header-container,
+.columns-container {
+  background: #f6f6f6;
+}
+
+#header {
+  background: none;
+}
+#header .header-row {
+  background: #dadada;
+}
+#header .header-row .shop-phone {
+  color: #333333;
+}
+#header .header-row .shop-phone i,
+#header .header-row .shop-phone strong {
+  color: #f44051;
+}
+#header #currencies-block-top,
+#header #languages-block-top,
+#header .header-row #header_user_info {
+  border-color: #c6c6c6;
+}
+#header #currencies-block-top div.current,
+#header #languages-block-top div.current,
+#header .header-row #header_user_info a {
+  color: #333333;
+}
+#header #currencies-block-top div.current:hover, #header #currencies-block-top div.current.active,
+#header #languages-block-top div.current:hover,
+#header #languages-block-top div.current.active,
+#header .header-row #header_user_info a:hover,
+#header .header-row #header_user_info a.active {
+  background: #b7b7b7;
+  color: white;
+}
+#header #currencies-block-top div.current strong,
+#header #languages-block-top div.current strong {
+  color: #333333;
+}
+#header #currencies-block-top div.current:hover strong, #header #currencies-block-top div.current:hover:after, #header #currencies-block-top div.current.active strong, #header #currencies-block-top div.current.active:after,
+#header #languages-block-top div.current:hover strong,
+#header #languages-block-top div.current:hover:after,
+#header #languages-block-top div.current.active strong,
+#header #languages-block-top div.current.active:after {
+  background: #b7b7b7;
+  color: white;
+}
+#header #contact-link {
+  border-color: #c6c6c6;
+}
+#header #contact-link a {
+  color: #333333;
+}
+#header #contact-link a:hover, #header #contact-link a.active {
+  background: #b7b7b7;
+  color: white;
+}
+
+#search_block_top .btn.button-search {
+  background: #f44051;
+}
+#search_block_top .btn.button-search:hover {
+  color: white;
+  background: #333333;
+}
+
+#header_right #header_user #shopping_cart a {
+  background: #f44051;
+  color: white;
+}
+#header_right #header_user #shopping_cart a:after {
+  color: white;
+}
+#header_right #header_user #shopping_cart a:hover {
+  color: white;
+  background: #333333;
+}
+
+.sf-menu {
+  background: white;
+  border-bottom: 3px solid #e8e8e8;
+}
+.sf-menu > li {
+  border-right: 1px solid #e8e8e8;
+}
+.sf-menu > li a {
+  border-bottom: 3px solid #e8e8e8;
+}
+.sf-menu > li.sfHover > a, .sf-menu > li > a:hover, .sf-menu > li.sfHoverForce > a {
+  color: #fff;
+  background: #f44051;
+  border-bottom-color: #ce2434;
+}
+
+#home-page-tabs {
+  background: #f6f6f6;
+}
+#home-page-tabs > li.active a,
+#home-page-tabs > li a:hover {
+  background: #f44051;
+  color: white;
+}
+
+.new,
+.sale {
+  background: #f44051;
+}
+.new:before, .new:after,
+.sale:before,
+.sale:after {
+  border-color: #ad2b34  transparent   transparent transparent;
+}
+
+ul.product_list.grid > li .product-container {
+  background: #f6f6f6;
+}
+ul.product_list.grid > li .product-container .product-image-container {
+  background: white;
+}
+ul.product_list.grid > li .product-container .product-image-container .product_img_link {
+  background: #fbfbfb;
+}
+ul.product_list.grid > li .product-container .product-image-container .product_img_link img {
+  background: #fbfbfb;
+}
+
+.button.lnk_view {
+  text-shadow: none;
+  padding: 0;
+  border: none;
+}
+.button.lnk_view span {
+  border: none;
+  padding: 12px 16px;
+  background: #333333;
+  color: white;
+}
+.button.lnk_view:hover span {
+  background: #f44051;
+}
+
+#cmsinfo_block em {
+  background: #f44051;
+}
+
+#facebook_block, #cmsinfo_block {
+  background: #e8e8e8;
+}
+
+#cmsinfo_block,
+#cmsinfo_block > div + div {
+  border-color: #d0d0d0;
+}
+
+.footer-container #footer #social_block {
+  background: #1b1b1b;
+  padding-bottom: 15px;
+}
+
+.footer-container {
+  background: #1b1b1b;
+}
+@media (min-width: 768px) {
+  .footer-container {
+    background: url(../img/footer-bg1.gif) repeat-x;
+  }
+}
+
+#footer #newsletter_block_left .form-group .form-control {
+  background: #1b1b1b;
+}
+#footer #newsletter_block_left .form-group .button-small {
+  color: #f44051;
+}
+
+.footer-container #footer #social_block ul li a:hover {
+  color: #f44051;
+}

modules/themeconfigurator/css/theme-style2.css

@@ -0,0 +1,200 @@
+body {
+  background: #232323;
+}
+
+.header-container,
+.columns-container {
+  background: #333333;
+}
+
+#header {
+  background: none;
+}
+#header .header-row {
+  background: #545454;
+}
+#header .header-row .shop-phone {
+  color: white;
+  text-shadow: 0 1px #404040;
+}
+#header .header-row .shop-phone i,
+#header .header-row .shop-phone strong {
+  color: #aaaaaa;
+  text-shadow: 0 1px #404040;
+}
+#header #currencies-block-top,
+#header #languages-block-top,
+#header .header-row #header_user_info {
+  border-color: #656565;
+}
+#header #currencies-block-top div.current,
+#header #languages-block-top div.current,
+#header .header-row #header_user_info a {
+  color: white;
+}
+#header #currencies-block-top div.current:hover, #header #currencies-block-top div.current.active,
+#header #languages-block-top div.current:hover,
+#header #languages-block-top div.current.active,
+#header .header-row #header_user_info a:hover,
+#header .header-row #header_user_info a.active {
+  color: white;
+}
+#header #currencies-block-top div.current,
+#header #languages-block-top div.current {
+  padding-bottom: 11px;
+}
+#header #currencies-block-top div.current strong, #header #currencies-block-top div.current:after,
+#header #languages-block-top div.current strong,
+#header #languages-block-top div.current:after {
+  color: white;
+}
+#header #currencies-block-top div.current:hover strong, #header #currencies-block-top div.current:hover:after, #header #currencies-block-top div.current.active strong, #header #currencies-block-top div.current.active:after,
+#header #languages-block-top div.current:hover strong,
+#header #languages-block-top div.current:hover:after,
+#header #languages-block-top div.current.active strong,
+#header #languages-block-top div.current.active:after {
+  background: #2b2b2b;
+  color: white;
+}
+#header #contact-link {
+  border-color: #656565;
+}
+#header #contact-link a {
+  color: white;
+}
+#header #contact-link a:hover, #header #contact-link a.active {
+  background: #2b2b2b;
+  color: white;
+}
+
+#search_block_top .btn.button-search {
+  background: #666666;
+}
+#search_block_top .btn.button-search:hover {
+  color: white;
+  background: #333333;
+}
+
+#search_block_top #search_query_top {
+  background: white;
+  color: #333333;
+}
+
+#header_right #header_user #shopping_cart a {
+  background: #666666;
+  color: white;
+}
+#header_right #header_user #shopping_cart a:after {
+  color: white;
+}
+#header_right #header_user #shopping_cart a:hover {
+  color: white;
+  background: #333333;
+}
+
+.sf-menu {
+  background: white;
+  border: 1px solid #f2f2f2;
+  border-bottom: 3px solid #f2f2f2;
+}
+.sf-menu > li {
+  border-right: 1px solid #d6d4d4;
+}
+.sf-menu > li a {
+  border-bottom: 3px solid #f2f2f2;
+}
+.sf-menu > li.sfHover > a, .sf-menu > li > a:hover, .sf-menu > li.sfHoverForce > a {
+  color: #fff;
+  background: #666666;
+  border-bottom-color: #666666;
+}
+
+#home-page-tabs {
+  background: white;
+}
+#home-page-tabs > li.active a,
+#home-page-tabs > li a:hover {
+  background: #333333;
+  color: white;
+}
+
+.new,
+.sale {
+  background: #f44051;
+}
+.new:before, .new:after,
+.sale:before,
+.sale:after {
+  border-color: #f44051  transparent   transparent transparent;
+}
+
+ul.product_list.grid > li .product-container {
+  background: white;
+}
+ul.product_list.grid > li .product-container .product-image-container {
+  background: #474747;
+}
+ul.product_list.grid > li .product-container .product-image-container .product_img_link {
+  background: #474747;
+}
+ul.product_list.grid > li .product-container .product-image-container .product_img_link img {
+  background: #474747;
+}
+
+ul.product_list.grid > li:hover .product-container {
+  background: #5c5c5c;
+}
+ul.product_list.grid > li:hover .product-container .product-name {
+  color: #aaa;
+}
+ul.product_list.grid > li:hover .product-container .functional-buttons div a, ul.product_list.grid > li:hover .product-container ul.product_list.grid > li .product-container .functional-buttons div label {
+  color: #aaa;
+}
+ul.product_list.grid > li:hover .product-container .functional-buttons div a:hover, ul.product_list.grid > li:hover .product-container ul.product_list.grid > li .product-container .functional-buttons div label:hover {
+  color: #fff;
+}
+
+#cmsinfo_block em {
+  background: #666666;
+}
+
+#facebook_block, #cmsinfo_block {
+  background: #454545;
+}
+#facebook_block h4, #cmsinfo_block h4 {
+  color: white;
+}
+
+#cmsinfo_block h3,
+#cmsinfo_block .dark {
+  color: white;
+}
+
+#cmsinfo_block,
+#cmsinfo_block > div + div {
+  border-color: #1b1b1b;
+}
+
+.footer-container {
+  background: #1b1b1b;
+}
+@media (min-width: 768px) {
+  .footer-container {
+    background: url(../img/footer-bg1.gif) repeat-x;
+  }
+}
+
+.footer-container #footer #social_block {
+  background: #1b1b1b;
+}
+
+#footer #newsletter_block_left .form-group .form-control {
+  background: #1b1b1b;
+}
+#footer #newsletter_block_left .form-group .button-small {
+  color: #666666;
+}
+
+.footer-container #footer #social_block ul li a:hover {
+  color: white;
+}

modules/themeconfigurator/css/theme-style3.css

@@ -0,0 +1,222 @@
+body {
+  background: #333333;
+}
+
+.header-container,
+.columns-container {
+  background: #fff;
+}
+
+#header {
+  background: none;
+}
+#header .header-row {
+  background: #333333;
+}
+#header .header-row .shop-phone {
+  color: #777;
+}
+#header .header-row .shop-phone i,
+#header .header-row .shop-phone strong {
+  color: #719f41;
+}
+#header #currencies-block-top,
+#header #languages-block-top,
+#header .header-row #header_user_info {
+  border-color: #515151;
+}
+#header #currencies-block-top div.current,
+#header #languages-block-top div.current,
+#header .header-row #header_user_info a {
+  color: white;
+}
+#header #currencies-block-top div.current:hover, #header #currencies-block-top div.current.active,
+#header #languages-block-top div.current:hover,
+#header #languages-block-top div.current.active,
+#header .header-row #header_user_info a:hover,
+#header .header-row #header_user_info a.active {
+  background: #2b2b2b;
+  color: white;
+}
+#header #currencies-block-top div.current strong,
+#header #languages-block-top div.current strong {
+  color: #333333;
+}
+#header #currencies-block-top div.current:after,
+#header #currencies-block-top div.current strong,
+#header #languages-block-top div.current:after,
+#header #languages-block-top div.current strong {
+  color: white;
+}
+#header #currencies-block-top div.current:hover strong, #header #currencies-block-top div.current:hover:after, #header #currencies-block-top div.current.active strong, #header #currencies-block-top div.current.active:after,
+#header #languages-block-top div.current:hover strong,
+#header #languages-block-top div.current:hover:after,
+#header #languages-block-top div.current.active strong,
+#header #languages-block-top div.current.active:after {
+  color: white;
+}
+#header #contact-link {
+  border-color: #515151;
+}
+#header #contact-link a {
+  color: white;
+}
+#header #contact-link a:hover, #header #contact-link a.active {
+  background: #2b2b2b;
+  color: white;
+}
+
+#search_block_top .btn.button-search {
+  background: #719f41;
+  text-shadow: 0 1px  #567931;
+}
+#search_block_top .btn.button-search:hover {
+  color: white;
+  background: #333333;
+  text-shadow: 0 1px  #333;
+}
+
+#search_block_top #search_query_top {
+  color: #686666;
+}
+
+#header_right #header_user #shopping_cart a {
+  background: #719f41;
+  color: white;
+  text-shadow: 0 1px  #567931;
+}
+#header_right #header_user #shopping_cart a:after {
+  color: white;
+}
+#header_right #header_user #shopping_cart a:hover {
+  color: white;
+  text-shadow: 0 1px  #333;
+  background: #333333;
+}
+
+.sf-menu {
+  background: #f6f6f6;
+  border-bottom: 3px solid #e9e9e9;
+}
+.sf-menu > li {
+  border-right: 1px solid #d6d4d4;
+}
+.sf-menu > li a {
+  border-bottom: 3px solid #e9e9e9;
+}
+.sf-menu > li.sfHover > a, .sf-menu > li > a:hover, .sf-menu > li.sfHoverForce > a {
+  color: #fff;
+  background: #719f41;
+  border-bottom-color: #598b24;
+}
+
+#home-page-tabs {
+  background: white;
+}
+#home-page-tabs > li.active a,
+#home-page-tabs > li a:hover {
+  background: #719f41;
+  color: white;
+}
+
+.new,
+.sale {
+  background: #719f41;
+}
+.new:before, .new:after,
+.sale:before,
+.sale:after {
+  border-color: #719f41  transparent   transparent transparent;
+}
+
+ul.product_list.grid > li .product-container {
+  background: white;
+}
+ul.product_list.grid > li .product-container .product-image-container {
+  background: white;
+}
+ul.product_list.grid > li .product-container .product-image-container .product_img_link {
+  background: white;
+}
+ul.product_list.grid > li .product-container .product-image-container .product_img_link img {
+  background: white;
+}
+
+.price.product-price {
+  color: #719f41;
+}
+
+.price-percent-reduction {
+  background: #719f41;
+  border-color: #719f41;
+}
+
+.button.lnk_view {
+  text-shadow: none;
+  padding: 0;
+  border: none;
+}
+.button.lnk_view span {
+  border: none;
+  padding: 12px 16px;
+  background: #333333;
+  color: white;
+}
+.button.lnk_view:hover span {
+  background: #719f41;
+}
+
+#cmsinfo_block em {
+  background: #333333;
+}
+
+#facebook_block, #cmsinfo_block {
+  background: #e8e8e8;
+}
+
+#cmsinfo_block,
+#cmsinfo_block > div + div {
+  border-color: #d0d0d0;
+}
+
+.footer-container #footer #social_block {
+  background: #3f3f3f;
+  padding-bottom: 15px;
+}
+
+.footer-container {
+  background: #3f3f3f;
+}
+@media (min-width: 768px) {
+  .footer-container {
+    background: url(../img/footer-bg.gif) repeat-x;
+  }
+}
+
+.footer-container #footer #social_block ul li a:hover {
+  color: #719f41;
+}
+
+#footer #newsletter_block_left .form-group .form-control {
+  background: #3f3f3f;
+}
+
+#footer #newsletter_block_left h4,
+.footer-container #footer #social_block h4 {
+  color: #fff;
+}
+
+.footer-container #footer h4,
+.footer-container #footer h4 a {
+  color: #719f41;
+}
+
+.footer-container #footer .bottom-footer {
+  color: #719f41;
+}
+.footer-container #footer .bottom-footer a {
+  color: #719f41;
+}
+.footer-container #footer .bottom-footer a:hover {
+  color: #fff;
+}

modules/themeconfigurator/css/theme-style8.css

@@ -0,0 +1,183 @@
+body {
+  background: #282828;
+}
+
+.header-container,
+.columns-container {
+  background: #f7f5eb;
+}
+
+#header {
+  background: none;
+}
+#header .header-row {
+  background: #333333;
+}
+#header .header-row .shop-phone {
+  color: white;
+}
+#header .header-row .shop-phone i,
+#header .header-row .shop-phone strong {
+  color: #eea200;
+}
+#header #currencies-block-top,
+#header #languages-block-top,
+#header .header-row #header_user_info {
+  border-color: #515151;
+}
+#header #currencies-block-top div.current,
+#header #languages-block-top div.current,
+#header .header-row #header_user_info a {
+  color: white;
+}
+#header #currencies-block-top div.current:hover, #header #currencies-block-top div.current.active,
+#header #languages-block-top div.current:hover,
+#header #languages-block-top div.current.active,
+#header .header-row #header_user_info a:hover,
+#header .header-row #header_user_info a.active {
+  background: #b7b7b7;
+  color: white;
+}
+#header #currencies-block-top div.current strong,
+#header #languages-block-top div.current strong {
+  color: white;
+}
+#header #currencies-block-top div.current:hover strong, #header #currencies-block-top div.current:hover:after, #header #currencies-block-top div.current.active strong, #header #currencies-block-top div.current.active:after,
+#header #languages-block-top div.current:hover strong,
+#header #languages-block-top div.current:hover:after,
+#header #languages-block-top div.current.active strong,
+#header #languages-block-top div.current.active:after {
+  background: #b7b7b7;
+  color: white;
+}
+#header #contact-link {
+  border-color: #515151;
+}
+#header #contact-link a {
+  color: white;
+}
+#header #contact-link a:hover, #header #contact-link a.active {
+  background: #b7b7b7;
+  color: white;
+}
+
+#search_block_top .btn.button-search {
+  background: #eea200;
+}
+#search_block_top .btn.button-search:hover {
+  color: white;
+  background: #b7b7b7;
+}
+
+#header_right #header_user #shopping_cart a {
+  background: #eea200;
+  color: white;
+}
+#header_right #header_user #shopping_cart a:after {
+  color: white;
+}
+#header_right #header_user #shopping_cart a:hover {
+  color: white;
+  background: #b7b7b7;
+}
+
+.sf-menu {
+  background: #fffef6;
+  border-bottom: 3px solid #e2dec8;
+}
+.sf-menu > li {
+  border-right: 1px solid #e2dec8;
+}
+.sf-menu > li a {
+  border-bottom: 3px solid #e2dec8;
+}
+.sf-menu > li.sfHover > a, .sf-menu > li > a:hover, .sf-menu > li.sfHoverForce > a {
+  color: #fff;
+  background: #eea200;
+  border-bottom-color: #da9400;
+}
+
+#home-page-tabs {
+  background: none;
+}
+#home-page-tabs > li.active a,
+#home-page-tabs > li a:hover {
+  background: #eea200;
+  color: white;
+}
+
+.new,
+.sale {
+  background: #eea200;
+}
+.new:before, .new:after,
+.sale:before,
+.sale:after {
+  border-color: #eea200 transparent transparent transparent;
+}
+
+ul.product_list.grid > li .product-container {
+  background: none;
+}
+ul.product_list.grid > li .product-container .product-image-container {
+  background: white;
+}
+ul.product_list.grid > li .product-container .product-image-container .product_img_link {
+  background: #f1e8e3;
+}
+ul.product_list.grid > li .product-container .product-image-container .product_img_link img {
+  background: #f1e8e3;
+}
+
+.button.lnk_view {
+  text-shadow: none;
+  padding: 0;
+  border: none;
+}
+.button.lnk_view span {
+  border: 1px solid #9a9a9a;
+  padding: 12px 16px;
+  background: #f2f2f2;
+  color: white;
+}
+.button.lnk_view:hover span {
+  background: #b7b7b7;
+}
+
+#cmsinfo_block em {
+  background: #eea200;
+}
+
+#facebook_block, #cmsinfo_block {
+  background: #f0eee1;
+}
+
+#cmsinfo_block,
+#cmsinfo_block > div + div {
+  border-color: #e9e6d6;
+}
+
+.footer-container #footer #social_block {
+  background: none;
+  padding-bottom: 15px;
+}
+
+.footer-container {
+  background: #3f3f3f;
+}
+@media (min-width: 768px) {
+  .footer-container {
+    background: url(../img/footer-bg.gif) repeat-x;
+  }
+}
+
+#footer #newsletter_block_left .form-group .form-control {
+  background: #3c3c3c;
+}
+#footer #newsletter_block_left .form-group .button-small {
+  color: #eea200;
+}
+
+.footer-container #footer #social_block ul li a:hover {
+  color: #eea200;
+}

modules/themeconfigurator/sass/theme-style1.scss

@@ -0,0 +1,172 @@
+@import 'compass';
+@import 'bootstrap_lib/_variables';
+$header-background:#dadada;
+$color-style1:#f44051;
+$color1-style1:#333;
+$color2-style1:#b7b7b7;
+
+body{background:#282828}
+.header-container,
+.columns-container{background:#f6f6f6}
+
+  //-------- HEADER
+  #header {
+   background:none;	
+	.header-row {
+	  background:$header-background;	 	   
+	  .shop-phone{
+		  color:$color1-style1;
+		i,
+		strong{color:$color-style1} 
+		
+		  } 	
+	}
+	
+	 #currencies-block-top, 
+	 #languages-block-top,
+	 .header-row #header_user_info{
+	 border-color:#c6c6c6;  
+	 }
+  
+   #currencies-block-top div.current, 
+  #languages-block-top div.current,
+  .header-row #header_user_info a
+  {
+	 color:$color1-style1; 
+	  &:hover, &.active {
+		background:$color2-style1;
+		color:white
+		}
+
+ }
+    #currencies-block-top div.current, 
+  #languages-block-top div.current{
+	 strong{color:$color1-style1;} 
+	  }
+	   
+  #currencies-block-top div.current, 
+ #languages-block-top div.current
+   {&:hover,
+    &.active {
+	  strong,
+	  &:after
+	   {
+	    background:$color2-style1;
+		color:white}
+       }
+	 }
+	
+	#contact-link{ 
+	   border-color:#c6c6c6;
+	   a{color:$color1-style1;
+		  &:hover, &.active {
+			background:$color2-style1;
+			color:white
+			}
+		}	
+	}	
+	
+}
+
+
+	#search_block_top .btn.button-search{background:$color-style1;
+	   &:hover{color:white;
+    	background:$color1-style1}
+	}
+
+     #header_right #header_user #shopping_cart a{
+		background:$color-style1; 
+		color:white;
+		 &:after{color:white}
+		&:hover{color:white;
+    	background:$color1-style1}		 
+	 }
+	 
+    .sf-menu{
+		background:white;
+		border-bottom:3px solid #e8e8e8;
+		>li{
+			border-right:1px solid #e8e8e8;
+			a{border-bottom: 3px solid #e8e8e8;}
+		&.sfHover > a, > a:hover, &.sfHoverForce > a 
+		{color:#fff;background:$color-style1;
+		border-bottom-color:#ce2434;}
+		}
+	} 
+	
+	
+
+//-------- columns-container
+
+     #home-page-tabs{
+		background:#f6f6f6;
+		  > li.active a, 
+		  > li a:hover{
+			background:$color-style1;
+			color:white 
+			 }
+		 
+	 }
+	 
+
+	.new,
+	.sale
+	{background:$color-style1;
+		&:before,
+		&:after{
+				border-color: #ad2b34  transparent   transparent transparent ;			
+			}	
+	}
+
+
+   ul.product_list.grid > li .product-container{
+	background:#f6f6f6;
+   .product-image-container{
+	background:white;
+   .product_img_link{background:#fbfbfb;
+     img{background:#fbfbfb;}
+   }   
+   }
+   }
+  
+
+
+  .button.lnk_view {
+	text-shadow:none;
+	padding:0;
+	border:none;
+		span {
+			border:none;		
+			padding:12px 16px;
+		   background:$color1-style1;
+		   color:white;	
+		}
+		
+	&:hover {
+		span {
+			background:$color-style1;
+			}	
+	}
+  }
+
+
+  #cmsinfo_block em{background:$color-style1;}
+  #facebook_block, #cmsinfo_block{background:#e8e8e8}
+  #cmsinfo_block,
+   #cmsinfo_block > div + div{border-color:#d0d0d0;}  
+   
+   .footer-container #footer #social_block  { background:#1b1b1b;padding-bottom:15px;}  
+  .footer-container {	
+  background:#1b1b1b;
+																		@media (min-width: $screen-sm) { // min 768px
+																			background:url(../img/footer-bg1.gif) repeat-x;
+																		}
+}
+	 #footer #newsletter_block_left .form-group{ 
+	.form-control{background:#1b1b1b;}
+	 .button-small {color:$color-style1;} 
+	}
+	
+ .footer-container #footer #social_block ul li a:hover{color:$color-style1;}	
+	
+	

modules/themeconfigurator/sass/theme-style2.scss

@@ -0,0 +1,180 @@
+@import 'compass';
+@import 'bootstrap_lib/_variables';
+$header-background:#545454;
+$color-style1:#666;
+$color1-style1:#333;
+$color2-style1:#b7b7b7;
+
+body{background:#232323}
+.header-container,
+.columns-container{background:$color1-style1}
+
+//-------- HEADER
+#header {
+   background:none;	
+	.header-row {
+	  background:$header-background;	 	   
+	  .shop-phone{
+		  color:white;
+		  text-shadow:0 1px #404040;
+		i,
+		strong{color:#aaaaaa;text-shadow:0 1px #404040;} 
+		
+		  } 	
+	}
+	
+	 #currencies-block-top, 
+	 #languages-block-top,
+	 .header-row #header_user_info{
+	 border-color:#656565;  
+	 }
+  
+   #currencies-block-top div.current, 
+  #languages-block-top div.current,
+  .header-row #header_user_info a
+  {
+	 color:white; 
+	  &:hover, &.active {	
+		color:white
+		}
+
+ }
+    #currencies-block-top div.current, 
+  #languages-block-top div.current{
+	  padding-bottom:11px;
+	 strong,
+	 &:after{color:white;} 
+	  }
+	   
+ #currencies-block-top div.current, 
+ #languages-block-top div.current
+   {&:hover,
+    &.active {
+	  strong,
+	  &:after
+	   {
+	    background:#2b2b2b;
+		color:white}
+       }
+	 }
+	
+	#contact-link{ 
+	   border-color:#656565;
+	   a{color:white;
+		  &:hover, &.active {
+			background:#2b2b2b;
+			color:white
+			}
+		}	
+	}	
+	
+}
+
+
+
+	#search_block_top .btn.button-search{
+	background:$color-style1;
+		
+	   &:hover{color:white;
+    	background:$color1-style1}
+		
+		
+	}
+	#search_block_top #search_query_top {background:white;color:$color1-style1}
+
+	
+
+     #header_right #header_user #shopping_cart a{
+		background:$color-style1; 
+		color:white;
+		 &:after{color:white}
+		&:hover{color:white;
+    	background:$color1-style1}		 
+	 }
+	 
+
+    .sf-menu{
+		background:white;
+		border:1px solid #f2f2f2;
+		border-bottom:3px solid #f2f2f2;
+		>li{
+			border-right:1px solid #d6d4d4;
+			a{border-bottom: 3px solid #f2f2f2;}
+		&.sfHover > a, > a:hover, &.sfHoverForce > a 
+		{color:#fff;background:$color-style1;
+		border-bottom-color:$color-style1;}
+		}
+	} 
+	
+	
+
+//-------- columns-container
+
+     #home-page-tabs{
+		background:white;
+		  > li.active a, 
+		  > li a:hover{
+			background:$color1-style1;
+			color:white 
+			 }
+		 
+	 }
+	 
+
+	.new,
+	.sale
+	{background:#f44051;
+		&:before,
+		&:after{
+				border-color: #f44051  transparent   transparent transparent ;			
+			}	
+	}
+
+
+   ul.product_list.grid > li .product-container{
+	background:white;
+   .product-image-container{
+	background:#474747;
+   .product_img_link{background:#474747;
+     img{background:#474747;}
+   }   
+   }
+   }
+  
+  ul.product_list.grid > li:hover .product-container{background:#5c5c5c;
+  .product-name{color:#aaa}
+  .functional-buttons div a, ul.product_list.grid > li .product-container .functional-buttons div label{color:#aaa;
+  
+  &:hover{color:#fff}
+  }
+  
+  }
+  
+
+  #cmsinfo_block em{background:$color-style1;}
+  #facebook_block, #cmsinfo_block{background:#454545;
+  h4{color:white}
+  
+  }
+  #cmsinfo_block h3,
+  #cmsinfo_block .dark
+  {color:white}
+  
+  #cmsinfo_block,
+   #cmsinfo_block > div + div{border-color:#1b1b1b;}      
+  .footer-container {	
+  background:#1b1b1b;
+																		@media (min-width: $screen-sm) { // min 768px
+																			background:url(../img/footer-bg1.gif) repeat-x;
+																		}
+}
+.footer-container #footer #social_block{  background:#1b1b1b;}
+
+	#footer #newsletter_block_left .form-group{ 
+	.form-control{background:#1b1b1b;}
+	 .button-small {color:$color-style1;} 
+	}
+	
+ .footer-container #footer #social_block ul li a:hover{color:white;}	
+	
+	

modules/themeconfigurator/sass/theme-style3.scss

@@ -0,0 +1,197 @@
+@import 'compass';
+@import 'bootstrap_lib/_variables';
+$color-style1:#719f41;
+$color1-style1:#333;
+$color2-style1:#b7b7b7;
+
+body{background:$color1-style1}
+.header-container,
+.columns-container{background:#fff}
+
+  //-------- HEADER
+  #header {
+   background:none;	
+	.header-row {
+	  background:$color1-style1;	 	   
+	  .shop-phone{
+		  color:#777;
+		i,
+		strong{color:$color-style1} 
+		
+		  } 	
+	}
+	
+	 #currencies-block-top, 
+	 #languages-block-top,
+	 .header-row #header_user_info{
+	 border-color:#515151;  
+	 }
+  
+   #currencies-block-top div.current, 
+  #languages-block-top div.current,
+  .header-row #header_user_info a
+  {
+	 color:white; 
+	  &:hover, &.active {
+		background:#2b2b2b;
+		color:white
+		}
+
+ }
+    #currencies-block-top div.current, 
+  #languages-block-top div.current{
+	 strong{color:$color1-style1;} 
+	  }
+	   
+	   
+  #currencies-block-top div.current, 
+ #languages-block-top div.current{
+	  &:after,
+	strong{color:white} 
+	 
+	 }	   
+	   
+  #currencies-block-top div.current, 
+ #languages-block-top div.current
+   {&:hover,
+    &.active {
+	  strong,
+	  &:after
+	   {
+	  	color:white}
+       }
+	 }
+	
+	#contact-link{ 
+	   border-color:#515151;
+	   a{color:white;
+		  &:hover, &.active {
+			background:#2b2b2b;
+			color:white
+			}
+		}	
+	}	
+	
+}
+
+
+	#search_block_top .btn.button-search{
+	background:$color-style1;
+	text-shadow:0 1px  #567931;
+	   &:hover{color:white;
+    	background:$color1-style1;
+		text-shadow:0 1px  #333;}
+	}
+	
+	#search_block_top #search_query_top{color:#686666}
+	
+
+     #header_right #header_user #shopping_cart a{
+		background:$color-style1; 
+		color:white;
+		text-shadow:0 1px  #567931;
+		 &:after{color:white}
+		&:hover{color:white;
+		text-shadow:0 1px  #333;
+    	background:$color1-style1}		 
+	 }
+	 
+    .sf-menu{
+		background:#f6f6f6;
+		border-bottom:3px solid #e9e9e9;
+		>li{
+			border-right:1px solid #d6d4d4;
+			a{border-bottom: 3px solid #e9e9e9;}
+		&.sfHover > a, > a:hover, &.sfHoverForce > a 
+		{color:#fff;background:$color-style1;
+		border-bottom-color:#598b24;}
+		}
+	} 
+	
+	
+
+//-------- columns-container
+
+     #home-page-tabs{
+		background:white;
+		  > li.active a, 
+		  > li a:hover{
+			background:$color-style1;
+			color:white 
+			 }
+		 
+	 }
+	 
+
+	.new,
+	.sale
+	{background:$color-style1;
+		&:before,
+		&:after{
+				border-color: #719f41  transparent   transparent transparent ;			
+			}	
+	}
+
+
+   ul.product_list.grid > li .product-container{
+	background:white;
+   .product-image-container{
+	background:white;
+   .product_img_link{background:white;
+     img{background:white;}
+   }   
+   }
+   }
+  
+.price.product-price{color:$color-style1;}
+.price-percent-reduction{background:$color-style1;border-color:$color-style1}
+  .button.lnk_view {
+	text-shadow:none;
+	padding:0;
+	border:none;
+		span {
+			border:none;		
+			padding:12px 16px;
+		   background:$color1-style1;
+		   color:white;	
+		}
+		
+	&:hover {
+		span {
+			background:$color-style1;
+			}	
+	}
+  }
+
+
+  #cmsinfo_block em{background:$color1-style1;}
+  #facebook_block, #cmsinfo_block{background:#e8e8e8}
+  #cmsinfo_block,
+   #cmsinfo_block > div + div{border-color:#d0d0d0;}  
+   
+   .footer-container #footer #social_block  { background:#3f3f3f;padding-bottom:15px;}  
+  .footer-container {	
+  background:#3f3f3f;
+																		@media (min-width: $screen-sm) { // min 768px
+																			background:url(../img/footer-bg.gif) repeat-x;
+																		}
+}
+    .footer-container #footer #social_block ul li a:hover{color:$color-style1;}
+     
+	 #footer #newsletter_block_left .form-group{ 
+	.form-control{background:#3f3f3f;}
+	
+	}
+	
+	#footer #newsletter_block_left h4,
+	.footer-container #footer #social_block h4{color:#fff}
+	
+	.footer-container #footer h4,
+	.footer-container #footer h4 a{color:$color-style1;}
+	.footer-container #footer .bottom-footer{color:$color-style1;
+	a{color:$color-style1;
+	&:hover{color:#fff}
+	}
+	}
+		
+	

modules/themeconfigurator/sass/theme-style8.scss

@@ -0,0 +1,177 @@
+@import 'compass';
+@import 'bootstrap_lib/_variables';
+
+$header-background:#333333;
+$color-style1:#eea200;
+$color1-style1:#fff;
+$color2-style1:#b7b7b7;
+
+body{background:#282828}
+.header-container,
+.columns-container{background:#f7f5eb}
+
+  //-------- HEADER
+  #header {
+   background:none;	
+	.header-row {
+	  background:$header-background;	 	   
+	  .shop-phone{
+		  color:$color1-style1;
+		i,
+		strong{color:$color-style1} 
+		
+		  } 	
+	}
+	
+	
+	 #currencies-block-top, 
+	 #languages-block-top,
+	 .header-row #header_user_info{
+	 border-color:#515151;  
+	 }
+  
+   #currencies-block-top div.current, 
+  #languages-block-top div.current,
+  .header-row #header_user_info a
+  {
+	 color:$color1-style1; 
+	  &:hover, &.active {
+		background:$color2-style1;
+		color:white
+		}
+
+ }
+    #currencies-block-top div.current, 
+  #languages-block-top div.current{
+	 strong{color:$color1-style1;} 
+	  }
+	   
+  #currencies-block-top div.current, 
+ #languages-block-top div.current
+   {&:hover,
+    &.active {
+	  strong,
+	  &:after
+	   {
+	    background:$color2-style1;
+		color:white}
+       }
+	 }
+	
+	#contact-link{ 
+	   border-color:#515151;
+	   a{color:$color1-style1;
+		  &:hover, &.active {
+			background:$color2-style1;
+			color:white
+			}
+		}	
+	}	
+	
+}
+
+
+	#search_block_top .btn.button-search{background:$color-style1;
+	   &:hover{color:white;
+    	background:$color2-style1}
+	}
+
+     #header_right #header_user #shopping_cart a{
+		background:$color-style1; 
+		color:white;
+		 &:after{color:white}
+		&:hover{color:white;
+    	background:$color2-style1}		 
+	 }
+	 
+    .sf-menu{
+		background:#fffef6;
+		border-bottom:3px solid #e2dec8;
+		>li{
+			border-right:1px solid #e2dec8;
+			a{border-bottom: 3px solid #e2dec8;}
+		&.sfHover > a, > a:hover, &.sfHoverForce > a 
+		{color:#fff;background:$color-style1;
+		border-bottom-color:#da9400;}
+		}
+	} 
+	
+	
+
+//-------- columns-container
+
+     #home-page-tabs{
+		background:none;
+		  > li.active a, 
+		  > li a:hover{
+			background:$color-style1;
+			color:white 
+			 }
+		 
+	 }
+	 
+
+	.new,
+	.sale
+	{background:$color-style1;
+		&:before,
+		&:after{
+				border-color: $color-style1  transparent   transparent transparent ;			
+			}	
+	}
+
+
+   ul.product_list.grid > li .product-container{
+  	background:none;
+    .product-image-container{
+  	   background:white;
+       .product_img_link{
+        background:#f1e8e3;
+        img{
+          background:#f1e8e3;
+        }
+       }   
+     }
+   }
+  
+
+
+  .button.lnk_view {
+	text-shadow:none;
+	padding:0;
+	border:none;
+		span {
+			border:1px solid #9a9a9a;		
+			padding:12px 16px;
+		   background:#f2f2f2;
+		   color:white;	
+		}
+		
+	&:hover {
+		span {
+			background:$color2-style1;
+			}	
+	}
+  }
+
+
+  #cmsinfo_block em{background:$color-style1;}
+  #facebook_block, #cmsinfo_block{background:#f0eee1}
+  #cmsinfo_block,
+   #cmsinfo_block > div + div{border-color:#e9e6d6;}  
+   
+   .footer-container #footer #social_block  { background:none;padding-bottom:15px;}  
+  .footer-container {	
+  background:#3f3f3f;
+																		@media (min-width: $screen-sm) { // min 768px
+																			background:url(../img/footer-bg.gif) repeat-x;
+																		}
+}
+	 #footer #newsletter_block_left .form-group{ 
+	.form-control{background:#3c3c3c;}
+	 .button-small {color:$color-style1;} 
+	}
+	
+ .footer-container #footer #social_block ul li a:hover{color:$color-style1;}	
+	
+	

themes/default-bootstrap/css/product_list.css

@@ -192,7 +192,7 @@ ul.product_list.grid > li .product-container .functional-buttons div.wishlist a:
   content: "";
   margin-right: 3px;
 }
-ul.product_list.grid > li .product-container .functional-buttons div.wishlist a.ckecked:before {
+ul.product_list.grid > li .product-container .functional-buttons div.wishlist a.checked:before {
   content: "";
 }
 @media (min-width: 992px) and (max-width: 1199px) {
@@ -211,28 +211,29 @@ ul.product_list.grid > li .product-container .functional-buttons div.wishlist a.
     display: none;
   }
 }
-ul.product_list.grid > li .product-container .functional-buttons div.compare label:before {
+ul.product_list.grid > li .product-container .functional-buttons div.compare a:before {
   content: "";
   display: inline-block;
   font-family: "FontAwesome";
+  margin-right: 3px;
 }
 @media (min-width: 992px) and (max-width: 1199px) {
-  ul.product_list.grid > li .product-container .functional-buttons div.compare label:before {
+  ul.product_list.grid > li .product-container .functional-buttons div.compare a:before {
     display: none;
   }
 }
 @media (min-width: 480px) and (max-width: 767px) {
-  ul.product_list.grid > li .product-container .functional-buttons div.compare label:before {
+  ul.product_list.grid > li .product-container .functional-buttons div.compare a:before {
     display: none;
   }
 }
-ul.product_list.grid > li .product-container .functional-buttons div.compare label.checked:before {
+ul.product_list.grid > li .product-container .functional-buttons div.compare a.checked:before {
   content: "";
 }
 @media (min-width: 1200px) {
   ul.product_list.grid > li.hovered {
     margin-bottom: -300px;
-    padding-bottom: 250px;
+    padding-bottom: 226px;
   }
   ul.product_list.grid > li.hovered .product-container {
     -webkit-box-shadow: rgba(0, 0, 0, 0.17) 0 0 13px;
@@ -415,7 +416,7 @@ ul.product_list.list > li .right-block .right-block-content .button-container .b
     display: none !important;
   }
 }
-ul.product_list.list > li .right-block .right-block-content .functional-buttons a, ul.product_list.list > li .right-block .right-block-content .functional-buttons label {
+ul.product_list.list > li .right-block .right-block-content .functional-buttons a {
   font-weight: bold;
   color: #777676;
   cursor: pointer;
@@ -446,13 +447,13 @@ ul.product_list.list > li .right-block .right-block-content .functional-buttons
 ul.product_list.list > li .right-block .right-block-content .functional-buttons .wishlist a:hover:before {
   background: #333333;
 }
-ul.product_list.list > li .right-block .right-block-content .functional-buttons .wishlist a.ckecked:before {
+ul.product_list.list > li .right-block .right-block-content .functional-buttons .wishlist a.checked:before {
   content: "";
 }
 ul.product_list.list > li .right-block .right-block-content .functional-buttons .compare {
   padding-top: 10px;
 }
-ul.product_list.list > li .right-block .right-block-content .functional-buttons .compare label:before {
+ul.product_list.list > li .right-block .right-block-content .functional-buttons .compare a:before {
   content: "";
   display: inline-block;
   font-family: "FontAwesome";
@@ -470,13 +471,13 @@ ul.product_list.list > li .right-block .right-block-content .functional-buttons
   padding: 6px 0 0 0;
   color: white;
 }
-ul.product_list.list > li .right-block .right-block-content .functional-buttons .compare label:hover {
+ul.product_list.list > li .right-block .right-block-content .functional-buttons .compare a:hover {
   color: #333333;
 }
-ul.product_list.list > li .right-block .right-block-content .functional-buttons .compare label:hover:before {
+ul.product_list.list > li .right-block .right-block-content .functional-buttons .compare a:hover:before {
   background: #333333;
 }
-ul.product_list.list > li .right-block .right-block-content .functional-buttons .compare label.checked:before {
+ul.product_list.list > li .right-block .right-block-content .functional-buttons .compare a.checked:before {
   background: white;
   border: 1px solid #929292;
   color: #929292;
@@ -522,7 +523,7 @@ ul.product_list.list > li .right-block .right-block-content .functional-buttons
   }
   #index ul.product_list.tab-pane > li.last-line.hovered {
     margin-bottom: -300px;
-    padding-bottom: 230px;
+    padding-bottom: 235px;
   }
 }
 @media (min-width: 480px) and (max-width: 767px) {

themes/default-bootstrap/index.tpl

@@ -29,6 +29,11 @@
         <ul id="home-page-tabs" class="nav nav-tabs">{/if}{$HOOK_HOME_TAB}{if isset($HOOK_HOME_TAB)}</ul>
     {/if}
     <script type="text/javascript">
+		var min_item = '{l s='Please select at least one product' js=1}';
+		var max_item = "{l s='You cannot add more than %d product(s) to the product comparison' sprintf=$comparator_max_item js=1}";
+		var comparator_max_item = {$comparator_max_item};
+		var comparedProductsIds = [];
+		{foreach from=$compared_products item=product name=products}comparedProductsIds.push({$product.id_product});{/foreach};
 		$('document').ready(function(){
 			blockHover();
 			if (typeof reloadProductComparison != 'undefined')

themes/default-bootstrap/js/modules/blockwishlist/js/ajax-wishlist.js

@@ -257,13 +257,13 @@ function wishlistProductsIdsRemove(id){
         wishlistProductsIds.splice($.inArray(parseInt(id),wishlistProductsIds), 1)
 }
 function wishlistRefreshStatus(){
-        $('.addToWishlist').each(function() {
+$('.addToWishlist').each(function() {
-                if ($.inArray(parseInt($(this).prop('rel')),wishlistProductsIds)!= -1){
+	if ($.inArray(parseInt($(this).prop('rel')),wishlistProductsIds)!= -1){
-                        $(this).addClass('ckecked');
+		$(this).addClass('checked');
-                }
+	}
-                else
+	else
-                        $(this).removeClass('ckecked');
+		$(this).removeClass('checked');
-    });        
+	});        
 }
 $(document).ready(function() {
         if (typeof wishlistProductsIds == 'undefined') {

themes/default-bootstrap/js/products-comparison.js

@@ -23,12 +23,55 @@
 *  International Registered Trademark & Property of PrestaShop SA
 */
 
+function addToCompare(productId){
+	
+	var totalValueNow = parseInt($('.bt_compare').next('.compare_product_count').val());
+	
+	$.inArray(parseInt(productId),comparedProductsIds) == -1?action = 'add':action = 'remove';
+	
+	$.ajax({
+		url: 'index.php?controller=products-comparison&ajax=1&action='+action+'&id_product=' + productId,
+		async: true,
+		cache: false,
+		success: function(data){
+			if (action == 'add' && comparedProductsIds.length < comparator_max_item) {
+				comparedProductsIds.push(parseInt(productId)),
+				compareButtonsStatusRefresh(),
+				totalVal = totalValueNow +1,
+				$('.bt_compare').next('.compare_product_count').val(totalVal),
+				totalValue(totalVal)
+			}
+			else if (action == 'remove') {
+				comparedProductsIds.splice($.inArray(parseInt(productId),comparedProductsIds), 1),
+				compareButtonsStatusRefresh(),
+				totalVal = totalValueNow -1,
+				$('.bt_compare').next('.compare_product_count').val(totalVal),
+				totalValue(totalVal)	
+			}
+			else {
+				alert(max_item)
+			}
+		},
+		error: function(){}
+	});
+}
+
+function compareButtonsStatusRefresh(){
+	$('.addToCompare').each(function() {
+		if ($.inArray(parseInt($(this).prop('rel')),comparedProductsIds)!= -1){
+			$(this).addClass('checked');
+		}
+		else {
+			$(this).removeClass('checked');	
+		}
+	})
+}
+
+function totalValue(value) {
+	$('.bt_compare').find('.total-compare-val').html(value);
+}
+
 reloadProductComparison = function() {
-	$('input:checkbox.comparator').each(function() {
-        var checkedCheckbox = $(this);
-		if (checkedCheckbox.is(':checked'))
-			checkedCheckbox.parent().addClass('checked');
-    });
 	$('a.cmp_remove').click(function(){
 
 		var idProduct = $(this).prop('rel').replace('ajax_id_product_', '');
@@ -42,57 +85,8 @@ reloadProductComparison = function() {
 			}
 		});	
 	});
-	$('input:checkbox.comparator').click(function(){
-		var totalValueNow = parseInt($('.bt_compare').next('.compare_product_count').val());
-		var idProduct = $(this).prop('value').replace('comparator_item_', '');
-		var checkbox = $(this);
-		if(checkbox.is(':checked'))
-		{
-			$.ajax({
-	  			url: 'index.php?controller=products-comparison&ajax=1&action=add&id_product=' + idProduct,
-	 			async: true,
-	 			cache: false,
-	  			success: function(data){
-	  				if (data === '0')
-	  				{
-	  					checkbox.prop('checked', false);
-						alert(max_item);
-					}
-					else {
-							checkbox.prop('checked', true),
-							checkbox.parent().addClass('checked'),
-							totalVal = totalValueNow +1,
-							$('.bt_compare').next('.compare_product_count').val(totalVal),
-							totalValue(totalVal)
-					}
-	  			},
-	    		error: function(){
-	    			checkbox.prop('checked', false);
-	    		}
-			});	
-		}
-		else
-		{
-			$.ajax({
-	  			url: 'index.php?controller=products-comparison&ajax=1&action=remove&id_product=' + idProduct,
-	 			async: true,
-	 			cache: false,
-	  			success: function(data){
-	  				if (data === '0')
-					
-	  					checkbox.prop('checked', true);
-						checkbox.parent().removeClass('checked');
-						totalVal = totalValueNow -1;
-						$('.bt_compare').next('.compare_product_count').val(totalVal),
-						totalValue(totalVal)
-	    		}, 
-	    		error: function(){
-	    			checkbox.prop('checked', true);
-	    		}
-			});	
-		}
-	});
 }
-function totalValue(value) {
+
-	$('.bt_compare').find('.total-compare-val').html(value);
+$(document).ready(function() {
-}
+    compareButtonsStatusRefresh();
+});

themes/default-bootstrap/modules/blockwishlist/blockwishlist_button.tpl

@@ -24,5 +24,5 @@
 *}
 
 <div class="wishlist">
-<a href="#" id="wishlist_button_{$product.id_product|intval}" rel="{$product.id_product|intval}" onclick="WishlistCart('wishlist_block_list', 'add', '{$product.id_product|intval}', false, 1); return false;" class="addToWishlist wishlistProd_{$product.id_product|intval}">{l s="Add to Wishlist"}</a>
+<a href="#" rel="{$product.id_product|intval}" onclick="WishlistCart('wishlist_block_list', 'add', '{$product.id_product|intval}', false, 1); return false;" class="addToWishlist wishlistProd_{$product.id_product|intval}">{l s="Add to Wishlist"}</a>
 </div>

themes/default-bootstrap/modules/productcomments/productcomments_reviews.tpl

@@ -34,6 +34,6 @@
             {/if}
         {/section}
         </div>
-        <span class="nb-comments">{l s='%s Review(s)'|sprintf:$nbComments mod='productcomments'}&nbsp</span>
+        <span class="nb-comments">{l s='%s Review(s)'|sprintf:$nbComments mod='productcomments'}</span>
     </div>
 {/if}

themes/default-bootstrap/product-compare.tpl

@@ -29,6 +29,9 @@
 // <![CDATA[
 	var min_item = '{l s='Please select at least one product' js=1}';
 	var max_item = "{l s='You cannot add more than %d product(s) to the product comparison' sprintf=$comparator_max_item js=1}";
+	var comparator_max_item = {$comparator_max_item};
+	var comparedProductsIds = [];
+	{foreach from=$compared_products item=product name=products}comparedProductsIds.push({$product.id_product});{/foreach};
 //]]>
 </script>
 {/if}

themes/default-bootstrap/product-list.tpl

@@ -52,8 +52,8 @@
                 	<div class="product-image-container">
                     	<a href="{$product.link|escape:'htmlall':'UTF-8'}" class="product_img_link" title="{$product.name|escape:'htmlall':'UTF-8'}">
                             <img class="replace-2x img-responsive" src="{$link->getImageLink($product.link_rewrite, $product.id_image, 'home_default')|escape:'html'}" alt="{$product.legend|escape:'htmlall':'UTF-8'}" {if isset($homeSize)} width="{$homeSize.width}" height="{$homeSize.height}"{/if} />
-                            {if isset($quick_view) && $quick_view}<a href="#" rel="{$product.link|escape:'htmlall':'UTF-8'}" class="quick-view"><span>Quick view</span></a>{/if}
                         </a>
+                        {if isset($quick_view) && $quick_view}<a href="#" rel="{$product.link|escape:'htmlall':'UTF-8'}" class="quick-view"><span>Quick view</span></a>{/if}
                         {if (!$PS_CATALOG_MODE AND ((isset($product.show_price) && $product.show_price) || (isset($product.available_for_order) && $product.available_for_order)))}
                         	<div class="content_price">
                             	{if isset($product.show_price) && $product.show_price && !isset($restricted_country_mode)}
@@ -112,12 +112,10 @@
                     {/if}
                 </div>
                 <div class="functional-buttons clearfix">
-						{hook h='displayProductListFunctionalButtons' product=$product}
+					{hook h='displayProductListFunctionalButtons' product=$product}
                     {if isset($comparator_max_item) && $comparator_max_item}
                         <div class="compare">
-                            <label for="comparator_item_{$product.id_product}">
+                            <a href="#" rel="{$product.id_product}" class="addToCompare" onClick="addToCompare('{$product.id_product|intval}'); return false;">{l s='Add to Compare'}</a>
-                            <input type="checkbox" class="comparator hidden" id="comparator_item_{$product.id_product}" value="comparator_item_{$product.id_product}" {if isset($compared_products) && in_array($product.id_product, $compared_products)}checked="checked"{/if} autocomplete="off"/> 
-                            {l s='Add to Compare'}</label>
                         </div>
                     {/if}
                 </div>
@@ -125,14 +123,14 @@
 		</li>
 	{/foreach}
 	</ul>
-    
 <!-- Script for transformation Grid/List layouts -->
 {if $page_name == 'product'}
 	<script type="text/javascript">
+		var comparator_max_item = {$comparator_max_item};
+		var comparedProductsIds = [];
+		{foreach from=$compared_products item=product name=products}comparedProductsIds.push({$product.id_product});{/foreach};
         $('document').ready(function(){
             blockHover();
-            if (typeof reloadProductComparison != 'undefined')
-                reloadProductComparison();
         });
     </script>
 {/if}
@@ -192,8 +190,6 @@
 				$('.display').find('li#list').addClass('selected');
 				$('.display').find('li#grid').removeAttr('class');
 				$.totalStorage('display', 'list');
-				if (typeof reloadProductComparison != 'undefined') // compare button reload
-					reloadProductComparison();
 				if (typeof ajaxCart != 'undefined')      // cart button reload
 					ajaxCart.overrideButtonsInThePage();
 				if (typeof quick_view != 'undefined') 	// qick view button reload
@@ -233,9 +229,7 @@
 				});
 				$('.display').find('li#grid').addClass('selected');
 				$('.display').find('li#list').removeAttr('class');
-				$.totalStorage('display', 'grid');
+				$.totalStorage('display', 'grid');			
-				if (typeof reloadProductComparison != 'undefined')// compare button reload
-					reloadProductComparison();				
 				if (typeof ajaxCart != 'undefined') 	// cart button reload
 					ajaxCart.overrideButtonsInThePage();
 				if (typeof quick_view != 'undefined') 	// qick view button reload

themes/default-bootstrap/sass/product_list.scss

@@ -194,7 +194,7 @@ ul.product_list.grid {
 							margin-right:3px;
 		            }
 		
-		            a.ckecked:before {
+		            a.checked:before {
 		              content:"";  
 		            }
 																		@media (min-width: $screen-md) and (max-width: $screen-md-max) { // min 992px max 1199px
@@ -211,11 +211,12 @@ ul.product_list.grid {
 					}
 					
 					&.compare {
-						label	{
+						a {
 							&:before {
 								content:"";
 								display:inline-block;
 								font-family:$font-icon;
+								margin-right:3px;
 																			@media (min-width: $screen-md) and (max-width: $screen-md-max) { // min 992px max 1199px
 																				display:none;
 																			}
@@ -238,7 +239,7 @@ ul.product_list.grid {
 	@media (min-width: $screen-lg) { // min 1200px
 		&.hovered {
 			margin-bottom:-300px;
-			padding-bottom:250px;
+			padding-bottom:226px;
 			
 			.product-container {
 				@include box-shadow(rgba(black, 0.17) 0 0 13px);
@@ -412,7 +413,7 @@ ul.product_list.list {
 																				i, &:before {display:none !important;}
 																			}
 																		}
-					a, label {
+					a {
 							font-weight:bold;
 							color:#777676;
 							cursor:pointer;
@@ -441,7 +442,7 @@ ul.product_list.list {
 													background:$dark-background;
 											}
 							}
-							a.ckecked {
+							a.checked {
 									&:before {
 											content:"";        
 									}
@@ -451,7 +452,7 @@ ul.product_list.list {
 					.compare {
 						padding-top:10px;
 						
-						label {
+						a {
 							
 							&:before {
 								content:"";
@@ -475,13 +476,13 @@ ul.product_list.list {
 									background:$dark-background;	
 								}
 							}
-							&.checked {
+						}
-								&:before {
+						a.checked {
-									background:$light-background;
+							&:before {
-									border:1px solid #929292;
+								background:$light-background;
-									color:#929292;
+								border:1px solid #929292;
-									padding-top:5px;
+								color:#929292;
-								}
+								padding-top:5px;
 							}
 						}
 					}
@@ -537,7 +538,7 @@ ul.product_list.list {
 					
 					&.hovered {
 						margin-bottom:-300px;
-						padding-bottom:230px;	
+						padding-bottom:235px;	
 					}
 				}
 			}