Hepsiburada.com Ürün Açıklama Alanı Tasarımı

Hepsiburada gibi siteler ise diğer rakiplerinden ayrılarak bu alan için tasarımı özelleştirme imkanı da sunabilmektedirler. Bu yazıda da özellikle HepsiBurada.com‘da Ürün Açıklaması alanını nasıl yönetebileceğimizden bahsedeceğim. Ancak, önce landing page (varış sayfası) neydi bunu bir hatırlayalım.

Landing Page

Sayfa türleri ve özellikle landing page (varış sayfası) ile ilgili detaylı bir yazım olmuştu. Bu yazıda da geçen tanım; “bir bağlantının (pazarlama e-postası / reklam bağlantısı olabileceği gibi bir QR kod aracılığıyla sunulan bağlantı da olabilir) tıklanması sonucunda ulaşılan, bir amaca doğrudan ulaşılması / hedef olayın gerçekleştirilmesi esasına göre tasarlanmış, doğrudan ve kısa bilgi içeren, mümkün olduğu kadar tek sayfa (single-page) olarak hazırlanan sayfalardır.“.

Aynı şekilde, ürün sayfasının da farklı dinamikler çerçevesinde değerlendirilmesi gerektiğini de hatırlamalıyız.

Ürün Sayfası (Product Page)

Sayfa türleri sayfasında da belirttiğim üzere, ürün sayfasını şu şekilde açıklayabiliriz: “Ürün Sayfası (Product Page), içerik sayfasına benzer özellikler gösterir. Temel ayrım ürün sayfalarının e-ticaret siteleri (e-commerce) içerisinde kullanılmasıdır. Bu nedenle farklı bir hiyerarşi içerisinde yer alırlar. Ürün sayfaları ürün özellikleri, ürün geri bildirimleri, CTA elemanlar ve ödeme adımları içeren bir akış içerisinde (funnel) değerlendirilirler ve bu değerlendirme müşteri yolculuğunun (customer journey) bir parçasıdır.“.

Şimdi gelelim GittiGidiyor.com altında yayınlanan bir ürünün Ürün Açıklaması bölümünü nasıl yönetebileceğimize…

HepsiBurada.com Ürün Sayfası Özelleştirme İşlemleri

Hepsiburada.com Ürün Açıklaması bölümü tabProductDesc id’si ile tanımlı, max-width: 1200px tanımlı bir alan ve productDescriptionContent id’li bir alt katmanında ürün başlığı p etiketleri içerisinde yinelenmekte. Özelleştirilebilen alan ise bu id içerisindeki container’dan oluşmakta. Bu alan içerisinde istenirse belirli class’lardan faydalanarak özelleştirmeler yapılabilir ya da Flixmedia¹ gibi içerik/varlık yöneticiler üzerinden uygulamalar gerçekleştirilebilir. Flixmedia farklı fontlar, tasarım elementleri, slider’lar gibi özellikler sağlarken doğrudan özelleştirmelerde bu tür özelliklerden faydalanmak mümkün olmamaktadır.

Benim paylaşacağım bilgiler bu özelleştirmeleri kendimizin nasıl uygulayabileceğimiz üzerine olacak. Öncelik olarak temel bazı kurallardan bahsetmekte fayda var.

Ürün Açıklaması Alanı Özelleştirmeleri

Özelleştirmeler desktop.css dosyasında bulunan class’lar üzerinden sağlanabilmekte².

Oluşturulacak kodlarda inline css’lerden faydalanmak mümkün ancak javascript kullanımı mümkün değil.

.contain-[device]-[n] ile container, .col.[device]-[n] ile de column genişliklerini tanımlamak mümkün. Örneğin, .contain-xxs-5 ve .col.xxs-2 gibi. Cihaz (device) çözünürlükleri lg (min-width:1200px), md (min-width:993px) ve (max-width:1199px), sm (max-width:992px), xs (max-width:767px) ve xxs (max-width:567px) tanımlarını alabilmekte. n maksimum 5 değerini alabilmekte, yani Ürün Açıklaması alanı 5’li column yapısına göre organize edilebilmekte. Örnek bir uygulama yapalım. Container için .full-width ve col’a göre .fluid class’ları da kullanılabilmekte.

<div class="row">
  <div class="col lg-2 md-5 sm-5">
    <img src="..." />
  </div>
  <div class="col lg-3 md-5 sm-5">
    <h2>...</h2>
    <p>...</p>
  </div>
</div>

Kullanılabilecek fontlar; AvenirNextLTPro, AvenirNextLTPro-Regular, AvenirLTStd-Light, AvenirNextLTPro-Bold, HelveticaBold, AvenirLTStdMedium. Ön tanımlı font ise Arial.

Başlıklarda h1, h2, h3, h4 ve h5 tag’lerinden faydalanmak mümkün. Text position için ise şu tanımlardan faydalanabilmekteyiz.

.text-center{
    text-align:center
}
.text-right{
    text-align:right
}
.text-left{
    text-align:left
}

Tablo kullanımında şu class’lardan faydalanabilmekteyiz.

.table{
    border:2px solid #919191;
    border-radius:3px;
    -moz-border-radius:3px;
    -o-border-radius:3px;
    -webkit-border-radius:3px;
    -ms-webkit-radius:3px;
    zoom:1;
    position:relative;
    z-index:1;
    width:100%
}
.table tr td,.table tr th{
    padding:10px
}
.table tr th{
    background-color:#faf9f9
}
.table tr:hover td{
    background-color:#bfbfbf
}

Açıklama alanında görseller ve videolar kullanılabilmekte. İletilen medyalar https://images.hepsiburada.net/assets/ altıda depolanmakta. Bu nedenle isim konusunda benzersiz tanımlamalar yapmanızda fayda var; aynı isimli dosyalar birbirleri üzerine yazılabilmekte.

Varış Sayfası (Landing Page) Yönetimi

Flixmedia üzerinden işlemler sunulan bir panel aracılığıyla sağlanmakta. Diğer özelleştirmelerde ise hepsiburada ekibine ilgili ürün bilgisini ve dosyaları paket olarak iletmek gerekiyor. Güncelleme işlemlerinde de yine ekiple haberleşmek ve ilgili düzenlemeyi iletmek gerekiyor. Dolayısıyla anlık bir aksiyondan ziyade işlemler için bir e-posta akışı söz konusu olmakta.