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

É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).

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

Essayez gratuitement