Кнопка Добавить в корзину внизу при прокрутке - Shopify - PullRequest
Новая
       7

Кнопка Добавить в корзину внизу при прокрутке - Shopify

0 голосов
/ 02 июля 2018

Заранее спасибо. Когда вы прокручиваете страницу продукта (около 30%), я вижу кнопку AddToCart внизу - версия для ПК и для мобильных устройств (см. Пример). Но когда вы вернетесь в начало страницы, я предпочитаю, чтобы это исчезло Как я могу это сделать? Я пытался создать другую кнопку, но она не работает.

Спасибо

Пример изображения снизу

Пример изображения сверху

Код страницы изображения

глава темы жидкости 

{{ 'addtocartsticky.js' | asset_url | script_tag }}

addtocartsticky.js.liquid file 

 if($(window).width() > 991){
    $( document ).ready(function() {
      setTimeout(function(){
        var img_zoom_class = $(".slider-for .slick-active img").attr('class');
        $('.'+img_zoom_class).elevateZoom({         
          zoomType              : "lens",
          lensShape : "round",
          lensSize    : 200        
        });
      }, 100);
    });
  }


  setTimeout(
    function(){
      $('#AddToCartForm_id .cart-btn').clone().addClass('fix-cart-btn').appendTo("body");
    }, 1000);

  $(document).on('click', '.fix-cart-btn', function(){   
    $('#AddToCartForm_id .cart-btn').trigger('click');
  });

  $(document).ready( function() {
    var Wwidth = $(window).width();
    $.fn.is_on_screen = function(){
      var win = $(window);
      var viewport = {
        top : win.scrollTop(),
        left : win.scrollLeft()
      };
      viewport.right = viewport.left + win.width();
      viewport.bottom = viewport.top + win.height();

      var bounds = this.offset();
      bounds.right = bounds.left + this.outerWidth();
      bounds.bottom = bounds.top + this.outerHeight();

      return (!(viewport.right < bounds.left || viewport.left > bounds.right || viewport.bottom < bounds.top || viewport.top > bounds.bottom));
    };

    $(window).on("scroll", function () {
      if ($(this).scrollTop() > 1000) {
        $('.fix-cart-btn').show();

        if( $('footer').length > 0 ) {              
          if( $('footer').is_on_screen() ) {            
            $('.fix-cart-btn').hide();
          } else {
            $('.fix-cart-btn').show();
          }
        }     
      } else {
        $('.fix-cart-btn').hide();
      }   
    });
  });
CSS-файл в стиле 

        .fix-cart-btn{
position:fixed;
     left:0;
     bottom:0;
    display:none;z-index:99;
     background:#ff7600;
     height:45px;
      width:100%;
      font-size:22px;
      font-family:"Muli",sans-serif;
      color:#ffffff;
      border:none;
      font-weight:bold;
      text-transform:uppercase;
      line-height:26px;
      padding:7px 25px}

HTML product-template.liquid 

<button type="button" name="add" id="AddToCart" class="btn stiky_button fix-cart-btn">
            <span id="AddToCartText">{{ 'products.product.add_to_cart' | t }} </span>
          </button>

Конечно, я что-то пропустил. Спасибо

...