Jump to content

New Product Block size sorunu

mrtusr

By mrtusr
in Genel Konular

 Share

Recommended Posts

mrtusr Newbie

mrtusr

Posted
Posted

Merhaba,

 

Ana sayfanın altına "new product blok" yerleştirdim. Yan yana 4 ürün gösteriyor. ilgili templatin içindeki modülden "blocknewproducts.tpl" dosyasında ürün sayısını artırdım. yeni eklenen ürünleri yana değil alta atıyor. New product bloku enine genişletmek istiyorum daha çok ürünü yan yana göstermesi için fakat ilgili kodları bulamadım. Konuyu bilen arkadaşlar yardımcı olursa memnun olurum.

Link to comment
Share on other sites
safa Rookie

safa

Posted
Posted

anladığım kadarıyla.

söylediğin blok center colomm genişliği ne göre değişiyor bu yeni ürünler bloğu maksimum centercolumm genişği kadar genişler. bu yüzden temanın css'inde

"special products for center columm" yazan css satırlaında bu ürünlerin genişliği ile oynayarak dediği gerçekşeltirebilirsin.

yanlış anlama olabilir demo site ile gösterirsen daha iyi yardım edebiliriz.

kolay gelsin

Link to comment
Share on other sites
MahmutGulerce Newbie

MahmutGulerce

Posted
Posted

Merhaba;

Ben yerdımcı olmaya çalışayım, şöyle bir teknik kullanabiliriz. CSS ile style="float:" kullanarak ürünlerin yan yana olmasını sağlayabiliriz. style="clear:" ile alt satıra geçebiliriz. Ürünleri yan yana gösterir.

blocknewproducts.tpl dosyasını açın ve aşağıdaki kodu bulun

  <dt class="{if $smarty.foreach.myLoop.first}first_item{elseif $smarty.foreach.myLoop.last}last_item{else}item{/if}"><a href="{$newproduct.link}" title="{$newproduct.name|escape:html:'UTF-8'}">{$newproduct.name|strip_tags|escape:html:'UTF-8'}</a></dt>

Şu şekilde değiştirin

   <dt style="{if $smarty.foreach.myLoop.index eq 4} clear:both; {else}float:left{endif;}"  class="{if $smarty.foreach.myLoop.first}first_item{elseif $smarty.foreach.myLoop.last}last_item{else}item{/if}"><a href="{$newproduct.link}" title="{$newproduct.name|escape:html:'UTF-8'}">{$newproduct.name|strip_tags|escape:html:'UTF-8'}</a></dt>

 

Burada eklediğimiz kod

{if $smarty.foreach.myLoop.index eq 4} clear:both; {else}float:left{endif;}

4 rakamı yan yana ürün sayısı.

Link to comment
Share on other sites
  • 7 months later...
MahmutGulerce Newbie

MahmutGulerce

Posted
Posted

Merhaba Mahmur bey Kategorilerin içindeki ürünleri yanyana sıralamak için ne yapmalıyız rica etsem bunuda anlatabilirmisiniz.

Merhaba

Pratik bir çözüm yazacağım. Profesyonel bir yaklaşım değil.

Bunun için product-list.tpl dosyanızdan 

<div id="product"

bölümünü bulunun hemen yanında 

style="float:left; width:200px; heigth:125px; display:block"

ekleyebilirsiniz. Kodu denemedim. Genişlik 200px yazdım temanın "center id=center" orta bölümünün ölçülerine göre bu ölçüyü değiştirebilirsiniz.

  • Like 1
Link to comment
Share on other sites
MahmutGulerce Newbie

MahmutGulerce

Posted
Posted

Evet öyle bir yer yok yanlış yazmışım. Orası div değil li olacaktı. Sizin dosyasındaki 31. satırı şu şekilde değiştirdim.

 <li class="ajax_block_product {if $smarty.foreach.products.first}first_item{elseif $smarty.foreach.products.last}last_item{/if} {if $smarty.foreach.products.index % 2}alternate_item{else}item{/if} clearfix" style="float:left; width:200px; heigth:125px; display:block">

>

  • Like 2
Link to comment
Share on other sites
MahmutGulerce Newbie

MahmutGulerce

Posted
Posted

Merhaba

Bu şekilde olmayacak. Zaten yazmıştım bunu profesyonel değil pratik bir çözüm olarak yazdım. Şimdi pro çözüm yapalım.

Öncelikle editlediğiniz tpl dosyasını eski haline getirelim.

Daha sonra

themes/prestashop/css/product_list.css dosyanızı FTP açın.

3. satır dan başayıp aşağıdaki kodu seçin.

 


ul#product_list li {
background: #d0d3d8 url('../img/block_category_item_bg.jpg') repeat-x;
border: solid 1px #d0d3d8;
padding: 6px;
min-height: 130px;
height: auto;
clear: both;
margin-bottom: 0.3em
}

 

Seçtiğiniz kodu silip yerine aşağıdakini yapıştırın

 

ul#product_list li {
background: #D0D3D8 url('../img/block_category_item_bg.jpg') repeat-x;
border: solid 1px #D0D3D8;
padding: 6px;
min-height: 130px;
height: auto;
clear: both;
margin: 5px;
float: left;
width: 145px;
display: block;
}

Link to comment
Share on other sites
MahmutGulerce Newbie

MahmutGulerce

Posted
Posted

Üstadım büyüksünüz. Ellerinize sağlık.

Rica ederim

Affınıza sığnarak sorabilirmiyim bunları 4 tane yanyana nasıl yapabilirim .

Aşağıdaki gibi

ul#product_list li {
background: #D0D3D8 url('../img/block_category_item_bg.jpg') repeat-x;
border: solid 1px #D0D3D8;
padding: 3px;
min-height: 129px;
height: 390px;
margin: 1px;
float: left;
width: 129px;
display: block;
}

 

Son olarak:

5 tane yan yana istemeyin sakın. 4 tanesini yan yana aldığımda resimler anca sığdı 1px bile boşluk kalmadı.

 

Herkese bol satışlı günler

 

Not: teşekkür için like tuşuna tıklayabilirsiniz. :)

  • Like 2
Link to comment
Share on other sites
  • 11 months later...
tasarimci Newbie

tasarimci

Posted
Posted

Peki bu söylediklerinizi default temaya nasıl uyarlayabiliriz? Zira kod aşağıdaki gibi baslıyor ve arka planda herhangi bir görsel kullanmıyor!

ul#product_list {
	list-style-type: none
}
#product_list li {
	margin-bottom: 14px;
	padding: 12px 8px;
	border: 1px solid #eee;
	-moz-border-radius: 3px;
	-webkit-border-radius: 3px;
	border-radius: 3px
}
Link to comment
Share on other sites
Presta-TR Newbie

Presta-TR

Posted
Posted

 

Peki bu söylediklerinizi default temaya nasıl uyarlayabiliriz? Zira kod aşağıdaki gibi baslıyor ve arka planda herhangi bir görsel kullanmıyor!

ul#product_list {
	list-style-type: none
}
#product_list li {
	margin-bottom: 14px;
	padding: 12px 8px;
	border: 1px solid #eee;
	-moz-border-radius: 3px;
	-webkit-border-radius: 3px;
	border-radius: 3px
}

 

 

arkaplan eklemek istiyorsanız CSS deki background  tagını inceleyebilirsiniz.

Link to comment
Share on other sites
MahmutGulerce Newbie

MahmutGulerce

Posted
Posted (edited)

 

Peki bu söylediklerinizi default temaya nasıl uyarlayabiliriz? Zira kod aşağıdaki gibi baslıyor ve arka planda herhangi bir görsel kullanmıyor!

ul#product_list {
	list-style-type: none
}
#product_list li {
	margin-bottom: 14px;
	padding: 12px 8px;
	border: 1px solid #eee;
	-moz-border-radius: 3px;
	-webkit-border-radius: 3px;
	border-radius: 3px
}

Merhaba

Aynı şekilde yapabilirsiniz. Yaptığım değişikliği satır satır açıklayayım istediğiniz gibi modifiye edin.

/* Ürün listelemesindeki her bir ürün itemi için */
ul#product_list li { 
/* arka plan resmi*/
background: #D0D3D8 url('../img/block_category_item_bg.jpg') repeat-x; 

/* Kutu çerçevesinin kenarlıkları */
border: solid 1px #D0D3D8; 

/* Çerçeve içi boşluk */
padding: 3px;

/* Minimun yükseklik (içerik yetmezse boşlıukla doldursun diye ) */ 
min-height: 129px;

/*Yükseklik */
height: 390px;

/* Kutular arası boşluk */
margin: 1px; 

/* Kutuları sola doğru dizerek yan yana göster (Normalde alt alta gösterir) */
float: left; 

/* Kutu genişliği */
width: 129px; 

/* Kutu şeklinde göster */
display: block; 
}
Edited by MahmutGulerce (see edit history)
Link to comment
Share on other sites
tasarimci Newbie

tasarimci

Posted
Posted (edited)

 

Merhaba

Aynı şekilde yapabilirsiniz. Yaptığım değişikliği satır satır açıklayayım istediğiniz gibi modifiye edin.

/* Ürün listelemesindeki her bir ürün itemi için */
ul#product_list li { 
/* arka plan resmi*/
background: #D0D3D8 url('../img/block_category_item_bg.jpg') repeat-x; 

/* Kutu çerçevesinin kenarlıkları */
border: solid 1px #D0D3D8; 

/* Çerçeve içi boşluk */
padding: 3px;

/* Minimun yükseklik (içerik yetmezse boşlıukla doldursun diye ) */ 
min-height: 129px;

/*Yükseklik */
height: 390px;

/* Kutular arası boşluk */
margin: 1px; 

/* Kutuları sola doğru dizerek yan yana göster (Normalde alt alta gösterir) */
float: left; 

/* Kutu genişliği */
width: 129px; 

/* Kutu şeklinde göster */
display: block; 
}

Merhaba Mahmut bey,

Birçok olasılığı rakamları değiştirerek denedim ama çıkan sonuç neredeyse birbirine yakın. Ekteki ekran görüntüsünden de rahatlıkla görebilirsiniz. kutuların üstünde boşluklar, açıklamaların kutu dışına taşması, ürünleri kutu içerisine dikey olarak ortalamaması veya üste hizalamaması vb.

o kadar da önemli bir uygulama değil benim için, ancak prestashopu daha iyi anlamam için bu tür uğraşların büyük faydası oluyor.

 

Burdaki başka bir sorun(bu kısım sitenin görselliği için önemli) prestashop default ayarları ürünlerin görsellerini kutu içerisi tam olarak doldurmadan veriyor(ekteki ekran görüntüsünde de görebilirsiniz). Yani demek istediğim; ürün görsellerimi prestashop'un bna sunduğu kutuların içerisi tam olarak dolacak sekilde yayınlamak isterim. Görselleri deforme etmeden, mesela orta kısmından alarak üst ve alt kısımları kesmek suretiyle ve çerçevenin sağ veya solunda, ya da üst/altında beyazlıklar kalmadan yapabilmek için ne tür bir güncelleme yapmam gerekir.

İlginize tesekkür ederim.

post-98885-0-02693300-1385293650_thumb.png

Edited by tasarimci (see edit history)
Link to comment
Share on other sites
Presta-TR Newbie

Presta-TR

Posted
Posted

Merhaba Mahmut bey,

Birçok olasılığı rakamları değiştirerek denedim ama çıkan sonuç neredeyse birbirine yakın. Ekteki ekran görüntüsünden de rahatlıkla görebilirsiniz. kutuların üstünde boşluklar, açıklamaların kutu dışına taşması, ürünleri kutu içerisine dikey olarak ortalamaması veya üste hizalamaması vb.

o kadar da önemli bir uygulama değil benim için, ancak prestashopu daha iyi anlamam için bu tür uğraşların büyük faydası oluyor.

 

Burdaki başka bir sorun(bu kısım sitenin görselliği için önemli) prestashop default ayarları ürünlerin görsellerini kutu içerisi tam olarak doldurmadan veriyor(ekteki ekran görüntüsünde de görebilirsiniz). Yani demek istediğim; ürün görsellerimi prestashop'un bna sunduğu kutuların içerisi tam olarak dolacak sekilde yayınlamak isterim. Görselleri deforme etmeden, mesela orta kısmından alarak üst ve alt kısımları kesmek suretiyle ve çerçevenin sağ veya solunda, ya da üst/altında beyazlıklar kalmadan yapabilmek için ne tür bir güncelleme yapmam gerekir.

İlginize tesekkür ederim.

 

Sistemde Cache veya CCC açık olabilir. Cache dizinlerini boşaltıp sitenize eriştiğinizde değişikliklerin yansıması gerekir.

Link to comment
Share on other sites
MahmutGulerce Newbie

MahmutGulerce

Posted
Posted

Merhaba

Ekran görüntüsündeki kutular içerikten daha dar o yüzden sığmamış. 

 

Eğer bu tür bir çalışma yapacak ve deneyerek geliştirme yapacaksanız size firebug gibi bir tarayıcı eklentisi kullanmanızı tavsiye ederim. Goole chrome kullanıyorsanız ilgili öğenin üzerine sağ tıklayın ve "öğeyi denetle" seçeneğini tıklayın. 

Orta blokta html kodları ve sağ tarafta css kodlarını görebilirsiniz. Css kodlarını değişitirip sayfayı yenilemeden canlı olarak sonucu görebilirsiniz. Sonra değişiklikleri FTP üzerindeki dosyada yapabilirsiniz.

Link to comment
Share on other sites
tasarimci Newbie

tasarimci

Posted
Posted

Sorumun ikinci kısmını tekrar eklemek istedim, çünkü ana konunun altında ezilmiş ve gözden kaçmış.

 

"

Burdaki başka bir sorun(bu kısım sitenin görselliği için önemli) prestashop default ayarları ürünlerin görsellerini kutu içerisi tam olarak doldurmadan veriyor(ekteki ekran görüntüsünde de görebilirsiniz). Yani demek istediğim; ürün görsellerimi prestashop'un bna sunduğu kutuların içerisi tam olarak dolacak sekilde yayınlamak isterim. Görselleri deforme etmeden, mesela orta kısmından alarak üst ve alt kısımları kesmek suretiyle ve çerçevenin sağ veya solunda, ya da üst/altında beyazlıklar kalmadan yapabilmek için ne tür bir güncelleme yapmam gerekir.

İlginize tesekkür ederim."

Link to comment
Share on other sites
MahmutGulerce Newbie

MahmutGulerce

Posted
Posted

Sorumun ikinci kısmını tekrar eklemek istedim, çünkü ana konunun altında ezilmiş ve gözden kaçmış.

 

"

Burdaki başka bir sorun(bu kısım sitenin görselliği için önemli) prestashop default ayarları ürünlerin görsellerini kutu içerisi tam olarak doldurmadan veriyor(ekteki ekran görüntüsünde de görebilirsiniz). Yani demek istediğim; ürün görsellerimi prestashop'un bna sunduğu kutuların içerisi tam olarak dolacak sekilde yayınlamak isterim. Görselleri deforme etmeden, mesela orta kısmından alarak üst ve alt kısımları kesmek suretiyle ve çerçevenin sağ veya solunda, ya da üst/altında beyazlıklar kalmadan yapabilmek için ne tür bir güncelleme yapmam gerekir.

İlginize tesekkür ederim."

 

Merhaba 

Bence siz benim cevabımdaki ilk cümleyi gözden kaçırmışsınız.

 

 

Ekran görüntüsündeki kutular içerikten daha dar o yüzden sığmamış. 

 

 

 

Daha sonra bu işlemi nasıl yapacağınız ile ilgili pratik tavsiye de bulundum. Bence deneyin :)

 

İyi çalışmalar

Link to comment
Share on other sites
  • 8 months later...
MahmutGulerce Newbie

MahmutGulerce

Posted
Posted

 

Peki bu söylediklerinizi default temaya nasıl uyarlayabiliriz? Zira kod aşağıdaki gibi baslıyor ve arka planda herhangi bir görsel kullanmıyor!

ul#product_list {
	list-style-type: none
}
#product_list li {
	margin-bottom: 14px;
	padding: 12px 8px;
	border: 1px solid #eee;
	-moz-border-radius: 3px;
	-webkit-border-radius: 3px;
	border-radius: 3px
}

Resim konusu hiç önemli değil. Resim hariç diğer css kuralalrını kullanabilrisiniz.

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share
Go to topic listing
×
×
  • Create New...