Masquer les variantes épuisées
Vous pouvez empêcher les clients de sélectionner des variantes épuisées en supprimant ou en désactivant celles-ci sur la page du produit.
Limites
Les personnalisations décrites sur cette page ne fonctionnent pas dans les cas suivants :
- Vos produits comportent plus d’une option de produit.
- Vous utilisez le thème Express et votre page de produit est configurée pour afficher les produits dans une superposition
Thèmes avec et sans sections
Sélection de votre thème
Les étapes de cette personnalisation varient selon le thème choisi. Cliquez sur le bouton de votre thème avant de suivre les instructions ci-dessous :
Boundless
Les étapes de cette personnalisation varient selon que vous souhaitez masquer complètement les variantes épuisées ou simplement les désactiver. Cliquez sur le bouton correspondant à votre préférence avant de suivre les instructions ci-dessous :
Masquer les variantes épuisées
Suivez ces étapes pour appliquer la personnalisation à Boundless :
Depuis votre interface administrateur Shopify, accédez à Boutique en ligne > Thèmes.
Recherchez le thème que vous souhaitez modifier, cliquez sur le bouton … pour ouvrir le menu Actions, puis cliquez sur Modifier le code.
Dans l'application Shopify, appuyez sur Boutique.
Dans la section Canaux de vente, appuyez sur Boutique en ligne.
Appuyez sur Gérer les thèmes.
Recherchez le thème que vous souhaitez modifier, cliquez sur le bouton … pour ouvrir le menu Actions, puis cliquez sur Modifier le code.
Dans l'application Shopify, appuyez sur Boutique.
Dans la section Canaux de vente, appuyez sur Boutique en ligne.
Appuyez sur Gérer les thèmes.
Recherchez le thème que vous souhaitez modifier, cliquez sur le bouton … pour ouvrir le menu Actions, puis cliquez sur Modifier le code.
Dans le répertoire Ressources, cliquez sur
theme.jsoutheme.js.liquid.Au bas du fichier, collez le code suivant :
document.addEventListener('DOMContentLoaded', function() {
const productJson = document.querySelectorAll('[id^=ProductJson-');
if (productJson.length > 0) {
for (let i = 0; i < productJson.length; i++) {
const current = productJson[i];
const sectionId = current.id.replace('ProductJson-', '');
const section = document.querySelector('[data-section-id="' + sectionId + '"]');
const product = JSON.parse(current.text);
if (product.options.length === 1) {
const unavailableVariants = [];
for (let j = 0; j < product.variants.length; j++) {
const variant = product.variants[j];
if (!variant.available) {
unavailableVariants.push(variant);
}
}
if (unavailableVariants.length > 0) {
const mutationCallback = function() {
const variantOptions = section.querySelectorAll('.single-option-selector option');
if (variantOptions.length > 0) {
for (let k = 0; k < unavailableVariants.length; k++) {
const unavailableVariant = unavailableVariants[k];
for (let l = 0; l < variantOptions.length; l++) {
const option = variantOptions[l];
if (unavailableVariant.title === option.value) {
option.remove();
}
}
}
if (typeof observer === 'object' && typeof observer.disconnect === 'function') {
observer.disconnect();
}
}
}
const observer = new MutationObserver(mutationCallback);
const addToCartForm = document.querySelector('form[action*="/cart/add"]');
mutationCallback();
if (window.MutationObserver && addToCartForm.length) {
const config = { childList: true, subtree: true };
if (typeof observer === 'object' && typeof observer.disconnect === 'function') {
observer.disconnect();
}
observer.observe(addToCartForm, config);
}
}
}
}
}
});- Cliquez sur Save (Enregistrer).
Désactiver les variantes épuisées
Suivez ces étapes pour appliquer la personnalisation à Boundless :
Depuis votre interface administrateur Shopify, accédez à Boutique en ligne > Thèmes.
Recherchez le thème que vous souhaitez modifier, cliquez sur le bouton … pour ouvrir le menu Actions, puis cliquez sur Modifier le code.
Dans l'application Shopify, appuyez sur Boutique.
Dans la section Canaux de vente, appuyez sur Boutique en ligne.
Appuyez sur Gérer les thèmes.
Recherchez le thème que vous souhaitez modifier, cliquez sur le bouton … pour ouvrir le menu Actions, puis cliquez sur Modifier le code.
Dans l'application Shopify, appuyez sur Boutique.
Dans la section Canaux de vente, appuyez sur Boutique en ligne.
Appuyez sur Gérer les thèmes.
Recherchez le thème que vous souhaitez modifier, cliquez sur le bouton … pour ouvrir le menu Actions, puis cliquez sur Modifier le code.
Dans le répertoire Ressources, cliquez sur
theme.jsoutheme.js.liquid.Au bas du fichier, collez le code suivant :
document.addEventListener('DOMContentLoaded', function() {
const productJson = document.querySelectorAll('[id^=ProductJson-');
if (productJson.length > 0) {
for (let i = 0; i < productJson.length; i++) {
const current = productJson[i];
const sectionId = current.id.replace('ProductJson-', '');
const section = document.querySelector('[data-section-id="' + sectionId + '"]');
const product = JSON.parse(current.text);
if (product.options.length === 1) {
const unavailableVariants = [];
for (let j = 0; j < product.variants.length; j++) {
const variant = product.variants[j];
if (!variant.available) {
unavailableVariants.push(variant);
}
}
if (unavailableVariants.length > 0) {
const mutationCallback = function() {
const variantOptions = section.querySelectorAll('.single-option-selector option');
if (variantOptions.length > 0) {
for (let k = 0; k < unavailableVariants.length; k++) {
const unavailableVariant = unavailableVariants[k];
for (let l = 0; l < variantOptions.length; l++) {
const option = variantOptions[l];
if (unavailableVariant.title === option.value) {
option.setAttribute('disabled', 'disabled');
}
}
}
if (typeof observer === 'object' && typeof observer.disconnect === 'function') {
observer.disconnect();
}
}
}
const observer = new MutationObserver(mutationCallback);
const addToCartForm = document.querySelector('form[action*="/cart/add"]');
mutationCallback();
if (window.MutationObserver && addToCartForm.length) {
const config = { childList: true, subtree: true };
if (typeof observer === 'object' && typeof observer.disconnect === 'function') {
observer.disconnect();
}
observer.observe(addToCartForm, config);
}
}
}
}
}
});- Cliquez sur Save (Enregistrer).
brooklyn
Les étapes de cette personnalisation varient selon que vous souhaitez masquer complètement les variantes épuisées ou simplement les désactiver. Cliquez sur le bouton correspondant à votre préférence avant de suivre les instructions ci-dessous :
Masquer les variantes épuisées
Suivez ces étapes pour appliquer la personnalisation à Brooklyn :
Depuis votre interface administrateur Shopify, accédez à Boutique en ligne > Thèmes.
Recherchez le thème que vous souhaitez modifier, cliquez sur le bouton … pour ouvrir le menu Actions, puis cliquez sur Modifier le code.
Dans l'application Shopify, appuyez sur Boutique.
Dans la section Canaux de vente, appuyez sur Boutique en ligne.
Appuyez sur Gérer les thèmes.
Recherchez le thème que vous souhaitez modifier, cliquez sur le bouton … pour ouvrir le menu Actions, puis cliquez sur Modifier le code.
Dans l'application Shopify, appuyez sur Boutique.
Dans la section Canaux de vente, appuyez sur Boutique en ligne.
Appuyez sur Gérer les thèmes.
Recherchez le thème que vous souhaitez modifier, cliquez sur le bouton … pour ouvrir le menu Actions, puis cliquez sur Modifier le code.
Dans le répertoire Ressources, cliquez sur
theme.jsoutheme.js.liquid.Au bas du fichier, collez le code suivant :
document.addEventListener('DOMContentLoaded', function() {
const productJson = document.querySelectorAll('[id^=ProductJson-');
if (productJson.length > 0) {
for (let i = 0; i < productJson.length; i++) {
const current = productJson[i];
const sectionId = current.id.replace('ProductJson-', '');
const section = document.querySelector('[data-section-id="' + sectionId + '"]');
const product = JSON.parse(current.text);
if (product.options.length === 1) {
const unavailableVariants = [];
for (let j = 0; j < product.variants.length; j++) {
const variant = product.variants[j];
if (!variant.available) {
unavailableVariants.push(variant);
}
}
if (unavailableVariants.length > 0) {
const mutationCallback = function() {
const radioButtons = section.querySelector('.single-option-radio');
let variantOptions;
if (radioButtons) {
variantOptions = section.querySelectorAll('.single-option-radio input');
} else {
variantOptions = section.querySelectorAll('.single-option-selector__radio option');
}
if (variantOptions.length > 0) {
for (let k = 0; k < unavailableVariants.length; k++) {
const unavailableVariant = unavailableVariants[k];
for (let l = 0; l < variantOptions.length; l++) {
const option = variantOptions[l];
if (unavailableVariant.title === option.value) {
if (radioButtons) {
option.nextElementSibling.remove();
}
option.remove();
}
}
}
if (typeof observer === 'object' && typeof observer.disconnect === 'function') {
observer.disconnect();
}
}
}
const observer = new MutationObserver(mutationCallback);
const addToCartForm = document.querySelector('form[action*="/cart/add"]');
mutationCallback();
if (window.MutationObserver && addToCartForm.length) {
const config = { childList: true, subtree: true };
if (typeof observer === 'object' && typeof observer.disconnect === 'function') {
observer.disconnect();
}
observer.observe(addToCartForm, config);
}
}
}
}
}
});- Cliquez sur Save (Enregistrer).
Désactiver les variantes épuisées
Suivez ces étapes pour appliquer la personnalisation à Brooklyn :
Depuis votre interface administrateur Shopify, accédez à Boutique en ligne > Thèmes.
Recherchez le thème que vous souhaitez modifier, cliquez sur le bouton … pour ouvrir le menu Actions, puis cliquez sur Modifier le code.
Dans l'application Shopify, appuyez sur Boutique.
Dans la section Canaux de vente, appuyez sur Boutique en ligne.
Appuyez sur Gérer les thèmes.
Recherchez le thème que vous souhaitez modifier, cliquez sur le bouton … pour ouvrir le menu Actions, puis cliquez sur Modifier le code.
Dans l'application Shopify, appuyez sur Boutique.
Dans la section Canaux de vente, appuyez sur Boutique en ligne.
Appuyez sur Gérer les thèmes.
Recherchez le thème que vous souhaitez modifier, cliquez sur le bouton … pour ouvrir le menu Actions, puis cliquez sur Modifier le code.
Dans le répertoire Ressources, cliquez sur
theme.jsoutheme.js.liquid.Au bas du fichier, collez le code suivant :
document.addEventListener('DOMContentLoaded', function() {
const productJson = document.querySelectorAll('[id^=ProductJson-');
if (productJson.length > 0) {
for (let i = 0; i < productJson.length; i++) {
const current = productJson[i];
const sectionId = current.id.replace('ProductJson-', '');
const section = document.querySelector('[data-section-id="' + sectionId + '"]');
const product = JSON.parse(current.text);
if (product.options.length === 1) {
const unavailableVariants = [];
for (let j = 0; j < product.variants.length; j++) {
const variant = product.variants[j];
if (!variant.available) {
unavailableVariants.push(variant);
}
}
if (unavailableVariants.length > 0) {
const mutationCallback = function() {
const radioButtons = section.querySelector('.single-option-radio');
let variantOptions;
if (radioButtons) {
variantOptions = section.querySelectorAll('.single-option-radio input');
} else {
variantOptions = section.querySelectorAll('.single-option-selector__radio option');
}
if (variantOptions.length > 0) {
for (let k = 0; k < unavailableVariants.length; k++) {
const unavailableVariant = unavailableVariants[k];
for (let l = 0; l < variantOptions.length; l++) {
const option = variantOptions[l];
if (unavailableVariant.title === option.value) {
if (radioButtons) {
option.nextElementSibling.option.setAttribute('disabled', 'disabled');
}
option.setAttribute('disabled', 'disabled');
}
}
}
if (typeof observer === 'object' && typeof observer.disconnect === 'function') {
observer.disconnect();
}
}
}
const observer = new MutationObserver(mutationCallback);
const addToCartForm = document.querySelector('form[action*="/cart/add"]');
mutationCallback();
if (window.MutationObserver && addToCartForm.length) {
const config = { childList: true, subtree: true };
if (typeof observer === 'object' && typeof observer.disconnect === 'function') {
observer.disconnect();
}
observer.observe(addToCartForm, config);
}
}
}
}
}
});- Cliquez sur Save (Enregistrer).
Debut
Les étapes de cette personnalisation varient selon que vous souhaitez masquer complètement les variantes épuisées ou simplement les désactiver. Cliquez sur le bouton correspondant à votre préférence avant de suivre les instructions ci-dessous :
Masquer les variantes épuisées
Suivez ces étapes pour appliquer la personnalisation à Debut :
Depuis votre interface administrateur Shopify, accédez à Boutique en ligne > Thèmes.
Recherchez le thème que vous souhaitez modifier, cliquez sur le bouton … pour ouvrir le menu Actions, puis cliquez sur Modifier le code.
Dans l'application Shopify, appuyez sur Boutique.
Dans la section Canaux de vente, appuyez sur Boutique en ligne.
Appuyez sur Gérer les thèmes.
Recherchez le thème que vous souhaitez modifier, cliquez sur le bouton … pour ouvrir le menu Actions, puis cliquez sur Modifier le code.
Dans l'application Shopify, appuyez sur Boutique.
Dans la section Canaux de vente, appuyez sur Boutique en ligne.
Appuyez sur Gérer les thèmes.
Recherchez le thème que vous souhaitez modifier, cliquez sur le bouton … pour ouvrir le menu Actions, puis cliquez sur Modifier le code.
Dans le répertoire Ressources, cliquez sur
theme.jsoutheme.js.liquid.Au bas du fichier, collez le code suivant :
document.addEventListener('DOMContentLoaded', function() {
const productJson = document.querySelectorAll('[id^=ProductJson-');
if (productJson.length > 0) {
for (let i = 0; i < productJson.length; i++) {
const current = productJson[i];
const sectionId = current.id.replace('ProductJson-', '');
const section = document.querySelector('[data-section-id="' + sectionId + '"]');
const product = JSON.parse(current.text);
if (product.options.length === 1) {
const unavailableVariants = [];
for (let j = 0; j < product.variants.length; j++) {
const variant = product.variants[j];
if (!variant.available) {
unavailableVariants.push(variant);
}
}
if (unavailableVariants.length > 0) {
const mutationCallback = function() {
const variantOptions = section.querySelectorAll('.single-option-selector option');
if (variantOptions.length > 0) {
for (let k = 0; k < unavailableVariants.length; k++) {
const unavailableVariant = unavailableVariants[k];
for (let l = 0; l < variantOptions.length; l++) {
const option = variantOptions[l];
if (unavailableVariant.title === option.value) {
option.remove();
}
}
}
if (typeof observer === 'object' && typeof observer.disconnect === 'function') {
observer.disconnect();
}
}
}
const observer = new MutationObserver(mutationCallback);
const addToCartForm = document.querySelector('form[action*="/cart/add"]');
mutationCallback();
if (window.MutationObserver && addToCartForm.length) {
const config = { childList: true, subtree: true };
if (typeof observer === 'object' && typeof observer.disconnect === 'function') {
observer.disconnect();
}
observer.observe(addToCartForm, config);
}
}
}
}
}
});- Cliquez sur Save (Enregistrer).
Désactiver les variantes épuisées
Suivez ces étapes pour appliquer la personnalisation à Debut :
Depuis votre interface administrateur Shopify, accédez à Boutique en ligne > Thèmes.
Recherchez le thème que vous souhaitez modifier, cliquez sur le bouton … pour ouvrir le menu Actions, puis cliquez sur Modifier le code.
Dans l'application Shopify, appuyez sur Boutique.
Dans la section Canaux de vente, appuyez sur Boutique en ligne.
Appuyez sur Gérer les thèmes.
Recherchez le thème que vous souhaitez modifier, cliquez sur le bouton … pour ouvrir le menu Actions, puis cliquez sur Modifier le code.
Dans l'application Shopify, appuyez sur Boutique.
Dans la section Canaux de vente, appuyez sur Boutique en ligne.
Appuyez sur Gérer les thèmes.
Recherchez le thème que vous souhaitez modifier, cliquez sur le bouton … pour ouvrir le menu Actions, puis cliquez sur Modifier le code.
Dans le répertoire Ressources, cliquez sur
theme.jsoutheme.js.liquid.Au bas du fichier, collez le code suivant :
document.addEventListener('DOMContentLoaded', function() {
const productJson = document.querySelectorAll('[id^=ProductJson-');
if (productJson.length > 0) {
for (let i = 0; i < productJson.length; i++) {
const current = productJson[i];
const sectionId = current.id.replace('ProductJson-', '');
const section = document.querySelector('[data-section-id="' + sectionId + '"]');
const product = JSON.parse(current.text);
if (product.options.length === 1) {
const unavailableVariants = [];
for (let j = 0; j < product.variants.length; j++) {
const variant = product.variants[j];
if (!variant.available) {
unavailableVariants.push(variant);
}
}
if (unavailableVariants.length > 0) {
const mutationCallback = function() {
const variantOptions = section.querySelectorAll('.single-option-selector option');
if (variantOptions.length > 0) {
for (let k = 0; k < unavailableVariants.length; k++) {
const unavailableVariant = unavailableVariants[k];
for (let l = 0; l < variantOptions.length; l++) {
const option = variantOptions[l];
if (unavailableVariant.title === option.value) {
option.setAttribute('disabled', 'disabled');
}
}
}
if (typeof observer === 'object' && typeof observer.disconnect === 'function') {
observer.disconnect();
}
}
}
const observer = new MutationObserver(mutationCallback);
const addToCartForm = document.querySelector('form[action*="/cart/add"]');
mutationCallback();
if (window.MutationObserver && addToCartForm.length) {
const config = { childList: true, subtree: true };
if (typeof observer === 'object' && typeof observer.disconnect === 'function') {
observer.disconnect();
}
observer.observe(addToCartForm, config);
}
}
}
}
}
});- Cliquez sur Save (Enregistrer).
Express
Les étapes de cette personnalisation varient selon que vous souhaitez masquer complètement les variantes épuisées ou simplement les désactiver. Cliquez sur le bouton correspondant à votre préférence avant de suivre les instructions ci-dessous :
Masquer les variantes épuisées
Suivez les étapes ci-après pour appliquer la personnalisation à Express :
Depuis votre interface administrateur Shopify, accédez à Boutique en ligne > Thèmes.
Recherchez le thème que vous souhaitez modifier, cliquez sur le bouton … pour ouvrir le menu Actions, puis cliquez sur Modifier le code.
Dans l'application Shopify, appuyez sur Boutique.
Dans la section Canaux de vente, appuyez sur Boutique en ligne.
Appuyez sur Gérer les thèmes.
Recherchez le thème que vous souhaitez modifier, cliquez sur le bouton … pour ouvrir le menu Actions, puis cliquez sur Modifier le code.
Dans l'application Shopify, appuyez sur Boutique.
Dans la section Canaux de vente, appuyez sur Boutique en ligne.
Appuyez sur Gérer les thèmes.
Recherchez le thème que vous souhaitez modifier, cliquez sur le bouton … pour ouvrir le menu Actions, puis cliquez sur Modifier le code.
Dans le répertoire Mise en page, cliquez sur
theme.liquid.Recherchez le code
</body>. Collez le code suivant sur sa propre ligne au-dessus de cela :
<script>
document.addEventListener('DOMContentLoaded', function() {
const productJson = document.querySelectorAll('[data-product-json]');
if (productJson.length > 0) {
for (let i = 0; i < productJson.length; i++) {
const current = productJson[i];
const section = current.closest('[data-section-id]');
const currentJson = JSON.parse(current.text);
if (currentJson.options.length === 1) {
const unavailableVariants = [];
for (let j = 0; j < currentJson.variants.length; j++) {
const variant = currentJson.variants[j];
if (!variant.available) {
unavailableVariants.push(variant);
}
}
if (unavailableVariants.length > 0) {
const mutationCallback = function() {
const variantOptions = section.querySelectorAll('.form__input--select option');
if (variantOptions.length > 0) {
for (let k = 0; k < unavailableVariants.length; k++) {
const unavailableVariant = unavailableVariants[k];
for (let l = 0; l < variantOptions.length; l++) {
const option = variantOptions[l];
if (unavailableVariant.title === option.value) {
option.remove();
}
}
}
if (typeof observer === 'object' && typeof observer.disconnect === 'function') {
observer.disconnect();
}
}
}
const observer = new MutationObserver(mutationCallback);
const addToCartForm = document.querySelector('form[action*="/cart/add"]');
mutationCallback();
if (window.MutationObserver && addToCartForm.length) {
const config = { childList: true, subtree: true };
if (typeof observer === 'object' && typeof observer.disconnect === 'function') {
observer.disconnect();
}
observer.observe(addToCartForm, config);
}
}
}
}
}
});
</script>- Cliquez sur Save (Enregistrer).
Désactiver les variantes épuisées
Suivez les étapes ci-après pour appliquer la personnalisation à Express :
Depuis votre interface administrateur Shopify, accédez à Boutique en ligne > Thèmes.
Recherchez le thème que vous souhaitez modifier, cliquez sur le bouton … pour ouvrir le menu Actions, puis cliquez sur Modifier le code.
Dans l'application Shopify, appuyez sur Boutique.
Dans la section Canaux de vente, appuyez sur Boutique en ligne.
Appuyez sur Gérer les thèmes.
Recherchez le thème que vous souhaitez modifier, cliquez sur le bouton … pour ouvrir le menu Actions, puis cliquez sur Modifier le code.
Dans l'application Shopify, appuyez sur Boutique.
Dans la section Canaux de vente, appuyez sur Boutique en ligne.
Appuyez sur Gérer les thèmes.
Recherchez le thème que vous souhaitez modifier, cliquez sur le bouton … pour ouvrir le menu Actions, puis cliquez sur Modifier le code.
Dans le répertoire Ressources, cliquez sur
theme.jsoutheme.js.liquid.Au bas du fichier, collez le code suivant :
<script>
document.addEventListener('DOMContentLoaded', function() {
const productJson = document.querySelectorAll('[data-product-json]');
if (productJson.length > 0) {
for (let i = 0; i < productJson.length; i++) {
const current = productJson[i];
const section = current.closest('[data-section-id]');
const currentJson = JSON.parse(current.text);
if (currentJson.options.length === 1) {
const unavailableVariants = [];
for (let j = 0; j < currentJson.variants.length; j++) {
const variant = currentJson.variants[j];
if (!variant.available) {
unavailableVariants.push(variant);
}
}
if (unavailableVariants.length > 0) {
const mutationCallback = function() {
const variantOptions = section.querySelectorAll('.form__input--select option');
if (variantOptions.length > 0) {
for (let k = 0; k < unavailableVariants.length; k++) {
const unavailableVariant = unavailableVariants[k];
for (let l = 0; l < variantOptions.length; l++) {
const option = variantOptions[l];
if (unavailableVariant.title === option.value) {
option.setAttribute('disabled', 'disabled');
}
}
}
if (typeof observer === 'object' && typeof observer.disconnect === 'function') {
observer.disconnect();
}
}
}
const observer = new MutationObserver(mutationCallback);
const addToCartForm = document.querySelector('form[action*="/cart/add"]');
mutationCallback();
if (window.MutationObserver && addToCartForm.length) {
const config = { childList: true, subtree: true };
if (typeof observer === 'object' && typeof observer.disconnect === 'function') {
observer.disconnect();
}
observer.observe(addToCartForm, config);
}
}
}
}
}
});
</script>- Cliquez sur Save (Enregistrer).
Minimal
Les étapes de cette personnalisation varient selon que vous souhaitez masquer complètement les variantes épuisées ou simplement les désactiver. Cliquez sur le bouton correspondant à votre préférence avant de suivre les instructions ci-dessous :
Masquer les variantes épuisées
Suivez ces étapes pour appliquer la personnalisation à Minimal :
Depuis votre interface administrateur Shopify, accédez à Boutique en ligne > Thèmes.
Recherchez le thème que vous souhaitez modifier, cliquez sur le bouton … pour ouvrir le menu Actions, puis cliquez sur Modifier le code.
Dans l'application Shopify, appuyez sur Boutique.
Dans la section Canaux de vente, appuyez sur Boutique en ligne.
Appuyez sur Gérer les thèmes.
Recherchez le thème que vous souhaitez modifier, cliquez sur le bouton … pour ouvrir le menu Actions, puis cliquez sur Modifier le code.
Dans l'application Shopify, appuyez sur Boutique.
Dans la section Canaux de vente, appuyez sur Boutique en ligne.
Appuyez sur Gérer les thèmes.
Recherchez le thème que vous souhaitez modifier, cliquez sur le bouton … pour ouvrir le menu Actions, puis cliquez sur Modifier le code.
Dans le répertoire Ressources, cliquez sur
theme.jsoutheme.js.liquid.Au bas du fichier, collez le code suivant :
document.addEventListener('DOMContentLoaded', function() {
const productJson = document.querySelectorAll('[id^=ProductJson-');
if (productJson.length > 0) {
for (let i = 0; i < productJson.length; i++) {
const current = productJson[i];
const sectionId = current.id.replace('ProductJson-', '');
const section = document.querySelector('[data-section-id="' + sectionId + '"]');
const product = JSON.parse(current.text);
if (product.options.length === 1) {
const unavailableVariants = [];
for (let j = 0; j < product.variants.length; j++) {
const variant = product.variants[j];
if (!variant.available) {
unavailableVariants.push(variant);
}
}
if (unavailableVariants.length > 0) {
const mutationCallback = function() {
const variantOptions = section.querySelectorAll('.single-option-selector option');
if (variantOptions.length > 0) {
for (let k = 0; k < unavailableVariants.length; k++) {
const unavailableVariant = unavailableVariants[k];
for (let l = 0; l < variantOptions.length; l++) {
const option = variantOptions[l];
if (unavailableVariant.title === option.value) {
option.remove();
}
}
}
if (typeof observer === 'object' && typeof observer.disconnect === 'function') {
observer.disconnect();
}
}
}
const observer = new MutationObserver(mutationCallback);
const addToCartForm = document.querySelector('form[action*="/cart/add"]');
mutationCallback();
if (window.MutationObserver && addToCartForm.length) {
const config = { childList: true, subtree: true };
if (typeof observer === 'object' && typeof observer.disconnect === 'function') {
observer.disconnect();
}
observer.observe(addToCartForm, config);
}
}
}
}
}
});- Cliquez sur Save (Enregistrer).
Désactiver les variantes épuisées
Suivez ces étapes pour appliquer la personnalisation à Minimal :
Depuis votre interface administrateur Shopify, accédez à Boutique en ligne > Thèmes.
Recherchez le thème que vous souhaitez modifier, cliquez sur le bouton … pour ouvrir le menu Actions, puis cliquez sur Modifier le code.
Dans l'application Shopify, appuyez sur Boutique.
Dans la section Canaux de vente, appuyez sur Boutique en ligne.
Appuyez sur Gérer les thèmes.
Recherchez le thème que vous souhaitez modifier, cliquez sur le bouton … pour ouvrir le menu Actions, puis cliquez sur Modifier le code.
Dans l'application Shopify, appuyez sur Boutique.
Dans la section Canaux de vente, appuyez sur Boutique en ligne.
Appuyez sur Gérer les thèmes.
Recherchez le thème que vous souhaitez modifier, cliquez sur le bouton … pour ouvrir le menu Actions, puis cliquez sur Modifier le code.
Dans le répertoire Ressources, cliquez sur
theme.jsoutheme.js.liquid.Au bas du fichier, collez le code suivant :
document.addEventListener('DOMContentLoaded', function() {
const productJson = document.querySelectorAll('[id^=ProductJson-');
if (productJson.length > 0) {
for (let i = 0; i < productJson.length; i++) {
const current = productJson[i];
const sectionId = current.id.replace('ProductJson-', '');
const section = document.querySelector('[data-section-id="' + sectionId + '"]');
const product = JSON.parse(current.text);
if (product.options.length === 1) {
const unavailableVariants = [];
for (let j = 0; j < product.variants.length; j++) {
const variant = product.variants[j];
if (!variant.available) {
unavailableVariants.push(variant);
}
}
if (unavailableVariants.length > 0) {
const mutationCallback = function() {
const variantOptions = section.querySelectorAll('.single-option-selector option');
if (variantOptions.length > 0) {
for (let k = 0; k < unavailableVariants.length; k++) {
const unavailableVariant = unavailableVariants[k];
for (let l = 0; l < variantOptions.length; l++) {
const option = variantOptions[l];
if (unavailableVariant.title === option.value) {
option.setAttribute('disabled', 'disabled');
}
}
}
if (typeof observer === 'object' && typeof observer.disconnect === 'function') {
observer.disconnect();
}
}
}
const observer = new MutationObserver(mutationCallback);
const addToCartForm = document.querySelector('form[action*="/cart/add"]');
mutationCallback();
if (window.MutationObserver && addToCartForm.length) {
const config = { childList: true, subtree: true };
if (typeof observer === 'object' && typeof observer.disconnect === 'function') {
observer.disconnect();
}
observer.observe(addToCartForm, config);
}
}
}
}
}
});- Cliquez sur Save (Enregistrer).
Narrative
Les étapes de cette personnalisation varient selon que vous souhaitez masquer complètement les variantes épuisées ou simplement les désactiver. Cliquez sur le bouton correspondant à votre préférence avant de suivre les instructions ci-dessous :
Masquer les variantes épuisées
Suivez ces étapes pour appliquer la personnalisation à Narrative :
Depuis votre interface administrateur Shopify, accédez à Boutique en ligne > Thèmes.
Recherchez le thème que vous souhaitez modifier, cliquez sur le bouton … pour ouvrir le menu Actions, puis cliquez sur Modifier le code.
Dans l'application Shopify, appuyez sur Boutique.
Dans la section Canaux de vente, appuyez sur Boutique en ligne.
Appuyez sur Gérer les thèmes.
Recherchez le thème que vous souhaitez modifier, cliquez sur le bouton … pour ouvrir le menu Actions, puis cliquez sur Modifier le code.
Dans l'application Shopify, appuyez sur Boutique.
Dans la section Canaux de vente, appuyez sur Boutique en ligne.
Appuyez sur Gérer les thèmes.
Recherchez le thème que vous souhaitez modifier, cliquez sur le bouton … pour ouvrir le menu Actions, puis cliquez sur Modifier le code.
Dans le répertoire Assets (Ressources), cliquez sur
custom.js.Au bas du fichier, collez le code suivant :
document.addEventListener('DOMContentLoaded', function() {
const productJson = document.querySelectorAll('[data-product-json]');
if (productJson.length > 0) {
for (let i = 0; i < productJson.length; i++) {
const current = productJson[i];
const section = current.closest('[data-section-id]');
const product = JSON.parse(current.text);
if (product.options.length === 1) {
const unavailableVariants = [];
for (let j = 0; j < product.variants.length; j++) {
const variant = product.variants[j];
if (!variant.available) {
unavailableVariants.push(variant);
}
}
if (unavailableVariants.length > 0) {
const mutationCallback = function() {
const variantOptions = section.querySelectorAll('.single-option-selector option');
if (variantOptions.length > 0) {
for (let k = 0; k < unavailableVariants.length; k++) {
const unavailableVariant = unavailableVariants[k];
for (let l = 0; l < variantOptions.length; l++) {
const option = variantOptions[l];
if (unavailableVariant.title === option.value) {
option.remove();
}
}
}
if (typeof observer === 'object' && typeof observer.disconnect === 'function') {
observer.disconnect();
}
}
}
const observer = new MutationObserver(mutationCallback);
const addToCartForm = document.querySelector('form[action*="/cart/add"]');
mutationCallback();
if (window.MutationObserver && addToCartForm.length) {
const config = { childList: true, subtree: true };
if (typeof observer === 'object' && typeof observer.disconnect === 'function') {
observer.disconnect();
}
observer.observe(addToCartForm, config);
}
}
}
}
}
});- Cliquez sur Save (Enregistrer).
Désactiver les variantes épuisées
Suivez ces étapes pour appliquer la personnalisation à Narrative :
Depuis votre interface administrateur Shopify, accédez à Boutique en ligne > Thèmes.
Recherchez le thème que vous souhaitez modifier, cliquez sur le bouton … pour ouvrir le menu Actions, puis cliquez sur Modifier le code.
Dans l'application Shopify, appuyez sur Boutique.
Dans la section Canaux de vente, appuyez sur Boutique en ligne.
Appuyez sur Gérer les thèmes.
Recherchez le thème que vous souhaitez modifier, cliquez sur le bouton … pour ouvrir le menu Actions, puis cliquez sur Modifier le code.
Dans l'application Shopify, appuyez sur Boutique.
Dans la section Canaux de vente, appuyez sur Boutique en ligne.
Appuyez sur Gérer les thèmes.
Recherchez le thème que vous souhaitez modifier, cliquez sur le bouton … pour ouvrir le menu Actions, puis cliquez sur Modifier le code.
Dans le répertoire Ressources, cliquez sur
theme.jsoutheme.js.liquid.Au bas du fichier, collez le code suivant :
document.addEventListener('DOMContentLoaded', function() {
const productJson = document.querySelectorAll('[data-product-json]');
if (productJson.length > 0) {
for (let i = 0; i < productJson.length; i++) {
const current = productJson[i];
const section = current.closest('[data-section-id]');
const product = JSON.parse(current.text);
if (product.options.length === 1) {
const unavailableVariants = [];
for (let j = 0; j < product.variants.length; j++) {
const variant = product.variants[j];
if (!variant.available) {
unavailableVariants.push(variant);
}
}
if (unavailableVariants.length > 0) {
const mutationCallback = function() {
const variantOptions = section.querySelectorAll('.single-option-selector option');
if (variantOptions.length > 0) {
for (let k = 0; k < unavailableVariants.length; k++) {
const unavailableVariant = unavailableVariants[k];
for (let l = 0; l < variantOptions.length; l++) {
const option = variantOptions[l];
if (unavailableVariant.title === option.value) {
option.setAttribute('disabled', 'disabled');
}
}
}
if (typeof observer === 'object' && typeof observer.disconnect === 'function') {
observer.disconnect();
}
}
}
const observer = new MutationObserver(mutationCallback);
const addToCartForm = document.querySelector('form[action*="/cart/add"]');
mutationCallback();
if (window.MutationObserver && addToCartForm.length) {
const config = { childList: true, subtree: true };
if (typeof observer === 'object' && typeof observer.disconnect === 'function') {
observer.disconnect();
}
observer.observe(addToCartForm, config);
}
}
}
}
}
});- Cliquez sur Save (Enregistrer).
Simple
Les étapes de cette personnalisation varient selon que vous souhaitez masquer complètement les variantes épuisées ou simplement les désactiver. Cliquez sur le bouton correspondant à votre préférence avant de suivre les instructions ci-dessous :
Masquer les variantes épuisées
Suivez ces étapes pour appliquer la personnalisation à Simple :
Depuis votre interface administrateur Shopify, accédez à Boutique en ligne > Thèmes.
Recherchez le thème que vous souhaitez modifier, cliquez sur le bouton … pour ouvrir le menu Actions, puis cliquez sur Modifier le code.
Dans l'application Shopify, appuyez sur Boutique.
Dans la section Canaux de vente, appuyez sur Boutique en ligne.
Appuyez sur Gérer les thèmes.
Recherchez le thème que vous souhaitez modifier, cliquez sur le bouton … pour ouvrir le menu Actions, puis cliquez sur Modifier le code.
Dans l'application Shopify, appuyez sur Boutique.
Dans la section Canaux de vente, appuyez sur Boutique en ligne.
Appuyez sur Gérer les thèmes.
Recherchez le thème que vous souhaitez modifier, cliquez sur le bouton … pour ouvrir le menu Actions, puis cliquez sur Modifier le code.
Dans le répertoire Ressources, cliquez sur
theme.jsoutheme.js.liquid.Au bas du fichier, collez le code suivant :
document.addEventListener('DOMContentLoaded', function() {
const productJson = document.querySelectorAll('[id^=ProductJson-');
if (productJson.length > 0) {
for (let i = 0; i < productJson.length; i++) {
const current = productJson[i];
const sectionId = current.id.replace('ProductJson-', '');
const section = document.querySelector('[data-section-id="' + sectionId + '"]');
const product = JSON.parse(current.text);
if (product.options.length === 1) {
const unavailableVariants = [];
for (let j = 0; j < product.variants.length; j++) {
const variant = product.variants[j];
if (!variant.available) {
unavailableVariants.push(variant);
}
}
if (unavailableVariants.length > 0) {
const mutationCallback = function() {
const variantOptions = section.querySelectorAll('.single-option-selector option');
if (variantOptions.length > 0) {
for (let k = 0; k < unavailableVariants.length; k++) {
const unavailableVariant = unavailableVariants[k];
for (let l = 0; l < variantOptions.length; l++) {
const option = variantOptions[l];
if (unavailableVariant.title === option.value) {
option.remove();
}
}
}
if (typeof observer === 'object' && typeof observer.disconnect === 'function') {
observer.disconnect();
}
}
}
const observer = new MutationObserver(mutationCallback);
const addToCartForm = document.querySelector('form[action*="/cart/add"]');
mutationCallback();
if (window.MutationObserver && addToCartForm.length) {
const config = { childList: true, subtree: true };
if (typeof observer === 'object' && typeof observer.disconnect === 'function') {
observer.disconnect();
}
observer.observe(addToCartForm, config);
}
}
}
}
}
});- Cliquez sur Save (Enregistrer).
Désactiver les variantes épuisées
Suivez ces étapes pour appliquer la personnalisation à Simple :
Depuis votre interface administrateur Shopify, accédez à Boutique en ligne > Thèmes.
Recherchez le thème que vous souhaitez modifier, cliquez sur le bouton … pour ouvrir le menu Actions, puis cliquez sur Modifier le code.
Dans l'application Shopify, appuyez sur Boutique.
Dans la section Canaux de vente, appuyez sur Boutique en ligne.
Appuyez sur Gérer les thèmes.
Recherchez le thème que vous souhaitez modifier, cliquez sur le bouton … pour ouvrir le menu Actions, puis cliquez sur Modifier le code.
Dans l'application Shopify, appuyez sur Boutique.
Dans la section Canaux de vente, appuyez sur Boutique en ligne.
Appuyez sur Gérer les thèmes.
Recherchez le thème que vous souhaitez modifier, cliquez sur le bouton … pour ouvrir le menu Actions, puis cliquez sur Modifier le code.
Dans le répertoire Ressources, cliquez sur
theme.jsoutheme.js.liquid.Au bas du fichier, collez le code suivant :
document.addEventListener('DOMContentLoaded', function() {
const productJson = document.querySelectorAll('[id^=ProductJson-');
if (productJson.length > 0) {
for (let i = 0; i < productJson.length; i++) {
const current = productJson[i];
const sectionId = current.id.replace('ProductJson-', '');
const section = document.querySelector('[data-section-id="' + sectionId + '"]');
const product = JSON.parse(current.text);
if (product.options.length === 1) {
const unavailableVariants = [];
for (let j = 0; j < product.variants.length; j++) {
const variant = product.variants[j];
if (!variant.available) {
unavailableVariants.push(variant);
}
}
if (unavailableVariants.length > 0) {
const mutationCallback = function() {
const variantOptions = section.querySelectorAll('.single-option-selector option');
if (variantOptions.length > 0) {
for (let k = 0; k < unavailableVariants.length; k++) {
const unavailableVariant = unavailableVariants[k];
for (let l = 0; l < variantOptions.length; l++) {
const option = variantOptions[l];
if (unavailableVariant.title === option.value) {
option.setAttribute('disabled', 'disabled');
}
}
}
if (typeof observer === 'object' && typeof observer.disconnect === 'function') {
observer.disconnect();
}
}
}
const observer = new MutationObserver(mutationCallback);
const addToCartForm = document.querySelector('form[action*="/cart/add"]');
mutationCallback();
if (window.MutationObserver && addToCartForm.length) {
const config = { childList: true, subtree: true };
if (typeof observer === 'object' && typeof observer.disconnect === 'function') {
observer.disconnect();
}
observer.observe(addToCartForm, config);
}
}
}
}
}
});- Cliquez sur Save (Enregistrer).
Supply
Les étapes de cette personnalisation varient selon que vous souhaitez masquer complètement les variantes épuisées ou simplement les désactiver. Cliquez sur le bouton correspondant à votre préférence avant de suivre les instructions ci-dessous :
Masquer les variantes épuisées
Suivez ces étapes pour appliquer la personnalisation à Supply :
Depuis votre interface administrateur Shopify, accédez à Boutique en ligne > Thèmes.
Recherchez le thème que vous souhaitez modifier, cliquez sur le bouton … pour ouvrir le menu Actions, puis cliquez sur Modifier le code.
Dans l'application Shopify, appuyez sur Boutique.
Dans la section Canaux de vente, appuyez sur Boutique en ligne.
Appuyez sur Gérer les thèmes.
Recherchez le thème que vous souhaitez modifier, cliquez sur le bouton … pour ouvrir le menu Actions, puis cliquez sur Modifier le code.
Dans l'application Shopify, appuyez sur Boutique.
Dans la section Canaux de vente, appuyez sur Boutique en ligne.
Appuyez sur Gérer les thèmes.
Recherchez le thème que vous souhaitez modifier, cliquez sur le bouton … pour ouvrir le menu Actions, puis cliquez sur Modifier le code.
Dans le répertoire Ressources, cliquez sur
theme.jsoutheme.js.liquid.Au bas du fichier, collez le code suivant :
document.addEventListener('DOMContentLoaded', function() {
const productJson = document.querySelectorAll('[id^=ProductJson-');
if (productJson.length > 0) {
for (let i = 0; i < productJson.length; i++) {
const current = productJson[i];
const sectionId = current.id.replace('ProductJson-', '');
const section = document.querySelector('[data-section-id="' + sectionId + '"]');
const product = JSON.parse(current.text);
if (product.options.length === 1) {
const unavailableVariants = [];
for (let j = 0; j < product.variants.length; j++) {
const variant = product.variants[j];
if (!variant.available) {
unavailableVariants.push(variant);
}
}
if (unavailableVariants.length > 0) {
const mutationCallback = function() {
const variantOptions = section.querySelectorAll('.single-option-selector option');
if (variantOptions.length > 0) {
for (let k = 0; k < unavailableVariants.length; k++) {
const unavailableVariant = unavailableVariants[k];
for (let l = 0; l < variantOptions.length; l++) {
const option = variantOptions[l];
if (unavailableVariant.title === option.value) {
option.remove();
}
}
}
if (typeof observer === 'object' && typeof observer.disconnect === 'function') {
observer.disconnect();
}
}
}
const observer = new MutationObserver(mutationCallback);
const addToCartForm = document.querySelector('form[action*="/cart/add"]');
mutationCallback();
if (window.MutationObserver && addToCartForm.length) {
const config = { childList: true, subtree: true };
if (typeof observer === 'object' && typeof observer.disconnect === 'function') {
observer.disconnect();
}
observer.observe(addToCartForm, config);
}
}
}
}
}
});- Cliquez sur Save (Enregistrer).
Désactiver les variantes épuisées
Suivez ces étapes pour appliquer la personnalisation à Supply :
Depuis votre interface administrateur Shopify, accédez à Boutique en ligne > Thèmes.
Recherchez le thème que vous souhaitez modifier, cliquez sur le bouton … pour ouvrir le menu Actions, puis cliquez sur Modifier le code.
Dans l'application Shopify, appuyez sur Boutique.
Dans la section Canaux de vente, appuyez sur Boutique en ligne.
Appuyez sur Gérer les thèmes.
Recherchez le thème que vous souhaitez modifier, cliquez sur le bouton … pour ouvrir le menu Actions, puis cliquez sur Modifier le code.
Dans l'application Shopify, appuyez sur Boutique.
Dans la section Canaux de vente, appuyez sur Boutique en ligne.
Appuyez sur Gérer les thèmes.
Recherchez le thème que vous souhaitez modifier, cliquez sur le bouton … pour ouvrir le menu Actions, puis cliquez sur Modifier le code.
Dans le répertoire Ressources, cliquez sur
theme.jsoutheme.js.liquid.Au bas du fichier, collez le code suivant :
document.addEventListener('DOMContentLoaded', function() {
const productJson = document.querySelectorAll('[id^=ProductJson-');
if (productJson.length > 0) {
for (let i = 0; i < productJson.length; i++) {
const current = productJson[i];
const sectionId = current.id.replace('ProductJson-', '');
const section = document.querySelector('[data-section-id="' + sectionId + '"]');
const product = JSON.parse(current.text);
if (product.options.length === 1) {
const unavailableVariants = [];
for (let j = 0; j < product.variants.length; j++) {
const variant = product.variants[j];
if (!variant.available) {
unavailableVariants.push(variant);
}
}
if (unavailableVariants.length > 0) {
const mutationCallback = function() {
const variantOptions = section.querySelectorAll('.single-option-selector option');
if (variantOptions.length > 0) {
for (let k = 0; k < unavailableVariants.length; k++) {
const unavailableVariant = unavailableVariants[k];
for (let l = 0; l < variantOptions.length; l++) {
const option = variantOptions[l];
if (unavailableVariant.title === option.value) {
option.setAttribute('disabled', 'disabled');
}
}
}
if (typeof observer === 'object' && typeof observer.disconnect === 'function') {
observer.disconnect();
}
}
}
const observer = new MutationObserver(mutationCallback);
const addToCartForm = document.querySelector('form[action*="/cart/add"]');
mutationCallback();
if (window.MutationObserver && addToCartForm.length) {
const config = { childList: true, subtree: true };
if (typeof observer === 'object' && typeof observer.disconnect === 'function') {
observer.disconnect();
}
observer.observe(addToCartForm, config);
}
}
}
}
}
});- Cliquez sur Save (Enregistrer).
Venture
Les étapes de cette personnalisation varient selon que vous souhaitez masquer complètement les variantes épuisées ou simplement les désactiver. Cliquez sur le bouton correspondant à votre préférence avant de suivre les instructions ci-dessous :
Masquer les variantes épuisées
Suivez ces étapes pour appliquer la personnalisation à Venture :
Depuis votre interface administrateur Shopify, accédez à Boutique en ligne > Thèmes.
Recherchez le thème que vous souhaitez modifier, cliquez sur le bouton … pour ouvrir le menu Actions, puis cliquez sur Modifier le code.
Dans l'application Shopify, appuyez sur Boutique.
Dans la section Canaux de vente, appuyez sur Boutique en ligne.
Appuyez sur Gérer les thèmes.
Recherchez le thème que vous souhaitez modifier, cliquez sur le bouton … pour ouvrir le menu Actions, puis cliquez sur Modifier le code.
Dans l'application Shopify, appuyez sur Boutique.
Dans la section Canaux de vente, appuyez sur Boutique en ligne.
Appuyez sur Gérer les thèmes.
Recherchez le thème que vous souhaitez modifier, cliquez sur le bouton … pour ouvrir le menu Actions, puis cliquez sur Modifier le code.
Dans le répertoire Ressources, cliquez sur
theme.jsoutheme.js.liquid.Au bas du fichier, collez le code suivant :
document.addEventListener('DOMContentLoaded', function() {
const productJson = document.querySelectorAll('[id^=ProductJson-');
if (productJson.length > 0) {
for (let i = 0; i < productJson.length; i++) {
const current = productJson[i];
const sectionId = current.id.replace('ProductJson-', '');
const section = document.querySelector('[data-section-id="' + sectionId + '"]');
const product = JSON.parse(current.text);
if (product.options.length === 1) {
const unavailableVariants = [];
for (let j = 0; j < product.variants.length; j++) {
const variant = product.variants[j];
if (!variant.available) {
unavailableVariants.push(variant);
}
}
if (unavailableVariants.length > 0) {
const mutationCallback = function() {
const variantOptions = section.querySelectorAll('.single-option-selector option');
if (variantOptions.length > 0) {
for (let k = 0; k < unavailableVariants.length; k++) {
const unavailableVariant = unavailableVariants[k];
for (let l = 0; l < variantOptions.length; l++) {
const option = variantOptions[l];
if (unavailableVariant.title === option.value) {
option.remove();
}
}
}
if (typeof observer === 'object' && typeof observer.disconnect === 'function') {
observer.disconnect();
}
}
}
const observer = new MutationObserver(mutationCallback);
const addToCartForm = document.querySelector('form[action*="/cart/add"]');
mutationCallback();
if (window.MutationObserver && addToCartForm.length) {
const config = { childList: true, subtree: true };
if (typeof observer === 'object' && typeof observer.disconnect === 'function') {
observer.disconnect();
}
observer.observe(addToCartForm, config);
}
}
}
}
}
});- Cliquez sur Save (Enregistrer).
Désactiver les variantes épuisées
Suivez ces étapes pour appliquer la personnalisation à Venture :
Depuis votre interface administrateur Shopify, accédez à Boutique en ligne > Thèmes.
Recherchez le thème que vous souhaitez modifier, cliquez sur le bouton … pour ouvrir le menu Actions, puis cliquez sur Modifier le code.
Dans l'application Shopify, appuyez sur Boutique.
Dans la section Canaux de vente, appuyez sur Boutique en ligne.
Appuyez sur Gérer les thèmes.
Recherchez le thème que vous souhaitez modifier, cliquez sur le bouton … pour ouvrir le menu Actions, puis cliquez sur Modifier le code.
Dans l'application Shopify, appuyez sur Boutique.
Dans la section Canaux de vente, appuyez sur Boutique en ligne.
Appuyez sur Gérer les thèmes.
Recherchez le thème que vous souhaitez modifier, cliquez sur le bouton … pour ouvrir le menu Actions, puis cliquez sur Modifier le code.
Dans le répertoire Ressources, cliquez sur
theme.jsoutheme.js.liquid.Au bas du fichier, collez le code suivant :
document.addEventListener('DOMContentLoaded', function() {
const productJson = document.querySelectorAll('[id^=ProductJson-');
if (productJson.length > 0) {
for (let i = 0; i < productJson.length; i++) {
const current = productJson[i];
const sectionId = current.id.replace('ProductJson-', '');
const section = document.querySelector('[data-section-id="' + sectionId + '"]');
const product = JSON.parse(current.text);
if (product.options.length === 1) {
const unavailableVariants = [];
for (let j = 0; j < product.variants.length; j++) {
const variant = product.variants[j];
if (!variant.available) {
unavailableVariants.push(variant);
}
}
if (unavailableVariants.length > 0) {
const mutationCallback = function() {
const variantOptions = section.querySelectorAll('.single-option-selector option');
if (variantOptions.length > 0) {
for (let k = 0; k < unavailableVariants.length; k++) {
const unavailableVariant = unavailableVariants[k];
for (let l = 0; l < variantOptions.length; l++) {
const option = variantOptions[l];
if (unavailableVariant.title === option.value) {
option.setAttribute('disabled', 'disabled');
}
}
}
if (typeof observer === 'object' && typeof observer.disconnect === 'function') {
observer.disconnect();
}
}
}
const observer = new MutationObserver(mutationCallback);
const addToCartForm = document.querySelector('form[action*="/cart/add"]');
mutationCallback();
if (window.MutationObserver && addToCartForm.length) {
const config = { childList: true, subtree: true };
if (typeof observer === 'object' && typeof observer.disconnect === 'function') {
observer.disconnect();
}
observer.observe(addToCartForm, config);
}
}
}
}
}
});- Cliquez sur Save (Enregistrer).
Masquer les variantes épuisées
Si vous utilisez un thème sans section, vous pouvez suivre les étapes ci-après pour masquer les variantes épuisées sur la page de produit.
Depuis votre interface administrateur Shopify, accédez à Boutique en ligne > Thèmes.
Recherchez le thème que vous souhaitez modifier, cliquez sur le bouton … pour ouvrir le menu Actions, puis cliquez sur Modifier le code.
Dans l'application Shopify, appuyez sur Boutique.
Dans la section Canaux de vente, appuyez sur Boutique en ligne.
Appuyez sur Gérer les thèmes.
Recherchez le thème que vous souhaitez modifier, cliquez sur le bouton … pour ouvrir le menu Actions, puis cliquez sur Modifier le code.
Dans l'application Shopify, appuyez sur Boutique.
Dans la section Canaux de vente, appuyez sur Boutique en ligne.
Appuyez sur Gérer les thèmes.
Recherchez le thème que vous souhaitez modifier, cliquez sur le bouton … pour ouvrir le menu Actions, puis cliquez sur Modifier le code.
Dans le répertoire Snippets (Extraits), cliquez sur Ajouter un nouveau snippet (Ajouter un nouvel extrait).
Nommez votre nouvel extrait
remove-sold-out:
- Dans votre nouveau fichier d’extrait, collez le code suivant :
{% if product.options.size == 1 %}
<script>
const addToCartForm = document.querySelector('form[action="/cart/add"]');
if (window.MutationObserver && addToCartForm !== null) {
if (typeof observer === 'object' && typeof observer.disconnect === 'function') {
observer.disconnect();
}
var config = { childList: true, subtree: true };
var observer = new MutationObserver(function() {
let variantOptions = Array.from(document.querySelectorAll('.single-option-selector option'));
{% for variant in product.variants %}
{% unless variant.available %}
variantOptions.forEach(function(element) {
if (element.value === {{ variant.title | json }}) {
element.remove();
}
});
{% endunless %}
{% endfor %}
observer.disconnect();
});
observer.observe(addToCartForm, config);
}
</script>
{% endif %}Cliquez sur Save (Enregistrer).
Dans le répertoire Mise en page, cliquez sur
theme.liquid.Vers la fin du fichier, juste avant la balise de fermeture
</body>, collez le code suivant :
{% render 'remove-sold-out' %}- Cliquez sur Save (Enregistrer).
Désactiver les variantes épuisées
Si vous utilisez un thème sans section, vous pouvez suivre les étapes ci-après pour désactiver les variantes épuisées. Celles-ci continueront de s’afficher sur la page de produit, mais elles ne pourront pas être sélectionnées.
Depuis votre interface administrateur Shopify, accédez à Boutique en ligne > Thèmes.
Recherchez le thème que vous souhaitez modifier, cliquez sur le bouton … pour ouvrir le menu Actions, puis cliquez sur Modifier le code.
Dans l'application Shopify, appuyez sur Boutique.
Dans la section Canaux de vente, appuyez sur Boutique en ligne.
Appuyez sur Gérer les thèmes.
Recherchez le thème que vous souhaitez modifier, cliquez sur le bouton … pour ouvrir le menu Actions, puis cliquez sur Modifier le code.
Dans l'application Shopify, appuyez sur Boutique.
Dans la section Canaux de vente, appuyez sur Boutique en ligne.
Appuyez sur Gérer les thèmes.
Recherchez le thème que vous souhaitez modifier, cliquez sur le bouton … pour ouvrir le menu Actions, puis cliquez sur Modifier le code.
Dans le répertoire Snippets (Extraits), cliquez sur Ajouter un nouveau snippet (Ajouter un nouvel extrait).
Nommez votre nouvel extrait
disable-sold-out:Dans votre nouveau fichier d’extrait, collez le code suivant :
{% if product.options.size == 1 %}
<script>
const addToCartForm = document.querySelector('form[action="/cart/add"]');
if (window.MutationObserver && addToCartForm !== null) {
if (typeof observer === 'object' && typeof observer.disconnect === 'function') {
observer.disconnect();
}
var config = { childList: true, subtree: true };
var observer = new MutationObserver(function() {
let variantOptions = Array.from(document.querySelectorAll('.single-option-selector option'));
{% for variant in product.variants %}
{% unless variant.available %}
variantOptions.forEach(function(element) {
if (element.value === {{ variant.title | json }}) {
element.setAttribute('disabled', '');
}
});
{% endunless %}
{% endfor %}
observer.disconnect();
});
observer.observe(addToCartForm, config);
}
</script>
{% endif %}Cliquez sur Save (Enregistrer).
Dans le répertoire Mise en page, cliquez sur
theme.liquid.Vers la fin du fichier, juste avant la balise de fermeture
</body>, collez le code suivant :
{% render 'disable-sold-out' %}- Cliquez sur Save (Enregistrer).