Afficher des recommandations de produits sur la page de produit

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

  1. Dans le répertoire Sections, cliquez sur Ajouter une nouvelle section.

  2. Nommez la nouvelle section product-recommendations et cliquez sur Créer la section.

  3. Remplacez la totalité du contenu par le code ci-dessous :

{% assign heading = 'You may also like' %}
{% 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">
  {% if recommendations.performed %}
    {% if recommendations.products_count > 0 %}
      <div class="section-header text-center">
        <h2>{{ heading }}</h2>
      </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">
  <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>

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

{% assign heading = 'You may also like' %}
{% 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">
  {% if recommendations.products_count > 0 %}
    <div class="section-header text-center">
      <h2>{{ heading }}</h2>
    </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">

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 productRecommendationsUrlAndContainerClass = baseUrl + '?section_id=product-recommendations&limit=' + limit +
      '&product_id=' +productId +
      ' .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).

Prêt(e) à commencer à vendre avec Shopify ?

Essayez gratuitement