Afficher des recommandations de produits sur la page de produit

Attention

Il s’agit d’un tutoriel avancé, qui n’est pas pris en charge par Shopify. La connaissance des langages de design web tels que HTML, CSS, JavaScript et Liquid est requise. Si vous avez besoin d’aide, vous pouvez engager un(e) Partenaire Shopify.

Attention

Les thèmes vintage ne sont pas disponibles dans Theme Store. Les thèmes vintage ne disposent pas des fonctionnalités incluses dans les thèmes Online Store 2.0 de Shopify, et les thèmes vintage gratuits de Shopify ne reçoivent pas d’autres mises à jour, à l’exception des correctifs de sécurité.

Remarque

Cette personnalisation est faite pour les thèmes vintage de Shopify, et ne s’applique pas aux thèmes Online Store 2.0.

• Découvrez la version de l'architecture de votre thème
• Explorez les personnalisations de thème Online Store 2.0

Ce tutoriel explique comment ajouter des recommandations de produits à votre page de produit dans le thème Debut. Pour en savoir plus sur le fonctionnement des recommandations de produits, voir Affichage des recommandations de produits sur les pages de produit.

Étape 1 : créer une section product-recommendations.liquid

Bureau

1. Dans l'interface administrateur Shopify, accédez à Boutique en ligne > Thèmes.
2. Recherchez le thème que vous souhaitez modifier, cliquez sur le bouton … pour ouvrir le menu Actions, puis cliquez sur Modifier le code.
3. Dans le répertoire Sections, cliquez sur Ajouter une nouvelle section.
4. Nommez la nouvelle section product-recommendations et cliquez sur Créer la section.
5. Remplacez la totalité du contenu par le code ci-dessous :

{% assign limit = 4 %}
<div class="page-width product-recommendations" data-base-url="{{ routes.product_recommendations_url }}" data-product-id="{{ product.id }}" data-limit="{{ limit }}" data-section-id="{{ section.id }}" data-section-type="product-recommendations" data-intent="related">
  {% if recommendations.performed %}
    {% if recommendations.products_count > 0 %}
      <div class="section-header text-center">
        {% if recommendations.intent == 'related' %}
          <h2> You may also like</h2>
        {% elsif recommendations.intent == 'complementary' %}
          <h2>Pair it with</h2>
        {% endif %}
      </div>
      <ul class="grid grid--uniform grid--view-items">
        {% for product in recommendations.products %}
          <li class="grid__item small--one-half medium-up--one-quarter">
            {% include 'product-card-grid', max_height: 250 %}
          </li>
        {% endfor %}
      </ul>
    {% endif %}
  {% else %}
    <div class="product-recommendations__loading-dots">
      <div class="product-recommendations__loading-dot"></div>
      <div class="product-recommendations__loading-dot"></div>
      <div class="product-recommendations__loading-dot"></div>
    </div>
  {% endif %}
</div>

1. Cliquez sur Save (Enregistrer).

Une fois la section restituée avec la page de produit, recommendations.performed sera false, de sorte que le code HTML généré affichera une animation de chargement en cours :

<div class="page-width product-recommendations" data-base-url="/recommendations/products" data-product-id="123" data-limit="4" data-section-id="product-recommendations" data-section-type="product-recommendations" data-intent="related">
  <div class="product-recommendations__loading-dots">
    <div class="product-recommendations__loading-dot"></div>
    <div class="product-recommendations__loading-dot"></div>
    <div class="product-recommendations__loading-dot"></div>
  </div>
</div>

Remarque

Les produits recommandés doivent être chargés de manière asynchrone en utilisant JavaScript. Vous les chargerez à l’étape 3 : modifier votre fichier theme.js pour charger les recommandations de manière asynchrone.

Si vous ne souhaitez pas afficher d’animation de chargement en cours, utilisez le code suivant à la place :

{% assign limit = 4 %}
<div class="page-width product-recommendations" data-base-url="{{ routes.product_recommendations_url }}" data-product-id="{{ product.id }}" data-limit="{{ limit }}" data-section-id="{{ section.id }}" data-section-type="product-recommendations" data-intent="related">
  {% if recommendations.products_count > 0 %}
    <div class="section-header text-center">
      {% if recommendations.intent == 'related' %}
          <h2> You may also like</h2>
      {% elsif recommendations.intent == 'complementary' %}
          <h2>Pair it with</h2>
        {% endif %}
    </div>
    <ul class="grid grid--uniform grid--view-items">
      {% for product in recommendations.products %}
        <li class="grid__item small--one-half medium-up--one-quarter">
          {% include 'product-card-grid', max_height: 250 %}
        </li>
      {% endfor %}
    </ul>
  {% endif %}
</div>

Une fois la section ci-dessus restituée avec votre page de produit, le code HTML généré sera un élément div sans contenu :

<div class="page-width product-recommendations" data-base-url="/recommendations/products" data-product-id="123" data-limit="4" data-section-id="product-recommendations" data-section-type="product-recommendations" data-intent="related">

Si l’utilisateur emploie un autre paramètre régional, celui-ci est inclus dans le paramètre de la balise div data-base-url. Par exemple : /fr/recommendations/products.

iPhone

1. Dans l’application Shopify, appuyez sur le bouton …
2. Dans la section Canaux de vente, appuyez sur Online Store (Boutique en ligne).
3. Appuyez sur Manage themes (Gérer les thèmes).
4. Recherchez le thème que vous souhaitez modifier, cliquez sur le bouton … pour ouvrir le menu Actions, puis cliquez sur Modifier le code.
5. Dans le répertoire Sections, cliquez sur Ajouter une nouvelle section.
6. Nommez la nouvelle section product-recommendations et cliquez sur Créer la section.
7. Remplacez la totalité du contenu par le code ci-dessous :

{% assign limit = 4 %}
<div class="page-width product-recommendations" data-base-url="{{ routes.product_recommendations_url }}" data-product-id="{{ product.id }}" data-limit="{{ limit }}" data-section-id="{{ section.id }}" data-section-type="product-recommendations" data-intent="related">
  {% if recommendations.performed %}
    {% if recommendations.products_count > 0 %}
      <div class="section-header text-center">
        {% if recommendations.intent == 'related' %}
          <h2> You may also like</h2>
        {% elsif recommendations.intent == 'complementary' %}
          <h2>Pair it with</h2>
        {% endif %}
      </div>
      <ul class="grid grid--uniform grid--view-items">
        {% for product in recommendations.products %}
          <li class="grid__item small--one-half medium-up--one-quarter">
            {% include 'product-card-grid', max_height: 250 %}
          </li>
        {% endfor %}
      </ul>
    {% endif %}
  {% else %}
    <div class="product-recommendations__loading-dots">
      <div class="product-recommendations__loading-dot"></div>
      <div class="product-recommendations__loading-dot"></div>
      <div class="product-recommendations__loading-dot"></div>
    </div>
  {% endif %}
</div>

1. Cliquez sur Save (Enregistrer).

Une fois la section restituée avec la page de produit, recommendations.performed sera false, de sorte que le code HTML généré affichera une animation de chargement en cours :

<div class="page-width product-recommendations" data-base-url="/recommendations/products" data-product-id="123" data-limit="4" data-section-id="product-recommendations" data-section-type="product-recommendations" data-intent="related">
  <div class="product-recommendations__loading-dots">
    <div class="product-recommendations__loading-dot"></div>
    <div class="product-recommendations__loading-dot"></div>
    <div class="product-recommendations__loading-dot"></div>
  </div>
</div>

Remarque

Les produits recommandés doivent être chargés de manière asynchrone en utilisant JavaScript. Vous les chargerez à l’étape 3 : modifier votre fichier theme.js pour charger les recommandations de manière asynchrone.

Si vous ne souhaitez pas afficher d’animation de chargement en cours, utilisez le code suivant à la place :

{% assign limit = 4 %}
<div class="page-width product-recommendations" data-base-url="{{ routes.product_recommendations_url }}" data-product-id="{{ product.id }}" data-limit="{{ limit }}" data-section-id="{{ section.id }}" data-section-type="product-recommendations" data-intent="related">
  {% if recommendations.products_count > 0 %}
    <div class="section-header text-center">
      {% if recommendations.intent == 'related' %}
          <h2> You may also like</h2>
      {% elsif recommendations.intent == 'complementary' %}
          <h2>Pair it with</h2>
        {% endif %}
    </div>
    <ul class="grid grid--uniform grid--view-items">
      {% for product in recommendations.products %}
        <li class="grid__item small--one-half medium-up--one-quarter">
          {% include 'product-card-grid', max_height: 250 %}
        </li>
      {% endfor %}
    </ul>
  {% endif %}
</div>

Une fois la section ci-dessus restituée avec votre page de produit, le code HTML généré sera un élément div sans contenu :

<div class="page-width product-recommendations" data-base-url="/recommendations/products" data-product-id="123" data-limit="4" data-section-id="product-recommendations" data-section-type="product-recommendations" data-intent="related">

Si l’utilisateur emploie un autre paramètre régional, celui-ci est inclus dans le paramètre de la balise div data-base-url. Par exemple : /fr/recommendations/products.

Android

1. Dans l’application Shopify, appuyez sur le bouton …
2. Dans la section Canaux de vente, appuyez sur Online Store (Boutique en ligne).
3. Appuyez sur Manage themes (Gérer les thèmes).
4. Recherchez le thème que vous souhaitez modifier, cliquez sur le bouton … pour ouvrir le menu Actions, puis cliquez sur Modifier le code.
5. Dans le répertoire Sections, cliquez sur Ajouter une nouvelle section.
6. Nommez la nouvelle section product-recommendations et cliquez sur Créer la section.
7. Remplacez la totalité du contenu par le code ci-dessous :

{% assign limit = 4 %}
<div class="page-width product-recommendations" data-base-url="{{ routes.product_recommendations_url }}" data-product-id="{{ product.id }}" data-limit="{{ limit }}" data-section-id="{{ section.id }}" data-section-type="product-recommendations" data-intent="related">
  {% if recommendations.performed %}
    {% if recommendations.products_count > 0 %}
      <div class="section-header text-center">
        {% if recommendations.intent == 'related' %}
          <h2> You may also like</h2>
        {% elsif recommendations.intent == 'complementary' %}
          <h2>Pair it with</h2>
        {% endif %}
      </div>
      <ul class="grid grid--uniform grid--view-items">
        {% for product in recommendations.products %}
          <li class="grid__item small--one-half medium-up--one-quarter">
            {% include 'product-card-grid', max_height: 250 %}
          </li>
        {% endfor %}
      </ul>
    {% endif %}
  {% else %}
    <div class="product-recommendations__loading-dots">
      <div class="product-recommendations__loading-dot"></div>
      <div class="product-recommendations__loading-dot"></div>
      <div class="product-recommendations__loading-dot"></div>
    </div>
  {% endif %}
</div>

1. Cliquez sur Save (Enregistrer).

Une fois la section restituée avec la page de produit, recommendations.performed sera false, de sorte que le code HTML généré affichera une animation de chargement en cours :

<div class="page-width product-recommendations" data-base-url="/recommendations/products" data-product-id="123" data-limit="4" data-section-id="product-recommendations" data-section-type="product-recommendations" data-intent="related">
  <div class="product-recommendations__loading-dots">
    <div class="product-recommendations__loading-dot"></div>
    <div class="product-recommendations__loading-dot"></div>
    <div class="product-recommendations__loading-dot"></div>
  </div>
</div>

Remarque

Les produits recommandés doivent être chargés de manière asynchrone en utilisant JavaScript. Vous les chargerez à l’étape 3 : modifier votre fichier theme.js pour charger les recommandations de manière asynchrone.

Si vous ne souhaitez pas afficher d’animation de chargement en cours, utilisez le code suivant à la place :

{% assign limit = 4 %}
<div class="page-width product-recommendations" data-base-url="{{ routes.product_recommendations_url }}" data-product-id="{{ product.id }}" data-limit="{{ limit }}" data-section-id="{{ section.id }}" data-section-type="product-recommendations" data-intent="related">
  {% if recommendations.products_count > 0 %}
    <div class="section-header text-center">
      {% if recommendations.intent == 'related' %}
          <h2> You may also like</h2>
      {% elsif recommendations.intent == 'complementary' %}
          <h2>Pair it with</h2>
        {% endif %}
    </div>
    <ul class="grid grid--uniform grid--view-items">
      {% for product in recommendations.products %}
        <li class="grid__item small--one-half medium-up--one-quarter">
          {% include 'product-card-grid', max_height: 250 %}
        </li>
      {% endfor %}
    </ul>
  {% endif %}
</div>

Une fois la section ci-dessus restituée avec votre page de produit, le code HTML généré sera un élément div sans contenu :

<div class="page-width product-recommendations" data-base-url="/recommendations/products" data-product-id="123" data-limit="4" data-section-id="product-recommendations" data-section-type="product-recommendations" data-intent="related">

Si l’utilisateur emploie un autre paramètre régional, celui-ci est inclus dans le paramètre de la balise div data-base-url. Par exemple : /fr/recommendations/products.

Étape 2 : inclure la section dans votre modèle product.liquid

Pour afficher des recommandations de produits au bas de votre page de produit, veuillez inclure la section au bas de votre fichier templates/product.liquid :

1. Dans le répertoire Modèles, ouvrez le fichier product.liquid.
2. Ajoutez le code suivant au bas du fichier :

{% section 'product-recommendations' %}

1. Cliquez sur Save (Enregistrer).

Étape 3 : modifier votre fichier theme.js pour charger les recommandations de manière asynchrone

Vous devez charger les recommandations dans le conteneur vide produit par la section sur la page de produit. Utilisez JavaScript pour créer une requête HTTP GET à <base_url>?section_id=<section_id>&product_id=<product_id>.

1. Dans le répertoire Ressources, ouvrez le fichier theme.js.
2. Repérez la ligne de code suivante :

sections.register('hero-section', theme.HeroSection);

1. Sous cette ligne, ajoutez le code suivant :

sections.register('product-recommendations', theme.ProductRecommendations);

1. Ajoutez le code suivant au bas du fichier :

theme.ProductRecommendations = (function() {
  function ProductRecommendations(container) {
    var $container = (this.$container = $(container));
    var baseUrl = $container.data('baseUrl');
    var productId = $container.data('productId');
    var limit = $container.data('limit');
    var intent = $container.data('intent');
    var productRecommendationsUrlAndContainerClass = baseUrl + '?section_id=product-recommendations&limit=' + limit +
      '&product_id=' + productId + '&intent='+ intent +
      ' .product-recommendations';
    $container.parent().load(productRecommendationsUrlAndContainerClass);
  }
  return ProductRecommendations;
})();

1. Cliquez sur Save (Enregistrer).

Étape 4 : modifier votre fichier theme.scss.liquid pour créer l’animation de chargement (facultatif)

Si vous avez utilisé l’extrait indiquant une animation de chargement en cours dans votre section de produits recommandés, ajoutez le code suivant au bas de votre fichier assets/theme.scss.liquid :

1. Dans le répertoire Ressources, ouvrez le fichier theme.scss.liquid.
2. Au bas du fichier, ajoutez le code suivant :

.product-recommendations {
  padding-top: $section-spacing-small;
  padding-bottom: $section-spacing-small;

  @include media-query($medium-up) {
    padding-top: $section-spacing;
    padding-bottom: $section-spacing;
  }
}
.product-recommendations__loading-dots {
  height: 350px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.product-recommendations__loading-dot {
  animation: dot-keyframes 1.5s infinite ease-in-out;
  background-color: $color-text;
  border-radius: 10px;
  display: inline-block;
  height: 10px;
  width: 10px;
  margin: 0 3px;
  &:nth-child(2) {
    animation-delay: 0.5s;
  }
  &:nth-child(3) {
    animation-delay: 1s;
  }
}
@keyframes dot-keyframes {
  0% {
    opacity: 0.4;
    transform: scale(1, 1);
  }
  50% {
    opacity: 1;
    transform: scale(1.2, 1.2);
  }
  100% {
    opacity: 0.4;
    transform: scale(1, 1);
  }
}

1. Cliquez sur Save (Enregistrer).