Cette page a été imprimée le Mar 20, 2023. Pour la dernière version, allez à https://help.shopify.com/fr/manual/online-store/themes/themes-by-shopify/vintage-themes/customizing-vintage-themes/add-pick-an-option.
Lorsqu’un client visite une page de produit dans votre boutique en ligne, la première variante disponible est sélectionnée par défaut. Vous pouvez utiliser cette personnalisation pour désactiver la sélection automatique de la première variante disponible. Ainsi, le client sera invité à sélectionner manuellement une variante avant qu’une autre ne s’affiche. )
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.js ou theme.js.liquid.
Recherchez le code initVariantSelectors. En dessous, recherchez le code suivant :
// Clean up variant labels if the Shopify-defined// defaults are the only ones leftthis.simplifyVariantLabels(this.productSingleObject,this.$container);
Add the following code on a new line below:
if (typeof(productOptions)!="undefined"){for (i=0;i<productOptions.length;i++){constvowels=['a','e','i','o','u'];constfirstOptionLetter=productOptions[i][i][0].toLowerCase();letindef='a';if (vowels.includes(firstOptionLetter)){indef='an';};constselect=document.querySelectorAll('.single-option-selector')[i];constoptions=select.querySelectorAll('option');if (options.length>1){letoption=newOption('Pick '+indef+''+productOptions[i][i],'');select.add(option,select.firstChild);select.selectedIndex=0;}}}
It should look something like this:
// Clean up variant labels if the Shopify-defined// defaults are the only ones leftthis.simplifyVariantLabels(this.productSingleObject,this.$container);if (typeof(productOptions)!="undefined"){for (i=0;i<productOptions.length;i++){constvowels=['a','e','i','o','u'];constfirstOptionLetter=productOptions[i][i][0].toLowerCase();letindef='a';if (vowels.includes(firstOptionLetter)){indef='an';};constselect=document.querySelectorAll('.single-option-selector')[i];constoptions=select.querySelectorAll('option');if (options.length>1){letoption=newOption('Pick '+indef+''+productOptions[i][i],'');select.add(option,select.firstChild);select.selectedIndex=0;}}}
There are *two instances* of this line of code, both found within the `productVariantCallback` function. Replace only the *second* instance with:
$(selectors.addToCartText).html('Make a Selection');
> Note:
> Some versions of Boundless do not include the line of code to be replaced in this step. If you can't find the code, then skip to the next step.
Cliquez sur Save (Enregistrer).
Modification du modèle de la page de produits
Pour modifier le modèle de la page de produits :
Dans le répertoire Sections, cliquez sur product-template.liquid.
Modification des paramètres de langue du bouton Ajouter au panier
Vous pouvez modifier les paramètres de langue du bouton Ajout au panier afin que les produits n'apparaissent pas comme « Indisponibles » avant que la sélection ne soit faite.
Recherchez le code _updatePrice: function(variant). Remplacez le code suivant :
if (variant.price===this.currentVariant.price&&variant.compare_at_price===this.currentVariant.compare_at_price&&variant.unit_price===this.currentVariant.unit_price){return;}
> Note:
> Some versions of Debut do not include the code to be replaced in this step. If you can't find the code, then skip to the next step.
Modification des paramètres de langue du bouton Ajouter au panier
Vous pouvez modifier les paramètres de langue du bouton Ajout au panier afin que les produits n'apparaissent pas comme « Indisponibles » avant que la sélection ne soit faite.
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.js ou theme.js.liquid.
Recherchez le code initProductVariant: function() {. En dessous, recherchez le code suivant :
// Hide selectors if we only have 1 variant and its title contains 'Default'.if (product.variants.length===1&&product.variants[0].title.toLowerCase().indexOf('default')!==-1){$('.selector-wrapper',this.$container).hide();}
Add the following code on a new line below:
if (typeof(productOptions)!="undefined"){for (i=0;i<productOptions.length;i++){constvowels=['a','e','i','o','u'];constfirstOptionLetter=productOptions[i][i][0].toLowerCase();letindef='a';if (vowels.includes(firstOptionLetter)){indef='an';};constselect=document.querySelectorAll('.single-option-selector')[i];constoptions=select.querySelectorAll('option');if (options.length>1){letoption=newOption('Pick '+indef+''+productOptions[i][i],'');select.add(option,select.firstChild);select.selectedIndex=0;}}}
It should look something like this:
// Hide selectors if we only have 1 variant and its title contains 'Default'.if (product.variants.length===1&&product.variants[0].title.toLowerCase().indexOf('default')!==-1){$('.selector-wrapper',this.$container).hide();}if (typeof(productOptions)!="undefined"){for (i=0;i<productOptions.length;i++){constvowels=['a','e','i','o','u'];constfirstOptionLetter=productOptions[i][i][0].toLowerCase();letindef='a';if (vowels.includes(firstOptionLetter)){indef='an';};constselect=document.querySelectorAll('.single-option-selector')[i];constoptions=select.querySelectorAll('option');if (options.length>1){letoption=newOption('Pick '+indef+''+productOptions[i][i],'');select.add(option,select.firstChild);select.selectedIndex=0;}}}
Cliquez sur Save (Enregistrer).
Modification du modèle de la page de produit
Pour modifier le modèle de la page de produits :
Dans le répertoire Sections, cliquez sur product-template.liquid.
Modification des paramètres de langue du bouton Ajouter au panier
Vous pouvez modifier les paramètres de langue du bouton Ajout au panier afin que les produits n'apparaissent pas comme « Indisponibles » avant que la sélection ne soit faite.
Modification des paramètres de langue du bouton Ajouter au panier
Vous pouvez modifier les paramètres de langue du bouton Ajout au panier afin que les produits n'apparaissent pas comme « Indisponibles » avant que la sélection ne soit faite.
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.js ou theme.js.liquid.
Recherchez le code initProductVariant: function() {. En dessous, recherchez le code suivant :
// Clean up variant labels if the Shopify-defined// defaults are the only ones leftSlate.simplifyVariantLabels(this.productSingleObject,this.$container);
Add the following code on a new line below:
if (typeof(productOptions)!="undefined"){for (i=0;i<productOptions.length;i++){constvowels=['a','e','i','o','u'];constfirstOptionLetter=productOptions[i][i][0].toLowerCase();letindef='a';if (vowels.includes(firstOptionLetter)){indef='an';};constselect=document.querySelectorAll('.single-option-selector')[i];constoptions=select.querySelectorAll('option');if (options.length>1){letoption=newOption('Pick '+indef+''+productOptions[i][i],'');select.add(option,select.firstChild);select.selectedIndex=0;}}}
It should look something like this:
// Clean up variant labels if the Shopify-defined// defaults are the only ones leftSlate.simplifyVariantLabels(this.productSingleObject,this.$container);if (typeof(productOptions)!="undefined"){for (i=0;i<productOptions.length;i++){constvowels=['a','e','i','o','u'];constfirstOptionLetter=productOptions[i][i][0].toLowerCase();letindef='a';if (vowels.includes(firstOptionLetter)){indef='an';};constselect=document.querySelectorAll('.single-option-selector')[i];constoptions=select.querySelectorAll('option');if (options.length>1){letoption=newOption('Pick '+indef+''+productOptions[i][i],'');select.add(option,select.firstChild);select.selectedIndex=0;}}}
Cliquez sur Save (Enregistrer).
Modification du modèle de la page de produits
Pour modifier le modèle de la page de produits :
Dans le répertoire Sections, cliquez sur product-template.liquid.
Modification des paramètres de langue du bouton Ajouter au panier
Vous pouvez modifier les paramètres de langue du bouton Ajout au panier afin que les produits n'apparaissent pas comme « Indisponibles » avant que la sélection ne soit faite.
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.js ou theme.js.liquid.
Recherchez le code initProductVariant: function() {. En dessous, recherchez le code suivant :
// Clean up variant labels if the Shopify-defined// defaults are the only ones leftthis.simplifyVariantLabels(this.productSingleObject);
Add the following code on a new line below:
if (typeof(productOptions)!="undefined"){for (i=0;i<productOptions.length;i++){constvowels=['a','e','i','o','u'];constfirstOptionLetter=productOptions[i][i][0].toLowerCase();letindef='a';if (vowels.includes(firstOptionLetter)){indef='an';};constselect=document.querySelectorAll('.single-option-selector')[i];constoptions=select.querySelectorAll('option');if (options.length>1){letoption=newOption('Pick '+indef+''+productOptions[i][i],'');select.add(option,select.firstChild);select.selectedIndex=0;}}}
It should look something like this:
// Clean up variant labels if the Shopify-defined// defaults are the only ones leftthis.simplifyVariantLabels(this.productSingleObject);if (typeof(productOptions)!="undefined"){for (i=0;i<productOptions.length;i++){constvowels=['a','e','i','o','u'];constfirstOptionLetter=productOptions[i][i][0].toLowerCase();letindef='a';if (vowels.includes(firstOptionLetter)){indef='an';};constselect=document.querySelectorAll('.single-option-selector')[i];constoptions=select.querySelectorAll('option');if (options.length>1){letoption=newOption('Pick '+indef+''+productOptions[i][i],'');select.add(option,select.firstChild);select.selectedIndex=0;}}}
Cliquez sur Save (Enregistrer).
Modification du modèle de la page de produits
Pour modifier le modèle de la page de produits :
Dans le répertoire Sections, cliquez sur product-template.liquid.
Modification des paramètres de langue du bouton Ajouter au panier
Vous pouvez modifier les paramètres de langue du bouton Ajout au panier afin que les produits n'apparaissent pas comme « Indisponibles » avant que la sélection ne soit faite.
Modification des paramètres de langue du bouton Ajouter au panier
Vous pouvez modifier les paramètres de langue du bouton Ajout au panier afin que les produits n'apparaissent pas comme « Indisponibles » avant que la sélection ne soit faite.
Dans le répertoire Mise en page, cliquez sur theme.liquid.
Recherchez la balise de fermeture </body> près du bas du fichier. Sur une nouvelle ligne juste au-dessus de la balise de fermeture </body>, collez le code suivant :
{%render'pick-an-option'%}
Cliquez sur Save (Enregistrer).
Recherchez le fichier qui contient le formulaire d'ajout au panier. Il aura un attribut action défini sur /cart/add.
Modification des paramètres de langue du bouton Ajouter au panier
Vous pouvez modifier les paramètres de langue du bouton Ajout au panier afin que les produits n'apparaissent pas comme « Indisponibles » avant que la sélection ne soit faite.