Coloque o script abaixo como mostrado no vídeo.
Abaixo do Footer
{% render 'btnflutuante' %}
Dentro do snippet colar isso 👇
<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_cart2">
<div class="product-details">
<div class="cart-btn animate__animated animate__slow animate__infinite animate__pulse">
<button id="btn-sticky-cart" class="btn_flutuante">Adicionar ao carrinho</button>
</div>
</div>
</div>
{% endif %}
<style>
@media screen and (min-width:721px){
.sticky_cart2{
display:none; /* Para exibir no desktop mude para display:block; */
}
}
@media screen and (max-width:720px){
.sticky_cart2{
display:block; /* Para ocultar no mobile mude para display:none; */
}
}
.sticky_cart2{
position: fixed;
width: 100%;
left:0;
background: #ffffff;
transition: 0.6s;
z-index:99;
bottom: -70px;
}
.btn_flutuante {
background: #405059; /* Cor do botão */
color:#fff; /* Cor do texto */
border-radius: var(--buttons-radius-outset); /* 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 */
cursor: pointer;
}
.sticky_cart2.show{
bottom:0;
}
</style>
<script>
$(window).scroll(function (event) {
var height = $(window).height();
var scroll = $(window).scrollTop();
//console.log(scroll + " " + height);
if(document.documentElement.scrollTop > 800){
$(".sticky_cart2").addClass("show");
} else {
$(".sticky_cart2").removeClass("show");
}
});
$("#btn-sticky-cart").click(function(){
$(".adicionar-cart").click();
});
</script>
