Bonjour,
Je développe mon site Shopify avec le thème Focal 12.5.0 .
J’ai ajouté du code pour une case à cocher “j’accepte les CGV…” dans mon main-cart.liquid + du javascript dans “theme.js” : cela fonctionne parfaitement, le bouton d’achat est désactiver tant que la case n’est pas cochée (cf. capture ci-dessous).
J’ai donc collé ce même code dans mon mini-cart.liquid, mais cela ne fonctionne pas, le bouton d’achat apparaît normalement et surtout on peut cliquer dessus sans avoir coché la case CGV. (cf. capture).
Auriez-vous une solution à m’apporter s’il vous plaît ?
Code du main-cart.liquid :
<!-- Ajout de la case à cocher pour les CGV -->
<style>
/* Style pour le conteneur de la case à cocher */
.terms-container {
margin: 15px 0;
display: flex;
align-items: flex-start;
}
/* Style pour la case à cocher avec pulsation */
.terms-checkbox {
margin-right: 8px;
margin-top: 3px;
accent-color: #164138;
}
/* Animation de pulsation */
@keyframes checkbox-pulse {
0% { box-shadow: 0 0 0 0 rgba(22, 65, 56, 0.4); }
70% { box-shadow: 0 0 0 5px rgba(22, 65, 56, 0); }
100% { box-shadow: 0 0 0 0 rgba(22, 65, 56, 0); }
}
.terms-checkbox {
animation: checkbox-pulse 2s infinite;
}
.terms-checkbox:checked {
animation: none;
}
/* Style pour le texte */
.terms-label {
font-size: 11px;
line-height: 1.3;
margin: 0;
color: #333;
}
/* Style pour le bouton désactivé */
.cart__checkout-button:disabled {
opacity: 0.5;
cursor: not-allowed;
}
</style>
<div class="terms-container">
<input class="terms-checkbox" id="terms-checkbox" type="checkbox">
<label class="terms-label" for="terms-checkbox">Je confirme avoir lu et accepté nos <a data-sanitized-target="_blank" href="{{ shop.url }}/policies/terms-of-service"<span style="text-decoration: underline;">conditions générales de vente</span></a> et notre <a data-sanitized-target="_blank" href="{{ shop.url }}/policies/privacy-policy"<span style="text-decoration: underline;">politique de protection des données personnelles</span></a>.</label>
</div>
<a data-encoded-tag-name="script" data-encoded-tag-value="JTBBJTIwJTIwZG9jdW1lbnQuYWRkRXZlbnRMaXN0ZW5lcignRE9NQ29udGVudExvYWRlZCclMkMlMjBmdW5jdGlvbigpJTIwJTdCJTBBJTIwJTIwJTIwJTIwdmFyJTIwdGVybXNDaGVja2JveCUyMCUzRCUyMGRvY3VtZW50LmdldEVsZW1lbnRCeUlkKCd0ZXJtcy1jaGVja2JveCcpJTNCJTBBJTIwJTIwJTIwJTIwdmFyJTIwY2hlY2tvdXRCdXR0b24lMjAlM0QlMjBkb2N1bWVudC5xdWVyeVNlbGVjdG9yKCcuY2FydF9fY2hlY2tvdXQtYnV0dG9uJyklM0IlMEElMjAlMjAlMjAlMjAlMEElMjAlMjAlMjAlMjBpZiUyMCh0ZXJtc0NoZWNrYm94JTIwJTI2JTI2JTIwY2hlY2tvdXRCdXR0b24pJTIwJTdCJTBBJTIwJTIwJTIwJTIwJTIwJTIwJTJGJTJGJTIwRCVDMyVBOXNhY3RpdmVyJTIwbGUlMjBib3V0b24lMjBkZSUyMGNvbW1hbmRlJTIwaW5pdGlhbGVtZW50JTBBJTIwJTIwJTIwJTIwJTIwJTIwY2hlY2tvdXRCdXR0b24uZGlzYWJsZWQlMjAlM0QlMjB0cnVlJTNCJTBBJTIwJTIwJTIwJTIwJTIwJTIwJTBBJTIwJTIwJTIwJTIwJTIwJTIwJTJGJTJGJTIwQWpvdXRlciUyMHVuJTIwZ2VzdGlvbm5haXJlJTIwZCclQzMlQTl2JUMzJUE5bmVtZW50JTIwcG91ciUyMGxhJTIwY2FzZSUyMCVDMyVBMCUyMGNvY2hlciUwQSUyMCUyMCUyMCUyMCUyMCUyMHRlcm1zQ2hlY2tib3guYWRkRXZlbnRMaXN0ZW5lcignY2hhbmdlJyUyQyUyMGZ1bmN0aW9uKCklMjAlN0IlMEElMjAlMjAlMjAlMjAlMjAlMjAlMjAlMjAlMkYlMkYlMjBBY3RpdmVyJTJGZCVDMyVBOXNhY3RpdmVyJTIwbGUlMjBib3V0b24lMjBlbiUyMGZvbmN0aW9uJTIwZGUlMjBsJyVDMyVBOXRhdCUyMGRlJTIwbGElMjBjYXNlJTBBJTIwJTIwJTIwJTIwJTIwJTIwJTIwJTIwY2hlY2tvdXRCdXR0b24uZGlzYWJsZWQlMjAlM0QlMjAhdGhpcy5jaGVja2VkJTNCJTBBJTIwJTIwJTIwJTIwJTIwJTIwJTdEKSUzQiUwQSUyMCUyMCUyMCUyMCU3RCUwQSUyMCUyMCU3RCklM0IlMEE="></a>
Code du theme.js :
// Code pour gérer la case à cocher des CGV dans les paniers
document.addEventListener('DOMContentLoaded', function() {
var termsCheckbox = document.getElementById('terms-checkbox');
var checkoutButton = document.querySelector('.cart__checkout-button');
if (termsCheckbox && checkoutButton) {
// Désactiver le bouton de paiement au chargement
checkoutButton.disabled = true;
// Créer un message d'erreur
var errorMessage = document.createElement('div');
errorMessage.className = 'terms-error';
errorMessage.textContent = 'Veuillez accepter les conditions générales pour continuer';
errorMessage.style.color = '#e74c3c';
errorMessage.style.fontSize = '12px';
errorMessage.style.marginTop = '5px';
errorMessage.style.display = 'none';
// Insérer le message après le conteneur des termes
document.querySelector('.terms-container').after(errorMessage);
// Ajouter un écouteur d'événement pour la case à cocher
termsCheckbox.addEventListener('change', function() {
// Activer/désactiver le bouton selon l'état de la case
checkoutButton.disabled = !this.checked;
// Cacher le message d'erreur si la case est cochée
errorMessage.style.display = this.checked ? 'none' : 'block';
});
// Ajouter un écouteur pour le clic sur le bouton désactivé
checkoutButton.addEventListener('click', function(e) {
if (this.disabled) {
e.preventDefault();
errorMessage.style.display = 'block';
// Faire défiler jusqu'à la case à cocher
termsCheckbox.scrollIntoView({behavior: 'smooth'});
}
});
}
});
Code du mini-cart.liquid :
<!-- Ajout de la case à cocher pour les CGV -->
<style>
/* Style pour le conteneur de la case à cocher */
.terms-container-mini {
margin: 15px 0;
display: flex;
align-items: flex-start;
}
/* Style pour la case à cocher avec pulsation */
.terms-checkbox-mini {
margin-right: 8px;
margin-top: 3px;
accent-color: #164138;
}
/* Animation de pulsation */
@keyframes checkbox-pulse {
0% { box-shadow: 0 0 0 0 rgba(22, 65, 56, 0.4); }
70% { box-shadow: 0 0 0 5px rgba(22, 65, 56, 0); }
100% { box-shadow: 0 0 0 0 rgba(22, 65, 56, 0); }
}
.terms-checkbox-mini {
animation: checkbox-pulse 2s infinite;
}
.terms-checkbox-mini:checked {
animation: none;
}
/* Style pour le texte */
.terms-label-mini {
font-size: 11px;
line-height: 1.3;
margin: 0;
color: #333;
}
/* Style pour les liens soulignés */
.terms-label-mini a {
text-decoration: underline;
}
</style>
<div class="terms-container-mini">
<input type="checkbox" id="terms-checkbox-mini" class="terms-checkbox-mini">
<label for="terms-checkbox-mini" class="terms-label-mini">Je confirme avoir lu et accepté nos <a data-sanitized-target="_blank" href="{{ shop.url }}/policies/terms-of-service">conditions générales de vente</a> et notre <a data-sanitized-target="_blank" href="{{ shop.url }}/policies/privacy-policy">politique de protection des données personnelles</a>.</label>
</div>
<a data-encoded-tag-name="script" data-encoded-tag-value="JTBBJTIwJTIwZG9jdW1lbnQuYWRkRXZlbnRMaXN0ZW5lcignRE9NQ29udGVudExvYWRlZCclMkMlMjBmdW5jdGlvbigpJTIwJTdCJTBBJTIwJTIwJTIwJTIwJTJGJTJGJTIwVHJvdXZlciUyMGxlJTIwZm9ybXVsYWlyZSUyMGR1JTIwbWluaS1wYW5pZXIlMEElMjAlMjAlMjAlMjB2YXIlMjBtaW5pQ2FydEZvcm0lMjAlM0QlMjBkb2N1bWVudC5nZXRFbGVtZW50QnlJZCgnbWluaS1jYXJ0LWZvcm0nKSUzQiUwQSUyMCUyMCUyMCUyMGlmJTIwKCFtaW5pQ2FydEZvcm0pJTIwcmV0dXJuJTNCJTBBJTIwJTIwJTIwJTIwJTBBJTIwJTIwJTIwJTIwJTJGJTJGJTIwVHJvdXZlciUyMGxlJTIwYm91dG9uJTIwZGUlMjBwYWllbWVudCUwQSUyMCUyMCUyMCUyMHZhciUyMGNoZWNrb3V0QnV0dG9uJTIwJTNEJTIwbWluaUNhcnRGb3JtLnF1ZXJ5U2VsZWN0b3IoJ2J1dHRvbiU1Qm5hbWUlM0QlMjJjaGVja291dCUyMiU1RCcpJTNCJTBBJTIwJTIwJTIwJTIwaWYlMjAoIWNoZWNrb3V0QnV0dG9uKSUyMHJldHVybiUzQiUwQSUyMCUyMCUyMCUyMCUwQSUyMCUyMCUyMCUyMCUyRiUyRiUyMFRyb3V2ZXIlMjBsYSUyMGNhc2UlMjAlQzMlQTAlMjBjb2NoZXIlMEElMjAlMjAlMjAlMjB2YXIlMjB0ZXJtc0NoZWNrYm94JTIwJTNEJTIwZG9jdW1lbnQuZ2V0RWxlbWVudEJ5SWQoJ3Rlcm1zLWNoZWNrYm94LW1pbmknKSUzQiUwQSUyMCUyMCUyMCUyMGlmJTIwKCF0ZXJtc0NoZWNrYm94KSUyMHJldHVybiUzQiUwQSUyMCUyMCUyMCUyMCUwQSUyMCUyMCUyMCUyMCUyRiUyRiUyMEludGVyY2VwdGVyJTIwbGUlMjBjbGljJTIwc3VyJTIwbGUlMjBib3V0b24lMjBkZSUyMHBhaWVtZW50JTBBJTIwJTIwJTIwJTIwY2hlY2tvdXRCdXR0b24uYWRkRXZlbnRMaXN0ZW5lcignY2xpY2snJTJDJTIwZnVuY3Rpb24oZXZlbnQpJTIwJTdCJTBBJTIwJTIwJTIwJTIwJTIwJTIwaWYlMjAoIXRlcm1zQ2hlY2tib3guY2hlY2tlZCklMjAlN0IlMEElMjAlMjAlMjAlMjAlMjAlMjAlMjAlMjAlMkYlMkYlMjBFbXAlQzMlQUFjaGVyJTIwbCdhY3Rpb24lMjBwYXIlMjBkJUMzJUE5ZmF1dCUwQSUyMCUyMCUyMCUyMCUyMCUyMCUyMCUyMGV2ZW50LnByZXZlbnREZWZhdWx0KCklM0IlMEElMjAlMjAlMjAlMjAlMjAlMjAlMjAlMjBldmVudC5zdG9wUHJvcGFnYXRpb24oKSUzQiUwQSUyMCUyMCUyMCUyMCUyMCUyMCUyMCUyMCUwQSUyMCUyMCUyMCUyMCUyMCUyMCUyMCUyMCUyRiUyRiUyMEFmZmljaGVyJTIwdW5lJTIwYWxlcnRlJTBBJTIwJTIwJTIwJTIwJTIwJTIwJTIwJTIwYWxlcnQoJ1ZldWlsbGV6JTIwYWNjZXB0ZXIlMjBsZXMlMjBjb25kaXRpb25zJTIwZyVDMyVBOW4lQzMlQTlyYWxlcyUyMGRlJTIwdmVudGUlMjBwb3VyJTIwY29udGludWVyLicpJTNCJTBBJTIwJTIwJTIwJTIwJTIwJTIwJTIwJTIwJTBBJTIwJTIwJTIwJTIwJTIwJTIwJTIwJTIwJTJGJTJGJTIwTWV0dHJlJTIwZW4lMjAlQzMlQTl2aWRlbmNlJTIwbGElMjBjYXNlJTIwJUMzJUEwJTIwY29jaGVyJTBBJTIwJTIwJTIwJTIwJTIwJTIwJTIwJTIwdGVybXNDaGVja2JveC5zdHlsZS5ib3hTaGFkb3clMjAlM0QlMjAnMCUyMDAlMjAwJTIwMnB4JTIwcmVkJyUzQiUwQSUyMCUyMCUyMCUyMCUyMCUyMCUyMCUyMCUwQSUyMCUyMCUyMCUyMCUyMCUyMCUyMCUyMCUyRiUyRiUyMEZhaXJlJTIwZCVDMyVBOWZpbGVyJTIwanVzcXUnJUMzJUEwJTIwbGElMjBjYXNlJTIwJUMzJUEwJTIwY29jaGVyJTBBJTIwJTIwJTIwJTIwJTIwJTIwJTIwJTIwdGVybXNDaGVja2JveC5zY3JvbGxJbnRvVmlldyglN0JiZWhhdmlvciUzQSUyMCdzbW9vdGgnJTdEKSUzQiUwQSUyMCUyMCUyMCUyMCUyMCUyMCUyMCUyMCUwQSUyMCUyMCUyMCUyMCUyMCUyMCUyMCUyMHJldHVybiUyMGZhbHNlJTNCJTBBJTIwJTIwJTIwJTIwJTIwJTIwJTdEJTBBJTIwJTIwJTIwJTIwJTdEKSUzQiUwQSUyMCUyMCUyMCUyMCUwQSUyMCUyMCUyMCUyMCUyRiUyRiUyMFIlQzMlQTlpbml0aWFsaXNlciUyMGxhJTIwbWlzZSUyMGVuJTIwJUMzJUE5dmlkZW5jZSUyMGxvcnNxdWUlMjBsYSUyMGNhc2UlMjBlc3QlMjBjb2NoJUMzJUE5ZSUwQSUyMCUyMCUyMCUyMHRlcm1zQ2hlY2tib3guYWRkRXZlbnRMaXN0ZW5lcignY2hhbmdlJyUyQyUyMGZ1bmN0aW9uKCklMjAlN0IlMEElMjAlMjAlMjAlMjAlMjAlMjBpZiUyMCh0aGlzLmNoZWNrZWQpJTIwJTdCJTBBJTIwJTIwJTIwJTIwJTIwJTIwJTIwJTIwdGhpcy5zdHlsZS5ib3hTaGFkb3clMjAlM0QlMjAnbm9uZSclM0IlMEElMjAlMjAlMjAlMjAlMjAlMjAlN0QlMEElMjAlMjAlMjAlMjAlN0QpJTNCJTBBJTIwJTIwJTdEKSUzQiUwQQ=="></a>
Merci beaucoup d’avance !
