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

Bu sayfanın yazdırılma zamanı: Jun 08, 2023. 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.

Not: Aşağıdaki Shopify temalarının en son sürümleri varsayılan olarak ürün önerilerini içerir:

  • Boundless
  • Brooklyn
  • Debut
  • Minimal
  • Narrative
  • Simple
  • Venture

Bu temalardan birinin eski bir sürümünü kullanıyorsanız kodunu özelleştirmek yerine temanızı güncelledikten sonra ürün önerileri gösterebilirsiniz.

Bu sayfada

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

  1. Shopify yöneticinizden Online Mağaza > Temalar'a gidin.

  2. Düzenlemek istediğiniz temayı bulun, işlemler menüsünü açmak için ... düğmesine ve ardından Kodu düzenle'ye tıklayın.

  1. Shopify uygulamasındanMağaza'ya 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 ve ardından Kodu düzenle'ye tıklayın.

  1. Shopify uygulamasındanMağaza'ya 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 ve ardından Kodu düzenle'ye tıklayın.

  1. Bölümler dizininde, Yeni bölüm ekle öğesine tıklayın.

  2. Yeni bölümün adını product-recommendations koyun ve Bölüm oluştur'a tıklayın.

  3. 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'da yükleyebilirsiniz: Önerileri eş zamansız olarak yüklemek için theme.js dosyanızı düzenleyin.

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.

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

Ücretsiz olarak dene