studio-variable/index-shop
4
0
Fork 0
Code Issues 1 Pull requests Projects Releases Packages Wiki Activity Actions

Implement custom Shopify cart with drawer UI

Browse source 
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>
This commit is contained in:
isUnknown 2026-01-14 11:26:14 +01:00
parent c08662caf8
commit 28501fec7c
13 changed files with 1158 additions and 81 deletions
Download patch file Download diff file Expand all files Collapse all files

32
site/snippets/footer.php
View file

@ -1,3 +1,33 @@
<!-- 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">
@ -10,6 +40,8 @@
</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>