Opencart Ürün Listeleme Sayfalarında Sütun Sayısını Değiştirmek

Bu yazımızda Opencart Ürün Listeleme Sayfalarında Sütun Sayısını Değiştirmek konusunu işleyeceğiz. Opencart ana sayfa ve kategori sayfalarında yani ürün listeleme sayfalarında sütun sayısı nasıl değiştirilir sorusunu cevaplayalım. Gerek bilgisayardan gerek cep telefonundan ürünleri görüntülerken kaç sütun halinde gözükeceğini kodlarda küçük oynamalarla yapabiliriz. Bunu bir örnekle açıklayalım.

Opencart Ürün Listeleme Sayfalarında Sütun Sayısını Değiştirmek

Ana sayfada en son ürünler şeklinde bir modülümüz olduğunu varsayalım. Bu modülün sayfadaki düzenini belirleyen dosyayı açalım. Dosyanın yolu Opencart 3x için,

catalog/view/theme/tema adı/template/extension/module/latest.twig

Aşağıdaki satırı bulalım.

<div class=”product-layout col-lg-3 col-md-4 col-sm-6 col-xs-12″>

Burada 3, 4, 6, 12 değerleri bulunmaktadır. Belki sizde farklı değerler olabilir. Bu değerlerin ne olduğunu açıklayalım.

Sayfa düzenimiz 12 sütuna (grid sayısı) bölebilecek şekilde ayarlanmıştır. Bundan dolayı sütun sayısını hesaplarken 12 değerini kullanacağız. Kod satırında kullanılan ifadeleri açıklayalım.

“col” değeri nesneyi bir kolon (sütun) olarak tanımlar.

“xs, sm, md, lg” değerleri ürünün hangi aygıtlarda gösterileceğini belirler.

Sayısal değer ise grid sayısı üzerinden kaça bölüneceğini belirler. Yani 12 sayısını, buraya yazacağımız değere böldüğümüzde çıkan sonuç ekranda gözükecek sütun sayısını ifade edecektir.

xs = Küçük tablet veya telefonlar

sm = Tablet ve küçük netbooklar

md = Laptop ve standart masaüstü bilgisayarlar

lg = Büyük masaüstü bilgisayarlar ve üstü cihazlar (paneller, televizyonlar)

Buna göre kod bloğu içerisinde

col-lg-3  ifadesinde lg kelimesi ekran boyutunu, 3 değeri sayfada ürünlerin 12/3 = 4 sütun şeklinde göstereceğini belirtir.

col-md-4  ifadesinde md kelimesi ekran boyutunu, 4 değeri sayfada ürünlerin 12/4 = 3 sütun şeklinde göstereceğini belirtir.

col-sm-6  ifadesinde sm kelimesi ekran boyutunu, 6 değeri sayfada ürünlerin 12/6 = 2 sütun şeklinde göstereceğini belirtir.

col-xs-12  ifadesinde xs kelimesi ekran boyutunu, 12 değeri sayfada ürünlerin 12/12 = 1 sütun şeklinde göstereceğini belirtir.

Buna göre biz hangi modüllerde kaç sütun sayısında ürünleri göstermek istiyorsak bu değerleri değiştirmemiz gerekmektedir. Değerleri değiştirdiğinizde sayfada değişikliklerin aktif olması için sayfada modifikasyonlar ve admin ana sayfa tema ve SASS yenile butonlarına tıklamamız gerekecektir.

Opencart Ürün Listeleme Sayfalarında Sütun Sayısını Değiştirmek

Yazımız hakkında yorumlarınızı aşağıdaki yorum kısmına yazabilirsiniz. Youtube kanalımızda da ilginizi çekebilecek videolar bulabilirsiniz. Youtube kanalıma abone olmayı da unutmayınız.

https://www.youtube.com/@candemirahmet

Oval@3x 2

Bu ipuçlarını kaçırmayın!

Kayıt butonuna bastıktan sonra e-postanız gelen kutunuza giderek gelen e-postayı onaylamayı unutmayınız. Gelen kutusunda görülmeyen postalar için Önemsiz -Spam klasörünü kontrol edebilirsiniz. Eğer kayıt e-postası ulaşmadıysa iletişim menüsünden bu durumu bildirebilirsiniz.

Yazan: Ahmet Candemir
Teknik Öğretmen - Cisco Instructor - Microsoft MCP - ECDL MS Office Advanced Expert - Adobe Eğitmeni - MEB Fatih Projesi Koordinatörü - Robotik Kodlama Eğitmeni