Hiển thị đề xuất sản phẩm trên trang sản phẩm

Hướng dẫn này mô tả cách thêm đề xuất sản phẩm vào trang sản phẩm trong chủ đề Debut. Để tìm hiểu thêm về cách thức hoạt động của đề xuất sản phẩm, hãy xem mục Hiển thị đề xuất sản phẩm trên trang sản phẩm.

Bước 1: Tạo mục product-recommendations.liquid

  1. Trong thư mục Mục, nhấp vào Thêm mục mới.

  2. Đặt tên cho mục mới product-recommendations và nhấp vào Tạo mục.

  3. Thay thế tất cả nội dung bằng mã dưới đây:

{% 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. Nhấp vào Save (Lưu).

Khi kết xuất mục bằng trang sản phẩm, recommendations.performed sẽ là false và HTML đã tạo sẽ hiển thị hiệu ứng động đang tải:

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

Nếu bạn không muốn hiển thị hiệu ứng đang tải, thay vào đó, hãy sử dụng mã này:

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

Khi kết xuất mục trên bằng trang sản phẩm, HTML đã tạo sẽ là một phần tử div không có nội dung:

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

Nếu người dùng sử dụng một vùng miền thay thế, thì vùng miền sẽ được thêm vào data-base-url của div. Ví dụ: /fr/recommendations/products.

Bước 2: Thêm mục này vào mẫu product.liquid của bạn

Để hiển thị đề xuất sản phẩm ở cuối trang sản phẩm, hãy thêm mục vào cuối tệp templates/product.liquid:

  1. Trong thư mục Mẫu, mở tệp product.liquid.

  2. Thêm mã sau vào cuối tệp:

{% section 'product-recommendations' %}
  1. Nhấp vào Save (Lưu).

Bước 3: Chỉnh sửa tệp theme.js để tải đề xuất theo cách không đồng bộ

Bạn cần tải đề xuất vào khoảng chứa trống mà mục được tạo trên trang sản phẩm. Sử dụng JavaScript để tạo yêu cầu HTTP GET cho <base_url>?section_id=<section_id>&product_id=<product_id>.

  1. Trong thư mục Phần tử, mở tệp theme.js.

  2. Tìm dòng mã này:

sections.register('hero-section', theme.HeroSection);
  1. Thêm mã này bên dưới dòng đó:
sections.register('product-recommendations', theme.ProductRecommendations);
  1. Thêm mã sau vào cuối tệp:
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. Nhấp vào Save (Lưu).

Bước 4: Chỉnh sửa tệp theme.scss.liquid để tạo hiệu ứng động đang tải (không bắt buộc)

Nếu bạn đã sử dụng đoạn mã hiển thị hiệu ứng động đang tải bên trong mục đề xuất sản phẩm, hãy thêm mã sau vào cuối tệp assets/theme.scss.liquid của bạn:

  1. Trong thư mục Phần tử, mở tệp theme.scss.liquid.

  2. Ở cuối tệp, thêm mã này:

.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. Nhấp vào Save (Lưu).

Bạn đã sẵn sàng bán hàng với Shopify?

Dùng thử miễn phí