Zero Block
Click "Block Editor" to enter the edit mode. Use layers, shapes and customize adaptability. Everything is in your hands.
Tilda Publishing
create your own block from scratch
// ================================================================
// CART INTEGRATION FOR TILDA CATALOG PAGE
// Uses localStorage to share cart with the main landing page.
// ================================================================
const CART_KEY = 'polakovaCart';
const CART_UPDATED_KEY = 'polakovaCartUpdated';
function addToCart(productName, productPrice, productImage) {
let cart = JSON.parse(localStorage.getItem(CART_KEY)) || [];
const existingItem = cart.find(item => item.name === productName);
if (existingItem) {
existingItem.quantity += 1;
} else {
cart.push({
name: productName,
price: parseFloat(productPrice),
image: productImage || 'https://via.placeholder.com/100',
quantity: 1
});
}
localStorage.setItem(CART_KEY, JSON.stringify(cart));
localStorage.setItem(CART_UPDATED_KEY, Date.now().toString());
showToast('🌿 ' + productName + ' added to cart!');
}
function showToast(message) {
const toast = document.createElement('div');
toast.style.cssText = 'position:fixed; bottom:30px; right:30px; background:#0D4A3E; color:white; padding:16px 24px; border-radius:12px; font-family:Nunito,sans-serif; font-size:16px; box-shadow:0 10px 30px rgba(0,0,0,0.2); z-index:9999; animation:slideUp 0.4s ease; max-width:350px;';
toast.textContent = message;
document.body.appendChild(toast);
setTimeout(() => {
toast.style.opacity = '0';
toast.style.transition = 'opacity 0.4s';
setTimeout(() => toast.remove(), 400);
}, 3000);
}
// Add toast animation style if not present
if (!document.getElementById('toast-styles')) {
const style = document.createElement('style');
style.id = 'toast-styles';
style.textContent = '@keyframes slideUp { from { opacity:0; transform:translateY(40px); } to { opacity:1; transform:translateY(0); } }';
document.head.appendChild(style);
}
// Example usage: attach to your "Add to Cart" buttons
// document.querySelectorAll('.add-to-cart-btn').forEach(btn => {
// btn.addEventListener('click', function() {
// const name = this.dataset.name;
// const price = this.dataset.price;
// const image = this.dataset.image;
// addToCart(name, price, image);
// });
// });