Custom "Compare products" with Overlay doesn't work

fabriziom
New Member
4 0 1

Hi community,

Thank you for your help!

I've added on Prestige theme a custom COMPARE PRODUCTS that i token from Blueprints-free plugins. It works in my stores UK and FR with the same theme but it doesn't work in my USA store!

I select the Product Items and when i click COMPARE the overlay doesn't work and it change on this mode:

normal.pngerror.png

 

The CSS is this:

 

.PageContainer {
-webkit-transition: -webkit-transform 0.4s ease-in-out;
transition: transform 0.4s ease-in-out;
}

.PageContainer--compare {
-webkit-transform: scale3d(0.9,0.9,1);
transform: scale3d(0.9,0.9,1);
}

.a {
   z-index: 0;
}


/* product grid */
.Grid {
margin: 0 auto;
padding: 4em 1em;
max-width: 1200px;
text-align: center;
overflow: hidden;
-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}

/*if flexbox is supported, let's use it to lay out the products */
.flexbox .grid {
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
-webkit-flex-direction: row;
-ms-flex-direction: row;
flex-direction: row;
-webkit-flex-wrap: wrap;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
-webkit-justify-content: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-align-content: stretch;
-ms-flex-line-pack: stretch;
align-content: stretch;
-webkit-align-items: flex-start;
-ms-flex-align: start;
align-items: flex-start;
}



/* product */
.ProductItem {
position: relative;
display: contents;
vertical-align: top;
min-width: 16em;
margin: 0 1em 2.5em;
padding: 1.5em 1.5em 2em;
background: #24252A;
border-radius: 5px;
}


.ProductItem--selected {
box-shadow: 0 0 0 2px #5C5EDC;
}


.flexbox .ProductItem {
display: contents;
-webkit-flex: 0 0 16em;
-ms-flex: 0 0 16em;
flex: 0 0 16em;
}


/* product info */
.ProductItem__Wrapper > div {
display: block;
padding: 1em 0;
}

/* since we'll be using the product info inside of the comparison, we'll hide the extra info for the grid view */
.Grid .extra {
display: none;
}

.ProductItem__Image {
display: block;
margin: 0 auto;
max-width: 100%;
-webkit-transform-origin: 50% 100%;
transform-origin: 50% 100%;
}


@-webkit-keyframes swing {
25% {
-webkit-transform: rotate3d(0, 0, 1, 6deg);
transform: rotate3d(0, 0, 1, 6deg);
}

50% {
-webkit-transform: rotate3d(0, 0, 1, -4deg);
transform: rotate3d(0, 0, 1, -4deg);
}

75% {
-webkit-transform: rotate3d(0, 0, 1, 2deg);
transform: rotate3d(0, 0, 1, 2deg);
}

100% {
-webkit-transform: rotate3d(0, 0, 1, 0deg);
transform: rotate3d(0, 0, 1, 0deg);
}
}

@keyframes swing {
  25% {
-webkit-transform: rotate3d(0, 0, 1, 6deg);
transform: rotate3d(0, 0, 1, 6deg);
}

50% {
-webkit-transform: rotate3d(0, 0, 1, -4deg);
transform: rotate3d(0, 0, 1, -4deg);
}

75% {
-webkit-transform: rotate3d(0, 0, 1, 2deg);
transform: rotate3d(0, 0, 1, 2deg);
}

100% {
-webkit-transform: rotate3d(0, 0, 1, 0deg);
transform: rotate3d(0, 0, 1, 0deg);
}
}



.ProductItem__Title {
font-size: 150%;
margin: 1em 0 0;
min-height: 3em;
}

.ProductItem__PriceList {
font-weight: bold;
color: #797BED;
}

.action {
display: inline-block;
font-size: 1em;
white-space: nowrap;
padding: 0.85em 1.25em;
cursor: pointer;
border: none;
background: transparent;
text-align: center;
    z-index: 1;
}

.action:focus {
outline: none;
}

.action--button {
background: #2C2D34;
color: #fff;
border-radius: 2px;
-webkit-transition: background 0.2s;
transition: background 0.2s;
}

.action--button:hover {
background: #5C5EDC;
}

.action__text {
font-family: 'Raleway', 'Helvetica Neue', Helvetica, Arial, sans-serif;
font-weight: bold;
letter-spacing: 1px;
font-size: .813em;
vertical-align: middle;
display: inline-block;
}

.action--button i + div {
margin-left: 1em;
}

.flexbox .action--buy {
-webkit-align-self: center;
-ms-flex-item-align: center;
align-self: center;
margin-top: 1em;
-webkit-flex: none;
-ms-flex: none;
flex: none;
}

.action--close {
position: absolute;
overflow: hidden;
top: 0;
right: 0;
font-size: 1.5em;
color: #ddd;
pointer-events: none;
opacity: 0;
-webkit-transition: opacity 0.3s, background 0.2s;
transition: opacity 0.3s, background 0.2s;
}

.PageContainer--compare + .compare .action--close {
pointer-events: auto;
opacity: 1;
-webkit-transition-delay: 0.4s, 0s;
transition-delay: 0.4s, 0s;
}

.action--close:hover,
.action--close:focus {
color: #797BED;
}

.action--compare {
margin: 0 0 0 4px;
opacity: 0;
pointer-events: none;
cursor: default;
background-color: #34363D;
color: #565B6C;
-webkit-transition: opacity 0.3s;
transition: opacity 0.3s;
}

.compare-basket--active .action--compare {
opacity: 1;
}

.compare-basket--active .action--compare:nth-child(3),
.compare-basket--active .action--compare:nth-child(4) {
background-color: #fff;
color: #000;
pointer-events: auto;
cursor: pointer;
}

.action--remove {
position: absolute;
overflow: hidden;
color: #ddd;
top: 0px;
right: 2px;
padding: 0;
font-size: 0.65em;
}

.action--remove:hover,
.action--compare-add:hover {
color: #5C5EDC;
}

.compare-basket--active .action--remove {
  color: #adadad;
}

.action--compare-add .fa-check,
.action--compare-add input[type=checkbox]:checked ~ .fa-plus {
display: none;
}

.action--compare-add input[type=checkbox]:checked ~ .fa-check {
display: block;
color: #5C5EDC;
}
.compare__item .action--compare-add {
    display: none;
}

.check-hidden {
position: absolute;
opacity: 0;
}

.compare-basket {
width: 100%;
padding: 0.75em;
text-align: right;
position: fixed;
bottom: 0;
left: 0;
background: #212227;
z-index: 1000;
-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
-webkit-transform: translate3d(0,100%,0);
transform: translate3d(0,100%,0);
-webkit-transition: -webkit-transform 0.3s cubic-bezier(0.2,1,0.3,1);
transition: transform 0.3s cubic-bezier(0.2,1,0.3,1);
}

.compare-basket--active {
-webkit-transform: translate3d(0,0,0);
transform: translate3d(0,0,0);
}

.compare-basket--active .ProductItem__ImagePC {
  visibility: visible !important;
  height: 100% !important;
}

.flexbox .compare-basket {
display: -webkit-flex;
display: -ms-flex;
display: flex;
-webkit-justify-content: flex-end;
-ms-flex-pack: end;
justify-content: flex-end;
}

.ProductItem-icon {
display: inline-block;
vertical-align: middle;
background: #f7f7f7;
width: 50px;
height: 50px;
padding: 5px;
margin: 0 3px;
border-radius: 2px;
position: relative;
}

.ProductItem-icon::after {
content: '';
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
border-radius: 4px;
z-index: -1;
box-shadow: -56px 0 #2C2D34;
}

.compare-basket--full .ProductItem-icon::after {
display: none;
}

.flexbox .ProductItem-icon {
display: block;
}

/* comparison overlay */
.compare {
position: fixed;
z-index: 100;
width: 100%;
height: 0;
overflow: hidden;
top: 0;
left: 0;
z-index: 1001;
-webkit-transition: height 0s 0.4s;
transition: height 0s 0.4s;
}

.flexbox .compare {
display: -webkit-flex;
display: -ms-flex;
display: flex;
}

.PageContainer--compare + .compare {
pointer-events: auto;
height: 100%;
-webkit-transition: none;
transition: none;
}

.compare::before {
content: '';
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
background: rgba(0,0,0,0.5);
opacity: 0;
-webkit-transition: opacity 0.4s;
transition: opacity 0.4s;
}

.PageContainer--compare + .compare::before {
opacity: 1;
}
.compare__item {
height: 100%;
width: 100%;
background: #ffffff;
text-align: center;
cursor: default;
padding: 2em 0;
-webkit-transition: -webkit-transform 0.4s ease-in-out;
transition: transform 0.4s ease-in-out;
}

.no-flexbox .compare__item {
display: inline-block;
width: 50%;
}

.compare__item:nth-of-type(2) {
background: #f0f0f0;
}

.compare__item .ProductItem__Title {
margin: 1em 0;
min-height: 0;
}

.compare__item .ProductItem__Comparison {
color: #000000;
    display: flex;
    height: 100%;
    overflow: visible;
}

.compare__item .ProductItem__PriceList {
color: #CECECE;
}

.compare__item div[class^="ProductItem__"] {
display: grid;
padding: 0.85em 0;
-webkit-transition: background-color 0.3s;
transition: background-color 0.3s;
}

.compare__item div[class^="ProductItem__"].hover {
background: #000;
}

/* three items */
.compare__item:first-of-type:nth-last-of-type(3),
.compare__item:first-of-type:nth-last-of-type(3) ~ .compare__item {
    width: 33.3333%;
}

.flexbox .compare__item {
-webkit-flex: auto;
-ms-flex: auto;
flex: auto;
    
}

.compare__item:nth-child(odd) {
-webkit-transform: translate3d(0,-100vh,0);
transform: translate3d(0,-100vh,0);
}

.compare__item:nth-child(even) {
-webkit-transform: translate3d(0,100vh,0);
transform: translate3d(0,100vh,0);
}

.PageContainer--compare + .compare .compare__item:nth-child(odd),
.PageContainer--compare + .compare .compare__item:nth-child(even) {
-webkit-transform: translate3d(0,0,0);
transform: translate3d(0,0,0);
}

.compare__effect {
width: 100%;
height: 100%;
opacity: 0;
-webkit-transition: -webkit-transform 1s cubic-bezier(0.2, 1, 0.3, 1), opacity 1s cubic-bezier(0.2, 1, 0.3, 1);
transition: transform 1s cubic-bezier(0.2, 1, 0.3, 1), opacity 1s cubic-bezier(0.2, 1, 0.3, 1);
}

.compare__item:nth-child(odd) .compare__effect {
-webkit-transform: translate3d(0,-250px,0);
transform: translate3d(0,-250px,0);
}

.compare__item:nth-child(even) .compare__effect {
-webkit-transform: translate3d(0,250px,0);
transform: translate3d(0,250px,0);
}

.PageContainer--compare + .compare .compare__item:nth-child(odd) .compare__effect,
.PageContainer--compare + .compare .compare__item:nth-child(even) .compare__effect {
opacity: 1;
-webkit-transform: translate3d(0,0,0);
transform: translate3d(0,0,0);
-webkit-transition-delay: 0.3s;
transition-delay: 0.3s;
}


@media screen and (min-width: 59.688em) {
  
    .action__text--invisible {
    position: absolute;
    top: 100%;
    opacity: 0;
    pointer-events: none;
    }
  
  
    .action--compare-add {
    color: #ddd;
    position: absolute;
    top: 10px;
    right: 5px;
    }
  
    .action--compare-add:hover .action__text--invisible {
    opacity: 1;
    top: 35px;
    right: 10px;
    color: #ddd;
    font-size: 75%;
    letter-spacing: 0;
    background: #2F3035;
    border-radius: 2px;
    padding: 3px 5px;
    }
  
  .flexbox .compare__item {
dispaly: grid;
    
}
  

.flexbox .compare__effect {
display: -webkit-flex;
display: -ms-flex;
-webkit-flex-direction: column;
-ms-flex-direction: column;
flex-direction: column;
-webkit-justify-content: space-between;
-ms-flex-pack: justify;
justify-content: center;
}

   .flexbox .compare__item .ProductItem__ImageWrapper {
        position: absolute;
        top: 0;
        height: 40%;
        width: 50%;
        display: inline-block;
        margin-left: 25%;
        margin-right: 25%;
    }
  
  .flexbox .compare__item .AspectRatio {
        height: 95%;
        width: 95%;
    }
  
  
  .flexbox .compare__item .ProductItem__Image {
        display: inline-block;
        height: max-content;
        width: max-content;
-webkit-align-self: center;
-ms-flex-align: center;
align-self: center;
-webkit-flex: none;
-ms-flex: none;
flex: none;
      
}

    .flexbox .compare__item p {
    margin: 0;
  }
  
  .flexbox .compare__item .ProductItem__Comparison {
    display: block;
    width: 90%;
    height: auto;
    position: absolute;
    bottom: 0;
    padding-bottom: 0;
    margin-left: 5%;
    margin-right: 5%;
  }
  
  .flexbox .compare__item .ProductItem__Info {
    position: absolute;
    width: 100%;
    top: 0;
    right: 5%;
    grid-template-areas:
    "a b c"
    "a b d"
    "a b f"
    "g g g";
  }
  
  .flexbox .compare__item .ProductItem__Vendor {
      grid-area: c;
      justify-self: end;
  }
  
  .flexbox .compare__item .ProductItem__Title {
    display: block;
    position: fixed;
    top: -5%;
    right: 5%;
    width: 90%;
    margin-left: 5%;
      
          
  }
  
  .flexbox .compare__item .ProductItem__PriceList {
      font-size: small;
      grid-area: d;
      justify-self: end;
  }
  
  .flexbox .compare__item .ProductItem__ColorSwatchList {
      grid-area: f;
      justify-self: end;

  }
  


}


@media screen and (max-width: 59.688em) {
  
  
.Grid {
padding: 2em 0.5em;
font-size: 65%;
}
  
    .compare__item .ProductItem__ImageWrapper {
        display: inline-block;
        height: 70%;
        width: 33%;
    }

  .compare__item p {
    margin: 0;
  }

    .compare__item .AspectRatio {
    height: auto;
    width: 95%;
  }
  
  .compare__item .ProductItem__Comparison {
     width: 65%;
     float: right; 
  }
  
  .compare__item .ProductItem__Info {
     display: grid;
     grid-template-areas:
   "a b c"
    "d d d"
    "e e f";
  }
  
  .compare__item .ProductItem__Vendor {
      grid-area: a;
      justify-self: start;
  }
  
  .compare__item .ProductItem__Title {
      grid-area: d;
      align-self: center;
      justify-self: center;
          
  }
  
  .compare__item .ProductItem__PriceList {
      grid-area: c;
      justify-self: end;
  }
  
  .compare__item .ProductItem__ColorSwatchList {
      grid-area: e;
  }
  
  .compare__item .ProductItem__ColorSwatchItem {
    display:inline-block;
  }
  
  
.flexbox .ProductItem {
-webkit-flex: 0 0 13em;
-ms-flex: 0 0 13em;
flex: 0 0 13em;
}
  

  
    .action--compare-add {
    color: #ddd;
    position: absolute;
    top: 10px;
    right: 5px;
        padding-left: 15px;
        padding-right: 23px;
        padding-bottom: 10px;
        padding-top: 14px;
    }
  
    .action__text--invisible {
    position: absolute;
        top: 0px;
        right: 0px;
        bottom: 42.6px;
    opacity: 1;
    pointer-events: none;
        visibility: hidden;
    }
  
.flexbox .compare {
-webkit-flex-direction: column;
-ms-flex-direction: column;
flex-direction: column;
}

.no-flexbox .compare__item,
.compare__item,
.compare__item:first-of-type:nth-last-of-type(3),
.compare__item:first-of-type:nth-last-of-type(3) ~ .compare__item {
width: 100%;
        height: 33.33%;
}

.compare__item {
text-align: left;
padding: 0.7em;
font-size: 70%;
}

.compare__item .ProductItem__Image {
display: inline-block;
        height: max-content;
        width: max-content;
}

.compare__item .ProductItem__Title {
margin: 0;
font-size: 0.75em;
    }
  
.compare__item .ProductItem__ColorSwatchList {
  width: 20%;
      margin: 0;
}
  
.action--close {
padding: 0.5em 0.75em;
}

.compare__item .action--buy {
margin: 0;
display: block;
}

.compare__item div[class^="ProductItem__"] {
display: grid;
padding: 0.25em;
margin: 0 0 0.5em 0;
font-size: 0.85em;
}

.compare__item:nth-child(odd) {
-webkit-transform: translate3d(-100%,0,0);
transform: translate3d(-100%,0,0);
}

.compare__item:nth-child(even) {
-webkit-transform: translate3d(100%,0,0);
transform: translate3d(100%,0,0);
}

.compare__item:nth-child(odd) .compare__effect {
-webkit-transform: translate3d(-250px,0,0);
transform: translate3d(-250px,0,0);
}

.compare__item:nth-child(even) .compare__effect {
-webkit-transform: translate3d(250px,0,0);
transform: translate3d(250px,0,0);
}
}

 

 

And this is the JAVASCRIPT

 

 

/**
 * main.js
 * http://www.codrops.com
 *
 * Licensed under the MIT license.
 * http://www.opensource.org/licenses/mit-license.php
 * 
 * Copyright 2015, Codrops
 * http://www.codrops.com
 */

(function() {

var MainEl = document.querySelector('.PageContainer'),
gridEl = MainEl.querySelector('.Grid'),
items = [].slice.call(gridEl.querySelectorAll('.ProductItem')),
basket;

// the compare basket
function CompareBasket() {
this.el = document.querySelector('.compare-basket');
this.compareCtrl = this.el.querySelector('.action--compare');
this.compareWrapper = document.querySelector('.compare'),
this.closeCompareCtrl = this.compareWrapper.querySelector('.action--close')

this.itemsAllowed = 3;
this.totalItems = 0;
this.items = [];

// compares items in the compare basket: opens the compare products wrapper
this.compareCtrl.addEventListener('click', this._compareItems.bind(this));
// close the compare products wrapper
var self = this;
this.closeCompareCtrl.addEventListener('click', function() {
// toggle compare basket
classie.add(self.el, 'compare-basket--active');
// animate..
classie.remove(MainEl, 'PageContainer--compare');
});
}

CompareBasket.prototype.add = function(item) {
// check limit
if( this.isFull() ) {
return false;
}

classie.add(item, 'ProductItem--selected');

// create item preview element
var preview = this._createItemPreview(item);
// prepend it to the basket
this.el.insertBefore(preview, this.el.childNodes[0]);
// insert item
this.items.push(preview);

this.totalItems++;
if( this.isFull() ) {
classie.add(this.el, 'compare-basket--full');
}

classie.add(this.el, 'compare-basket--active');
};

CompareBasket.prototype._createItemPreview = function(item) {
var self = this;

var preview = document.createElement('div');
preview.className = 'ProductItem-icon';
preview.setAttribute('data-idx', items.indexOf(item));

var removeCtrl = document.createElement('button');
removeCtrl.className = 'action action--remove';
removeCtrl.innerHTML = '<i class="fa fa-remove"></i><span class="action__text action__text--invisible">Remove product</span>';
removeCtrl.addEventListener('click', function() {
self.remove(item);
});

var productImageEl = item.querySelector('img.ProductItem__ImagePC').cloneNode(true);

preview.appendChild(productImageEl);
preview.appendChild(removeCtrl);

var productInfo = item.querySelector('.ProductItem__Wrapper').innerHTML;
preview.setAttribute('data-info', productInfo);

return preview;
};

CompareBasket.prototype.remove = function(item) {
classie.remove(this.el, 'compare-basket--full');
classie.remove(item, 'ProductItem--selected');
var preview = this.el.querySelector('[data-idx = "' + items.indexOf(item) + '"]');
this.el.removeChild(preview);
this.totalItems--;

var indexRemove = this.items.indexOf(preview);
this.items.splice(indexRemove, 1);

if( this.totalItems === 0 ) {
classie.remove(this.el, 'compare-basket--active');
}

// checkbox
var checkbox = item.querySelector('.action--compare-add > input[type = "checkbox"]');
if( checkbox.checked ) {
checkbox.checked = false;
}
};

CompareBasket.prototype._compareItems = function() {
var self = this;

// remove all previous items inside the compareWrapper element
[].slice.call(this.compareWrapper.querySelectorAll('div.compare__item')).forEach(function(item) {
self.compareWrapper.removeChild(item);
});

for(var i = 0; i < this.totalItems; ++i) {
var compareItemWrapper = document.createElement('div');
compareItemWrapper.className = 'compare__item';

var compareItemEffectEl = document.createElement('div');
compareItemEffectEl.className = 'compare__effect';

compareItemEffectEl.innerHTML = this.items[i].getAttribute('data-info');
compareItemWrapper.appendChild(compareItemEffectEl);

this.compareWrapper.insertBefore(compareItemWrapper, this.compareWrapper.childNodes[0]);
}

setTimeout(function() {
// toggle compare basket
classie.remove(self.el, 'compare-basket--active');
// animate..
classie.add(MainEl, 'PageContainer--compare');
}, 25);
};

CompareBasket.prototype.isFull = function() {
return this.totalItems === this.itemsAllowed;
};

function init() {
// initialize an empty basket
basket = new CompareBasket();
initEvents();
}

function initEvents() {
items.forEach(function(item) {
var checkbox = item.querySelector('.action--compare-add > input[type = "checkbox"]');
checkbox.checked = false;

// ctrl to add to the "compare basket"
checkbox.addEventListener('click', function(ev) {
if( ev.target.checked ) {
if( basket.isFull() ) {
ev.preventDefault();
return false;
}
basket.add(item);
}
else {
basket.remove(item);
}
});
});
}

init();

})();

 

0 Likes