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

Add i18n support and cart total to Shopify integration

Browse source 
Implement multilingual support for shop interface and add total calculation to cart drawer:
- Add FR/EN translations for all shop-related texts (cart, checkout, stock status)
- Update templates and JavaScript to use translation system
- Add cart total calculation with formatted currency display
- Refactor cart drawer styles to SASS with improved button styling (black borders on +/-)
- Fix English product content (replace JSON with proper HTML)
- Extract cart drawer to separate snippet for better organization

Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>
This commit is contained in:
isUnknown 2026-01-14 12:02:55 +01:00
parent 28501fec7c
commit b3940bba08
12 changed files with 586 additions and 451 deletions
Download patch file Download diff file Expand all files Collapse all files

13
site/languages/en.php
View file

@ -13,7 +13,20 @@ return [
'backToShop' => 'Back to shop',
'supportText' => 'To support us, you&nbsp;can&nbsp;also',
'makeDonation' => 'make a donation',
// Shop / Cart
'addToCart' => 'Add to cart',
'cart' => 'Cart',
'cartEmpty' => 'Your cart is empty',
'total' => 'Total',
'checkout' => 'Checkout',
'remove' => 'Remove',
'inStock' => 'In stock',
'outOfStock' => 'Out of stock',
'addingToCart' => 'Adding...',
'addedToCart' => 'Added! ✓',
'errorAddToCart' => 'Error - Try again',
'closeCart' => 'Close cart',
// Blueprints - Home
'home.title' => 'Home',

13
site/languages/fr.php
View file

@ -13,7 +13,20 @@ return [
'backToShop' => 'Retour à la boutique',
'supportText' => 'Pour nous soutenir, vous&nbsp;pouvez&nbsp;aussi',
'makeDonation' => 'faire un don',
// Shop / Cart
'addToCart' => 'Ajouter au panier',
'cart' => 'Panier',
'cartEmpty' => 'Votre panier est vide',
'total' => 'Total',
'checkout' => 'Passer commande',
'remove' => 'Retirer',
'inStock' => 'En stock',
'outOfStock' => 'Rupture de stock',
'addingToCart' => 'Ajout en cours...',
'addedToCart' => 'Ajouté ! ✓',
'errorAddToCart' => 'Erreur - Réessayer',
'closeCart' => 'Fermer le panier',
// Blueprints - Home
'home.title' => 'Accueil',

81
site/snippets/buy-button--t-shirt.php
View file

@ -8,78 +8,13 @@
data-shopify-add-to-cart
data-product-id="15689076179317"
data-variant-id=""
data-text-add="<?= t('addToCart') ?>"
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') ?>"
>
Ajouter au panier
<?= t('addToCart') ?>
</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>
</div>

32
site/snippets/cart-drawer.php Normal file
View file

@ -0,0 +1,32 @@
<div id="cart-drawer" class="cart-drawer" data-text-remove="<?= t('remove') ?>">
<div class="cart-drawer__overlay" data-cart-close></div>
<div class="cart-drawer__panel">
<div class="cart-drawer__header">
<h3><?= t('cart') ?></h3>
<button class="cart-drawer__close" data-cart-close aria-label="<?= t('closeCart') ?>">
<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><?= t('cartEmpty') ?></p>
</div>
<div class="cart-drawer__items" data-cart-items></div>
</div>
<div class="cart-drawer__footer">
<div class="cart-drawer__total">
<span class="cart-drawer__total-label"><?= t('total') ?></span>
<span class="cart-drawer__total-amount" data-cart-total>0,00 €</span>
</div>
<button class="cart-drawer__checkout-btn" data-cart-checkout>
<?= t('checkout') ?>
</button>
</div>
</div>
</div>

30
site/snippets/footer.php
View file

@ -1,32 +1,4 @@
<!-- 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>
<?php snippet('cart-drawer') ?>
<footer id="site-footer">
<div class="site-footer__container">