Jump to content
Rio

Cara Membuat Theme Prestashop

Recommended Posts

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

Share this post


Link to post
Share on other sites

Silakan jika ada pertanyaan untuk tutorial session pertama ini :D

Share this post


Link to post
Share on other sites

nice tuts....
ada link tuts tentang slicing ny? dulu pernah blajar tapi dh lupa :D
lanjut terus....

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
Share on other sites

nice tutorial...

menanti kelanjutannya..

リオくん へ
日本語 わかる の?

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites

Halo semuanya, ada yang tau gak bimana caranya ngehapus cache template dari smartynya, soalnya ketika mau ganti template baru, sebagian file masih belum berubah.
Mohon penjelasannya dari senior semuanya? :D

Share this post


Link to post
Share on other sites

@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/

Share this post


Link to post
Share on other sites

@GeraiMayaku iya, dulu pernah gabung di iCreativeLabs :)

theme2 di geraimaya bagus2, halaman adminnya juga :]

Share this post


Link to post
Share on other sites

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 :)

  • Like 2

Share this post


Link to post
Share on other sites
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!

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
Share on other sites
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

Share this post


Link to post
Share on other sites

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)

Share this post


Link to post
Share on other sites

Teman kita di 80tasks, sudah memulai untuk membuat framework theme untuk Prestashop, Starta namanya.

Mari kita download dan pelajari lebih lanjut, Starta Prestashop Framework

Share this post


Link to post
Share on other sites

Nanti akan dikabari jika ada theme yg sudah matangnya, mungkin akan buat thread baru :)

Share this post


Link to post
Share on other sites

tips2 seperti ini yang harus di kembangkan :lol:

maav ngak semuannya yg berduit bisa belanja contohnya ane hehee

Share this post


Link to post
Share on other sites

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.. :) 

Share this post


Link to post
Share on other sites

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)

Share this post


Link to post
Share on other sites

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 license@prestashop.com 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 <contact@prestashop.com>
*  @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
*/

Share this post


Link to post
Share on other sites

boleh di edit kok bebas mau dibuat apa aja, selama copyright prestashop yg paling atas jgn dihapus, jd hanya scriptnya aja yg di edit edit

Share this post


Link to post
Share on other sites

×

Important Information

Cookies ensure the smooth running of our services. Using these, you accept the use of cookies. Learn More