Replace Shopify Buy Button iframe with custom implementation using Storefront API 2026-01. Create interactive cart drawer with full product management capabilities (add, remove, update quantities) and seamless checkout flow. Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>
51 lines
2 KiB
PHP
51 lines
2 KiB
PHP
<!-- Cart Drawer -->
|
|
<div id="cart-drawer" class="cart-drawer">
|
|
<div class="cart-drawer__overlay" data-cart-close></div>
|
|
<div class="cart-drawer__panel">
|
|
<div class="cart-drawer__header">
|
|
<h3>Panier</h3>
|
|
<button class="cart-drawer__close" data-cart-close aria-label="Fermer le panier">
|
|
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
|
<line x1="18" y1="6" x2="6" y2="18"></line>
|
|
<line x1="6" y1="6" x2="18" y2="18"></line>
|
|
</svg>
|
|
</button>
|
|
</div>
|
|
|
|
<div class="cart-drawer__content">
|
|
<div class="cart-drawer__empty" data-cart-empty>
|
|
<p>Votre panier est vide</p>
|
|
</div>
|
|
|
|
<div class="cart-drawer__items" data-cart-items></div>
|
|
</div>
|
|
|
|
<div class="cart-drawer__footer">
|
|
<button class="cart-drawer__checkout-btn" data-cart-checkout>
|
|
Passer commande
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<footer id="site-footer">
|
|
<div class="site-footer__container">
|
|
<div class="footer__mentions">
|
|
<p class="p__small">
|
|
© <?= date('Y') ?> Index Investigation |
|
|
<a target="_blank" href="https://www.index.ngo/mentions-legales/">Mentions légales</a>
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</footer>
|
|
|
|
<script src="<?= url('assets/js/onload.js') ?>"></script>
|
|
<script src="<?= url('assets/js/shopify-cart.js') ?>"></script>
|
|
<script src="<?= url('assets/js/cart-drawer.js') ?>"></script>
|
|
<?php if(isset($scripts) && is_array($scripts)): ?>
|
|
<?php foreach($scripts as $script): ?>
|
|
<script src="<?= url($script) ?>"></script>
|
|
<?php endforeach ?>
|
|
<?php endif ?>
|
|
</body>
|
|
</html>
|