Pokaż rekomendacje produktów na stronie produktów

Uwaga

To jest zaawansowany tutorial, który nie jest obsługiwany przez Shopify. Wymagana jest znajomość języków projektowania stron internetowych, takich jak HTML, CSS, JavaScript i Liquid. Jeśli potrzebujesz pomocy, możesz zatrudnić partnera Shopify.

Uwaga

Klasyczne szablony nie są dostępne w Theme Store. Te szablony nie mają funkcji zawartych w szablonach Online Store 2.0, a darmowe klasyczne szablony Shopify nie są aktualizowane z wyjątkiem poprawek bezpieczeństwa.

Uwaga

To dostosowanie jest przeznaczone dla klasycznych szablonów Shopify i nie ma zastosowania do szablonów Online Store 2.0.

• Dowiedz się, jaka jest wersja architektury Twojego szablonu
• Przeglądaj dostosowania szablonu Online Store 2.0

W tym tutorialu opisano sposób dodawania rekomendacji produktu do strony produktu w szablonie Debut. Aby dowiedzieć się więcej na temat rekomendacji produktu, zapoznaj się z sekcją Wyświetlanie rekomendacji produktów na stronach produktów.

Krok 1: Utwórz sekcję product-recommendations.liquid

Krok 2: Dołącz sekcję do szablonu product.liquid

Aby wyświetlić rekomendacje produktu na dole strony produktu, dołącz sekcję na dole pliku templates/product.liquid:

1. W katalogu Szablony otwórz plik product.liquid.
2. Dodaj poniższy kod na dole pliku:

{% section 'product-recommendations' %}

1. Kliknij opcję Zapisz.

Krok 3: Edytuj plik theme.js, aby asynchronicznie załadować rekomendacje

Musisz załadować rekomendacje do pustego kontenera utworzonego przez sekcję na stronie produktu. Użyj kodu JavaScript, aby wykonać żądanie HTTP GET do <base_url>?section_id=<section_id>&product_id=<product_id>.

1. W katalogu Zasoby otwórz plik theme.js.
2. Znajdź tę linię kodu:

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

1. Pod tą linią dodaj ten kod:

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

1. Dodaj poniższy kod na dole pliku:

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. Kliknij opcję Zapisz.

Krok 4: Edytuj plik theme.scss.liquid, aby utworzyć animację ładowania (opcjonalnie)

W przypadku użycia fragmentu kodu, który pokazuje animację ładowania w sekcji rekomendacji produktów, dodaj poniższy kod na dole pliku assets/theme.scss.liquid:

1. W katalogu Zasoby otwórz plik theme.scss.liquid.
2. Na dole pliku dodaj następujący kod:

.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. Kliknij opcję Zapisz.