Implement custom Shopify cart with drawer UI

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>

site/snippets/buy-button--t-shirt.php

@@ -0,0 +1,85 @@
+<div class="product-purchase">
+    <div class="product-stock-info">
+        <p data-product-stock class="stock-status"></p>
+    </div>
+
+    <button
+        class="btn-add-to-cart"
+        data-shopify-add-to-cart
+        data-product-id="15689076179317"
+        data-variant-id=""
+    >
+        Ajouter au panier
+    </button>
+</div>
+
+<style>
+.product-purchase {
+    margin-top: 2rem;
+}
+
+.product-stock-info {
+    margin-bottom: 1rem;
+}
+
+.stock-status {
+    font-size: 0.9rem;
+    font-weight: 600;
+    margin: 0;
+}
+
+.stock-status.in-stock {
+    color: #00cc00;
+}
+
+.stock-status.low-stock {
+    color: #ff9900;
+}
+
+.stock-status.out-of-stock {
+    color: #ff3333;
+}
+
+.btn-add-to-cart {
+    font-family: "Open Sans", sans-serif;
+    font-weight: bold;
+    font-size: 1rem;
+    color: #000000;
+    background-color: #00ff00;
+    border: none;
+    border-radius: 40px;
+    padding: 12px 34px;
+    cursor: pointer;
+    transition: background-color 0.3s ease;
+    width: 100%;
+    max-width: 300px;
+}
+
+.btn-add-to-cart:hover:not(:disabled) {
+    background-color: #00e600;
+}
+
+.btn-add-to-cart:focus {
+    outline: 2px solid #00e600;
+    outline-offset: 2px;
+}
+
+.btn-add-to-cart:disabled {
+    opacity: 0.6;
+    cursor: not-allowed;
+}
+
+.btn-add-to-cart.success {
+    background-color: #00cc00;
+}
+
+.btn-add-to-cart.error {
+    background-color: #ff3333;
+    color: #ffffff;
+}
+
+.btn-add-to-cart.out-of-stock {
+    background-color: #cccccc;
+    color: #666666;
+}
+</style>