SHX-Theme/snippets/shx-product-page-shopping-c...

42 lines
942 B
Plaintext

{%- form 'product',
product,
id: product_form_id,
class: 'form',
novalidate: 'novalidate',
data-type: 'add-to-cart-form'
-%}
<button id="scrollToCartButton" class="scroll-to-cart-button" onclick="document.getElementById('AddToCartForm').scrollIntoView();">
In den Warenkorb
</button>
{%- endform -%}
<style>
.scroll-to-cart-button {
position: fixed;
bottom: 20px;
right: 20px;
display: none;
background-color: #ff6600;
color: white;
border: none;
padding: 10px 20px;
border-radius: 5px;
cursor: pointer;
z-index: 1000;
}
</style>
<script>
document.addEventListener('scroll', function() {
var scrollButton = document.getElementById('scrollToCartButton');
if (window.scrollY > 300) { // Zeigt den Button an, wenn mehr als 300px gescrollt wird
scrollButton.style.display = 'block';
} else {
scrollButton.style.display = 'none';
}
});
</script>