Zapiet - Options du Produit propose deux blocs d'application : le bloc d'application d'options du produit pour la page produit et le bloc d'application de la page du panier pour la page du panier.

Le bloc d'application d'options du produit doit être activé pour que notre application fonctionne correctement.

Le bloc d'application de la page du panier est facultatif et nécessite des modifications supplémentaires dans le fichier de thème pour fonctionner comme prévu.

Exigences

Pour activer le bloc d'application, vous devez avoir l'autorisation de gérer les applications auprès du propriétaire du magasin.
Pour activer le bloc d'application, vous devez utiliser un thème de la Boutique en ligne 2.0. Nous ne supportons pas les anciens thèmes.

Activer le bloc d'application d'options du produit

Le bloc d’applications d’options du produit permettra à vos clients de sélectionner des options sur les pages produits de votre boutique.

Dans Zapiet - Options du Produit, cliquez sur Paramètres.
Dans la section Thèmes, sélectionnez le thème que vous souhaitez modifier.
- Nous vous recommandons d'activer d'abord notre application sur un thème dupliqué.
Dans la section Bloc d’application Options du produit, cliquez sur Activer.
Cela ouvrira les paramètres de Personnalisation de votre thème et activera le blocage de l'application.
Vous pouvez modifier l'emplacement du bloc d'application en fonction des besoins de votre entreprise.
Cliquez sur Enregistrer.

Le bloc d’application des options du produit sera désormais visible sur votre boutique. Avant de tester, assurez-vous d'avoir créé à la fois des options et des ensembles d'options.

Si vous avez activé le bloc d'application sur un thème dupliqué, publiez le thème après le test afin que vos clients puissent sélectionner les options du produit sur votre boutique.

Activer le bloc d'application de la page du panier

Le bloc d'application de la page du panier permettra à vos clients de modifier les options qu'ils ont sélectionnées directement sur la page du panier.

Dans Zapiet - Options du Produit, cliquez sur Paramètres.
Dans la section Thèmes, sélectionnez le thème que vous souhaitez modifier.
- Nous vous recommandons d'activer d'abord notre application sur un thème dupliqué.
Dans la section Bloc d'application de la page du panier, cliquez sur Activer.
Cela ouvrira les paramètres de Personnalisation de votre thème et activera l'intégration de l'application.
Cliquez sur Enregistrer.

Après avoir activé l'intégration de l'application, vous devez modifier le code dans votre thème.

Modifiez votre thème

Si vous n'êtes pas à l'aise avec la modification du code, veuillez nous le faire savoir sur le chat en direct et nous serons heureux de vous aider !

Accédez à Boutique en ligne > Thèmes, développez le menu du thème que vous souhaitez modifier, puis cliquez sur Modifier le code.
Ouvrez le fichier liquid de la page du panier.
- Généralement, les fichiers liés au panier se trouvent dans : templates (par exemple, cart.liquid), sections (par exemple, cart-template.liquid) ou snippets pour des extraits de code réutilisables liés au panier (par exemple, cart-item.liquid). .

Recherchez cet extrait dans le code.

{%- for property in item.properties -%}
{%- assign property_first_char = property.first | slice: 0 -%}
{%- if property.last != blank and property_first_char != '_' -%}
<div class="product-option">
<dt>{{ property.first }}: </dt>
<dd>
{%- if property.last contains '/uploads/' -%}
<a href="{{ property.last }}" class="link" target="_blank">
{{ property.last | split: '/' | last }}
</a>
{%- else -%}
{{ property.last }}
{%- endif -%}
</dd>
</div>
{%- endif -%}
{%- endfor -%}

Ajoutez cette ligne de code ci-dessous pour créer une nouvelle classe.

<div class ="edit-cart-options-button-container" id="{{ item.id }} </div>

Ouvrez le dossier liquid du panier tiroir.
- Recherchez dans sections ou snippets pour les fichiers qui pourraient être liés au panier tiroir. Les noms de fichiers courants incluent : cart-drawer.liquid, cart.liquid, drawer-cart.liquid, mini-cart.liquid.

Recherchez cet extrait dans le code.

{%- for property in item.properties -%}
{%- assign property_first_char = property.first | slice: 0 -%}
{%- if property.last != blank and property_first_char != '_' -%}
<div class="product-option">
<dt>{{ property.first }}: </dt>
<dd>
{%- if property.last contains '/uploads/' -%}
<a href="{{ property.last }}" class="link" target="_blank" aria-describedby="a11y-new-window-message">
{{ property.last | split: '/' | last }}
</a>
{%- else -%}
{{ property.last }}
{%- endif -%}
</dd>
</div>
{%- endif -%}
{%- endfor -%}

Ajoutez cette ligne de code ci-dessous pour créer une nouvelle classe.

<div class ="edit-cart-options-button-container" id="{{ item.id }}" </div>

Cliquez sur Enregistrer.

Vos clients pourront désormais modifier les options qu'ils ont sélectionnées directement sur la page du panier.

Si quelque chose s'est mal passé et que vous ne pouvez pas modifier les options sélectionnées sur la page du panier, veuillez nous le faire savoir sur le chat en direct!

Remarques

Si vous utilisez un thème gratuit de la boutique de thèmes Shopify, vous devrez probablement ajouter le code à la ligne 159 du fichier main-cart-item.liquid et à la ligne 206 du fichiercart-drawer.liquid.