-------------------------------------------------------------------------------------------------------------------
CHANGE TWO CODES WITH BELOW CODES
-------------------------------------------------------------------------------------------------------------------
--
1- product_list.CSS CODE (WITH BELOW CSS CODE)
2- product-list.tpl CODE (WITH BELOW CSS CODE)
3- IF FUNCTION NOT WORK CHANGE PRESTA GLOBAL.JS CODE WITH
NELLA GOLOBAL.JS CODE
----------------------------------------------------------------------------------------------------------------------
SCROLL CSS CODE: product_list.CSS
-------------------------------------------------------------------------------------------------------------------
/*******************************************************
Product list Styles
********************************************************/
#category ul.product_list,
#search ul.product_list,
#manufacturer ul.product_list,
#supplier ul.product_list,
#prices-drop ul.product_list,
#best-sales ul.product_list,
#module-categorysearch-catesearch ul.product_list,
#new-products ul.product_list {
margin-bottom: 0; margin-top: 20px;
}
ul.product_list .product-name {
display: inline-block;
width: 100%;
overflow: hidden;
color: #858785;
font-size: 14px;
line-height: 24px;
text-transform: uppercase;
}
ul.product_list li .product-name:hover {
color: #fe983d;
}
ul.product_list .availability {
display: none;
}
ul.product_list .color-list-container {
display: none;
}
ul.product_list .product-image-container {
text-align: center;
}
ul.product_list .product-image-container img {
margin: 0 auto;
}
ul.product_list .new-box {
display: none;
}
ul.product_list .sale-box {
display: block;
}
ul.product_list .button.ajax_add_to_cart_button:hover {
background:#fe983d;
border: 1px solid #fe983d;
}
ul.product_list .button.ajax_add_to_cart_button:hover span {
color: #FFF;
}
ul.product_list .product-image-container .quick-view {
color: #FFF;
position: absolute;
left: 50%;
top: 0;
margin: -30px 0 0 -50px;
padding: 8px 0;
background:#fe983d;
width: 100px;
height: 30px;
text-align: center;
font-size: 14px;
line-height: 14px;
-webkit-transition: all ease-in-out 0.45s;
-moz-transition: all ease-in-out 0.45s;
-ms-transition: all ease-in-out 0.45s;
-o-transition: all ease-in-out 0.45s;
transition: all ease-in-out 0.45s;
display: block;
}
@media (max-width: 767px) {
ul.product_list .product-image-container .quick-view {
display: none;
}
}
ul.product_list .comments_note {
text-align: left;
/* overflow: hidden; */
}
ul.product_list .comments_note .star_content { float: left; }
@media (max-width: 479px) {
ul.product_list .comments_note .star_content {
float: none;
margin: 0 auto;
display: inline-block;
}
}
ul.product_list .comments_note .nb-comments {
overflow: hidden;
color: #666;
font-size: 13px;
margin: 0 5px;
display: none;
}
ul.product_list .functional-buttons div a, ul.product_list .functional-buttons div label {
color: #393939;
display: block;
width: 30px;
height: 30px;
cursor: pointer;
background: #FFF;
border: 1px solid #393939;
-webkit-transition: background-color,color ease-in-out 0.1s;
-moz-transition: background-color,color ease-in-out 0.1s;
-ms-transition: background-color,color ease-in-out 0.1s;
-o-transition: background-color,color ease-in-out 0.1s;
transition: background-color,color ease-in-out 0.1s;
}
ul.product_list .functional-buttons div a:hover, ul.product_list .functional-buttons div label:hover,
ul.product_list .functional-buttons div.compare a:hover {
background: #fe983d;
color: #FFF;
border: 1px solid #fe983d;
}
ul.product_list .functional-buttons div.wishlist {
}
ul.product_list .functional-buttons div.wishlist a i:before {
content: "\f004";
display: inline-block;
font-family: "FontAwesome";
margin-right: 0;
width: 29px;
height: 29px;
line-height: 30px;
text-align: center;
}
ul.product_list .functional-buttons div.wishlist a.checked i:before { content: "\f08a"; }
@media (min-width: 992px) and (max-width: 1199px) {
ul.product_list .functional-buttons div.wishlist {}
}
@media (min-width: 480px) and (max-width: 767px) {
ul.product_list .functional-buttons div.wishlist {}
}
ul.product_list .functional-buttons div.compare a {
color: #393939;
}
ul.product_list .functional-buttons div.compare a i:before {
content: "\f021";
display: inline-block;
font-family: "FontAwesome";
margin-right: 0;
width: 29px;
height: 29px;
line-height: 29px;
text-align: center;
}
ul.product_list .functional-buttons div.compare a.checked i:before {
content: "\f14a";
}
ul.product_list .button.ajax_add_to_cart_button {
padding: 4px 10px;
min-width: 110px;
text-align: center;
}
.button.ajax_add_to_cart_button span {
line-height: 20px;
}
/*******************************************************
Product list(Grid) Styles
********************************************************/
ul.product_list.grid > li {
/* padding-bottom: 30px; */
padding-bottom: 10px;
padding-top: 0;
text-align: center;
}
@media (min-width: 480px) and (max-width: 767px) {
ul.product_list.grid > li {
width: 50%;
float: left;
}
}
ul.product_list.grid > li .product-container {
background: white;
border: 1px solid #FFF;
position: relative;
-webkit-transition: border-color ease-in-out 0.15s;
-moz-transition: border-color ease-in-out 0.15s;
-ms-transition: border-color ease-in-out 0.15s;
-o-transition: border-color ease-in-out 0.15s;
transition: border-color ease-in-out 0.15s;
}
ul.product_list.grid > li:hover .product-container {
border-color: #858785;
}
@media (min-width: 992px) and (max-width: 1199px) {
ul.product_list.grid > li .product-container {
/* height: 399px; Fix height description */
}
}
ul.product_list.grid > li .product-container .product-image-container {
padding: 0;
margin-bottom:0;
position: relative;
overflow: hidden;
}
@media (max-width: 767px) {
ul.product_list.grid > li .product-container .product-image-container {
max-width: 290px;
margin-left: auto;
margin-right: auto;
border: none;
}
ul.product_list .product-container .left-block,
ul.product_list .product-container .center-block,
ul.product_list .product-container .right-block {
width: 100%
}
}
@media (min-width: 480px) and (max-width: 767px) {
ul.product_list.grid .product-container .right-block {
height: 107px;
}
}
ul.product_list.grid > li .product-container .product-image-container .content_price {
display: none;
}
ul.product_list.grid > li .product-container .price.product-price {
color: #393939;
font-size: 14px;
line-height: 20px;
margin-right: 5px;
}
ul.product_list.grid > li .product-container .product-image-container .content_price span {
color: white;
}
ul.product_list.grid > li .product-container .product-image-container .content_price span.old-price {
color: #ccc;
}
ul.product_list.grid > li .product-container h5 {
padding: 0 10px;
margin-top: 14px;
margin-bottom:0;
}
ul.product_list.grid > li .product-container .comments_note { display: none; }
ul.product_list.grid > li .product-container .comments_note .star_content {
margin: 0 3px 12px 59px;
}
ul.product_list.grid > li .product-container .product-desc {
display: none;
}
ul.product_list.grid > li .product-container .product-desc-list {
display: none;
}
ul.product_list.grid > li .product-container .content_price {
padding-bottom: 9px;
line-height: 20px;
}
ul.product_list.grid > li .product-container .old-price,
ul.product_list.grid > li .product-container .price,
ul.product_list.grid > li .product-container .price-percent-reduction {
display: inline-block;
}
ul.product_list.grid > li .product-container .product-flags {
display: none; }
ul.product_list.grid > li .product-container .old-price {
margin-right: 5px;
font-size: 12px;
font-weight: normal;
color: #ccc!important;
}
ul.product_list.grid > li .product-container .button-container {
margin-bottom: 19px;
}
ul.product_list.grid > li .product-container .button-container .ajax_add_to_cart_button,
ul.product_list.grid > li .product-container .button-container span.button,
ul.product_list.grid > li .product-container .button-container .lnk_view {
margin: 0
}
ul.product_list.grid > li .product-container .functional-buttons {
position: relative;
overflow: hidden;
margin-bottom: 19px;
}
ul.product_list.grid > li .product-container .functional-buttons div {
width: 30px;
height: 30px;
background: #ff3e3e;
color: #FFF;
}
ul.product_list.grid > li .product-container .functional-buttons div.compare {
position: absolute;
left: -31px;
top: 0;
-webkit-transition: all ease-in-out 0.35s;
-moz-transition: all ease-in-out 0.35s;
-ms-transition: all ease-in-out 0.35s;
-o-transition: all ease-in-out 0.35s;
transition: all ease-in-out 0.35s;
}
ul.product_list.grid > li .product-container .functional-buttons div.wishlist {
position: absolute;
right: -31px;
top: 0;
-webkit-transition: all ease-in-out 0.35s;
-moz-transition: all ease-in-out 0.35s;
-ms-transition: all ease-in-out 0.35s;
-o-transition: all ease-in-out 0.35s;
transition: all ease-in-out 0.35s;
}
ul.product_list.grid > li.hovered .product-container .product-image-container .quick-view {
top: 50%;
margin-top: -15px;
}
@media (min-width: 1200px) {
ul.product_list.grid > li.hovered .product-container {
position: relative;
z-index: 10; }
ul.product_list.grid > li.hovered .product-container .product-image-container .quick-view {
top: 50%;
}
ul.product_list.grid > li.hovered .product-container .functional-buttons,
ul.product_list.grid > li.hovered .product-container .button-container {
display: block;
}
ul.product_list.grid > li:hover .product-container .functional-buttons div.wishlist {
right: 35px;
}
ul.product_list.grid > li:hover .product-container .functional-buttons div.compare {
left: 35px;
}
}
@media (min-width: 992px) and (max-width: 1199px) {
ul.product_list.grid > li:hover .product-container .product-image-container .quick-view {
top: 50%;
}
ul.product_list.grid > li:hover .product-container .functional-buttons div.wishlist {
right: 10px;
}
ul.product_list.grid > li:hover .product-container .functional-buttons div.compare {
left: 10px;
}
}
@media (min-width: 768px) and (max-width: 991px) {
ul.product_list.grid > li:hover .product-container .product-image-container .quick-view {
top: 50%;
}
ul.product_list.grid > li:hover .product-container .functional-buttons div.wishlist {
right: 29px;
}
ul.product_list.grid > li:hover .product-container .functional-buttons div.compare {
left: 29px;
}
ul.product_list.grid > li.both-width:hover .product-container .functional-buttons div.wishlist {
right: 76px;
}
ul.product_list.grid > li.both-width:hover .product-container .functional-buttons div.compare {
left: 76px;
}
ul.product_list.grid > li.full-width:hover .product-container .functional-buttons div.wishlist {
right: 13px;
}
ul.product_list.grid > li.full-width:hover .product-container .functional-buttons div.compare {
left: 13px;
}
}
@media (max-width: 767px) {
ul.product_list.grid > li .product-container .product-image-container .quick-view {
display: none;
}
ul.product_list.grid > li .product-container .functional-buttons div.wishlist {
display: none;
}
ul.product_list.grid > li .product-container .functional-buttons div.compare {
display: none;
}
}
@media (min-width: 992px) {
ul.product_list.grid > li.first-in-line {
clear: left;
}
}
@media (min-width: 480px) and (max-width: 991px) {
ul.product_list.grid > li.first-item-of-tablet-line {
/* clear: left; */
}
}
@media (min-width: 1200px) {
#blockpack ul > li.last-line {
border: none;
padding-bottom: 0;
margin-bottom: 0;
}
}
@media (min-width: 480px) and (max-width: 767px) {
#blockpack ul > li.first-item-of-tablet-line {
clear: none;
}
#blockpack ul > li.first-item-of-mobile-line {
clear: left;
}
}
/*******************************************************
Product list(List) Styles
********************************************************/
@media (max-width: 479px) {
ul.product_list.list > li .left-block {
width: 100%;
}
}
ul.product_list.list > li .product-container {
padding: 0 0 30px 0;
}
ul.product_list.list > li .product-container .center-block {
padding-bottom: 10px;
}
ul.product_list.list > li .product-container .right-block {
position: relative;
}
@media (min-width: 1200px) {
ul.product_list.list > li .product-container .center-block {
width: 66.66667%;
padding-bottom: 0;
}
ul.product_list.list > li .product-container .center-block .center-block-wrap {
border: 1px solid #e8e8e8;
padding:23px 30px;
min-height: 321px;
display: block;
float: left;
-webkit-transition: border-color ease-in-out 0.15s;
-moz-transition: border-color ease-in-out 0.15s;
-ms-transition: border-color ease-in-out 0.15s;
-o-transition: border-color ease-in-out 0.15s;
transition: border-color ease-in-out 0.15s;
}
ul.product_list.list > li:hover .product-container .center-block .center-block-wrap {
border: 1px solid #858785;
}
}
@media (min-width: 992px) and (max-width: 1199px){
ul.product_list.list > li .product-container .left-block {
width: 40%;
}
ul.product_list.list > li .product-container .center-block {
width: 60%;
float: right;
padding-bottom: 0;
}
ul.product_list.list > li .product-container .center-block .center-block-wrap {
border: 1px solid #e8e8e8;
padding:12px 15px;
min-height: 312px;
display: block;
float: left;
-webkit-transition: border-color ease-in-out 0.15s;
-moz-transition: border-color ease-in-out 0.15s;
-ms-transition: border-color ease-in-out 0.15s;
-o-transition: border-color ease-in-out 0.15s;
transition: border-color ease-in-out 0.15s;
}
ul.product_list.list > li:hover .product-container .center-block .center-block-wrap {
border: 1px solid #858785;
}
}
@media (min-width: 768px) and (max-width: 991px){
ul.product_list.list > li .product-container .left-block {
width: 50%;
}
ul.product_list.list > li .product-container .center-block {
float: right;
width: 50%;
padding-bottom: 0;
}
ul.product_list.list > li .product-container .center-block .center-block-wrap {
border: 1px solid #e8e8e8;
padding:12px 15px;
min-height: 298px;
display: block;
float: left;
-webkit-transition: border-color ease-in-out 0.15s;
-moz-transition: border-color ease-in-out 0.15s;
-ms-transition: border-color ease-in-out 0.15s;
-o-transition: border-color ease-in-out 0.15s;
transition: border-color ease-in-out 0.15s;
}
ul.product_list.list > li:hover .product-container .center-block .center-block-wrap {
border: 1px solid #858785;
}
}
ul.product_list.list > li .product-image-container {
position: relative;
border: 1px solid #858785;
border-width: 0;
padding:0;
-webkit-transition: border-width ease-in-out 0.15s;
-moz-transition: border-width ease-in-out 0.15s;
-ms-transition: border-width ease-in-out 0.15s;
-o-transition: border-width ease-in-out 0.15s;
transition: border-width ease-in-out 0.15s;
}
ul.product_list.list > li:hover .product-image-container {
border-width: 1px;
}
@media (max-width: 479px) {
ul.product_list.list > li .product-image-container {
max-width: 290px;
margin: 0 auto;
}
}
ul.product_list.list > li .product-container .functional-buttons,
ul.product_list.list > li .product-container .content_price {
padding-left: 0;
margin-bottom: 12px;
}
@media (min-width: 1200px) {
ul.product_list.list > li .product-container .content_price {
margin-bottom: 15px;
}
}
ul.product_list.list > li .product-container .price.product-price {
float: left;
margin-right: 7px;
}
ul.product_list.list > li .product-container .old-price.product-price {
margin-right: 7px;
}
ul.product_list.list > li .product-container .price-percent-reduction {
display: inline-block;
}
ul.product_list.list > li .product-flags {
display: none;
}
ul.product_list.list > li .product-flags .discount {
color: #ff3e3e;
}
@media (min-width: 1200px) {
ul.product_list.list > li h5 {
margin: 0;
}
}
@media (max-width: 479px) {
ul.product_list.list > li h5 {
margin-top: 15px;
margin-bottom: 4px;
}
}
ul.product_list.list > li .product-desc {
display: none;
}
ul.product_list.list > li .product-desc-list {
margin-bottom: 0;
font-size: 14px;
color: #666;
line-height: 18px;
clear: both;
}
ul.product_list.list .availability {
display: block;
width: 100%;
float: left;
color: #ff0000;
font-size: 14px;
}
ul.product_list.list .availability .availability-text {
float: left;
display: none;
font-size: 14px;
color: #666;
line-height: 20px;
padding: 14px 0;
}
@media (max-width: 479px) {
ul.product_list.list .availability .availability-text {
display: none;
}
}
ul.product_list.list .availability .available-now,
ul.product_list.list .availability .out-of-stock {
float: left;
margin-bottom: 12px;
color: #696969;
}
ul.product_list.list .availability .out-of-stock {
color: #ff0000;
}
@media (max-width: 479px) {
ul.product_list.list > li .center-block {
width: 100%;
}
}
ul.product_list.list > li .comments_note {
width: 100%;
float: left;
clear: both;
line-height: 20px;
padding:0 0 8px 0;
}
@media (min-width: 768px) and (max-width: 991px) {
ul.product_list.list > li .comments_note {
margin: 0 0;
}
}
@media (max-width: 767px) {
ul.product_list.list > li .comments_note {
margin: 0;
}
}
@media (max-width: 479px) {
ul.product_list.list > li .comments_note {
text-align: center;
border: none;
}
}
@media (min-width: 992px) {
ul.product_list.list > li .right-block .right-block-content {
margin: 0;
padding-left: 0;
padding-bottom: 0;
}
}
@media (max-width: 767px) {
ul.product_list.list > li .right-block .right-block-content {
margin: 0;
}
}
@media (max-width: 479px) {
ul.product_list.list > li .right-block .right-block-content {}
}
ul.product_list.list > li .right-block .right-block-content .content_price {
padding: 8px 0;
border-top: 1px solid #ededed;
}
@media (max-width: 991px) {
ul.product_list.list > li .right-block .right-block-content .content_price {
margin: 0 15px;
width: 100%;
}
}
@media (max-width: 767px) {
ul.product_list.list > li .right-block .right-block-content .content_price {
margin: 0;
}
}
@media (max-width: 479px) {
ul.product_list.list > li .right-block .right-block-content .content_price {
padding-top: 0;
width: 100%;
padding-bottom: 0;
margin-bottom: 8px;
border-bottom: 1px solid #ededed;
}
}
ul.product_list.list > li .right-block .right-block-content .content_price span {
display: inline-block;
}
ul.product_list.list > li .right-block .right-block-content .content_price span.price.product-price {
color: #ff3e3e;
font-size: 24px;
line-height: 24px;
}
@media (max-width: 479px) {
ul.product_list.list > li .right-block .right-block-content .content_price span.price.product-price {
padding: 8px 0;
}
}
ul.product_list.list > li .right-block .right-block-content .content_price span.old-price {
margin-right: 10px;
font-size: 18px;
font-weight: normal;
color: #999!important;
}
@media (min-width: 1200px) {
ul.product_list.list > li .right-block .right-block-content .content_price span.old-price {
margin-right: 16px;
}
}
ul.product_list.list .new-box, ul.product_list.list .sale-box {
display: block;
}
ul.product_list .sale-box {
left: 0;
}
ul.product_list.list .sale-box {
left: 66px;
}
ul.product_list .sale-box.no-new {
left: 0;
}
ul.product_list.list .functional-buttons {
width: 191px;
padding: 0;
float: left;
margin-top: 30px;
}
@media (min-width: 1200px) {
ul.product_list.list .functional-buttons {
margin-top: 36px;
}
}
@media (max-width: 991px) {
ul.product_list.list .functional-buttons {
margin-top: 15px;
}
}
ul.product_list.list .functional-buttons div.compare {
float: right;
}
ul.product_list.list .button.ajax_add_to_cart_button {
float: left;
margin-right: 0;
}
ul.product_list.list .button.ajax_add_to_cart_button:hover {
background: #fe983d;
border: 1px solid #fe983d;
color: #FFF;
}
ul.product_list.list .button.ajax_add_to_cart_button:hover span {
color: #FFF;
}
ul.product_list.list .functional-buttons div.wishlist {
float: right;
margin-right: 10px;
}
ul.product_list.list .button.ajax_add_to_cart_button {
float: left;
margin-right: 10px;
}
@media (max-width: 767px) {
ul.product_list.list > li .product-container .product-image-container,
ul.product_list.list > li .product-container .center-block .center-block-wrap {
border: 1px solid #e8e8e8;
}
ul.product_list.list > li:hover .product-container .product-image-container,
ul.product_list.list > li:hover .product-container .center-block .center-block-wrap {
border: 1px solid #858785;
}
ul.product_list.list > li .product-container .center-block {
margin-top: -1px;
padding-bottom: 0;
}
ul.product_list.list > li .product-container .center-block .center-block-wrap {
padding: 0 15px 15px 15px;
display: inline-block;
}
ul.product_list.list > li .left-block .content_price {
display: none;
}
ul.product_list.list > li h5 {margin-bottom: 0;}
}
@media (max-width: 480px) {
ul.product_list.list > li .product-container .product-image-container,
ul.product_list.list > li:hover .product-container .product-image-container {
border: none;
}
ul.product_list.list > li .product-container .left-block {
margin: 0 15px;
}
ul.product_list.list > li .product-container .left-block,
ul.product_list.list > li .product-container .center-block .center-block-wrap {
border: 1px solid #e8e8e8;
}
ul.product_list.list > li:hover .product-container .left-block,
ul.product_list.list > li:hover .product-container .center-block .center-block-wrap {
border: 1px solid #858785;
}
ul.product_list.list > li .product-container .content_price {
width: 100%;
}
ul.product_list.list .availability .available-now,
ul.product_list.list .availability .out-of-stock,
ul.product_list.list > li .product-container .price.product-price {
float: none;
}
ul.product_list.list .availability {
margin-bottom: 10px;
position: relative;
}
ul.product_list.list .functional-buttons {
width: 100%;
}
ul.product_list.list .functional-buttons div.compare,
ul.product_list.list .functional-buttons div.wishlist,
ul.product_list.list .button.ajax_add_to_cart_button {
display: inline-block;
}
}
ul.product_list.list > li .product-image-container:hover .quick-view {
top: 50%;
}
@media (max-width: 479px) {
ul.product_list.list > li {
text-align: center;
}
}
/*******************************************************
Product list(Index page) Styles
********************************************************/
#index ul.product_list.tab-pane > li {
padding-bottom: 10px;
margin-bottom: 10px; }
@media (min-width: 1200px) {
#index ul.product_list.tab-pane > li {
padding-bottom: 85px;
margin-bottom: 0; }
}
#index ul.product_list.tab-pane > li .availability {
display: none; }
@media (min-width: 1200px) {
#index ul.product_list.tab-pane > li.last-line {
border: none;
padding-bottom: 0;
margin-bottom: 0; }
}
@media (min-width: 480px) and (max-width: 767px) {
#index ul.product_list.tab-pane > li.first-item-of-tablet-line {
clear: none; }
#index ul.product_list.tab-pane > li.first-item-of-mobile-line {
clear: left; }
}
/*********************************************
Product hover effect
**********************************************/
ul.product_list li .product-container .product-image-container {
overflow: hidden;
}
@media (min-width: 1200px) {
ul.product_list.grid > li .product-container .product-image-container {
height: 321px;
}
ul.product_list.list > li .product-container .product-image-container {
height: 321px;
}
ul.product_list.list > li.both-width .product-container .product-image-container {
height: 199px;
}
ul.product_list.list > li.full-width .product-container .product-image-container {
height: 321px;
}
}
@media (min-width: 992px) and (max-width: 1199px) {
ul.product_list.grid > li .product-container .product-image-container {
height: 252px;
}
ul.product_list.list > li .product-container .product-image-container {
height: 312px;
}
ul.product_list.list > li.both-width .product-container .product-image-container {
height: 152px;
}
ul.product_list.list > li.full-width .product-container .product-image-container {
height: 323px;
}
}
@media (min-width: 768px) and (max-width: 991px) {
ul.product_list.grid > li .product-container .product-image-container {
height: 298px;
}
ul.product_list.grid > li.full-width .product-container .product-image-container {
height: 261px;
}
ul.product_list.grid > li.both-width .product-container .product-image-container {
height: 299px;
}
ul.product_list.list > li .product-container .product-image-container {
height: 298px;
}
ul.product_list.list > li.both-width .product-container .product-image-container {
height: 258px;
}
ul.product_list.list > li.full-width .product-container .product-image-container {
height: 324px;
}
}
@media (min-width: 768px) {
ul.product_list > li .product-container .product-image-container .product_img_link {
overflow: hidden;
height: 100%;
width: 100%;
position: relative;
display: block;
overflow: hidden;
}
}
ul.product_list .product-image-container img {
margin: 0 auto;
}
ul.product_list .product-image-container img.second-img {
display: none;
position: relative;
-webkit-transition: top 0.6s ease;
-moz-transition: top 0.6s ease;
-ms-transition: top 0.6s ease;
-o-transition: top 0.6s ease;
transition: top ease 0.6s;
left: 0;
}
ul.product_list.grid .product-image-container img.second-img {
display: block;
top: 100%;
}
@media (max-width: 767px) {
ul.product_list .product-image-container img.second-img { display:none!important; }
ul.product_list.list .product-image-container img {
position: relative!important;
}
}
/* Hover list */
ul.product_list.list .product-image-container img {
position: absolute;
top: 0;
left: 0;
-webkit-transition: top 0.6s ease;
-moz-transition: top 0.6s ease;
-ms-transition: top 0.6s ease;
-o-transition: top 0.6s ease;
transition: top ease 0.6s;
}
ul.product_list.list li .product-image-container img.second-img {
display: block;
top: 100%;
}
ul.product_list.list > li .product-image-container:hover img.second-img,
ul.product_list.list > li.both-width .product-image-container:hover img.second-img,
ul.product_list.list > li.full-width .product-image-container:hover img.second-img {
top: 0;
}
@media (min-width: 1200px) {
ul.product_list.grid .product-image-container img {
position: absolute;
top: 0;
left: 0;
-webkit-transition: top 0.6s ease;
-moz-transition: top 0.6s ease;
-ms-transition: top 0.6s ease;
-o-transition: top 0.6s ease;
transition: top ease 0.6s;
}
ul.product_list.grid > li:hover .product-image-container img, x:-moz-any-link {
top: -321px;
}
ul.product_list.grid > li.hovered .product-image-container img {
top: -321px;
}
ul.product_list.grid li .product-image-container img.second-img {
display: block;
top: 321px;
}
ul.product_list.grid > li:hover .product-image-container img.second-img, x:-moz-any-link {
top: 0;
}
ul.product_list.grid > li.hovered .product-image-container img.second-img {
top: 0;
}
/* Hover list */
ul.product_list.list .product-image-container img {
position: absolute;
top: 0;
left: 0;
-webkit-transition: top 0.6s ease;
-moz-transition: top 0.6s ease;
-ms-transition: top 0.6s ease;
-o-transition: top 0.6s ease;
transition: top ease 0.6s;
}
ul.product_list.list > li .product-image-container:hover img {
top: -322px;
}
ul.product_list.list li .product-image-container img.second-img {
display: block;
top: 100%;
}
ul.product_list.list > li .product-image-container:hover img.second-img {
top: 0;
}
}
@media (min-width: 992px) and (max-width: 1199px) {
ul.product_list .product-image-container img {
position: absolute;
top: 0;
left: 0;
-webkit-transition: top 0.6s ease;
-moz-transition: top 0.6s ease;
-ms-transition: top 0.6s ease;
-o-transition: top 0.6s ease;
transition: top ease 0.6s;
width: 100%;
}
ul.product_list.grid > li:hover .product-image-container img {
top: -180px;
}
ul.product_list.grid > li:hover .product-image-container img.second-img {
top: 0;
}
/* List */
ul.product_list.list > li .product-image-container:hover img {
top: -180px;
}
ul.product_list .product-image-container img.second-img {
display: block;
top: 180px;
}
}
@media (min-width: 768px) and (max-width: 991px) {
ul.product_list .product-image-container img {
position: absolute;
top: 0;
left: 0;
-webkit-transition: top 0.6s ease;
-moz-transition: top 0.6s ease;
-ms-transition: top 0.6s ease;
-o-transition: top 0.6s ease;
transition: top ease 0.6s;
width: 100%;
}
ul.product_list.grid li.both-width .product-image-container img {
left: 37px;
width: 270px;
}
ul.product_list.grid > li:hover .product-image-container img {
top: -100%;
}
ul.product_list.grid > li .product-image-container img.second-img {
left:0;
}
ul.product_list.grid > li:hover .product-image-container img.second-img {
top: 0;
}
ul.product_list.list > li .product-image-container:hover img {
top: -100%;
}
ul.product_list .product-image-container img.second-img {
display: block;
top: 100%;
}
}
/*******************************************************
Product list - Full Width Styles
********************************************************/
ul.product_list.list li.full-width {
width: 100%!important;
}
@media (min-width: 1200px) {
ul.product_list.list li.full-width {
width: 100%!important;
}
ul.product_list.list > li.full-width .product-container .left-block {
width: 25%;
}
ul.product_list.list > li.full-width .product-container .center-block {
width: 75%;
}
ul.product_list.list > li.full-width .product-container .right-block {
width: 75%;
}
ul.product_list.list > li.full-width .product-container .center-block .center-block-wrap {
width: 870px;
}
}
@media (min-width: 992px) and (max-width: 1199px) {
ul.product_list.list > li.full-width .product-container .left-block {
width: 31%;
}
ul.product_list.list > li.full-width .product-container .center-block {
width: 69%;
}
ul.product_list.list > li.full-width .product-container .center-block .center-block-wrap {
width: 639px;
min-height: 324px;
}
}
@media (min-width: 768px) and (max-width: 991px) {
ul.product_list.list > li.full-width .product-container .left-block {
width: 40%;
}
ul.product_list.list > li.full-width .product-container .center-block {
width: 60%;
}
ul.product_list.list > li.full-width .product-container .product-image-container {
height: 323px;
}
ul.product_list.list > li.full-width .product-container .center-block .center-block-wrap {
min-height: 324px;
}
}
/*******************************************************
Product list - Both Width Styles
********************************************************/
ul.product_list.list li.both-width {
width: 100%!important;
}
ul.product_list.list > li.both-width .product-image-container:hover img.second-img {
top: 0;
}
@media (min-width: 1200px) {
ul.product_list.list > li.both-width .product-container .product-image-container {
height: 321px;
}
ul.product_list.list > li.both-width .product-image-container:hover img {
top: -321px;
}
ul.product_list.list li.both-width .product-container .left-block {
width: 50%;
}
ul.product_list.list li.both-width .product-container .center-block {
width: 50%;
padding-bottom: 0;
}
ul.product_list.list li.both-width .functional-buttons {
margin-top: 25px;
}
ul.product_list.list li.both-width .product-container .center-block .center-block-wrap {
min-height: 322px;
}
}
@media (min-width: 992px) and (max-width: 1199px) {
ul.product_list.list > li.both-width .product-container .left-block {
width: 50%;
}
ul.product_list.list > li.both-width .product-container .center-block {
width: 50%;
padding-bottom: 0;
}
ul.product_list.list > li.both-width .product-container .product-image-container {
height: 255px;
}
ul.product_list.list > li.both-width .product-image-container:hover img {
top: -253px;
}
ul.product_list.list > li.both-width .product-container .center-block .center-block-wrap {
min-height: 255px;
}
}
@media (min-width: 768px) and (max-width: 991px) {
ul.product_list.list > li.both-width .product-container .left-block {
width: 100%;
}
ul.product_list.list > li.both-width .product-container .center-block {
width: 100%;
margin-top: -1px;
padding-bottom: 0;
}
ul.product_list.list > li.both-width .product-container .right-block {
width: 100%;
}
ul.product_list.list > li.both-width .product-container .product-image-container {
height: 321px;
border: 1px solid #e8e8e8;
}
ul.product_list.list > li.both-width:hover .product-container .product-image-container {
border: 1px solid #858785;
}
ul.product_list.list > li.both-width .product-image-container:hover img {
top: -300px;
}
ul.product_list.list > li.both-width .product-image-container img {
width: 270px;
left: 38px;
}
ul.product_list.list > li.both-width h5 {
margin-top: 0;
margin-bottom: 0px;
}
ul.product_list.list > li.both-width .product-container .center-block .center-block-wrap {
min-height: 0;
}
ul.product_list.list > li.both-width .comments_note {
margin: 0;
}
}
/*******************************************************
Product Grid - Fix height li item
********************************************************/
@media (min-width: 1200px) {
ul.product_list.grid > li {
/* height: 473px; */
height: 453px;
}
}
@media (min-width: 992px) and (max-width: 1199px) {
ul.product_list.grid > li {
height: 384px;
}
}
@media (min-width: 768px) and (max-width: 991px) {
ul.product_list.grid > li {
height: 430px;
}
ul.product_list.grid > li.full-width {
height: 393px;
}
ul.product_list.grid > li.both-width {
height: 431px;
}
}
/*******************************************************
Product List - Mobile
********************************************************/
@media (max-width: 480px) {
ul.product_list.list > li .product-container {
border: 1px solid #858785;
margin-bottom: 30px;
padding: 0;
}
ul.product_list.list > li .product-container .left-block {
margin: 0;
padding: 0;
}
ul.product_list.list > li .product-container .left-block,
ul.product_list.list > li .product-container .center-block .center-block-wrap,
ul.product_list.list > li:hover .product-container .left-block,
ul.product_list.list > li:hover .product-container .center-block .center-block-wrap {
border: none;
}
ul.product_list.list > li:hover .product-container .center-block .center-block-wrap,
ul.product_list.list > li .product-container .center-block .center-block-wrap {
border-top: 1px solid #858785;
}
}
---------------------------------------------------------------------------------------------------------------------
SCROLL EFFECT TPL CODE: product-list.tpl
---------------------------------------------------------------------------------------------------------------------
{*
* 2007-2014 PrestaShop
*
* NOTICE OF LICENSE
*
* This source file is subject to the Academic Free License (AFL 3.0)
* that is bundled with this package in the file LICENSE.txt.
* It is also available through the world-wide-web at this URL:
* http://opensource.org/licenses/afl-3.0.php
* If you did not receive a copy of the license and are unable to
* obtain it through the world-wide-web, please send an email
* to license@prestashop.com so we can send you a copy immediately.
*
* DISCLAIMER
*
* Do not edit or add to this file if you wish to upgrade PrestaShop to newer
* versions in the future. If you wish to customize PrestaShop for your
* needs please refer to http://www.prestashop.com for more information.
*
* @author PrestaShop SA <contact@prestashop.com>
* @copyright 2007-2014 PrestaShop SA
* @license http://opensource.org/licenses/afl-3.0.php Academic Free License (AFL 3.0)
* International Registered Trademark & Property of PrestaShop SA
*}
{if isset($products) && $products}
{*define numbers of product per line in other page for desktop*}
{if $page_name !='index' && $page_name !='product'}
{if $hide_left_column xor $hide_right_column}
{assign var='nbol' value=3}
{else}
{assign var='nbol' value=4}
{/if}
{assign var='nbItemsPerLine' value=$nbol}
{assign var='nbItemsPerLineTablet' value=($nbol-1)}
{assign var='nbItemsPerLineMobile' value=($nbol-2)}
{else}
{if $page_name =='index' && ($hide_left_column xor $hide_right_column)}
{assign var='nbol' value=3}
{else}
{assign var='nbol' value=4}
{/if}
{assign var='nbItemsPerLine' value=$nbol}
{assign var='nbItemsPerLineTablet' value=($nbol-1)}
{assign var='nbItemsPerLineMobile' value=($nbol-2)}
{/if}
{*define numbers of product per line in other page for tablet*}
{assign var='nbLi' value=$products|@count}
{math equation="nbLi/nbItemsPerLine" nbLi=$nbLi nbItemsPerLine=$nbItemsPerLine assign=nbLines}
{math equation="nbLi/nbItemsPerLineTablet" nbLi=$nbLi nbItemsPerLineTablet=$nbItemsPerLineTablet assign=nbLinesTablet}
<input type="hidden" class="case-width" value="{if ($hide_left_column and $hide_right_column)}full-width{elseif !$hide_left_column and !$hide_right_column}both-width{else}normal-width{/if}" />
<!-- Products list -->
<ul{if isset($id) && $id} id="{$id}"{/if} class="product_list grid row{if isset($class) && $class} {$class}{/if}">
{foreach from=$products item=product name=products}
{math equation="(total%perLine)" total=$smarty.foreach.products.total perLine=$nbItemsPerLine assign=totModulo}
{math equation="(total%perLineT)" total=$smarty.foreach.products.total perLineT=$nbItemsPerLineTablet assign=totModuloTablet}
{math equation="(total%perLineT)" total=$smarty.foreach.products.total perLineT=$nbItemsPerLineMobile assign=totModuloMobile}
{if $totModulo == 0}{assign var='totModulo' value=$nbItemsPerLine}{/if}
{if $totModuloTablet == 0}{assign var='totModuloTablet' value=$nbItemsPerLineTablet}{/if}
{if $totModuloMobile == 0}{assign var='totModuloMobile' value=$nbItemsPerLineMobile}{/if}
{if $page_name !='index' && $page_name !='product'}
{if $hide_left_column xor $hide_right_column}
{assign var='liwidth' value="col-xs-12 col-sm-6 col-md-4"}
{else}
{if $hide_left_column and $hide_right_column}
{assign var='liwidth' value="col-xs-12 col-sm-4 col-md-3"}
{else}
{assign var='liwidth' value="col-xs-12 col-sm-12 col-md-6"}
{/if}
{/if}
{else}
{if $page_name =='index' && ($hide_left_column xor $hide_right_column)}
{assign var='liwidth' value="col-xs-12 col-sm-6 col-md-4"}
{else}
{if $hide_left_column and $hide_right_column}
{assign var='liwidth' value="col-xs-12 col-sm-4 col-md-3"}
{else}
{assign var='liwidth' value="col-xs-12 col-sm-12 col-md-6"}
{/if}
{/if}
{/if}
<li class="ajax_block_product{if ($hide_left_column and $hide_right_column)} full-width{/if} {$liwidth}{if $smarty.foreach.products.iteration%$nbItemsPerLine == 0} last-in-line{elseif $smarty.foreach.products.iteration%$nbItemsPerLine == 1} first-in-line{/if}{if $smarty.foreach.products.iteration > ($smarty.foreach.products.total - $totModulo)} last-line{/if}{if $smarty.foreach.products.iteration%$nbItemsPerLineTablet == 0} last-item-of-tablet-line{elseif $smarty.foreach.products.iteration%$nbItemsPerLineTablet == 1} first-item-of-tablet-line{/if}{if $smarty.foreach.products.iteration%$nbItemsPerLineMobile == 0} last-item-of-mobile-line{elseif $smarty.foreach.products.iteration%$nbItemsPerLineMobile == 1} first-item-of-mobile-line{/if}{if $smarty.foreach.products.iteration > ($smarty.foreach.products.total - $totModuloMobile)} last-mobile-line{/if} {if !$hide_left_column and !$hide_right_column} both-width{/if}">
{* Product hover effect *}
{$imginfo = Image::getImages(Language::getIdByIso($lang_iso),$product.id_product)}
{assign var='new_idimg' value=''}
{foreach from=$imginfo item=imgitem}
{if !$imgitem['cover']}
{assign var='new_idimg' value="`$imgitem['id_product']`-`$imgitem['id_image']`"}
{break}
{/if}
{/foreach}
<div class="product-container" itemscope itemtype="http://schema.org/Product">
<div class="left-block">
<div class="product-image-container">
<a class="product_img_link" href="{$product.link|escape:'html':'UTF-8'}" title="{$product.name|escape:'html':'UTF-8'}" itemprop="url">
<img class="replace-2x img-responsive" src="{$link->getImageLink($product.link_rewrite, $product.id_image, 'home_default')|escape:'html':'UTF-8'}" alt="{if !empty($product.legend)}{$product.legend|escape:'html':'UTF-8'}{else}{$product.name|escape:'html':'UTF-8'}{/if}" title="{if !empty($product.legend)}{$product.legend|escape:'html':'UTF-8'}{else}{$product.name|escape:'html':'UTF-8'}{/if}" {if isset($homeSize)} width="{$homeSize.width}" height="{$homeSize.height}"{/if} itemprop="image" />
{if !empty($new_idimg)}
<img class="replace-2x img-responsive second-img" src="{$link->getImageLink($product.link_rewrite, $new_idimg, 'home_default')|escape:'html':'UTF-8'}" alt="{if !empty($product.legend)}{$product.legend|escape:'html':'UTF-8'}{else}{$product.name|escape:'html':'UTF-8'}{/if}" title="{if !empty($product.legend)}{$product.legend|escape:'html':'UTF-8'}{else}{$product.name|escape:'html':'UTF-8'}{/if}" {if isset($homeSize)} width="{$homeSize.width}" height="{$homeSize.height}"{/if} itemprop="image" />
{else}
<img class="replace-2x img-responsive second-img" src="{$link->getImageLink($product.link_rewrite, $product.id_image, 'home_default')|escape:'html':'UTF-8'}" alt="{if !empty($product.legend)}{$product.legend|escape:'html':'UTF-8'}{else}{$product.name|escape:'html':'UTF-8'}{/if}" title="{if !empty($product.legend)}{$product.legend|escape:'html':'UTF-8'}{else}{$product.name|escape:'html':'UTF-8'}{/if}" {if isset($homeSize)} width="{$homeSize.width}" height="{$homeSize.height}"{/if} itemprop="image" />
{/if}
</a>
{if isset($quick_view) && $quick_view}
<a class="quick-view" href="{$product.link|escape:'html':'UTF-8'}" rel="{$product.link|escape:'html':'UTF-8'}">
<span>{l s='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" itemprop="offers" itemscope itemtype="http://schema.org/Offer">
{if isset($product.show_price) && $product.show_price && !isset($restricted_country_mode)}
<span class="old-price product-price">
{displayWtPrice p=$product.price_without_reduction}
</span>
{if isset($product.specific_prices) && $product.specific_prices && isset($product.specific_prices.reduction) && $product.specific_prices.reduction > 0}
{hook h="displayProductPriceBlock" product=$product type="old_price"}
{if $product.specific_prices.reduction_type == 'percentage'}
<span class="price-percent-reduction">-{$product.specific_prices.reduction * 100}%</span>
{/if}
{/if}
<span itemprop="price" class="price product-price">
{if !$priceDisplay}{convertPrice price=$product.price}{else}{convertPrice price=$product.price_tax_exc}{/if}
</span>
<meta itemprop="priceCurrency" content="{$currency->iso_code}" />
{hook h="displayProductPriceBlock" product=$product type="price"}
{hook h="displayProductPriceBlock" product=$product type="unit_price"}
{/if}
</div>
{/if}
{if isset($product.new) && $product.new == 1}
<a class="new-box" href="{$product.link|escape:'html':'UTF-8'}">
<span class="new-label">{l s='New'}</span>
</a>
{/if}
{if isset($product.on_sale) && $product.on_sale && isset($product.show_price) && $product.show_price && !$PS_CATALOG_MODE}
<a class="sale-box{if isset($product.new) && !$product.new} no-new{/if}" href="{$product.link|escape:'html':'UTF-8'}">
<span class="sale-label">{l s='Sale!'}</span>
</a>
{/if}
</div>
{hook h="displayProductDeliveryTime" product=$product}
{hook h="displayProductPriceBlock" product=$product type="weight"}
</div>
<div class="right-block">
<h5 itemprop="name">
{if isset($product.pack_quantity) && $product.pack_quantity}{$product.pack_quantity|intval|cat:' x '}{/if}
<a class="product-name" href="{$product.link|escape:'html':'UTF-8'}" title="{$product.name|escape:'html':'UTF-8'}" itemprop="url" >
{$product.name|truncate:32:''|escape:'html':'UTF-8'}
</a>
</h5>
{hook h='displayProductListReviews' product=$product}
<p class="product-desc" itemprop="description">
{$product.description_short|strip_tags:'UTF-8'|truncate:36:''}
</p>
<p class="product-desc-list" itemprop="description">
{$product.description_short|strip_tags:'UTF-8'}
</p>
{if (!$PS_CATALOG_MODE AND ((isset($product.show_price) && $product.show_price) || (isset($product.available_for_order) && $product.available_for_order)))}
<div itemprop="offers" itemscope itemtype="http://schema.org/Offer" class="content_price">
{if isset($product.show_price) && $product.show_price && !isset($restricted_country_mode)}
<meta itemprop="priceCurrency" content="{$currency->iso_code}" />
<span itemprop="price" class="price product-price">
{if !$priceDisplay}{convertPrice price=$product.price}{else}{convertPrice price=$product.price_tax_exc}{/if}
</span>
{if isset($product.specific_prices) && $product.specific_prices && isset($product.specific_prices.reduction) && $product.specific_prices.reduction > 0}
{hook h="displayProductPriceBlock" product=$product type="old_price"}
<span class="old-price product-price">
{displayWtPrice p=$product.price_without_reduction}
</span>
{hook h="displayProductPriceBlock" id_product=$product.id_product type="old_price"}
{if $product.specific_prices.reduction_type == 'percentage'}
<span class="price-percent-reduction">-{$product.specific_prices.reduction * 100}%</span>
{/if}
{/if}
{hook h="displayProductPriceBlock" product=$product type="price"}
{hook h="displayProductPriceBlock" product=$product type="unit_price"}
{/if}
</div>
{/if}
{if isset($product.color_list)}
<div class="color-list-container">{$product.color_list}</div>
{/if}
<div class="product-flags">
{if (!$PS_CATALOG_MODE AND ((isset($product.show_price) && $product.show_price) || (isset($product.available_for_order) && $product.available_for_order)))}
{if isset($product.online_only) && $product.online_only}
<span class="online_only">{l s='Online only'}</span>
{/if}
{/if}
{if isset($product.on_sale) && $product.on_sale && isset($product.show_price) && $product.show_price && !$PS_CATALOG_MODE}
{elseif isset($product.reduction) && $product.reduction && isset($product.show_price) && $product.show_price && !$PS_CATALOG_MODE}
<span class="discount">{l s='Reduced price!'}</span>
{/if}
</div>
{if (!$PS_CATALOG_MODE && $PS_STOCK_MANAGEMENT && ((isset($product.show_price) && $product.show_price) || (isset($product.available_for_order) && $product.available_for_order)))}
{if isset($product.available_for_order) && $product.available_for_order && !isset($restricted_country_mode)}
<span itemprop="offers" itemscope itemtype="http://schema.org/Offer" class="availability">
<span class="availability-text">{l s='Availability:'}</span>
{if ($product.allow_oosp || $product.quantity > 0)}
<span class="{if $product.quantity <= 0 && !$product.allow_oosp}out-of-stock{else}available-now{/if}">
<link itemprop="availability" href="http://schema.org/InStock" />{if $product.quantity <= 0}{if $product.allow_oosp}{if isset($product.available_later) && $product.available_later}{$product.available_later}{else}{l s='In Stock'}{/if}{else}{l s='Out of stock'}{/if}{else}{if isset($product.available_now) && $product.available_now}{$product.available_now}{else}{l s='In Stock'}{/if}{/if}
</span>
{elseif (isset($product.quantity_all_versions) && $product.quantity_all_versions > 0)}
<span class="available-dif">
<link itemprop="availability" href="http://schema.org/LimitedAvailability" />{l s='Product available with different options'}
</span>
{else}
<span class="out-of-stock">
<link itemprop="availability" href="http://schema.org/OutOfStock" />{l s='Out stock'}
</span>
{/if}
</span>
{/if}
{/if}
<div class="functional-buttons clearfix">
{if isset($comparator_max_item) && $comparator_max_item}
<div class="compare">
<a class="add_to_compare" title="{l s="Add to compare"}" href="{$product.link|escape:'html':'UTF-8'}" data-id-product="{$product.id_product}"><i class="fa-compress"></i></a>
</div>
{/if}
{if ($product.id_product_attribute == 0 || (isset($add_prod_display) && ($add_prod_display == 1))) && $product.available_for_order && !isset($restricted_country_mode) && $product.minimal_quantity <= 1 && $product.customizable != 2 && !$PS_CATALOG_MODE}
{if (!isset($product.customization_required) || !$product.customization_required) && ($product.allow_oosp || $product.quantity > 0)}
{if isset($static_token)}
<a class="button ajax_add_to_cart_button btn btn-default" href="{$link->getPageLink('cart',false, NULL, "add=1&id_product={$product.id_product|intval}&token={$static_token}", false)|escape:'html':'UTF-8'}" rel="nofollow" title="{l s='Add to cart'}" data-id-product="{$product.id_product|intval}">
<span>{l s='Add to cart'}</span>
</a>
{else}
<a class="button ajax_add_to_cart_button btn btn-default" href="{$link->getPageLink('cart',false, NULL, 'add=1&id_product={$product.id_product|intval}', false)|escape:'html':'UTF-8'}" rel="nofollow" title="{l s='Add to cart'}" data-id-product="{$product.id_product|intval}">
<span>{l s='Add to cart'}</span>
</a>
{/if}
{else}
<span class="button ajax_add_to_cart_button btn btn-default disabled">
<span>{l s='Add to cart'}</span>
</span>
{/if}
{/if}
{hook h='displayProductListFunctionalButtons' product=$product}
</div>
</div>
</div><!-- .product-container> -->
</li>
{/foreach}
</ul>
{addJsDefL name=min_item}{l s='Please select at least one product' js=1}{/addJsDefL}
{addJsDefL name=max_item}{l s='You cannot add more than %d product(s) to the product comparison' sprintf=$comparator_max_item js=1}{/addJsDefL}
{addJsDef comparator_max_item=$comparator_max_item}
{addJsDef comparedProductsIds=$compared_products}
{/if}
---------------------------------------------------------------------------------------------------------------
NEELLA CODE: global.js
------------------------------------------------------------------------------------------------------------------
/*
* 2007-2014 PrestaShop
*
* NOTICE OF LICENSE
*
* This source file is subject to the Academic Free License (AFL 3.0)
* that is bundled with this package in the file LICENSE.txt.
* It is also available through the world-wide-web at this URL:
* http://opensource.org/licenses/afl-3.0.php
* If you did not receive a copy of the license and are unable to
* obtain it through the world-wide-web, please send an email
* to license@prestashop.com so we can send you a copy immediately.
*
* DISCLAIMER
*
* Do not edit or add to this file if you wish to upgrade PrestaShop to newer
* versions in the future. If you wish to customize PrestaShop for your
* needs please refer to http://www.prestashop.com for more information.
*
* @author PrestaShop SA <contact@prestashop.com>
* @copyright 2007-2014 PrestaShop SA
* @license http://opensource.org/licenses/afl-3.0.php Academic Free License (AFL 3.0)
* International Registered Trademark & Property of PrestaShop SA
*/
//global variables
var responsiveflag = false;
$(document).ready(function(){
highdpiInit();
responsiveResize();
$(window).resize(responsiveResize);
responsiveMobileHeader();
$(window).resize(responsiveMobileHeader);
$('.block .block_content').not('.shopping_cart .block .block_content').prepend('<span class="line_content"></span>');
crumbProcess();
if (navigator.userAgent.match(/Android/i))
{
var viewport = document.querySelector('meta[name="viewport"]');
viewport.setAttribute('content', 'initial-scale=1.0,maximum-scale=1.0,user-scalable=0,width=device-width,height=device-height');
window.scrollTo(0, 1);
}
blockHover();
if (typeof quickView !== 'undefined' && quickView)
quick_view();
dropDown();
if (typeof page_name != 'undefined' && !in_array(page_name, ['index', 'product']))
{
bindGrid();
$(document).on('change', '.selectProductSort', function(e){
if (typeof request != 'undefined' && request)
var requestSortProducts = request;
var splitData = $(this).val().split(':');
if (typeof requestSortProducts != 'undefined' && requestSortProducts)
document.location.href = requestSortProducts + ((requestSortProducts.indexOf('?') < 0) ? '?' : '&') + 'orderby=' + splitData[0] + '&orderway=' + splitData[1];
});
$(document).on('change', 'select[name="n"]', function(){
$(this.form).submit();
});
$(document).on('change', 'select[name="manufacturer_list"], select[name="supplier_list"]', function() {
if (this.value != '')
location.href = this.value;
});
$(document).on('change', 'select[name="currency_payement"]', function(){
setCurrency($(this).val());
});
}
$(document).on('click', '.back', function(e){
e.preventDefault();
history.back();
});
jQuery.curCSS = jQuery.css;
if (!!$.prototype.cluetip)
$('a.cluetip').cluetip({
local:true,
cursor: 'pointer',
dropShadow: false,
dropShadowSteps: 0,
showTitle: false,
tracking: true,
sticky: false,
mouseOutClose: true,
fx: {
open: 'fadeIn',
openSpeed: 'fast'
}
}).css('opacity', 0.8);
if (!!$.prototype.fancybox)
$.extend($.fancybox.defaults.tpl, {
closeBtn : '<a title="' + FancyboxI18nClose + '" class="fancybox-item fancybox-close" href="javascript:;"></a>',
next : '<a title="' + FancyboxI18nNext + '" class="fancybox-nav fancybox-next" href="javascript:;"><span></span></a>',
prev : '<a title="' + FancyboxI18nPrev + '" class="fancybox-nav fancybox-prev" href="javascript:;"><span></span></a>'
});
/*************************************/
/* my account toggle */
/*************************************/
myAccountClick = $(".header-toggle-call");
myAccountClick.on('click',function(){
var myAccountSlide = $(this).next('.header-toggle');
if (myAccountSlide.is(':visible'))
myAccountSlide.stop(true, true).slideUp(450);
else{
myAccountSlide.stop(true, true).slideDown(450)
}
$(myAccountClick).not(this).next('.header-toggle').slideUp();
return false;
});
$(document).on('click',function(e){
if (e.target.className.split(" ")[0] != 'header-toggle-call' && e.target.className != 'header-toggle'){
$('.header-toggle').stop(true, true).slideUp(450);
}
});
$('.scroll_top').click(function(){
$("html, body").animate({ scrollTop: 0 }, 600);
return false;
});
$(window).scroll(function(){
if ($(this).scrollTop() > 500) {
$('.scroll_top').fadeIn();
} else {
$('.scroll_top').fadeOut();
}
});
});
function crumbProcess() {
if ($('#responsive_slides').length) {
$('.breadcrumb').prependTo('#responsive_slides');
// $('#responsive_slides').prependTo($('.breadcrumb'))
}
}
function highdpiInit()
{
if($('.replace-2x').css('font-size') == "1px")
{
var els = $("img.replace-2x").get();
for(var i = 0; i < els.length; i++)
{
src = els[i].src;
extension = src.substr( (src.lastIndexOf('.') +1) );
src = src.replace("." + extension, "2x." + extension);
var img = new Image();
img.src = src;
img.height != 0 ? els[i].src = src : els[i].src = els[i].src;
}
}
}
// Used to compensante Chrome/Safari bug (they don't care about scroll bar for width)
function scrollCompensate()
{
var inner = document.createElement('p');
inner.style.width = "100%";
inner.style.height = "200px";
var outer = document.createElement('div');
outer.style.position = "absolute";
outer.style.top = "0px";
outer.style.left = "0px";
outer.style.visibility = "hidden";
outer.style.width = "200px";
outer.style.height = "150px";
outer.style.overflow = "hidden";
outer.appendChild(inner);
document.body.appendChild(outer);
var w1 = inner.offsetWidth;
outer.style.overflow = 'scroll';
var w2 = inner.offsetWidth;
if (w1 == w2) w2 = outer.clientWidth;
document.body.removeChild(outer);
return (w1 - w2);
}
function responsiveResize()
{
compensante = scrollCompensate();
if (($(window).width()+scrollCompensate()) <= 767 && responsiveflag == false)
{
accordion('enable');
accordionFooter('enable');
responsiveflag = true;
//mobileHeader('enable');
}
else if (($(window).width()+scrollCompensate()) >= 768)
{
accordion('disable');
accordionFooter('disable');
// mobileHeader('disable');
responsiveflag = false;
}
if (typeof page_name != 'undefined' && in_array(page_name, ['category']))
resizeCatimg();
}
function blockHover(status)
{
$(document).off('mouseenter').on('mouseenter', '.product_list.grid li.ajax_block_product .product-container', function(e){
if ($('body').find('.container').width() == 1170)
{
//var pcHeight = $(this).parent().outerHeight();
//var pcPHeight = $(this).parent().find('.button-container').outerHeight() + $(this).parent().find('.comments_note').outerHeight() + $(this).parent().find('.functional-buttons').outerHeight();
//$(this).parent().addClass('hovered').css({'height':pcHeight + pcPHeight, 'margin-bottom':pcPHeight * (-1)});
$(this).parent().addClass('hovered');
}
});
$(document).off('mouseleave').on('mouseleave', '.product_list.grid li.ajax_block_product .product-container', function(e){
if ($('body').find('.container').width() == 1170)
//$(this).parent().removeClass('hovered').css({'height':'auto', 'margin-bottom':'0'});
$(this).parent().removeClass('hovered');
});
}
function quick_view()
{
$(document).on('click', '.quick-view:visible, .quick-view-mobile:visible', function(e)
{
e.preventDefault();
var url = this.rel;
if (url.indexOf('?') != -1)
url += '&';
else
url += '?';
if (!!$.prototype.fancybox)
$.fancybox({
'padding': 0,
'width': 1087,
'height': 610,
'type': 'iframe',
'href': url + 'content_only=1'
});
});
}
function bindGrid()
{
var view = $.totalStorage('display');
if (!view && (typeof displayList != 'undefined') && displayList)
view = 'list';
if (view && view != 'grid')
display(view);
else
$('.display').find('li.view_as_grid').addClass('selected');
$(document).on('click', '.view_as_grid', function(e){
e.preventDefault();
display('grid');
});
$(document).on('click', '.view_as_list', function(e){
e.preventDefault();
display('list');
});
}
function display(view)
{
// process column
var case_width = 'normal-width';
case_width = $('.case-width').val();
if (view == 'list')
{
$('#center_column ul.product_list').removeClass('grid').addClass('list row');
$('#center_column .product_list > li').removeClass('col-xs-12 col-sm-6 col-md-4').addClass('col-xs-12');
$('#center_column .product_list > li').each(function(index, element) {
html = '';
html = '<div class="product-container"><div class="row">';
html += '<div class="left-block col-xs-4 col-xs-5 col-md-4">' + $(element).find('.left-block').html() + '</div>';
html += '<div class="center-block col-xs-4 col-xs-7 col-md-4">';
html += '<div class="center-block-wrap">';
html += '<div class="product-flags">'+ $(element).find('.product-flags').html() + '</div>';
html += '<h5 itemprop="name">'+ $(element).find('h5').html() + '</h5>';
var rating = $(element).find('.comments_note').html(); // check : rating
if (rating != null) {
html += '<div itemprop="aggregateRating" itemscope itemtype="http://schema.org/AggregateRating" class="comments_note">'+ rating + '</div>';
}
var price = $(element).find('.content_price').html(); // check : catalog mode is enabled
if (price != null) {
html += '<div class="content_price col-xs-5 col-md-12">'+ price + '</div>';
}
var availability = $(element).find('.availability').html(); // check : catalog mode is enabled
if (availability != null) {
html += '<span class="availability">'+ availability +'</span>';
}
html += '<p class="product-desc">'+ $(element).find('.product-desc').html() + '</p>';
html += '<p class="product-desc-list">'+ $(element).find('.product-desc-list').html() + '</p>';
html += '<div class="functional-buttons clearfix col-sm-12">' + $(element).find('.functional-buttons').html() + '</div>';
var colorList = $(element).find('.color-list-container').html();
if (colorList != null) {
html += '<div class="color-list-container">'+ colorList +'</div>';
}
html += '</div>';
html += '</div>';
html += '</div></div>';
$(element).html(html);
});
$('.display').find('li.view_as_list').addClass('selected');
$('.display').find('li.view_as_grid').removeClass('selected');
$.totalStorage('display', 'list');
}
else
{
// process column
$('#center_column ul.product_list').removeClass('list').addClass('grid row');
if (case_width == 'full-width'){
$('#center_column .product_list > li').removeClass('col-xs-12').addClass('col-xs-12 col-sm-4 col-md-3');
}else if (case_width == 'both-width'){
$('#center_column .product_list > li').removeClass('col-xs-12').addClass('col-xs-12 col-sm-12 col-md-6');
}else {
$('#center_column .product_list > li').removeClass('col-xs-12').addClass('col-xs-12 col-sm-6 col-md-4');
}
$('#center_column .product_list > li').each(function(index, element) {
html = '';
html += '<div class="product-container">';
html += '<div class="left-block">' + $(element).find('.left-block').html() + '</div>';
html += '<div class="right-block">';
html += '<div class="product-flags">'+ $(element).find('.product-flags').html() + '</div>';
html += '<h5 itemprop="name">'+ $(element).find('h5').html() + '</h5>';
var rating = $(element).find('.comments_note').html(); // check : rating
if (rating != null) {
html += '<div itemprop="aggregateRating" itemscope itemtype="http://schema.org/AggregateRating" class="comments_note">'+ rating + '</div>';
}
html += '<p itemprop="description" class="product-desc">'+ $(element).find('.product-desc').html() + '</p>';
html += '<p class="product-desc-list">'+ $(element).find('.product-desc-list').html() + '</p>';
var price = $(element).find('.content_price').html(); // check : catalog mode is enabled
if (price != null) {
html += '<div class="content_price">'+ price + '</div>';
}
//html += '<div itemprop="offers" itemscope itemtype="http://schema.org/Offer" class="button-container">'+ $(element).find('.button-container').html() +'</div>';
var colorList = $(element).find('.color-list-container').html();
if (colorList != null) {
html += '<div class="color-list-container">'+ colorList +'</div>';
}
var availability = $(element).find('.availability').html(); // check : catalog mode is enabled
if (availability != null) {
html += '<span class="availability">'+ availability +'</span>';
}
html += '</div>';
html += '<div class="functional-buttons clearfix">' + $(element).find('.functional-buttons').html() + '</div>';
html += '</div>';
$(element).html(html);
});
$('.display').find('li.view_as_grid').addClass('selected');
$('.display').find('li.view_as_list').removeClass('selected');
$.totalStorage('display', 'grid');
}
}
function dropDown()
{
elementClick = '#header .current';
elementSlide = 'ul.toogle_content';
activeClass = 'active';
$(elementClick).on('click', function(e){
e.stopPropagation();
var subUl = $(this).next(elementSlide);
if(subUl.is(':hidden'))
{
subUl.slideDown();
$(this).addClass(activeClass);
}
else
{
subUl.slideUp();
$(this).removeClass(activeClass);
}
$(elementClick).not(this).next(elementSlide).slideUp();
$(elementClick).not(this).removeClass(activeClass);
e.preventDefault();
});
$(elementSlide).on('click', function(e){
e.stopPropagation();
});
$(document).on('click', function(e){
e.stopPropagation();
var elementHide = $(elementClick).next(elementSlide);
$(elementHide).slideUp();
$(elementClick).removeClass('active');
});
}
function accordionFooter(status)
{
if(status == 'enable')
{
$('#footer .footer-block h4').on('click', function(){
$(this).toggleClass('active').parent().find('.toggle-footer').stop().slideToggle('medium');
})
$('#footer').addClass('accordion').find('.toggle-footer').slideUp('fast');
}
else
{
$('.footer-block h4').removeClass('active').off().parent().find('.toggle-footer').removeAttr('style').slideDown('fast');
$('#footer').removeClass('accordion');
}
}
function accordion(status)
{
leftColumnBlocks = $('#left_column');
if(status == 'enable')
{
$('#right_column .block .title_block, #left_column .block .title_block, #left_column #newsletter_block_left h4').on('click', function(){
$(this).toggleClass('active').parent().find('.block_content').stop().slideToggle('medium');
})
$('#right_column, #left_column').addClass('accordion').find('.block .block_content').slideUp('fast');
}
else
{
$('#right_column .block .title_block, #left_column .block .title_block, #left_column #newsletter_block_left h4').removeClass('active').off().parent().find('.block_content').removeAttr('style').slideDown('fast');
$('#left_column, #right_column').removeClass('accordion');
}
}
function resizeCatimg()
{
var div = $('.cat_desc').parent('div');
var image = new Image;
$(image).load(function(){
var width = image.width;
var height = image.height;
var ratio = parseFloat(height / width);
var calc = Math.round(ratio * parseInt(div.outerWidth(false)));
div.css('min-height', calc);
});
if (div.length)
image.src = div.css('background-image').replace(/url\("?|"?\)$/ig, '');
}
/**********************************
* Nella - Process mobile header *
***********************************/
function mobileHeader(flag_mobile) {
if (flag_mobile == 'enable') {
// Enable mobile header
$('#currencies-block-top, #languages-block-top, .shopping_cart_container').appendTo('#enable_mobile_header');
$('#enable_mobile_header').show();
}else if (flag_mobile == 'disable') {
// Disable mobile header
$('#currencies-block-top, #languages-block-top').insertAfter('header .nav .header_user_info');
$('.shopping_cart_container').insertAfter('#search_block_top');
$('#enable_mobile_header').hide();
}
}
function responsiveMobileHeader()
{
compensante = scrollCompensate();
if (($(window).width()+scrollCompensate()) <= 480)
{
mobileHeader('enable');
}
else if (($(window).width()+scrollCompensate()) > 480)
{
mobileHeader('disable');
}
}
/* detect touch */
if("ontouchstart" in window){
document.documentElement.className = document.documentElement.className + " touch";
}
if(!$("html").hasClass("touch")){
/* background fix */
$(".parallax").css("background-attachment", "fixed");
}
/* fix vertical when not overflow
call fullscreenFix() if .fullscreen content changes */
function fullscreenFix(){
var h = $('body').height();
// set .fullscreen height
$(".content-b").each(function(i){
if($(this).innerHeight() <= h){
$(this).closest(".fullscreen").addClass("not-overflow");
}
});
}
$(window).resize(fullscreenFix);
fullscreenFix();
/* resize background images */
function backgroundResize(){
var windowH = $(window).height();
$(".brand_paralax").each(function(i){
var path = $(this);
// variables
var contW = path.width();
var contH = path.height();
var imgW = path.attr("data-img-width");
var imgH = path.attr("data-img-height");
var ratio = imgW / imgH;
// overflowing difference
var diff = parseFloat(path.attr("data-diff"));
diff = diff ? diff : 0;
// remaining height to have fullscreen image only on parallax
var remainingH = 0;
if(path.hasClass("parallax") && !$("html").hasClass("touch")){
var maxH = contH > windowH ? contH : windowH;
remainingH = windowH - contH;
}
// set img values depending on cont
imgH = contH + remainingH + diff;
imgW = imgH * ratio;
// fix when too large
if(contW > imgW){
imgW = contW;
imgH = imgW / ratio;
}
//
path.data("resized-imgW", imgW);
path.data("resized-imgH", imgH);
path.css("background-size", imgW + "px " + imgH + "px");
});
}
$(window).resize(backgroundResize);
$(window).focus(backgroundResize);
$(window).bind('load',backgroundResize);
backgroundResize();
/* set parallax background-position */
function parallaxPosition(e){
var heightWindow = $(window).height();
var topWindow = $(window).scrollTop();
var bottomWindow = topWindow + heightWindow;
var currentWindow = (topWindow + bottomWindow) / 2;
$(".brand_paralax").each(function(i){
var path = $(this);
var height = path.height();
var top = path.offset().top;
var bottom = top + height;
// only when in range
if(bottomWindow > top && topWindow < bottom){
var imgW = path.data("resized-imgW");
var imgH = path.data("resized-imgH");
// min when image touch top of window
var min = 0;
// max when image touch bottom of window
var max = - imgH + heightWindow;
// overflow changes parallax
var overflowH = height < heightWindow ? imgH - height : imgH - heightWindow; // fix height on overflow
top = top - overflowH;
bottom = bottom + overflowH;
// value with linear interpolation
var value = min + (max - min) * (currentWindow - top) / (bottom - top);
// set background-position
var orizontalPosition = path.attr("data-oriz-pos");
orizontalPosition = orizontalPosition ? orizontalPosition : "50%";
$(this).css("background-position", orizontalPosition + " " + value + "px");
}
});
}
if(!$("html").hasClass("touch")){
$(window).resize(parallaxPosition);
//$(window).focus(parallaxPosition);
$(window).scroll(parallaxPosition);
parallaxPosition();
}
0 comments:
Post a Comment