Ürün sayfasında ürün önerileri gösterme
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
Ü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.