Панель для вишлиста

http://fontawesome.io/assets/font-awesome/css/font-awesome.css

by yoowordpress

HTML

<link rel="stylesheet" href="https://cdn.rawgit.com/FortAwesome/Font-Awesome/945e8bbd/css/font-awesome.min.css">
<script src="https://cdn.rawgit.com/kenwheeler/slick/3ab76ec0/slick/slick.min.js"></script>
<link rel="stylesheet" href="https://cdn.rawgit.com/kenwheeler/slick/3ab76ec0/slick/slick.css">
<link rel="stylesheet" href="//cdn.jsdelivr.net/jquery.slick/1.6.0/slick-theme.css">
<div class="wpp-bottom-shop-panel">
  <div class="wpp-bottom-shop-ribbon">
    <div class="wpp-ribbon-close"><i class="fa fa-times fa-lg" aria-hidden="true"></i></div>
    <div class="wpp-ribbon-cart wpp-ribbon-title" data-href="wpp-cart-tab">
      <i class="fa fa-shopping-cart fa-lg" aria-hidden="true"></i>
    </div>
    <div class="wpp-ribbon-wishlist wpp-ribbon-title" data-href="wpp-wishlist-tab">
      <i class="fa fa-heart fa-lg" aria-hidden="true"></i>
    </div>
    <div class="wpp-ribbon-wishlist wpp-ribbon-title" data-href="wpp-viewed-tab">
      <i class="fa fa-eye fa-lg" aria-hidden="true"></i>
    </div>
  </div>

  <div class="wpp-bottom-tаb wpp-cart-tab current">
    <ul>
      <li>Product -1</li>
      <li>Product 0</li>
      <li>Product 1</li>
      <li>Product 2</li>
      <li>Product 3</li>
      <li>Product 5</li>
      <li>Product 6</li>
      <li>Product 7</li>
      <li>Product 8</li>
    </ul>
  </div>
  <div class="wpp-bottom-tаb  wpp-wishlist-tab">
    Вишлист
  </div>
  <div class="wpp-bottom-tаb  wpp-viewed-tab">
    Посмотренное
  </div>
</div>

CSS

.wpp-bottom-shop-panel {
  width: 100%;
  height: 150px;
  background-color: red;
  position: fixed;
  bottom: -150px;
}

.wpp-bottom-shop-ribbon {
  position: absolute;
  margin-bottom: -100px;
  right: 35px;
  top: -100px;
  height: 100px;
  cursor: pointer;
}

.wpp-ribbon-title {
  float: left;
  margin-left: 10px;
  background-color: #656464;
  padding: 14px 16px 10px 15px;
}

.wpp-bottom-tаb {
  display: none;
}

.wpp-bottom-tаb.current {
  display: block;
}

.wpp-ribbon-close {
  float: left;
  padding: 14px 16px 10px 15px;
  background-color: red;
  margin-top: 100px;
}

li {
  width: 250px;
  float: left;
  height: 120px!important;
  background-color: #fff;
  margin: 10px;
}

JavaScript

/**
Показать скрыть панель
*/
$(document).on('click', '.wpp-bottom-shop-ribbon', function() {

  $(this).delay(100).animate({
    top: '-50px'
  }, 300);
  $('.wpp-bottom-shop-panel').delay(100).animate({
    bottom: '0'
  }, 300);
  $('.wpp-ribbon-close').delay(100).animate({
    'margin-top': '0'
  }, 600);

});

$(document).on('click', '.wpp-ribbon-close', function(e) {
  e.stopPropagation();
  $('.wpp-bottom-shop-ribbon').delay(100).animate({
    top: '-100px'
  }, 300);
  $('.wpp-bottom-shop-panel').delay(100).animate({
    bottom: '-150px'
  }, 300);
  $(this).delay(100).animate({
    'margin-top': '100'
  }, 600);
});


$(document).on('click', '.wpp-ribbon-title', function() {
  var $target = $(this).data('href');
  $('.wpp-bottom-tаb.' + $target).addClass('current').siblings('.wpp-bottom-tаb').removeClass('current');
});

$("ul").slick({
  dots: false,
  infinite: true,
  speed: 300,
  slidesToShow: 4,
  slidesToScroll: 4,
  responsive: [
    {
      breakpoint: 1024,
      settings: {
        slidesToShow: 3,
        slidesToScroll: 3,
        infinite: true,
        dots: true
      }
    },
    {
      breakpoint: 600,
      settings: {
        slidesToShow: 2,
        slidesToScroll: 2
      }
    },
    {
      breakpoint: 480,
      settings: {
        slidesToShow: 1,
        slidesToScroll: 1
      }
    }
    // You can unslick at a given breakpoint now by adding:
    // settings: "unslick"
    // instead of a settings object
  ]
});