Pour qu'izyBundle fonctionne sur votre boutique, votre thème actif doit être modifié. Suivez ce guide pour modifier votre thème.

Étape 1 : Trouvez votre thème

Pour commencer, rendez-vous dans la section "Online Store" de votre tableau de bord Shopify :

La liste de tous vos thème s'affichera.

Cliquez sur le bouton "Actions" puis sur "Edit code" :

L’éditeur de code de votre thème s'affichera.

Étape 2 : Créez un nouveau snippet

Sur la gauche, descendez vers le bas pour trouver le dossier "Snippets" et cliquez sur "Add a new snippet".

Donnez le nom suivant au snippet :

izybundle-generator.liquid

et collez le contenu suivant à l’intérieur :

<script async src="//izybundle.izysuite.com/api/widget/shop={{ shop.permanent_domain }}&product_id={{ product.id }}"></script>
<div class="izy-bundle" data-product-id="{{ product.id }}"></div>

puis cliquez sur "Save" pour sauvegarder le ficher :

Étape 3: Mettre à jour les templates de vos produits 

Dans les dossiers "Templates" et "Sections", trouvez tous les fichiers contenant le terme "product".

Dans chaque fichier, trouvez un formulaire HTML (ou Liquid) ajoutant des produits au panier, et après la balise de fermeture (qui peut être </form>  ou {% endform %} insérez le code suivant :

{%- unless bundle_loaded == 'true' -%}
{%- include 'izybundle-generator' -%}
{%- assign bundle_loaded = 'true' -%}
{%- endunless -%}

puis sauvegardez les modifications :

Étape 4: Mettre à jour les templates de votre panier

Trouvez les templates de la page du panier dans les dossiers "Templates" ou "Sections".

Note: Si votre thème utilise le panier à l’intérieur du header, effectuez les mêmes changements dans le fichier header.liquid.

Trouvez le code similaire à {% for p in item.properties %} et ajoutez le code suivant  AU DÉBUT :

<span data-item-id="{{ item.id }}" data-bundle-id="{{ item.properties._izybundle_full_bundle.bundle_id  }}" class="izybundle-hook-DO-NOT-DELETE izybundle_cart_item_properties" style="display:none !important;"></span>

et À LA FIN :

{%- if p.first.first == '_' -%}{%- continue -%}{%- endif -%}

Note: Si vous utilisez le theme Fastlane, vous devez trouver le code suivant dans le fichier  snippets/header-shopping-cart.liquid :

<div class="header-cart-item-options" data-header-cart-options>

et ajoutez ce code :

<span data-item-id="{{ item.id }}" data-bundle-id="{{ item.properties._izybundle_full_bundle.bundle_id  }}" class="izybundle-hook-DO-NOT-DELETE izybundle_cart_item_properties" style="display:none !important;"></span>

AU DÉBUT .

Trouvez toutes les occurrences du code {{ item.price | money }} .
Note: Ne rien remplacer si item.price  est utilisé à l'intérieur d'une construction logique, comme if , unless , elseif .

Juste AU DÉBUT du code, insérez le code suivant :

<span class="izybundle-hook-DO-NOT-DELETE izybundle_cart_item_price" style="display:none !important;"></span>

Trouvez toutes les occurrences du code {{ item.line_price | money }} .
Note: Ne rien remplacer si item.line_price  est utilisé à l'intérieur d'une construction logique, comme if , unless , elseif

Juste AU DÉBUT du code, insérez le code suivant :

<span class="izybundle-hook-DO-NOT-DELETE izybundle_cart_item_total" style="display:none !important;"></span>

Trouvez toutes les occurrences du code {{ cart.total_price | money }}
Note: Ne rien remplacer si cart.total_price  est utilisé à l'intérieur d'une construction logique, comme if , unless , elseif , assign .

(Optionnelle) Étape 5 : Mettre à jour votre panier Ajax

Si vous utilisez les thèmes "Brooklyn" ou "Boundless" vous devez modifier le fichier : 

assets/theme.js.liquid

Trouvez la fonction appelée buildCart et ajoutez le code suivant APRÈS l'ouverture d'accolades :

if(typeof window.IZY_HELPER !== 'undefined' && typeof window.IZY_HELPER.fixCart !== 'undefined') {cart = window.IZY_HELPER.fixCart(cart);}

Voilà ! Vous pouvez maintenant utiliser izyBundle à 100%.
Note: N'oubliez pas de marquer votre thème comme "Modifié" dans izyBundle :

Did this answer your question?