제품 페이지에 제품 권장 사항 표시

이 페이지는 Apr 25, 2024에 인쇄되었습니다. 최신 버전은 https://help.shopify.com/ko/manual/online-store/themes/themes-by-shopify/vintage-themes/customizing-vintage-themes/show-recommendations에서 확인하십시오.

이 튜토리얼에서는 Debut 테마에서 제품 페이지에 제품 권장 사항을 추가하는 방법에 대해 설명합니다. 제품 권장 사항이 작동하는 방식에 대한 자세한 내용은 제품 페이지의 제품 권장 사항 보기를 확인하십시오.

이 페이지의 정보

1단계: product-recommendations.liquid 섹션 생성

  1. Shopify Admin에서 온라인 스토어 > 테마로 이동합니다.
  2. 편집할 테마를 찾아 ... 버튼을 클릭하여 작업 메뉴를 연 다음 코드 편집을 클릭합니다.
  3. 섹션 디렉토리에서 새로운 섹션 추가를 클릭합니다.
  4. 새 product-recommendations 섹션의 이름을 지정하고 섹션 생성을 클릭합니다.
  5. 아래 코드로 모든 콘텐츠를 교체합니다. 
{% 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. 저장을 클릭합니다.

섹션이 제품 페이지로 렌더링되면 recommendations.performed는 false가 되며 따라서 생성된 HTML은 로딩 애니메이션을 표시합니다.

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

로딩 애니메이션을 표시하지 않으려면 이 코드를 대신 사용하십시오.

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

위 섹션이 제품 페이지로 렌더링되면 생성된 HTML은 콘텐츠가 없는 div 요소가 됩니다.

<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의 data-base-url에 포함됩니다. 예를 들어, /fr/recommendations/products입니다.

  1. Shopify 앱에서 … 버튼을 탭합니다.
  2. 판매 채널 섹션에서 온라인 스토어를 탭합니다.
  3. 테마 관리를 탭합니다.
  4. 편집할 테마를 찾아 ... 버튼을 클릭하여 작업 메뉴를 연 다음 코드 편집을 클릭합니다.
  5. 섹션 디렉토리에서 새로운 섹션 추가를 클릭합니다.
  6. 새 product-recommendations 섹션의 이름을 지정하고 섹션 생성을 클릭합니다.
  7. 아래 코드로 모든 콘텐츠를 교체합니다. 
{% 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. 저장을 클릭합니다.

섹션이 제품 페이지로 렌더링되면 recommendations.performed는 false가 되며 따라서 생성된 HTML은 로딩 애니메이션을 표시합니다.

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

로딩 애니메이션을 표시하지 않으려면 이 코드를 대신 사용하십시오.

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

위 섹션이 제품 페이지로 렌더링되면 생성된 HTML은 콘텐츠가 없는 div 요소가 됩니다.

<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의 data-base-url에 포함됩니다. 예를 들어, /fr/recommendations/products입니다.

  1. Shopify 앱에서 … 버튼을 탭합니다.
  2. 판매 채널 섹션에서 온라인 스토어를 탭합니다.
  3. 테마 관리를 탭합니다.
  4. 편집할 테마를 찾아 ... 버튼을 클릭하여 작업 메뉴를 연 다음 코드 편집을 클릭합니다.
  5. 섹션 디렉토리에서 새로운 섹션 추가를 클릭합니다.
  6. 새 product-recommendations 섹션의 이름을 지정하고 섹션 생성을 클릭합니다.
  7. 아래 코드로 모든 콘텐츠를 교체합니다. 
{% 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. 저장을 클릭합니다.

섹션이 제품 페이지로 렌더링되면 recommendations.performed는 false가 되며 따라서 생성된 HTML은 로딩 애니메이션을 표시합니다.

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

로딩 애니메이션을 표시하지 않으려면 이 코드를 대신 사용하십시오.

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

위 섹션이 제품 페이지로 렌더링되면 생성된 HTML은 콘텐츠가 없는 div 요소가 됩니다.

<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의 data-base-url에 포함됩니다. 예를 들어, /fr/recommendations/products입니다.

2단계: product.liquid 템플릿에 섹션 포함

제품 페이지 하단에 제품 권장 사항을 표시하려면, templates/product.liquid 파일 맨 아래에 섹션을 포함합니다.

  1. 템플릿 디렉토리에서 product.liquid 파일을 엽니다.
  2. 파일 맨 아래에 다음 코드를 추가합니다. 
{% section 'product-recommendations' %}
  1. 저장을 클릭합니다.

3단계: theme.js 파일을 편집하여 권장 사항을 비동기적으로 로드

제품 페이지에서 섹션이 생성한 빈 컨테이너에 권장 사항을 로드해야 합니다. JavaScript를 사용하여 <base_url>?section_id=<section_id>&product_id=<product_id>에 HTTP GET 요청을 합니다.

  1. 자산 디렉토리에서 them.js 파일을 엽니다.
  2. 이 코드 행을 찾습니다. 
sections.register('hero-section', theme.HeroSection);
  1. 해당 행 아래에 이 코드를 추가합니다. 
sections.register('product-recommendations', theme.ProductRecommendations);
  1. 파일 맨 아래에 다음 코드를 추가합니다. 
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. 저장을 클릭합니다.

4단계: theme.scss.liquid 파일을 편집하여 로딩 애니메이션 생성(선택 사항)

제품 권장 사항 섹션 내에서 로딩 애니메이션을 표시하는 코드 조각을 사용한 경우 assets/theme.scss.liquid 파일 맨 아래에 다음 코드를 추가합니다.

  1. 자산 디렉토리에서 theme.scss.liquid 파일을 엽니다.
  2. 파일 맨 아래에 다음 코드를 추가합니다. 
.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. 저장을 클릭합니다.

Shopify와 함께 사업을 시작할 준비가 되셨습니까?

무료 체험