Wishlist Heart Toggle
A product row with a heart that toggles wishlist state.
Requires Bootstrap 5. Add the CDN tags below to your page (styles in
<head>, scripts before </body>). The downloaded file already includes them.<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css"><script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script><div class="card border-0 shadow-sm" style="max-width:320px"><div class="card-body">
<div class="d-flex justify-content-between align-items-center"><div><div class="fw-semibold small">Smart Watch</div><div class="text-primary fw-bold">$199</div></div><button class="btn btn-outline-danger btn-sm" id="wlBtn">♡</button></div>
<small class="text-secondary" id="wlMsg" style="display:none">Added to wishlist ♥</small>
</div></div>var b=document.getElementById('wlBtn'),on=false;
b.onclick=function(){on=!on;b.textContent=on?'♥':'♡';b.classList.toggle('btn-danger',on);b.classList.toggle('text-white',on);b.classList.toggle('btn-outline-danger',!on);document.getElementById('wlMsg').style.display=on?'block':'none'};Free to use.This component uses Bootstrap 5 (linked above). Copy any file, or download a ready-to-open .html page with the CDN links already included.