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

Trang này được in vào Apr 26, 2024. Để lấy phiên bản hiện tại, vui lòng truy cập https://help.shopify.com/vi/manual/online-store/themes/themes-by-shopify/vintage-themes/customizing-vintage-themes/show-recommendations.

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.

Trên trang này

Bước 1: Tạo mục product-recommendations.liquid
Bước 2: Thêm mục này vào mẫu product.liquid của bạn
Bước 3: Chỉnh sửa tệp theme.js để tải đề xuất theo cách không đồng bộ
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)

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

Trên trang quản trị Shopify, vào mục Cửa hàng trực tuyến > Chủ đề.
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ã.
Trong thư mục Mục, nhấp vào Thêm mục mới.
Đặt tên cho mục mới product-recommendations và nhấp vào Tạo mục.
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>

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>

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.

Trong ứng dụng Shopify, chạm vào nút ….
Trong phần Sales channels (Kênh bán hàng), nhấn vào Cửa hàng trực tuyến.
Nhấn vào Manage themes (Quản lý chủ đề).
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ã.
Trong thư mục Mục, nhấp vào Thêm mục mới.
Đặt tên cho mục mới product-recommendations và nhấp vào Tạo mục.
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>

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>

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.

Trong ứng dụng Shopify, chạm vào nút ….
Trong phần Sales channels (Kênh bán hàng), nhấn vào Cửa hàng trực tuyến.
Nhấn vào Manage themes (Quản lý chủ đề).
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ã.
Trong thư mục Mục, nhấp vào Thêm mục mới.
Đặt tên cho mục mới product-recommendations và nhấp vào Tạo mục.
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>

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>

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:

Trong thư mục Mẫu, mở tệp product.liquid.
Thêm mã sau vào cuối tệp:

{% section 'product-recommendations' %}

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

Trong thư mục Phần tử, mở tệp theme.js.
Tìm dòng mã này:

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

Thêm mã này bên dưới dòng đó:

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

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;
})();

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:

Trong thư mục Phần tử, mở tệp theme.scss.liquid.
Ở 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);
  }
}

Nhấp vào Save (Lưu).

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

Trên trang này

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

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

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

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)

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

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

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

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

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)