ログイン
無料体験を始める

商品ページにおすすめ商品を表示する

このチュートリアルでは、[Debut] テーマの商品ページにおすすめ商品を追加する方法について説明します。おすすめ商品の動作の詳細については、「商品ページにおすすめ商品を表示する」を参照してください。

目次

ステップ1: product-recommendations.liquidセクションを作成する

デスクトップ
  1. 管理画面から [オンラインストア] > [テーマ] に移動します。
  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です。

iPhone
  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です。

Android
  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. [アセット] ディレクトリで、theme.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. [保存] をクリックします。
お探しの情報が見つかりませんか？いつでもお気軽にお問い合わせください。