PrestaShop šablony stránky

Struktura souboru motivu

Při vytváření motivu, budete muset vymyslet přední části všech různých stránek a informací, obsahující vaše téma zpracovat správně, s cílem nabídnout zákazníkovi kompletní zážitek. Zde opět, výchozí motiv je dobrý způsob, jak získat inspiraci, jak v různých souborů, které nabízí a chování, které je ideální pro, ale i v jeho kódu, který můžete ponořit do s cílem lépe pochopit, jak funguje téma.

Za prvé, tady je seznam souborů nezbytná šablon (spoiler alert: existují 60 z nich. Ano, všechny jsou nezbytné pro různé funkce PrestaShop):

<tdtřída = "confluenceTd"> objednávku adresa produkt line.tpl<tdtřída = "confluenceTd"> objednávky return.tpl
Název souboru
Proč je nutné
Další soubory šablon používané touto šablonou výchozího motivu
404. tpl Zobrazí se, když soubor nebyl nalezen.  
Address.tpl Umožňuje zákazníkovi vytvořit novou adresu.
  • errors.tpl
Addresses.tpl Umožňuje zákazníkovi zobrazíte její aktuální adresy.  
Authentication.tpl Umožňuje zákazníkovi, aby se přihlásit do svého účtu.
  • objednávky steps.tpl
  • errors.tpl
nejlepší sales.tpl

Zobrazuje nejprodávanější výrobky.

  • produkt sort.tpl
  • NBR produkt page.tpl
  • produkt compare.tpl
  • Pagination.tpl
  • produkt list.tpl
breadcrumb.tpl  Zobrazí kategorie cestu k současné/kategorii produktů.
  • breadcrumb.tpl
Kategorie cms strom branch.tpl Vede přes CMS kategorií pro jejich zobrazení.
  • Kategorie cms strom branch.tpl
Kategorie count.tpl Zobrazí počet produktů v kategorii.  
Kategorie strom branch.tpl Vede přes kategorie produktů za účelem jejich zobrazení.
  • Kategorie strom branch.tpl
Category.tpl Zobrazí obsah kategorie: scény, obrázek, text, porovnání produktů, atd.
  • errors.tpl
  • scenes.tpl
  • Kategorie count.tpl
  • produkt sort.tpl
  • NBR produkt page.tpl
  • produkt compare.tpl
  • Pagination.tpl
  • produkt list.tpl
  • produkt compare.tpl
CMS.tpl Zobrazí obsah stránky CMS.  
kontakt form.tpl Zobrazí kontaktní formulář zákazníka.
  • errors.tpl
discount.tpl Zobrazí seznam dokladů zákazníka.  
errors.tpl Zobrazí aktuální chyby.  
footer.tpl Zobrazí zápatí.
  • Global.tpl
Global.tpl Definuje několik proměnných Smarty, nejpozoruhodnější JavaScript ty.  
Hodnocení tracking.tpl Zobrazí stránku sledování pro hodnocení zákazníků (návštěvníky žádný účet).
  • objednávky detail.tpl
header.tpl Zobrazí záhlaví: HTML doctype, odkazy na CSS souborů, atd.
  • breadcrumb.tpl
History.tpl Zobrazí všechny její předchozí objednávky zákazníkovi.
  • errors.tpl
identity.tpl Zobrazuje a aktualizuje osobní údaje zákazníka.
  • errors.tpl
layout.tpl Vyzývá hlavní cihly na téma: záhlaví, zápatí, sloupce, aktuální šablony a živé úpravy.
  • header.tpl
  • footer.tpl
Maintenance.tpl Zobrazí speciální stránku pro kdy úložiště je v údržbě.  
výrobce list.tpl Zobrazí seznam všech výrobců.
  • errors.tpl
  • NBR produkt page.tpl
  • Pagination.tpl
Manufacturer.tpl Zobrazí výrobky od jednoho výrobce.
  • errors.tpl
  • produkt sort.tpl
  • NBR produkt page.tpl
  • produkt compare.tpl
  • Pagination.tpl
  • produkt list.tpl
my-account.tpl Zobrazí stránku účtu zákazníka.  
NBR produkt page.tpl Zobrazí počet výrobků v aktuální stránce.  
nové products.tpl Zobrazí blok s novými produkty.
  • produkt sort.tpl
  • NBR produkt page.tpl
  • produkt compare.tpl
  • Pagination.tpl
  • produkt compare.tpl
  • Pagination.tpl
objednávka adresa multishipping-products.tpl Zobrazí adresy dodat produkt v multishipping situaci.
  • objednávka adresa produkt line.tpl
objednávka adresa multishipping.tpl  
  • objednávky steps.tpl
  • errors.tpl
  • objednávka adresa multishipping-products.tpl
   
objednávky address.tpl  
  • objednávky steps.tpl
  • errors.tpl
objednávky carrier.tpl  
  • objednávky steps.tpl
  • errors.tpl
objednávky confirmation.tpl  
  • errors.tpl
  • objednávky steps.tpl
objednávky detail.tpl    
objednávky follow.tpl    
objednávka opc nová account.tpl    
objednávky opc.tpl  
  • nakupování cart.tpl
  • objednávky address.tpl
  • objednávka opc nová account.tpl
  • objednávky carrier.tpl
  • objednávky payment.tpl
  • errors.tpl
objednávky payment.tpl  
  • errors.tpl
  • objednávky steps.tpl
  • nakupování košík produkt line.tpl
 
  • errors.tpl
objednávky slip.tpl    
objednávky steps.tpl    
Pagination.tpl    
Password.tpl  
  • errors.tpl
ceny drop.tpl  
  • produkt sort.tpl
  • NBR produkt page.tpl
  • produkt compare.tpl
  • Pagination.tpl
  • produkt list.tpl
  • produkt compare.tpl
  • Pagination.tpl
produkt compare.tpl    
produkt seznam colors.tpl    
produkt list.tpl    
produkt sort.tpl    
výrobek.tpl  
  • errors.tpl
  • produkt list.tpl
produkty comparison.tpl    
omezení country.tpl    
scenes.tpl    
Search.tpl  
  • errors.tpl
  • produkt sort.tpl
  • NBR produkt page.tpl
  • produkt compare.tpl
  • Pagination.tpl
  • produkt list.tpl
nakupování košík produkt line.tpl    
nakupování cart.tpl  
  • objednávky steps.tpl
  • errors.tpl
  • nakupování košík produkt line.tpl
Sitemap.tpl  
  • Kategorie strom branch.tpl
  • Kategorie cms strom branch.tpl
Stores.tpl    
store_infos.tpl    
dodavatel list.tpl    
Supplier.tpl Umožňuje zobrazit seznam produktů dle dodavatele.
  • errors.tpl
  • produkt sort.tpl
  • NBR produkt page.tpl
  • produkt compare.tpl
  • Pagination.tpl
  • produkt list.tpl

Pojďme potápění do tak motiv je organizována: složky, soubory, kam patří a jak se správně s nimi zacházet

Organizace motivu

  • Organizace motivu
    • Složky
      • Náhled souboru
      • CSS a Sass
        • CSS
        • Jedva / kompas
      • Písmo
      • Obrázek
      • JavaScript
      • Jazyk
      • Mobilní téma
    • Soubory
      • Soubory šablon
      • Šablony stylů
      • Obrazové soubory
      • Nástroje

Složky

Hlavní složky jakékoliv téma PrestaShop jsou:

  • / cache Složka obsahuje všechny dočasné soubory, které jsou generovány a znovu za účelem snížení zatížení serveru. Složka je ve výchozím nastavení prázdná.
  • ovlivněný Složka obsahuje všechny soubory CSS.
    • /Sass Složka obsahuje všechny Sass .scss zdrojové soubory, než jsou zkompilovány do CSS souborů.
  • /Font Složka obsahuje soubory potřebné písem.
  • /img Složka obsahuje všechny obrázky.
  • /js Složka obsahuje všechny soubory jazyka JavaScript.
  • / lang Složka obsahuje překlady téma. Její přístupová práva by měla být nastavena na CHMOD 666 (například), tak, aby nástroj pro překlad back-office lze číst a zapisovat do něj.

Tyto složky nejsou přímo související s tématem, ale pomoc je zajistit celý PrestaShop je funkce mají design, který je v souladu s vaším tématem:

  • /mails Složkaobsahuje šablony pro e-maily, že PrestaShop posílá (potvrzení objednávky, heslo žádost, oznámení dodávky, atd.).
  • / mobilní Složka obsahuje mobilní verzi motivu.
  • /modules Složka obsahuje soubory šablon pro mnoho modulů.
  • /PDF Složka obsahuje soubory šablon pro soubory PDF, že PrestaShop generuje (faktury, dodacího listu, objednávek dodávek, atd.).

Kořenová složka obsahuje soubory TPL, stejně jako Preview.jpg miniatury souboru.

Náhled souboru

Preview.jpg soubor v kořenovém adresáři složky motivu je miniatura, která PrestaShop používá v voliči téma back-office.

Slouží jako vizuální připomenutí toho, co je téma, a proto je třeba jej snímek spíše než logo vaší společnosti.

To může mít jakékoli velikosti – výchozí motiv je 180 * 445 pixelů.

Musí být soubor JPEG.

CSS a Sass

CSS

Téma CSS soubory jsou umístěny v ovlivněný Složka.

Je doporučeno mít společnou šablonu stylů pro globální pravidla CSS: Global.CSS.
Potom, každý správce by měl mít svůj vlastní CSS soubor: například, Product.CSS na stránce produktu.

Jedva / kompas

Sass a kompassoubory jsou volitelné: není nutné použít tyto nástroje k vytvoření CSS soubory pro váš motiv back-office.

Pokud použijete, Sass a kompas, doporučujeme dát zdroj .scss soubory v /Sass téma, tak, aby ostatní vývojáři mohou mít přístup k tématu a přepracovat jejich snadněji.

Odtud můžete generovat soubory CSS v ovlivněný složky ze Sass souborů v /Sass Složka!

Písmo

/Font Složka je volitelné: obsahuje písmo, které jste se rozhodli použít pro daný motiv.

Například používá téma výchozí PrestaShop super Font písma nastavit)http://fortawesome.github.IO/Font-Awesome/) pro její citlivý ikony, a proto má následující soubory své /Font Složka:

  • fontawesome-webfont.eot
  • fontawesome-webfont.svg
  • fontawesome-webfont.ttf
  • fontawesome-webfont.woff

Je-li vaše téma není budovat s konkrétním písmem nebo ikonu v paměti, můžete přeskočit tuto složku.

Obrázek

Téma související obrázky mají být uloženy v /img Složka.

Můžete vytvořit podsložku pro lepší organizaci. Například výchozí motiv má následující podsložky:

  • /Icon pro jednoduché ikony (například ty, není k dispozici v sadě zvolené písmo).
  • /jQuery pro jQuery specifické obrazy.

Můžete vytvořit více, podle potřeby.

JavaScript

JavaScript soubory mají být uloženy v /js Složka.

Na rozdíl od CSS soubory doporučujeme vám, aby společným/globální soubor JavaScriptu, ani by měl mít jeden soubor na jeden řadič.

Jazyk

Všechny překlady soubory mají být uloženy v / lang Složka.

Soubory by měly být pojmenovány po jejich kódu ISO 3166-1 alpha-2 malými písmeny: například, fr.php.

Tyto soubory by měly být generovány PrestaShop integrovaný překladatelské nástroje (nachází v lokalizaci / překlady menu).


Vozík 0 Nákupní košík

Žádné produkty

Doprava zdarma! Lodní doprava
$0.00 Celkový

Překontrolovat