Ürünleri yatay göstermek

marsilyus · January 25, 2014

Merhaba Arkadaşlar,

-Ekteki resimde görünen kategorüdeki ürünleri yatay (grid) durumunda göstermek istiyorum.(ana sayfadaki gibi)

-ingilizce kaynaklar buldum ama temayla uyumsuz oldu. Yardımcı olacak bir arkadaş varmı? Yazılım v. 1.5.6.2

Teşekkürler

Şahin YILDIZ · January 26, 2014

product-list.tpl

{*
* 2007-2012 PrestaShop
*
* NOTICE OF LICENSE
*
* This source file is subject to the Academic Free License (AFL 3.0)
* that is bundled with this package in the file LICENSE.txt.
* It is also available through the world-wide-web at this URL:
* http://opensource.org/licenses/afl-3.0.php
* If you did not receive a copy of the license and are unable to
* obtain it through the world-wide-web, please send an email
* to [email protected] so we can send you a copy immediately.
*
* DISCLAIMER
*
* Do not edit or add to this file if you wish to upgrade PrestaShop to newer
* versions in the future. If you wish to customize PrestaShop for your
* needs please refer to http://www.prestashop.com for more information.
*
*  @author PrestaShop SA
*  @copyright  2007-2012 PrestaShop SA
*  @version  Release: $Revision: 7457 $
*  @license    http://opensource.org/licenses/afl-3.0.php  Academic Free License (AFL 3.0)
*  International Registered Trademark & Property of PrestaShop SA
*}
  
{if isset($products)}
 
    <ul id="product_list" class="clearfix">
    {foreach from=$products item=product name=products}
 
    <li class="ajax_block_product {if $smarty.foreach.products.first}first_item{elseif $smarty.foreach.products.last}last_item{/if} {if $smarty.foreach.products.iteration%4 == 0}last_row_item{else}item{/if}">
        <a href="{$product.link|escape:'htmlall':'UTF-8'}" class="product_img_link" title="{$product.name|escape:'htmlall':'UTF-8'}">
           <img src="{$link->getImageLink($product.link_rewrite, $product.id_image, 'home')}" alt="{$product.legend|escape:'htmlall':'UTF-8'}" {if isset($homeSize)} width="{$homeSize.width}" height="{$homeSize.height}"{/if} /> 
            {if isset($product.new) && $product.new == 1}<span class="new">{l s='New'}</span>{/if}
        </a>
        <p class="clear"></p>
        <h3><a href="{$product.link|escape:'htmlall':'UTF-8'}" title="{$product.name|escape:'htmlall':'UTF-8'}">{$product.name|escape:'htmlall':'UTF-8'|truncate:26:'...':true}</a></h3>
        <div class="content_price">
          
            {if isset($product.show_price) && $product.show_price && !isset($restricted_country_mode)}<span class="price" style="display: inline;">{if !$priceDisplay}{convertPrice price=$product.price}{else}{convertPrice price=$product.price_tax_exc}{/if}</span><br />{/if}
                        {if isset($product.available_for_order) && $product.available_for_order && !isset($restricted_country_mode)}<span class="availability">{if ($product.allow_oosp || $product.quantity > 0)}{l s='Available'}{elseif (isset($product.quantity_all_versions) && $product.quantity_all_versions > 0)}{l s='Product available with different options'}{else}{l s='Out of stock'}{/if}</span>{/if}
 
 
            {if isset($product.on_sale) && $product.on_sale && isset($product.show_price) && $product.show_price && !$PS_CATALOG_MODE}<span class="on_sale">{l s='On sale!'}</span>
                            {elseif isset($product.reduction) && $product.reduction && isset($product.show_price) && $product.show_price && !$PS_CATALOG_MODE}<span class="discount">{l s='Reduced price!'}</span>
                            {else}
                            <span style="height:16px; margin: 5px 0; display: block"></span>
            {/if}
            {if ($product.id_product_attribute == 0 || (isset($add_prod_display) && ($add_prod_display == 1))) && $product.available_for_order && !isset($restricted_country_mode) && $product.minimal_quantity <= 1 && $product.customizable != 2 && !$PS_CATALOG_MODE}
              
                {if ($product.allow_oosp || $product.quantity > 0)}
                    {if isset($static_token)}
                        <a class="button ajax_add_to_cart_button exclusive" rel="ajax_id_product_{$product.id_product|intval}" href="{$link->getPageLink('cart',false, NULL, "add&id_product={$product.id_product|intval}&token={$static_token}", true)}" title="{l s='Add to cart'}"><span></span>{l s='Add to cart'}</a>
                    {else}
                        <a class="button ajax_add_to_cart_button exclusive" rel="ajax_id_product_{$product.id_product|intval}" href="{$link->getPageLink('cart',false, NULL, "add&id_product={$product.id_product|intval}", true)}" title="{l s='Add to cart'}"><span></span>{l s='Add to cart'}</a>
                    {/if}                       
                {else}
                    <span class="exclusive"><span></span>{l s='Add to cart'}</span><br />
                {/if}
            {/if}
            {if isset($comparator_max_item) && $comparator_max_item}
                <p class="compare">
                    <input type="checkbox" class="comparator" id="comparator_item_{$product.id_product}" value="comparator_item_{$product.id_product}" {if isset($compareProducts) && in_array($product.id_product, $compareProducts)}checked="checked"{/if} /> 
                    <label for="comparator_item_{$product.id_product}">{l s='Select to compare'}</label>
                </p>
            {/if}       
        </div>
 
      
    </li>
 
    {/foreach}
    </ul>
 
{/if}

product_list.css

ul#product_list {
    list-style-type: none
}
    #product_list li {
        text-align: center;
        float: left;
        width: 142px;
        padding: 16px;
        margin-bottom: 14px;
        margin-right: 20px;
        background-color: #f9f9f9
    }
    #product_list li.last_row_item {margin-right: 0;}
 
    #product_list li a {
        color: #374853;
        text-decoration: none
    }
    #product_list a.product_img_link {
    overflow:hidden;
    position:relative;
    float: left;
    display:block;
    border: 1px solid #ccc
    }
    #product_list a.product_img_link img {
        display: block;
        vertical-align: bottom
    }
 
    #product_list li span.new {
        display: block;
        position: absolute;
        top: 15px;
        right:-30px;
        padding: 1px 4px;
        width: 101px;
        font-size:10px;
        color: #fff;
        text-align: center;
        text-transform: uppercase;
        -moz-transform: rotate(45deg);
        -webkit-transform: rotate(45deg);
        -o-transform:rotate(45deg);
        -ms-transform: rotate(45deg);
        background-color: #990000
    }
    #product_list li h3 {
        padding:0 0 10px 0;
        font-size:13px;
        color:#000
    }
 
    #product_list li p.product_desc {
        overflow: hidden;
        padding:0;
        line-height:16px;
    }
    #product_list li p.product_desc,
    #product_list li p.product_desc a {
        color:#666;
    }
 
    #product_list li .discount, ul#product_list li .on_sale, ul#product_list li .online_only {
        display: block;
        font-weight: bold;
        margin: 5px 0;
        padding: 1px 5px;
        color: #990000;
        text-transform: uppercase
    }
    #product_list li .discount {
        display: inline-block;
        font-size: 10px;
        color: #fff;
        background: none repeat scroll 0 0 #9B0000
    }
 
    #product_list li .content_price {
        width: 142px;
        float: left;
    }
        #product_list li .price {
            display: block;
            padding-bottom: 15px;
            font-weight:bold;
            font-size: 16px;
            color:#990000
        }
        #product_list li span.availability {
            display:none; /* remove to show availability */
            color: #488C40
        }
    #product_list li .ajax_add_to_cart_button {
        padding-left: 20px
    }
    #product_list li .ajax_add_to_cart_button span {
        display: block;
        position: absolute;
        top: -1px;
        left: -12px;
        height: 26px;
        width: 26px;
        background: url(../img/icon/pict_add_cart.png) no-repeat 0 0 transparent
    }
    #product_list li p.compare {padding-bottom: 0;margin-top: 10px;}

Edited January 26, 2014 by ServerBilgisayar (see edit history)

marsilyus · January 28, 2014

Yardımların için teşekkürler ama maalesef olmuyor.

theme/... dosyaların içeriğini değiştirdim ama olmadı.

başka bir çözüm yolu varmı acaba?

Şahin YILDIZ · January 28, 2014

olmama şansı kesinlikle yoktur...siz bir yerde hata yapıyorsunuz...isterseniz buradaki sayfayı inceleyebilirsiniz...

marsilyus · January 29, 2014

yok yine olmadı.. default theme kalsöründeki dosyaları değiştirdim.

sanırım sürüm farkından, yada benim kullandığım temada çift tarafta bariyer var, ondanda olabilir.

dosyaları değiştirince ürünleri yine dikey gösteriyor ve resimlerde görünmüyor üstelik.

yaptığım bir hata yok. dosya izinleri filan herşeyi normal yapıyorum.

bu arada zahmetlerin için teşekkürler. bu sorunu çözebilirsek sitem gayet güzel olacak.

Edited January 29, 2014 by marsilyus (see edit history)

Şahin YILDIZ · January 29, 2014

tekrar ediyorum..bir yerde hata yapıyorsunuz olmama şansı yok...performans sayfasında çerezle meyi kapatıp denediniz mi...

marsilyus · January 30, 2014

Üstadım, çerez, cache silip denedim.. maalesef olmuyor.. temadan yada versiyondan dolayı olabilirmi acaba..?

Şahin YILDIZ · January 30, 2014

özelden bilgileri gönderirseniz bakabilirim...

Şahin YILDIZ · January 31, 2014

Arkadaşın isteği üzerine işlem aynı kodlar kullanılarak yapılmıştır....yaşadığı sorun " themes/default/cache " klasör içinde çerezleri silmediği için gerekli düzenleme ekrana yansımamıştır..

enfexia · February 8, 2014

Kusura bakmayın acemi olduğum için soruyorum.

Buradaki product-list.tpl ve product-list.css dosyalarını metin editorunden yeniden oluşturup eskilerinin üzerine kopyalarsam başka bir değişiklik yapmadan benim de ürünlerim bu şekilde görünür mü, yoksa bu dosyalarda kendime göre editlemem gereken yerler var mı ?

Şahin YILDIZ · February 8, 2014

bir takım yerleri editlemiştim...resimlerin tam oturması için...ama genel anlamda sorunsuz çalışır

enfexia · March 10, 2014

Yukarıdaki örnekteki gibi yapamadım, neden acaba ?

Sadece product-tpl ve css yi değiştirmek yetmiyor mu, başka ne gibi değişiklikler yapmam gerekiyor ?

Presta-TR · March 12, 2014

Yukarıdaki örnekteki gibi yapamadım, neden acaba ?

Sadece product-tpl ve css yi değiştirmek yetmiyor mu, başka ne gibi değişiklikler yapmam gerekiyor ?

CSS Dosyasında altında çizili olan kısımları güncellediğinizde yatay bir hale gelebiliyor. Sonrasında yine aynı CSS dosyalarında güncelleme yaparak dizaynı dahada düzgün hale getirebilirsiniz.

1)

#product_list a.product_img_link {
display: block;
position: relative;
overflow: hidden;
width: 235px;
margin-left: 2px;
float:left;
}

2)

#product_list li {

margin-right: 10px !important;

margin-top: 10px !important;

padding: 10px 0 !important;

width: 100% !important;

height: 360px !important;

border: #EFEFEF solid 1px !important;

text-align: center;

float: left;

}

Ürünleri yatay göstermek

Recommended Posts

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Create an account or sign in to comment

Create an account

Sign in