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

  1. En el directorio Secciones, haz clic en Agregar una nueva sección.

  2. Asigna a la nueva sección e nombre product-recommendations y haz clic en Crear sección.

  3. Reemplazar todo el contenido con el código a continuación:

{% 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. Haz clic en Guardar.

Cuando la sección se renderiza con la página de producto, recommendations.performed se convertirá en false, por lo que el HTML generado mostrará una animación de carga:

<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 no deseas mostrar una animación de carga, usa este código:

{% 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>

Cuando la sección anterior se renderiza con tu página de producto, el HTML generado será un elemento secundario div sin contenido:

<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 el usuario está utilizando una configuración regional alternativa, la configuración regional se incluye en data-base-url del elemento div. Por ejemplo, /fr/recommendations/products.

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