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

Dikkat

Bu, ileri düzey bir eğitimdir ve Shopify tarafından desteklenmez. HTML, CSS, JavaScript ve Liquid gibi web tasarımı dilleriyle ilgili bilgi sahibi olunması gerekir. Yardıma ihtiyaç duyarsanız bir Shopify İş Ortağı ile çalışabilirsiniz.

Dikkat

Vintage temalar Theme Store'da bulunmaz. Vintage temalar, Shopify'ın Online Store 2.0 temalarında yer alan özellikleri içermez ve Shopify'ın ücretsiz vintage temaları, güvenlik düzeltmelerinin dışında güncelleme almaz.

Not

Bu özelleştirme, vintage Shopify temaları içindir ve Online Store 2.0 temalarına uygulanmaz.

• Temanızın mimari sürümünü öğrenin
• Online Store 2.0 tema özelleştirmelerini keşfedin

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.

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

Masaüstü

1. Shopify yöneticinizde Online Mağaza > Temalar'a gidin.
2. 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.
3. Bölümler dizininde, Yeni bölüm ekle öğesine tıklayın.
4. Yeni bölümün adını product-recommendations koyun ve Bölüm oluştur'a tıklayın.
5. 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>

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

Not

Önerilen ürünlerin JavaScript kullanılarak, eş zamansız olarak yüklenmesi gerekir. Bunları 3. Adım: Önerileri eş zamansız olarak yüklemek için theme.js dosyasını düzenleme adımında yükleyebilirsiniz.

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.

iPhone

1. Shopify uygulamasında, … düğmesine dokunun.
2. Satış Kanalları bölümünde online mağaza' ya dokunun.
3. Temaları Yönet' e dokunun.
4. 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.
5. Bölümler dizininde, Yeni bölüm ekle öğesine tıklayın.
6. Yeni bölümün adını product-recommendations koyun ve Bölüm oluştur'a tıklayın.
7. 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>

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

Not

Önerilen ürünlerin JavaScript kullanılarak, eş zamansız olarak yüklenmesi gerekir. Bunları 3. Adım: Önerileri eş zamansız olarak yüklemek için theme.js dosyasını düzenleme adımında yükleyebilirsiniz.

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.

Android

1. Shopify uygulamasında, … düğmesine dokunun.
2. Satış Kanalları bölümünde online mağaza' ya dokunun.
3. Temaları Yönet' e dokunun.
4. 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.
5. Bölümler dizininde, Yeni bölüm ekle öğesine tıklayın.
6. Yeni bölümün adını product-recommendations koyun ve Bölüm oluştur'a tıklayın.
7. 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>

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

Not

Önerilen ürünlerin JavaScript kullanılarak, eş zamansız olarak yüklenmesi gerekir. Bunları 3. Adım: Önerileri eş zamansız olarak yüklemek için theme.js dosyasını düzenleme adımında yükleyebilirsiniz.

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:

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

{% section 'product-recommendations' %}

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

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

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

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

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

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

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

1. Assets dizininde theme.scss.liquid dosyasını açın.
2. 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);
  }
}

1. Kayıtyap ' a tıklayın.