La presente guida è stata redatta per i webmaster che intendono collaborare con la nostra azienda. Le indicazioni presenti in questa guida possono però trovare applicazione anche per coloro che vogliono cimentarsi nella modifica grafica del proprio sito internet.
Per essere accettato dal nostro staff e quindi essere pubblicato su questo sito, il template deve rispettare i seguenti requisiti:
1.Il template deve essere completo di Immagini, file html, icone, pulsanti e stylesheet per almeno 2 lingue (italiano-inglese).
2. Tutti i file devono essere sistemati nelle loro rispettive dir partendo dalla dir httpdocs, per es.
httpdocs/stylesheet.css
httpdocs/includes/sts_template.html
httpdocs/includes/languages/italian/images/buttons...
3. Le immagini aggiuntive che compongono il template devono essere caricate nella dir
httpdocs/img
4. Si deve fornire almeno un'anteprima del template per essere caricata su modulioscommerce.com. Si possono fornire anche altre immagini o animazioni flash del template, che verranno inserite nella descrizione.
Per quanto riguarda le immagini e le animazioni attenersi rigorosamente ad immagini SENZA TESTO o con testo generico. Il testo implica l'appartenenza ad una lingua per cui il negozio in quel caso non è più multilanguage.
5. Tutte le immagini devono essere inserite in un unico psd ma con diversi livelli per una più comoda lavorazione. Tutte le animazioni devono essere fornite in versione swf (non occorre il .fla).
6. Si deve mantenere il tag $headcontent dell'header nel template (vedi file sts_template di esempio). Serve per l'indicizzazione degli articoli e dà il titolo alla home page.
l'intestazione esatta del template dovrebbe essere questa
Guida al template html per oscommerce ITA B2B
Questa è una breve guida per la personalizzazione del template di oscommerce ITA B2B by OSCommerce.it
/-----------------------------------------------------------------/
Design e Layout per OSCommerce
by OSCommerce.it
La seguente guida è copyright PWS Team - OSCommerce.it
Viene rilasciata con licenza GPL. Citare SEMPRE la fonte in caso di distribuzione o modifica di quanto segue.
Introduzione
La parte pubblica ovvero il front-end su cui l’utente effettuerà le ricerche e l’acquisto dei prodotti, è completamente personalizzabile attraverso un template html in cui vengono inseriti vari tag dinamici che consentiranno il recupero e la presentazione nel formato più opportuno delle informazioni presenti nel database. Il template inoltre consente di personalizzare i contenuti all’interno delle categorie, sottocategorie, e schede prodotto attraverso impostazioni parametriche che forniscono al visitatore link e informazioni correlate.
ATTENZIONE!
Per un esempio di Template, puoi scaricare direttamente la nostra versione demo di oscommerce ita b2b dal sito Gecoproject, il file html che devi modificare si trova nella dir
httpdocs/includes/sts_template.hml
Per avere invece un elenco completo di tutti i tag che puoi utilizzare, sempre nella stessa dir troverai un file chiamato sts_template.html.orig meno elaborato graficamente, ma completo. Ottimo per partire con la tua prima personalizzazione.
Il file che devi modificare per lo stylesheet si chiama
httpdocs/stylesheet.css
Per la modifica dello stylesheet ti consigliamo TopStyle, un ottimo editor di stylesheet della Brad Soft che esiste anche in versione gratuita.
Prima di procedere con la lettura di questa guida ti consigliamo di effettuare alcune semplici prove sul template, per esempio spostare dei box da sinistra a destra nel template base, o inserire box statici (es. pubblicità, logo paypal etc) o modificare i colori dello stylesheet. Fatte queste prove la guida ti apparirà molto più semplice.
Template Multipli
Il template system offre diverse alternative per la personalizzazione del layout grafico del front-end.
1. Si può creare un template unico per l’intero sito che verrà utilizzato anche all’interno delle categorie e delle schede prodotto (consigliato).
2. Si può creare un template unico per categorie e sottocategorie.
3. Si può creare un template per la sola home page del front-end
4. Si possono creare tanti template quante sono le categorie e sottocategorie
5. si possono creare infine template per ogni singolo script che compone il front-end
Template per la scheda prodotto
Questo template permette di cerare un layout personalizzato per la scheda prodotto. All’interno di questo layout vengono inseriti i tag per l’inserimento di box, link variabili relative al prodotto che vengono descritti di seguito. Prima di cambiare questo template consigliamo comunque di consultare i nostri tecnici.
Come usare i template
Nella configurazione più semplice come detto si deve modificare il file
/includes/sts_template.html
e
/stylesheet.css
di default forniti con OSCommerce ITA B2B.
Per inserire nuovi box, si può agire direttamente nel file template (ese. box "Si accetta PostePay" con relativa immagine). Per inserire invece dei box dinamici, per es. box ricerca avanzata o box login, consigliamo di consultare i nostri tecnici. Nel caso di upgrade o nuovi rilasci di OSCommerce questo file NON verrà sovrascritto dalle nuove versioni.
Come usare i template multipli per gli script
Come visto sopra è possibile definire template diversi a seconda della sezione del front-end. Per usare questa funzionalità del template system si deve operare come segue:
1. Creare la directory per i template catalog/includes/sts_templates/
2. caricare i propri template all’interno dei questa directory utilizzando il formato nome_script.php.html Ad esempio per il file index.php il template sarà index.php.html
3. I file saranno trattati come semplici file html, da cui l’estensione per distinguerli dagli omonimo file php
4. Se un template custom non è definito, verrà usato un template di default.
Come usare i template per le categorie
Per usare template diversi a seconda della categorie e sottocategorie si devono inserire template che cambino in dipendenza delle caegorie selezionate nel file index.php. Di seguito viene descritta la modalità per creare template per le categoire:
1. Il template di default rimane sts_template.html
2. il template di default delle categorie sarà il file sts_templates/index.php.html
3. si può creare un template di default per la categoria principale con il file index.php_0.html
4. si possono infine creare template per le diverse categorie inserendo nella directory /includes/sts_templates altri template denominati come segue
index.php_XX-YY.html
dove XX YY è il valore della variabile cPath passata nell’url del file index.php
Come usare i template per le schede prodotto
Per personalizzare la scheda prodotto si deve inserire il file product_info.php.html all’interno della directory includes/sts_templates.
Il file è il product_info.php.html
Il file non viene fornito nella nostra versione di oscommerce ita B2B, se vuoi vedere come funziona richiedilo al nostro supporto tecnico
Suggerimenti per la creazione dei template
È preferibile utilizzare link assoluti per lo stylesheet e le immagini, al posto di link relativi. Ciò consente di visualizzare la pagina del template direttamente nel browser esattamente come apparirà sul sito (previo upload delle immagini nella dir apposita sul tuo sito). Al contrario, usare link relativi ti costringe a visualizzare il template solo dopo averlo inserito sul server. Per es. supponendo che hai realizzato un'immagine per l'intestazioni chiamata header_1.jpg, dovrai linkarla nel sito con "img src=http://www.ilmiositoecommerce.com/img" dove www.ilmiositoecommerce.com è il link al tuo sito di commercio elettronico e img è la dir dove dovrai fare l'upload dell'immagine header_1.jpg.
Tag supportati dai template
Al momento i template supportano i seguenti tag. In futuro potrebbero esserne implementati degli altri.
Tag per link, icone e funzioni standard
$headcontent: Inserire questa stringa nella sezione <head> del template. Consente di inserire sezioni head dinamiche o javascript sulle pagine che lo richiedono. È possibile che si debba inserire questo tag direttamente nel codice per poter funzionare.
$cataloglogo: Link e immagine per la visualizzazione del logo sull’intestazione
$myaccountlogo: Link e immagine per la visualizzazione del “Mio Account”
$urlmyaccountlogo: L’url usato dalla funzione my Account
$cartlogo: Icona e link del carrello
$urlcartlogo: l’url usato dalla funzione cart
$checkoutlogo: icona e link per la “Cassa”
$urlcheckoutlogo: l’url usato dalla funzione checkout
$breadcrumbs: Il link e testo usati nella barra di navigazione
$myaccount: Il testo usato nel link “Mio Account”; cambia in “Logoff” quando l’utente è loggato.
$urlmyaccount: L’url usato dalla funzione myaccount
: Il testo e link del logoff
$urllogoff: l’url usato dalla funzione logoff
$myaccountlogoff: mostra "Mio Account | Logoff" se l’utente è loggato, o "Mio Account" se non loggato
$cartcontents: Versione testuale della funzione “Contenuto del Carrello” $urlcartcontents: Url usato dalla funzione cartcontents.
$checkout: la versione testo della funzione checkout
$urlcheckout: l’url usato dalla funzione checkout
Tag per i box
$categorybox: box Categorie
$manufacturerbox: box Produttori
$whatsnewbox: box Novità
$searchbox: box Ricerca
$informationbox: box Informazioni
$cartbox : box Carrello
$maninfobox: box Informazioni sul produttore
$orderhistorybox: box Storico Ordini (solo per utenti loggati)
$bestsellersbox: box I Più Venduti
$specialfriendbox: mostra sia il box Offerte che “Dillo ad un amico” in dipendenza della pagina visualizzata
$reviewsbox: box Recensioni
$languagebox: box Selezione della Lingua
$currenciesbox: box Valute
$content: Contenuto della pagina, il corpo centrale degli script
martedì 25 settembre, 2007: Data attuale
$numrequests: Testo "XXXX visitatori dal GG-MM-AAAA"
: il contatore
: output del file footer.php
: funzione banner del file footer.php
osCsid=: Stringa per il trasporto dell’id di sessione nell’url nel formato "SessionIdVarName=SessionId"
$urlcat_Category_Name: url per linkare il nome della categoria. Gli spazi vanno sostituiti con underscore. Es. il link alla categoria “Audio Video” sarà $urlcat_Audio_Video i nomi delle variabili sono case insensitive, quindi possono essere usate indifferentemente maiuscole o minuscole.
$urlcat_x_y_z: l’url per linkare le categorie con la variabile cPath. Può essere usato per linkare una categoria con il con il suo valore numerico. Il vantaggio di usare questo metodo per i link è che al cambiare del nome delle categorie, non si devono aggiornare i link, al contrario del metodo precedente.
$cat_Category_Name: alias per $urlcat_Category_Name
$cat_x_y_z: alias per $urlcat_x_y_z
: Menu a tendina delle categorie disponibili (come definito in sts_user_code.php)
Tag per la scheda prodotto
Questi tag possono essere usati al posto del tag $content nella scheda prodotto per ottenere un maggio livello di personalizzazione. Vanno inseriti nel file product_info.php.html
$startform: tag obbligatorio per l’inizio della content area del prodotto. Apre il tag <form> necessario per aggiungere l’articolo al carrello.
$endform: tag di chiusura, dovrebbe essere l’ultimo tag nella content area. Chiude il form di cui al tag precedente.
$productname: Nome del prodotto.
$productmodel: Modello del prodotto
$productdesc: Descrizione prodotto
$imagesmall: Immagine ridimensionata del prodotto come specificato nella sezione Configurazioni del Back-end
$imagelarge: Immagine a grandezza naturale
$optionheader: Le opzioni disponibili per il prodotto: il testo al di sopra delle opzioni cambia a seconda della lingua selezionata. Vuoto se non ci sono opzioni.
$optionames: Lista delle opzioni del prodotto separate da ritorno a capo ("
"). Vuoto nel caso non ci siano attributi.
$optionchoices: Lista degli attributi prodotto in versione menu separate dal ritorno a capo.
NOTA: Come mostrato nel file di esempio product_info.php.html è consigliato includere le opzioni prodotto all’interno di una tabella html. Nella prima colonna si inseriscono gli $optionames, nella seconda colonna si inseriscono gli $optionchoices. Automaticamente verranno allineate le opzioni ai rispettivi nomi.
$moreinfolabel: tag che visualizza il testo della costante di lingua TEXT_MORE_INFORMATION (per il link alla pagina “Maggiori informazioni”)
$moreinfourl: L’url della pagina “Maggiori informazioni”.
$productdatelabel: visualizza o il testo che precede la data in cui è stato aggiunto il prodotto oppure ili testo per la data in cui il prodotto sarà disponibile.
$productdate: la data in cui sarà disponibile il prodotto o quella in cui il prodotto è stato aggiunto.
$reviews: Numero di recensioni per il prodotto
$reviewsbutton: pulsante per il link alle recensioni
$reviewsurl: url per la pagina recensioni
QUESTA GUIDA E' STATA REDATTA GRAZIE AL CONTRIBUTO DI TUTTO IL TEAM DI OSCOMMERCE.IT
SE TUTTO O PARTE DEL MATERIALE CHE LA COMPONE SARANNO RIUTILIZZATI SU ALTRI SITI, SI PREGA DI LASCIARE INTATTO IL RIFERIMENTO INIZIALE, GRAZIE. |
