Coloque o script abaixo segundo o tutorial
Tutorial: https://youtu.be/eewO6-BNQEM
👇👇👇
{% render 'botao-pegajoso' %}
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css"/>
<!-- para remover a animação exclua a linha de cima -->
<script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>
{% if template contains 'product' %}
<div class="sticky_cart">
<div class="product-details">
<div class="cart-btn animate__animated animate__slow animate__infinite animate__pulse">
<button id="btn-sticky-cart" class="btn">Adicionar ao carrinho</button>
</div>
</div>
</div>
{% endif %}
<style>
@media screen and (min-width:721px){
.sticky_cart{
display:none; /* Para exibir no desktop mude para display:block; */
}
}
@media screen and (max-width:720px){
.sticky_cart{
display:block; /* Para ocultar no mobile mude para display:none; */
}
}
.sticky_cart{
position: fixed;
width: 100%;
left:0;
background: #ffffff;
transition: 0.6s;
z-index:9999999;
bottom: 0;
}
#btn-sticky-cart {
background: #000000; /* Cor do botão */
color:#fff; /* Cor do texto */
border-radius: 2px; /* borda arredondada do botão */
border:1px solid #ffffff; /* Largura tipo e cor da borda */
width: 96%; /* largura do botão */
height: 50px; /* Altura do botão */
font-size:16px; /* tamanho das letras do nome adicionar ao carrinho */
text-transform: uppercase; /* Exibindo texto em letra maiúscula */
font-weight: 600; /* Texto em negrito */
margin-left: 2%; /* margem a esquerda */
margin-bottom: 5px; /* margem de baixo */
}
.sticky_cart.show{
bottom:0;
transition: 3.6s;
}
</style>
<script>
$(window).scroll(function (event) {
var height = $(window).height();
var scroll = $(window).scrollTop();
//console.log(scroll + " " + height);
if(document.documentElement.scrollTop > 800){
$(".sticky_cart").addClass("show");
} else {
$(".sticky_cart").removeClass("show");
}
});
$("#btn-sticky-cart").click(function(){
$(".paymentButtonsWrapper #AddToCart").click();
});
</script>
