FAQ sur BigCommerce

Si j'utilise un thème personnalisé, où puis-je trouver l'ID du sélecteur pour la messagerie promotionnelle de la page du produit et du panier?

Pour les thèmes personnalisés, nous avons besoin d'un ID du sélecteur ,afin que la messagerie promotionnelle Affirm puissent être facilement ajoutés aux pages du produit et du panier. Vous pouvez utiliser un ID du sélecteur existant ou un nom de classe disponible dans vos fichiers de thème. Pour trouver l'ID du sélecteur, cliquez avec le bouton droit sur le prix dans un navigateur Chrome et sélectionnez Inspecter.

Right-click on the price and select Inspect again so that the inspector focuses on the price element. You will see something similar to the example below.

475 — In this example, you would copy over `price price--withoutTax` into the **Selector ID** field. It is important to note, if there are any spaces in the class name, such as `price price` replace any spaces with “.” so the final text in the *Selector ID* field should read: `price.price--withoutTax`.

Alternatively, you can go to Storefront > My Themes and under Advanced Options, click Edit HTML/CSS, and search for product and cart related templates. Usually, the naming format for these files are product-view.html, product.html, cart.html, cart-view.html, etc. Use any existing class name or ID after which you want to add the promotional messaging. For the example below, productView-price is what should be used as the Selector ID:

*<div class="productView-price">\
    ......\
    .....\
</div>*

If none of the existing classes or IDs from the product/cart templates are working, you can also add another div in your template right under the product or cart-price and use this ID, customAffirmPromoContainer, as the Selector ID. Ex: <div id="customAffirmPromoContainer"></div>

Prix de la page produit

Si la sélection de la variante d'un produit modifie le prix total du produit et que le message marketing Affirm n'est pas mis à jour en conséquence, vous devrez utiliser les paramètres Product Page Price et Product Page Options . Les deux options sont disponibles en cliquant avec le bouton droit et en inspectant les éléments respectifs sur la page du produit.

Pour trouver le champ ID du prix de la page de produit, cliquez avec le bouton droit sur le prix total de l'article sur la page du produit et cliquez sur Inspecter comme pour trouver l'ID du sélecteur. Faites un clic droit sur le prix total de l'article et cliquez à nouveau sur Inspecter pour le centrer.

The text in the following image is the code responsible for changing the price, in this case, the class we want copy over is the same as the Selector ID (price price--withoutTax” as this is the “class” the Price element is located in.

Copy the class name and paste into the Product Page Price ID field. Similar to the Selector ID, replace any spaces with “.” - the final text in the Product Page Price ID field should read: price.price--withoutTax.

Options de la page produit

Pour trouver le Product Page Options ID, nous suivrons le même processus d'inspection de l'élément de la page. Faites un clic droit et inspectez l'une de vos options qui modifiera le prix. Dans l'exemple ci-dessous, car les options sont sélectionnées dans un menu déroulant, nous inspectons le menu qui indique Choisir des options .

Cliquez avec le bouton droit sur le menu déroulant et cliquez à nouveau sur Inspecter pour le centrer. Dans cet exemple, vous pouvez voir qu'il existe plusieurs options qui modifieront le prix, comme Ajouter un emballage de filtre/préfiltre ou Ajouter un filtre à air de remplacement.

664 — In this example, we will select `form-field` because the price is followed by the `</div>` element which means that you would want to use the class that is followed by `<div>`.

Copy the class name and paste into the Product Page Options ID field, so it will read form-field. The filled-out sections should look like the following: