Jump to content

Cara Membuat Theme Prestashop

Rio

By Rio
in Pengembangan dan Modul [ARCHIVE]

 Share

Recommended Posts

Rio Newbie

Rio

Posted
Posted

Cara Membuat Theme Prestashop


Basic Knowledge

Untuk membuat theme Prestashop kita perlu pemahaman di HTML dan CSS sehingga kita dapat dengan mudah membedakannya dengan kode pemrograman Smarty yang digunakan pada sistem theme Prestashop.

Proses pembuatan

Desain Mockup -> Slicing, HTML, CSS -> Theme development

Karena proses pembuatan theme selalu melewati tahap Desain Mockup -> Slicing, HTML, CSS untuk membuat theme maka kita akan menggunakan theme yang sudah jadi namun belum diintegrasikan dengan CMS.

Layout

Buat contoh kita akan menggunakan layout dua kolom sederhana yang telah Rio buat, Ninja Air.


Layout Ninja Air ini belum diintegrasikan ke dalam Theme CMS.
Ninja Air terdiri dari HTML layout dan file CSS yang mengatur style HTML serta Javascript untuk kompatibilitas HTML 5 pada browser tua seperti IE 6 dan browser-browser lain yang belum mendukung teknologi HTML 5.

Functions

Function pada theme Prestashop merupakan kode Smarty yang menghasilkan elemen-elemen yang berkaitan dengan konten di Prestashop kita. berikut beberapa function beserta elemen yang dihasilkan :

{$base_dir} : Link home ke Prestashop
{$img_dir} : Link ke folder image theme (Output http://tokokita.com/themes/ninja-air/img/)
{$css_uri} : Link ke file CSS theme (Output http://tokokita.com/themes/ninja-air/css/global.css)
{$shop_name} : Nama Prestashop kita



Hooks

Hooks merupakan lokasi penempatan modul pada template. Berikut template beserta hooks yang di-assign pada theme default Prestashop :

header.tpl : header, top, leftColumn
index.tpl : home
footer.tpl : rightColumn, footer



Theme

Untuk menerapkan layout Ninja Air sehingga dapat di-install sebagai theme di Prestashop, kita harus menyesuaikan hook yang di assign sesuai posisi template.

Karena layout Ninja Air menggunakan dua kolom, maka hook leftColumn dan rightColumn akan kita pindahkan ke index.tpl untuk memudahkan penempatan hook sesuai nama template.

Agar hook leftColumn dan rightColumn dapat tampil di index.tpl, kita perlu meng-assign-nya di file index.php :

1. Buka index.php yang terletak pada folder Prestashop Anda
2. Setelah baris :

$smarty->assign('HOOK_HOME', Module::hookExec('home'));


tambahkan,

$smarty->assign('HOOK_LEFT_COLUMN', Module::hookExec('leftColumn'));
$smarty->assign('HOOK_RIGHT_COLUMN', Module::hookExec('rightColumn'));



Sehingga posisi template dan hook akan menjadi :

header.tpl : header, top
index.tpl : home, leftColumn, rightColumn
footer.tpl : footer





Silakan unduh file Ninja Air Shop pada attachment untuk mencoba theme ke Prestashop Anda.

(bersambung.. silakan komentar agar thread ini terus diupdate :P)

ninja-air.zip

ninja-air-shop.zip

18087_u28seFoSgC4cNWlh2Gfk_t

  • Like 2
Link to comment
Share on other sites
Rio Newbie

Rio

Posted
  • Author
Posted

Pada file ninja-air-shop.zip, Rio lupa membahas penempatan module dengan merubah lokasi hooks pada file root prestashop agar tampil sesuai posisi yang kita inginkan. Jika kita melihat theme bawaan Prestashop, lokasi hook diatur sesuai dengan theme bawaannya sehingga pada hook rightColumn ditempatkan pada footer.tpl sedangkan theme Ninja Air menempatkan hook rightColumn pada index.tpl

Update: Penjelasannya sudah ditambahkan di postingan pertama pada thread ini.

Link to comment
Share on other sites
Rio Newbie

Rio

Posted
  • Author
Posted

Lanjut ya gan :D,

Pada sesi awal kita telah memahami bagaimana memindahkan posisi hook, namun bagaimana jika modul yang akan di-hook tidak muncul? Ini dikarenakan modul tersebut tidak "terinstall" pada hook yang kita assign. Pada sesi ini kita akan memindahkan/menginstall posisi modul sesuai hook yang kita inginkan.

Contoh kasus, pada settingan default Prestashop, modul Home text editor (letak modul: /modules/editorial/) di-assign ke {$HOOK_HOME} sehingga agar tampil pada {$HOOK_TOP} kita perlu merubah modul Home text editor sehingga dikenali oleh {$HOOK_TOP}. Berikut caranya :

1. Buka file editorial.php yang terletak pada /modules/editorial/, cari baris kode :

return $this->registerHook('home');

rubah menjadi 

return $this->registerHook('top');


2. masih pada file yang sama, cari baris kode :

function hookHome($params)

rubah menjadi 

function hookTop($params)


3. sehingga modul Home text editor dapat kita posisikan di Top of pages.

Untuk menampilkan modul Home text editor pada template Ninja Air Shop, cukup tambahkan {$HOOK_TOP} pada header.tpl

18459_qLiFDqaQBYenLxZ8ESam_t

Link to comment
Share on other sites
  • 2 weeks later...
Rio Newbie

Rio

Posted
  • Author
Posted

@fauzievolute, tiap theme prestashop memiliki penempatan hook yang berbeda-beda, jika yang kamu maksud posisinya belum berubah mungkin karena posisi modul belum kamu atur ulang dari halaman admin sehingga posisi modul sesuai dengan theme baru yang kamu install. Perhatikan juga tidak semua modul bisa tampil, agar sebuah modul bisa tampil sesuai posisi yg kita inginkan, kamu harus meng-hook-nya pada file template prestahop.

Pengaturan posisi modul bisa dipelajari di http://www.prestashop.com/forums/viewreply/192442/

Link to comment
Share on other sites
  • 6 months later...
  • 5 weeks later...
  • 2 months later...
keevers Newbie

keevers

Posted
Posted
Beberapa hari ini Rio akan membahas lebih lanjut mengenai cara membuat Prestashop ini di http://80tasks.com/ dan akan dibuatkan beberapa screencast.

Bagaimana antusias kalian dengan hal ini dan topik apa saja yang ingin kalian ketahui, silakan memberi pendapat :)


mantabsss abis bro... aku sangat antusias melihatnya dan berharap dapat segera membuat website costum... GREAT BRo!
Link to comment
Share on other sites
keevers Newbie

keevers

Posted
Posted
saya bingung masalah Hook.
saya pingin memindahkan modul dari kanan ke kiri atau sebaliknya, tapi fitur hook tidak aktif.

tolong dikasih penjelasan caranya agar semua modul saya bebas ya pindahakn ke kanan maupun sebaliknya.

makasih.


Sepengetahuan saya klo mau pindahin modul ke hook kiri atau kanan, itu kita ke BO---> modules---> position --> transplant a modules. setelah ditransplant (duplicate) ke hook yang kita mau, barulah kita delete manual modules di hook yang lama. Thanks

semoga bisa membantu bro
  • Like 1
Link to comment
Share on other sites
  • 3 months later...
spidoyman Newbie

spidoyman

Posted
Posted

keren sekali penjelasannya,,,
tapi masih bingung ni gan mau nambahin background image untuk header..
masalahnya terdiri dari satu gambar berukuran besar yg udah di slice jadi banyak...
apakah harus belajar tentang hook atau cukup edit di global.css aja..

mohon pencerahan agan2..
(btw sering liat foto si agan rio ini di internet, banyak bgt blajar tutorial dari bro satu ini :D)

Link to comment
Share on other sites
  • 3 months later...
  • 3 weeks later...
  • 4 weeks later...
  • 7 months later...
  • 7 months later...
  • 1 year later...
satriyoz Newbie

satriyoz

Posted
Posted

mau tanya dong tentang hook.

misal saya punya modul  "A" yang di taro di hook "slideshow" .

tp ketika saya masuk ke halaman produk, hook "slideshow" ini tidak ada. jadi hanya ada di homepage saja.

nah pertanyaan saya, bagaimana cara membuat agar modu "A" ini bisa tetap ada di hook slideshow ketika berada di halaman produk ?

 

terimakasih atas bimbingannya.. :) 

Link to comment
Share on other sites
  • 3 months later...
  • 1 month later...
Yundar YK Newbie

Yundar YK

Posted
Posted

Cara Membuat Theme Prestashop

 

 

Basic Knowledge

 

Untuk membuat theme Prestashop kita perlu pemahaman di HTML dan CSS sehingga kita dapat dengan mudah membedakannya dengan kode pemrograman Smarty yang digunakan pada sistem theme Prestashop.

 

Proses pembuatan

 

 

Karena proses pembuatan theme selalu melewati tahap Desain Mockup -> Slicing, HTML, CSS untuk membuat theme maka kita akan menggunakan theme yang sudah jadi namun belum diintegrasikan dengan CMS.

 

Layout

 

Buat contoh kita akan menggunakan layout dua kolom sederhana yang telah Rio buat, Ninja Air.

 

 

Layout Ninja Air ini belum diintegrasikan ke dalam Theme CMS.

Ninja Air terdiri dari HTML layout dan file CSS yang mengatur style HTML serta Javascript untuk kompatibilitas HTML 5 pada browser tua seperti IE 6 dan browser-browser lain yang belum mendukung teknologi HTML 5.

 

Functions

 

Function pada theme Prestashop merupakan kode Smarty yang menghasilkan elemen-elemen yang berkaitan dengan konten di Prestashop kita. berikut beberapa function beserta elemen yang dihasilkan :

 

{$base_dir} : Link home ke Prestashop{$img_dir} : Link ke folder image theme (Output http://tokokita.com/themes/ninja-air/img/){$css_uri} : Link ke file CSS theme (Output http://tokokita.com/themes/ninja-air/css/global.css){$shop_name} : Nama Prestashop kita

Hooks

 

Hooks merupakan lokasi penempatan modul pada template. Berikut template beserta hooks yang di-assign pada theme default Prestashop :

 

header.tpl : header, top, leftColumnindex.tpl : homefooter.tpl : rightColumn, footer

Theme

 

Untuk menerapkan layout Ninja Air sehingga dapat di-install sebagai theme di Prestashop, kita harus menyesuaikan hook yang di assign sesuai posisi template.

 

Karena layout Ninja Air menggunakan dua kolom, maka hook leftColumn dan rightColumn akan kita pindahkan ke index.tpl untuk memudahkan penempatan hook sesuai nama template.

 

Agar hook leftColumn dan rightColumn dapat tampil di index.tpl, kita perlu meng-assign-nya di file index.php :

 

1. Buka index.php yang terletak pada folder Prestashop Anda

2. Setelah baris :

$smarty->assign('HOOK_HOME', Module::hookExec('home'));
tambahkan,

$smarty->assign('HOOK_LEFT_COLUMN', Module::hookExec('leftColumn'));$smarty->assign('HOOK_RIGHT_COLUMN', Module::hookExec('rightColumn'));

Sehingga posisi template dan hook akan menjadi :

 

header.tpl : header, topindex.tpl : home, leftColumn, rightColumnfooter.tpl : footer

 

 

Silakan unduh file Ninja Air Shop pada attachment untuk mencoba theme ke Prestashop Anda.

 

(bersambung.. silakan komentar agar thread ini terus diupdate :P)

 

NICE POST.. REGARD FROM JOGJAKARTA GAN, KAPAN2 MAIN KE SINI  :D  B)

Link to comment
Share on other sites
  • 3 months later...
  • 1 month later...
tankokhoa Newbie

tankokhoa

Posted
Posted

salam untuk bro rio dan para bro lainnya,

sy newbie yg baru mau mulai belajar pembuatan web,

izin bertanya kepada bro rio n para masta presta, kalau kita mau mengedit tampilan standard dari prestashop, misalnya seri 1.5.6.2, apakah harus minta izin sama prestashop? 

saya coba mengedit dengan notepad tapi kelihatannya tidak bisa diedit, dan di index.php ada statement:

NOTICE OF LICENSE
*
* This source file is subject to the Open Software License (OSL 3.0)
* that is bundled with this package in the file LICENSE.txt.
* It is also available through the world-wide-web at this URL:
* If you did not receive a copy of the license and are unable to
* obtain it through the world-wide-web, please send an email
* to [email protected] so we can send you a copy immediately.
*
* DISCLAIMER
*
* Do not edit or add to this file if you wish to upgrade PrestaShop to newer
* versions in the future. If you wish to customize PrestaShop for your
* needs please refer to http://www.prestashop.com for more information.
*
*  @author PrestaShop SA <[email protected]>
*  @copyright  2007-2013 PrestaShop SA
*  @license    http://opensource.org/licenses/osl-3.0.php  Open Software License (OSL 3.0)
*  International Registered Trademark & Property of PrestaShop SA
*/
Link to comment
Share on other sites
 Share
Go to topic listing
×
×
  • Create New...