This Instruction gives detailed information to fornt-end developer or plugin developer about how implementing a HTML-CSS template in cart21.

Learning Objectives

  • learning template folder path. view
  • header.tpl for html head section. view 
  • top.tpl for header and its positions.  view
  • footer.tpl for Footer. view 
  • implemeting index.tpl for home page. view 
  • static pages and related tpl file. view

 

Please view Static Pages before reading following topics.

 

Learning template folder path


Template Folder : application/front/views/templates/default 

Assets Folder : assets/front/default

Under the folder path "application/front/views/templates/"  all installed template is listed as folder. default folder represents the default template.

 

Screenshot 1 : default template file view

...

 

 

 

 

 

header.tpl for html head section


Path :  application/front/views/templates/default/header.tpl

This file is actually representing head html tags and loading general CSS,JS file is purposed. Also html and body tags starts in the file(header.tpl) that means it is a startin portion of a page.

The file contains  

  • opening html tag 
  • opening and closing head tags. (meta tags, general CSS,JS files)
  • and opening body tag.

It is being used as smarty constant {$Header}. view in "application/front/views/templates/default/index.tpl"

Screenshot 2 : header.tpl 

 

... 

 

 

 

 

top.tpl for header and its positions


Path :  application/front/views/templates/default/top.tpl 

top.tpl is the file for Header Static Page. As it is explained in Static Pages documentation, Header and Footer is behaving like Static Pages in order to be assignable to for positions. Actually it is a page position which has positions. Below Screenshot 3 is Header is highligthed in red lines.

As an example in default demo,

  • Language FlagContact info, Social Links, Search top and Links on Top Plugins is aasigned to Top Full position of the Header Page.
  • Product Category Top and Cart Top  Plugins is aasigned to Center position of the Header Page.
  • Logo is static html placed in top.tpl for left position of teh header Page. Admin user can arrange its height from admin panel > SETTINGS >Website Settings.

 

Note : Header is visible on all pages. 

It is being used as smarty constant {$Topmenu}. view in "application/front/views/templates/default/index.tpl"

Screenshot 3a : Front side default demo Header highlited in red line.

...

Screenshot 3a.1 :  Top Full Position Code in top.tpl

...

Screenshot 3b : Admin side - Header(*) page meta edit form.

... 

 

 

 

footer.tpl for Footer


Path :  application/front/views/templates/default/footer.tpl 

footer.tpl is the file for Footer Static Page. As it is explained in Static Pages documentation, Header and Footer is behaving like Static Pages in order to be assignable to for positions. Actually it is a page position which has positions. Below Screenshot 4 is Footer is highligthed in red lines.

As an example in default demo,

  • Social Links Plugins is aasigned to Bottom Full position of the Footer Page.
  • Newsletter  Plugins is aasigned to Right position of the Footer Page.
  • Footer Links  is static html placed in footer.tpl for center position of  the Footer Page.
  • Contanct information is static html placed in footer.tpl for left position of  the Footer Page. Admin user can edit it on  admin panel > SETTINGS >Website Settings.

Note : Footer is visible on all pages.  

It is being used as smarty constant {$Footer}. view in "application/front/views/templates/default/index.tpl"

Screenshot 4a  : Front side default demo Footer highlited in red line. 

...

Screenshot 4b : Admin side - Footer page meta edit form.

...

 

 

 

 

 

Implemeting index.tpl for home page


Path : application/front/views/templates/default/index.tpl 

Following is explaining Home Page index.tpl as one of the page implementation to provide developers about what a page includes. ($Header, $Topmenu, $Footer and Position codes)

The file is representing Home Page view file. Header, Footer Constant and positions code is placed inside index.tpl. if you open the index.tpl with text editor you will see following codes.

{$Header} :  is a smarty constant loaded by index controller represent header.tpl file.

{$Topmenu} : is a smarty constant loaded by index controller represent header.tpl file for Header Page.

Posions Codes :  ///Html and smarty codes with page positons. ////  view in file application/front/views/templates/default/index.tpl  

{$Footer} : is a smarty constant loaded by index controller represent footer.tpl file for Footer Page.

 

Screenshot 5a  : front side  index.php  Controller file 

...

 

Screenshot 5b : Admin side - Home page meta edit form and showing assigned plugins under the Plugin Sorting.

 

 

Static Pages and related tpl file


List of Static Pages

 

HEADER (*) :  application/front/views/templates/default/top.tpl 

FOOTER : application/front/views/templates/default/footer.tpl 

 

General static pages

Home page : application/front/views/templates/default/index.tpl  

Contact :  application/front/views/templates/default/about.tpl  

 

Plugins tpl files 

Plugins  : application/front/views/templates/default/plugins/plugin_key.tpl  

Note: if plugin uses more than one .tpl file then you can find in plugin library file( application/front/libraries/plugin_key.php ) as shown example below.

example ;
return $this->CI->smarty->fetch('plugins/plugin_key.tpl',$this->CI->data);

 

Content related static pages

CONTENT :  application/front/views/templates/default/content/content_category.tpl 

CONTENT VIEW : application/front/views/templates/default/content/content_view.tpl 

 

E - Commerce related static pages

Products (all product or product category or all product category) : application/front/views/templates/default/product/product.tpl 

PRODUCT PAGE : application/front/views/templates/default/product.tpl 

Cart : application/front/views/templates/default/cart.tpl 

BRAND VIEW :  application/front/views/templates/default/product_brand.tpl 

PROPERTY VIEW : application/front/views/templates/default/product_property.tpl 

E-Commerce Payment Method tpl files

Payment Method Detail  :  application/front/views/templates/default/payment/*.*

 

Account related static pages

Login : application/front/views/templates/default/account/login.tpl 

My Profile :  application/front/views/templates/default/account/profileSettings.tpl 

Change Password :  application/front/views/templates/default/account/changePassword.tpl 

My Address :  application/front/views/templates/default/account/address_form.tpl 

Address Edit Form :  application/front/views/templates/default/account/address_edit_form.tpl 

My Supports :  application/front/views/templates/default/support/support.tpl 

Ticket Detail :  application/front/views/templates/default/support/ticket.tpl 

My Orders : application/front/views/templates/default/account/myorders.tpl 

Order Detail : application/front/views/templates/default/account/order_view.tpl 

Forgotten Password : application/front/views/templates/default/account/forgotten.tpl 

 

  



Posted by: Müslüm ÇEN
Date Added: 07/12/2015
Last Update:



Not Commented Yet !
Please login in order to comment . Login