Mostrar recomendaciones de productos en la página de producto

Este tutorial describe cómo agregar recomendaciones de productos a la página de tu producto en el tema Debut. Para mayor información sobre cómo funcionan las recomendaciones de productos, consulta Mostrar recomendaciones de productos en las páginas de producto.

Paso 1: crea una sección product-recommendations.liquid

Paso 2: incluye la sección en tu plantilla product.liquid

Para mostrar recomendaciones de productos en la parte inferior de tu página de producto, incluye la sección en la parte inferior de tu archivo templates/product.liquid:

  1. En el directorio Plantillas, abre el archivo product.liquid.
  2. Agrega el siguiente código en la parte inferior del archivo:
{% section 'product-recommendations' %}
  1. Haz clic en Guardar.

Paso 3: edita tu archivo theme.js para cargar las recomendaciones de manera asíncrona

Debes cargar las recomendaciones en el contenedor vacío creado de la sección en la página de producto. Usa JavaScript para realizar una solicitud HTTP GET a <base_url>?section_id=<section_id>&product_id=<product_id>.

  1. En el directorio Recursos, abre el archivo theme.js.
  2. Buscar esta línea de código:
sections.register('hero-section', theme.HeroSection);
  1. Debajo de esa línea, agrega este código:
sections.register('product-recommendations', theme.ProductRecommendations);
  1. Agrega el siguiente código en la parte inferior del archivo:
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. Haz clic en Guardar.

Paso 4: edita tu archivo theme.scss.liquid para crear la animación de carga (opcional)

Si has usado el fragmento de código que muestra una animación de carga dentro de la sección de recomendaciones de productos, agrega el siguiente código en la parte inferior de tu archivo assets/theme.scss.liquid:

  1. En el directorio Recursos, abre el archivo theme.scss.liquid.
  2. En la parte inferior del archivo, agrega este código:
.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. Haz clic en Guardar.

¿Estás listo/a para comenzar a vender con Shopify?

Prueba gratis