Exibir recomendações na página do produto

Aviso

Este é um tutorial avançado e não é atendido pela Shopify. Conhecimento de linguagens de web design, como HTML, CSS, Javascript e Liquid é necessário. Se precisar de ajuda, pode contratar um Especialista Shopify.

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.

Aviso

As versões mais recentes dos seguintes temas da Shopify incluem recomendações de produtos por padrão:

• Boundless
• Brooklyn
• Debut
• Minimal
• Narrative
• Simple
• Venture

Se você estiver usando uma versão mais antiga de um desses temas, em vez de personalizar o código, atualize o tema para exibir as recomendações 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 deseja editar, clique no botão ... para abrir o menu de ações e depois em Editar código.

iPhone

1. No app da Shopify, toque em Loja.

2. Na seção Canais de vendas, toque em Loja virtual.

3. Toque em Gerenciar temas.

4. Encontre o tema que deseja editar, clique no botão ... para abrir o menu de ações e depois em Editar código.

Android

1. No app da Shopify, toque em Loja.

2. Na seção Canais de vendas, toque em Loja virtual.

3. Toque em Gerenciar temas.

4. Encontre o tema que deseja editar, clique no botão ... para abrir o menu de ações e depois em Editar código.

1. No diretório Seções, clique em Adicionar uma nova seção.

2. Dê à nova seção o nome de product-recommendations e clique em Criar seção.

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

Aviso

Os produtos recomendados precisam ser carregados de forma assíncrona usando JavaScript. Você os carregará na Etapa 3: editar o arquivo theme.js 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.