Remzi Değirmencioğlu

Magento'nun en çok kullanılan temalarından biri olan ve benimde sıkça kullandığım "Modern Theme'nin" arama motoru optimizasyonu açısından küçük bir eksiği var. Ürün detay sayfasının altında bulunan ürün detayları bölümü javascript kullanılarak tablara ayrılmış. Bu arama motorlarının bu bölümü okumasında sorunlar oluşturabilir, ayrıca bir e-ticaret sayfası ne kadar basit ve anlaşılır olursa o kadar iyidir. Tablara tıklandığında yeni bir sayfanın açılacağından ve zaman kaybedeceğinden korkacak insanlar olabilir. Bunları engellemek için tab bölümünden javascripti kaldırarak css kullandım.

Bu mantığın en güzel örneklerinden birisi Amazon'dur, Amazon'da ürün sayfaları basitçe aşağıya doğru uzar, hiçbir bölüm javascript kodları altında gizlenmez ve sade bir yapıya sahiptir.

Bunu yapmak oldukça kolay:

frontend/default/modern/template/catalog/product/view/tabs.phtml adresindeki dosyanın yaklaşık olarak 33-46 satırları arasında yer alan aşağıdaki kodu:

<ul class="tabs">
<?php foreach ($this->getTabs() as $_index => $_tab): ?>
<?php if($this->getChildHtml($_tab['alias'])): ?>
<li id="product_tabs_"
<?php echo !$_index ? 'class="active first"' : '' ?>>
<a href="#"><?php echo $_tab['title']?></a></li>
<?php endif; ?>
<?php endforeach; ?>
</ul>
<div class="padder">
<?php foreach ($this->getTabs() as $_index => $_tab): ?>
<?php if($this->getChildHtml($_tab['alias'])): ?>
<div id="product_tabs__contents">
<?php echo $this->getChildHtml($_tab['alias']) ?></div>
<?php endif; ?>
<?php endforeach; ?>
</div>

bu kod ile değiştirin:

<ul>
<?php foreach ($this->getTabs() as $_index => $_tab): ?>
<?php if($this->getChildHtml($_tab['alias'])): ?>
<li style="margin-bottom:10px;width:100%;"><div class="tabs_new">
<?php echo $_tab['title']?></div>
<div><?php echo $this->getChildHtml($_tab['alias']) ?></div></li>
<?php endif; ?>
<?php endforeach; ?>
</ul>
<div class="padder">
<?php foreach ($this->getTabs() as $_index => $_tab): ?>
<?php if($this->getChildHtml($_tab['alias'])): ?>
<?php endif; ?>
<?php endforeach; ?>
</div>

Bu kod sayfadan javascripti kaldırıp css i aktive edecektir.

Aşağıdaki koduda temanızın boxes.css dosyasında herhangibir yere ekleyebilirsiniz. 153. satır yakınları uygun olabilir. Daha sonra eğer isterseniz bu kodlar aracılığı ile tasarımda değişiklikler yapabilirsiniz.

.tabs_new {
padding-left:7px;
margin-bottom:10px;
line-height:2.0em;
background:url(../images/tabs_bg.gif) repeat-x 0 100% #f2f2f2;
font-size:14px;
font-weight:bold;
}

Bu kodlar ile ürün sayfaları aşağıdaki tasarımdan,

Bu tasarıma geçecektir.

< Önceki		Sonraki >