Exibir recomendações na página do produto

Aviso

Este é um tutorial avançado e não é atendido pela Shopify. Seu uso requer conhecimento de linguagens de web design, como HTML, CSS, JavaScript e Liquid, portanto, contrate um Parceiro da Shopify se você precisar de ajuda.

Aviso

Os temas vintage não estão disponíveis na Theme Store. Esses temas não têm os recursos incluídos nos temas da Online Store 2.0 da Shopify, e os temas vintage gratuitos só recebem atualizações para correções de segurança.

Observação

Esta personalização se aplica a temas vintage da Shopify, e não aos temas da Online Store 2.0.

• Descubra a versão da arquitetura do tema da loja
• Conheça as personalizações para temas da Online Store 2.0.

Este tutorial descreve como adicionar recomendações à página do produto no tema Debut. Para saber mais, consulte Exibir recomendações de produtos nas páginas de produtos.

Etapa 1: criar uma seção product-recommendations.liquid

Desktop

1. No admin da Shopify, acesse Loja virtual > Temas.
2. Encontre o tema que você quer editar, clique no botão … para abrir o menu de ações e, depois, em Editar código.
3. No diretório Seções, clique em Adicionar uma nova seção.
4. Dê à nova seção o nome de product-recommendations e clique em Criar seção.
5. Substitua todo o conteúdo pelo código abaixo:

{% 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. Clique em Salvar.

Quando a seção é renderizada com a página do produto, recommendations.performed será false e, portanto, o HTML gerado exibirá uma animação de carregamento:

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

Observação

Os produtos recomendados precisam ser carregados de forma assíncrona usando JavaScript. Você os carregará na Etapa 3: editar o theme.js arquivo para carregar as recomendações assincronicamente.

Se você não quiser exibir a animação de carregamento, use este código:

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

Quando a seção acima for renderizada com a página do produto, o HTML gerado será um elemento div sem conteúdo:

<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">

Se o usuário estiver usando uma localidade alternativa, ela será incluída no data-base-url do div. Por exemplo, /fr/recommendations/products.

Etapa 2: incluir a seção no modelo product.liquid

Para exibir recomendações de produtos na parte inferior da página do produto, inclua a seção no final do arquivo templates/product.liquid:

1. No diretório Modelos, abra o arquivo product.liquid.
2. Adicione o seguinte código ao final do arquivo:

{% section 'product-recommendations' %}

1. Clique em Salvar.

Etapa 3: editar o arquivo theme.js para carregar as recomendações assincronicamente

É preciso carregar as recomendações no contêiner vazio produzido pela seção na página do produto. Use JavaScript para fazer uma solicitação HTTP GET para <base_url>?section_id=<section_id>&product_id=<product_id>.

1. No diretório Ativos, abra o arquivo theme.js.
2. Encontre esta linha de código:

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

1. Abaixo dela, adicione este código:

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

1. Adicione o seguinte código ao final do arquivo:

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. Clique em Salvar.

Etapa 4: editar o arquivo theme.scss.liquid para criar a animação de carregamento (opcional)

Se você usou o snippet que exibe uma animação de carregamento na seção de recomendações de produtos, adicione este código no final do arquivo assets/theme.scss.liquid:

1. No diretório Ativos, abra o arquivo theme.scss.liquid.
2. No final do arquivo, adicione 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. Clique em Salvar.