Cambiare le tab del prodotto da JavaScript a CSS

lug

Tab del prodotto da JavaScript a CSS in Magento

Scritto da: Magento Specialist | Archivio: 1.1

Con i nuovi template per magento, le tab delle informazioni del prodotto sono nascoste da JavaScript.

Questo è pessimo per l’ottimizzazione SEO. Convertirli in CSS permette ai motori di ricerca di indicizzare più imformazioni dalle pagine del prodotto. Quest’articolo mostrerà come fare e come migliorare la compatibilità del proprio sito Magento con i motori di ricerca.

Tipicamente i motori di ricerca tengono conto soltanto del contenuto visibile della pagina. Questo apre un problema con alcune pagine di prodotti dei template per Magento. Con i temi Magento, costruiti secondo i themi più recenti, la descrizione del prodotto, i prodotti consigliati, le informazioni ulteriori e le etichette del prodotto, sono embeddate con JavaScript. Mentre alcuni ritengono che conferisca un look più interessante che dona più visibilità al sito, lo stesso non si può dire per i motori di ricerca.

Amazon.com è un grande esempio di un sito eCommerce che usa il contenuto di pagine promozionali per ottenere vantaggi di marketing. Su Amazon, le pagine dei prodotti sono LUNGHE e nulla viene nascosto dietro tab o embeddato in JavaScript. Tutto ciò lascia che molti contenuti promozionali vengano indicizzati dai motori di ricerca. Avere il contenuto della pagina del prodotto indicizzato è un dovere per ogni sito di eCommerce che spera di trarre vantaggio dalla ricerca organica

Per prima cosa, dalla sezione dell’amministratore andate a sistema/configurazione, poi andate fino al livello della configurazione e selezionate il menù avanzato/sviluppatore. Selezionate in alto a sinistra lo store su cui state lavorando e accendete Template path hints sotto il Debug tab.

Seconda cosa: dalla frontend scegliete una pagina di prodotto e verificate che le tab si trovano in frontend/default/hellopress/template/catalog/product/view/tabs.phtml.
Successivamente, aprite il file tabs.phtml e verso le righe 33-46 dovreste vedere:


getTabs() as $_index => $_tab): ?>
getChildHtml($_tab['alias'])): ?>
>


getTabs() as $_index => $_tab): ?>
getChildHtml($_tab['alias'])): ?>

getChildHtml($_tab['alias']) ?>

Cambiateli in questo modo:


getTabs() as $_index => $_tab): ?>
getChildHtml($_tab['alias'])): ?>

getChildHtml($_tab['alias']) ?>



getTabs() as $_index => $_tab): ?>
getChildHtml($_tab['alias'])): ?>

Questo rimuoverà le tab JavaScript e li definirà con CSS class .tabs_new

In Boxes.css potete aggiungere add.tabs_new ovunque, ma la parte più importante è intorno alla riga 153.

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

Potete definire le tab del prodotto in CSS ovunque decidiate di accordarlo allo stile del tema attuale. Questa azione cambiera le tab da qualcosa del genere: