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

Cẩn trọng

Đây là hướng dẫn nâng cao và không được Shopify hỗ trợ. Bạn cần có kiến thức về các ngôn ngữ thiết kế web như HTML, CSS, JavaScript và Liquid. Nếu cần trợ giúp, bạn có thể thuê Shopify Expert.

Lưu ý

Tùy chỉnh này áp dụng cho chủ đề Shopify cổ điển và không áp dụng cho chủ đề Online Store 2.0.

• Khám phá phiên bản cấu trúc của chủ đề
• Khám phá nội dung tùy chỉnh của chủ đề Online Store 2.0

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.

Lưu ý

Phiên bản mới nhất của các chủ đề Shopify sau đây mặc định bao gồm đề xuất sản phẩm:

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

Nếu bạn đang sử dụng phiên bản cũ của một trong những chủ đề này, bạn có thể hiển thị đề xuất sản phẩm sau khi cập nhật chủ đề thay vì tùy chỉnh mã chủ đề.

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

Máy tính để bàn

1. Trong trang quản trị Shopify, vào mục Cửa hàng trực tuyến > Chủ đề.

2. Tìm chủ đề bạn muốn chỉnh sửa, nhấp vào nút ... để mở menu thao tác, sau đó nhấp vào Chỉnh sửa mã.

iPhone

1. Trong ứng dụng Shopify, chạm vào Cửa hàng.

2. Trong phần Kênh bán hàng, chạm vào Cửa hàng trực tuyến.

3. Chạm vào Manage themes (Quản lý chủ đề).

4. Tìm chủ đề bạn muốn chỉnh sửa, nhấp vào nút ... để mở menu thao tác, sau đó nhấp vào Chỉnh sửa mã.

Android

1. Trong ứng dụng Shopify, chạm vào Cửa hàng.

2. Trong phần Kênh bán hàng, chạm vào Cửa hàng trực tuyến.

3. Chạm vào Manage themes (Quản lý chủ đề).

4. Tìm chủ đề bạn muốn chỉnh sửa, nhấp vào nút ... để mở menu thao tác, sau đó nhấp vào Chỉnh sửa mã.

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

Lưu ý

Cần tải không đồng bộ các sản phẩm được đề xuất bằng JavaScript. Bạn sẽ tải các đề xuất trong Bước 3: Chỉnh sửa tệp theme.js để tải các đề xuất theo cách không đồng bộ.

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

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" data-intent="related">

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