Ürün sayfasında ürün önerileri gösterme

Bu sayfanın yazdırılma zamanı: Apr 20, 2024. Geçerli sürüm için https://help.shopify.com/tr/manual/online-store/themes/themes-by-shopify/vintage-themes/customizing-vintage-themes/show-recommendations adresini ziyaret edin.

Bu eğitim, Debut temasında ürün sayfanıza ürün önerilerini nasıl ekleyeceğinizi açıklar. Ürün önerilerinin nasıl çalıştığı hakkında daha fazla bilgi edinmek için Ürün sayfalarında ürün önerilerini gösterme bölümüne bakın.

Bu sayfada

1. Adım: Özel product-recommendations.liquid bölümü oluşturma
2. Adım: product.liquid içerisindeki bölümü dahil edin
3. Adım: Önerileri eş zamansız olarak yüklemek için theme.js dosyasını düzenleme
4. Adım: Yükleme animasyonu oluşturmak için theme.scss.liquid dosyanızı düzenleyin (isteğe bağlı)

1. Adım: Özel `product-recommendations.liquid` bölümü oluşturma

Shopify yöneticinizde Online Mağaza > Temalar'a gidin.
Düzenlemek istediğiniz temayı bulun, işlemler menüsünü açmak için … düğmesine, ardından Kodu düzenle'ye tıklayın.
Bölümler dizininde, Yeni bölüm ekle öğesine tıklayın.
Yeni bölümün adını product-recommendations koyun ve Bölüm oluştur'a tıklayın.
Aşağıdaki kodun bulunduğu tüm içeriği değiştirin:

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

Kayıtyap ' a tıklayın.

Bölüm, ürün sayfası ile birlikte oluşturulduğunda, recommendations.performed öğesi false olacaktır ve oluşturulan HTML bir yükleme animasyonu gösterecektir:

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

Yükleme animasyonunu göstermek istemiyorsanız, yerine bu kodu kullanın:

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

Yukarıdaki bölüm ürün sayfanız ile birlikte yüklendiğinde, oluşturulan HTML, içeriği olmayan bir div elementi olacaktır.

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

Kullanıcı alternatif bir yerel ayar kullanıyorsa, yerel ayar, div'in data-base-url içerisinde bulunur. Örneğin , /fr/recommendations/products.

Shopify uygulamasında, … düğmesine dokunun.
Satış Kanalları bölümünde online mağaza' ya dokunun.
Temaları Yönet' e dokunun.
Düzenlemek istediğiniz temayı bulun, işlemler menüsünü açmak için … düğmesine, ardından Kodu düzenle'ye tıklayın.
Bölümler dizininde, Yeni bölüm ekle öğesine tıklayın.
Yeni bölümün adını product-recommendations koyun ve Bölüm oluştur'a tıklayın.
Aşağıdaki kodun bulunduğu tüm içeriği değiştirin:

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

Kayıtyap ' a tıklayın.

Bölüm, ürün sayfası ile birlikte oluşturulduğunda, recommendations.performed öğesi false olacaktır ve oluşturulan HTML bir yükleme animasyonu gösterecektir:

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

Yükleme animasyonunu göstermek istemiyorsanız, yerine bu kodu kullanın:

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

Yukarıdaki bölüm ürün sayfanız ile birlikte yüklendiğinde, oluşturulan HTML, içeriği olmayan bir div elementi olacaktır.

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

Kullanıcı alternatif bir yerel ayar kullanıyorsa, yerel ayar, div'in data-base-url içerisinde bulunur. Örneğin , /fr/recommendations/products.

Shopify uygulamasında, … düğmesine dokunun.
Satış Kanalları bölümünde online mağaza' ya dokunun.
Temaları Yönet' e dokunun.
Düzenlemek istediğiniz temayı bulun, işlemler menüsünü açmak için … düğmesine, ardından Kodu düzenle'ye tıklayın.
Bölümler dizininde, Yeni bölüm ekle öğesine tıklayın.
Yeni bölümün adını product-recommendations koyun ve Bölüm oluştur'a tıklayın.
Aşağıdaki kodun bulunduğu tüm içeriği değiştirin:

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

Kayıtyap ' a tıklayın.

Bölüm, ürün sayfası ile birlikte oluşturulduğunda, recommendations.performed öğesi false olacaktır ve oluşturulan HTML bir yükleme animasyonu gösterecektir:

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

Yükleme animasyonunu göstermek istemiyorsanız, yerine bu kodu kullanın:

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

Yukarıdaki bölüm ürün sayfanız ile birlikte yüklendiğinde, oluşturulan HTML, içeriği olmayan bir div elementi olacaktır.

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

Kullanıcı alternatif bir yerel ayar kullanıyorsa, yerel ayar, div'in data-base-url içerisinde bulunur. Örneğin , /fr/recommendations/products.

2. Adım: `product.liquid` içerisindeki bölümü dahil edin

Ürün sayfasının alt kısmında ürün önerileri göstermek için templates/product.liquid dosyanızın en altındaki bölümü ekleyin:

Şablonlar dizininde product.liquid dosyasını açın.
Aşağıdaki kodu dosyanın en altına ekleyin:

{% section 'product-recommendations' %}

Kayıtyap ' a tıklayın.

3. Adım: Önerileri eş zamansız olarak yüklemek için `theme.js` dosyasını düzenleme

Ürün sayfasındaki bölümün ürettiği boş kapsayıcıya önerileri yüklemeniz gerekir. <base_url>?section_id=<section_id>&product_id=<product_id> üzerinden HTTP GET talebi yapmak üzere JavaScript'i kullanın.

Assets dizininde theme.js dosyasını açın.
Aşağıdaki kod satırını bulun:

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

Bu satırın altına aşağıdaki kodu ekleyin:

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

Aşağıdaki kodu dosyanın en altına ekleyin:

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

Kayıtyap ' a tıklayın.

4. Adım: Yükleme animasyonu oluşturmak için `theme.scss.liquid` dosyanızı düzenleyin (isteğe bağlı)

Ürün önerileri bölümünüz içinde bir yükleme animasyonunu gösteren parçacığı kullandıysanız aşağıdaki kodu, assets/theme.scss.liquid dosyanızın en altına ekleyin:

Assets dizininde theme.scss.liquid dosyasını açın.
Dosyanın en altına bu kodu ekleyin:

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

Kayıtyap ' a tıklayın.

Ürün sayfasında ürün önerileri gösterme

Bu sayfada

1. Adım: Özel product-recommendations.liquid bölümü oluşturma

2. Adım: product.liquid içerisindeki bölümü dahil edin

3. Adım: Önerileri eş zamansız olarak yüklemek için theme.js dosyasını düzenleme

4. Adım: Yükleme animasyonu oluşturmak için theme.scss.liquid dosyanızı düzenleyin (isteğe bağlı)

Shopify ile satış yapmaya hazır mısınız?

1. Adım: Özel `product-recommendations.liquid` bölümü oluşturma

2. Adım: `product.liquid` içerisindeki bölümü dahil edin

3. Adım: Önerileri eş zamansız olarak yüklemek için `theme.js` dosyasını düzenleme

4. Adım: Yükleme animasyonu oluşturmak için `theme.scss.liquid` dosyanızı düzenleyin (isteğe bağlı)