Hangi modül veya sayfanın görünümünü değiştirmek istiyorsanız ona ait tpl dosyasını açın.
Demek istediğim;
Eğer bahsettiğiniz anasayfaya eklediğiniz Öne Çıkanlar, Son Eklenenler vb ürünlerin görünümü ise örneğin featured.tpl dosyasını açın ve şu kod satırını aratın:
Kod:
<div class="product-layout col-lg-3 col-md-3 col-sm-6 col-xs-12">
Bu kod satırı altındaki elemanları col-xs-12 class değeriyle birlikte sayfada yekpare görünmesini sağlar satır başına. Bu değeri 6 yaparsanız yani bu kodu aşağıdaki kod ile değiştirirseniz
Kod:
<div class="product-layout col-lg-3 col-md-3 col-sm-6 col-xs-6">
xs değeri için yani mobil cihazlarda satır başına 2'şer ürün gösterecektir.
Değerlere dikkat ederseniz eğer lg geniş ekranlı bilgisayarlar için middle genellikle laptoplar için sm tabletler için xs ise küçük ekranlar yani telefonlar içindir. Aslında her biri için kullanılan boostrap sürümüne göre belirli bir pixel değeri vardır. Mesela col-lg görüntüleyen ekran 1200px veya üstü ise geçerli olur veya sizin mobil sorunuza göre col-xs 768px altındaki ekranlarda.
Burada 12 tam sayı değeridir yani değer 12 ise o class altındaki div içerisinde tamamını kapsayan tek bir öğe sıralanır. Buna göre değeri 6 yaparsanız %50 %50 pay verirsiniz ögeler için. Değeri 3 yaparsanız %25 %25 %25 %25 yani tek bir sıraya 4 öge yerleştirmiş olursunuz.
Aslında telefondan telefona da bir görüntüleme farkı var ama siz sadece o anda kullandığınız telefona göre görüntülüyorsunuz. Eğer telefon ekranı büyük ve 768 piksele eşit veya büyük bir ekrana sahipse çift ürün görünür. Daha doğru bir tabirle telefon özelliklerine göre diyelim ki bir telefonun ekranı 767 x 500 px ise bu telefon için col-sx-... değerine göre görüntüleme gerçekleşecektir ama 768 x 500 px ise col-sm-.. için yazılı değere göre görüntüleme gerçekleşecektir veya 993 x 500 px ise col-md-.. için olan vs...
Tabi bunlar her ne kadar standart bile olsa stylesheet.css dosyası içerisinden bunlar düzenlenmiş ve ekran boyutuna göre width değerleri değiştirilmiş olabilir. Fakat biz opencart default stylesheet dosyasına göre düşünürsek sadece verdiğim örneklerdeki gibi yapmanız yeterli olacaktır.
Yani özetle ve örnekle şu şekilde yapabilirsiniz.
site dizininizdeki catalog/view/theme/default(eğer default temayı kullanıyorsanız tabi yoksa kullandığınız temayı seçin)/template/module/featured.tpl dosyasını açın
Kod:
<div class="product-layout col-lg-3 col-md-3 col-sm-6 col-xs-12">
Bu kodu hemen sayfanın üstünde görebilirsiniz. Buradan siteyi görüntüleyecek cihazlara göre eğer sadece mobil için düzenleme yapacaksanız sadece col-sx-12 değerini çift öge sıralamak için col-sx-6 olarak değiştirin ve kaydedin.
Bunu yaparak featured modülünü eklediğiniz yerlerde onun altındaki ürünlerin mobilde satır başı çift öge sıralamasını sağlamış olursunuz.
Bu örnekle birlikte diğer modüller için de ayarlamanızı istediğiniz gibi yapabilirsiniz. bestseller.tpl latest.tpl special.tpl vb...
Hepsinde standart olarak col-sx-12 olarak kayıtlıdır. Yani ufak ekranlı mobil cihazlarda tek satır tek ürün (%100 sığdırma) şeklinde.
Kategori sayfası için de düşünürseniz eğer onun için
catalog/view/theme/TEMANIZ/template/product/category.tpl dosyası içinden col-sx-12 değerini col-sx-6 olarak değiştirmeniz yeterli olacaktır.
Bu görünümlerle ilgili daha fazla bilgi için google üzerinden boostrap grid examples şeklinde arama yapabilirsiniz.
Kolay gelsin.