Add Shopify variant options selector with circular radio buttons

- Implement dynamic option rendering from Shopify variant data
- Generate circular radio buttons for product variants (sizes, colors, etc.)
- Disable add-to-cart button until option is selected
- Display "Choisissez une option" text when option required
- Update button text and enable on option selection
- Add is-selected class to chosen option
- Handle disabled state for out-of-stock variants
- Restore btn__default button style with icon and text structure
- Add chooseOption translation key in FR/EN

Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>

site/languages/en.php

@@ -30,6 +30,7 @@ return [
         'loading' => 'Loading...',
         'productNotFound' => 'Product not found',
         'selectVariant' => 'Select',
+        'chooseOption' => 'Choose an option',
 
         // Blueprints - Home
         'home.title' => 'Home',

site/languages/fr.php

@@ -30,6 +30,7 @@ return [
         'loading' => 'Chargement...',
         'productNotFound' => 'Produit non trouvé',
         'selectVariant' => 'Choisir',
+        'chooseOption' => 'Choisissez une option',
 
         // Blueprints - Home
         'home.title' => 'Accueil',

site/snippets/buy-button.php

@@ -1,25 +1,20 @@
-<div class="product-purchase">
-    <div class="product-stock-info">
-        <p data-product-stock class="stock-status"></p>
-    </div>
-
-    <div class="product-variants" data-product-variants style="display: none;">
-        <label for="variant-select"><?= t('selectVariant') ?></label>
-        <select id="variant-select" data-variant-selector></select>
-    </div>
-
+<div class="add-to-cart">
     <button
-        class="btn-add-to-cart"
+        class="btn__default"
         data-shopify-add-to-cart
         data-product-id=""
         data-variant-id=""
-        data-text-add="<?= t('addToCart') ?>"
+        data-default-text="<?= t('addToCart') ?>"
+        data-text-choose-option="<?= t('chooseOption') ?>"
         data-text-adding="<?= t('addingToCart') ?>"
         data-text-added="<?= t('addedToCart') ?>"
         data-text-error="<?= t('errorAddToCart') ?>"
-        data-text-out-of-stock="<?= t('outOfStock') ?>"
-        data-text-in-stock="<?= t('inStock') ?>"
     >
-        <?= t('addToCart') ?>
+        <span class="icon">
+            <svg clip-rule="evenodd" fill-rule="evenodd" stroke-linejoin="round" stroke-miterlimit="2" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
+                <path d="m14.523 18.787s4.501-4.505 6.255-6.26c.146-.146.219-.338.219-.53s-.073-.383-.219-.53c-1.753-1.754-6.255-6.258-6.255-6.258-.144-.145-.334-.217-.524-.217-.193 0-.385.074-.532.221-.293.292-.295.766-.004 1.056l4.978 4.978h-14.692c-.414 0-.75.336-.75.75s.336.75.75.75h14.692l-4.979 4.979c-.289.289-.286.762.006 1.054.148.148.341.222.533.222.19 0 .378-.072.522-.215z" fill-rule="nonzero" />
+            </svg>
+        </span>
+        <div class="txt" data-button-text><?= t('addToCart') ?></div>
     </button>
 </div>

site/templates/product.php

@@ -27,6 +27,10 @@ snippet('header', ['title' => $page->title(), 'template' => 'shop']);
 
                 <div class="details" data-product-details></div>
 
+                <div class="product-options" data-product-options style="display: none;">
+                    <ul class="product-options__list" data-product-options-list></ul>
+                </div>
+
                 <?php snippet('buy-button') ?>
             </div>