[Tutorial] Eliminare le tab e modifica al css del tema Magento gratuito, Modern Theme

Di Stew, ottobre 24th, 2009 | Web | 0 Commenti

Molti di voi conosceranno sicuramente il tema gratuito per Magento, Modern Theme, questo tema per descrizione prodotti, per i prodotti alternativi, per gli attributi dei prodotti stessi, utilizza un codice JAVA per mostrare tutte queste caratteristiche sotto forma di TABS cliccabili. Al contrario il tema di default di Magento, mostra tutto nella medesima pagina del prodotto, rendendo cosi molto più veloce e naturale la consultazione del prodotto da parte del  cliente, di seguito 2 immagini per farvi capire esattamente di cosa io stia parlando.

Modern Theme originale

Modern theme modificato

[ad#admin]

Benissimo ora che avete capito la differenza passiamo ora alla spiegazione di come fare questa modifica sul tema Modern Theme. Prima cosa da fare è quella di installare in locale Magento, se non lo avete ancora fatto fatelo (sarà il tema del prossimo tutorial di My-Webmagazine.com). Fatto questo scaricate Modern Theme da Magento Connect ed installatelo sulla vostra distribuzione di Magento. Se l’installazione è andata bene potrete ora andare a modificare i file nelle cartelle del Modern theme.

Modifica del file del template

Aprite quindi il file TABS.PHTML che si trova in questo percorso: app/design/frontend/modern/template/catalog/product/view/, apritelo con il vostro editor preferito, io consiglio Notepad ++ e modificate questa parte:

1
2
3
4
5
6
7
8
9
10
11
12
13
14

<ul class="tabs">
    <?php foreach ($this->getTabs() as $_index => $_tab): ?>
        <?php if($this->getChildHtml($_tab['alias'])): ?>
            <li id="product_tabs_<?php echo $_tab['alias'] ?>" <?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_<?php echo $_tab['alias'] ?>_contents"><?php echo $this->getChildHtml($_tab['alias']) ?></div>
        <?php endif; ?>
    <?php endforeach; ?>
</div>

in questo:

1
2
3
4
5
6
7
8
9
10
11

<?php foreach ($this->getTabs() as $_index => $_tab): ?>
 
        <?php if($this->getChildHtml($_tab['alias'])): ?>
            <div class="tabheader">
            <h2 id="product_tabs_<?php echo $_tab['alias'] ?>" <?php echo !$_index ? 'class="active first"' : '' ?>><?php echo $_tab['title']?></h2>
            </div>
            <div class="tabinfo">
            <div id="product_tabs_<?php echo $_tab['alias'] ?>_contents"><?php echo $this->getChildHtml($_tab['alias']) ?></div>
            </div>
        <?php endif; ?>
    <?php endforeach; ?>

Fatto questo potrete cancellare il codice JAVA presente nel file, codice che non servirà più visto che abbiamo tolto le tab e che potrebbe causare qualche problema ai browser.

Ora abbiamo bisogno di aggiungere delle classi al codice CSS del Modern Theme, per far si che la nostra modifica sia anche bella da guardare. Apriamo quindi il file boxes.css che si trova in skin/frontend/default/modern/css e aggiungiamo alla fine 2 nuovi classi una di nome tabheader h2 e l’altra tabinfo.
Nella classe tabheader h2 inseriremo questo codice:

1
2
3
4
5
6

.tabheader h2 {
margin-bottom: 0.4em;
margin-top:0.4em;
font-size:1.05em;
line-height:1.35em;
}

Mentre nella classe tabinfo inseriremo questo codice:

1
2
3
4
5
6
7
8

.tabinfo {
margin-right: 20px;;
border-width:1px;
border-style:solid;
border-color:#dddddd
padding:10px;
background-color:#f5f5f5;
}

Benissimo ora ci resta solo da marcare il bordo delle immagini dei prodotti mostrati e ci siamo, quindi rimane sempre nel file css boxes.css e cercate questa linea di codice catalog-liting img, trovata questa classe andate ad aggiungere questo codice:

1
2
3

border-width:1px;
border-style:solid;
border-color:#d9dde3

Benissimo il gioco è fatto, abbiamo ora il nostro fantastico tema Modern Theme gratuito per Magento modificato in modo da rendere le informazioni relative ad un prodotto il più leggibili possibile. Fatemi sapere che ne pensate.

Ideatore e creatore di My-Webmagazine.com, sito attivo dal 2007