Jump to content
mrtusr

New Product Block size sorunu

Recommended Posts

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.

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites

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ı.

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites

Merhaba

Mahmut bey szin söylediğiniz bölümü product-list.tpl dosyasının içinde bulamadım. Dosyayı ekte yüklüyorum bir bakmanız mümkün olursa sevinirim teşekkürler

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites

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;
}

Share this post


Link to post
Share on other sites

Yani şu şekilde olacak. Bu final olsun :)

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;
margin: 3px;
float: left;
width: 165px;
display: block;
}

  • Like 1

Share this post


Link to post
Share on other sites

Üstadım büyüksünüz. Ellerinize sağlık. Affınıza sığnarak sorabilirmiyim bunları 4 tane yanyana nasıl yapabilirim .

Share this post


Link to post
Share on other sites

Ü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

Share this post


Link to post
Share on other sites

Mahmut bey Tekrar yardımlarınız için çok teşekkür ederim. İyiakşamlar dilerim..Kesinlikle Konu kapanmıştır :D :D :D

Edited by askinjew (see edit history)

Share this post


Link to post
Share on other sites

Mahmut bey Tekrar yardımlarınız için çok teşekkür ederim. İyiakşamlar dilerim..Kesinlikle Konu kapanmıştır :D :D :D

Size de iyi akşamlar. Görüşmek üzere

Share this post


Link to post
Share on other sites

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
}

Share this post


Link to post
Share on other sites

 

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.

Share this post


Link to post
Share on other sites

 

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)

Share this post


Link to post
Share on other sites

 

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)

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
Share on other sites

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."

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites

 

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.

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Reply to this topic...

×   Pasted as rich text.   Restore formatting

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.


×
×
  • Create New...

Important Information

Cookies ensure the smooth running of our services. Using these, you accept the use of cookies. Learn More