PrestaShop template halaman

Struktur file untuk tema

Ketika membuat suatu tema, Anda harus memikirkan depan semua berbagai halaman dan informasi bahwa tema Anda memiliki untuk menangani dengan benar, untuk menawarkan pengalaman yang lengkap untuk pelanggan Anda. Di sini lagi, tema default adalah cara yang baik untuk mendapatkan inspirasi, baik dalam berbagai memiliki file dan perilaku ini melayani, tetapi juga dalam kode, yang Anda dapat menyelam ke dalam rangka untuk lebih memahami bagaimana tema yang bekerja.

Pertama, di sini adalah daftar file template yang diperlukan (spoiler alert: ada 60. Ya, Semua diperlukan untuk berbagai fitur PrestaShop):

order-alamat-produk-line.tpl pesanan-return.tpl
Nama file
Mengapa ianya perlu
Lain file template yang digunakan oleh template ini tema default
404. tpl Menampilkan ketika file tidak dapat ditemukan.  
Address.tpl Memungkinkan pelanggan untuk membuat alamat baru.
  • Errors.tpl
Addresses.tpl Memungkinkan pelanggan untuk melihat dia alamat saat ini.  
Authentication.tpl Memungkinkan pelanggan untuk login ke account-nya.
  • order-steps.tpl
  • Errors.tpl
terbaik-sales.tpl

Menampilkan produk terlaris.

  • Produk-sort.tpl
  • NBR-produk-page.tpl
  • Produk-compare.tpl
  • pagination.tpl
  • Produk-list.tpl
breadcrumb.tpl  Menampilkan jalur kategori ke kategori/produk saat ini.
  • breadcrumb.tpl
Kategori-cms-pohon-branch.tpl Berjalan melalui kategori CMS untuk menampilkannya.
  • Kategori-cms-pohon-branch.tpl
Kategori-count.tpl Menampilkan jumlah produk dalam kategori.  
Kategori-pohon-branch.tpl Berjalan melalui kategori produk untuk menampilkannya.
  • Kategori-pohon-branch.tpl
Category.tpl Menampilkan konten Kategori: adegan, Gambar, teks, produk komparator, dll.
  • Errors.tpl
  • Scenes.tpl
  • Kategori-count.tpl
  • Produk-sort.tpl
  • NBR-produk-page.tpl
  • Produk-compare.tpl
  • pagination.tpl
  • Produk-list.tpl
  • Produk-compare.tpl
CMS.tpl Menampilkan isi dari halaman CMS.  
kontak-form.tpl Menampilkan formulir kontak pelanggan.
  • Errors.tpl
Discount.tpl Menampilkan daftar pelanggan voucher.  
Errors.tpl Menampilkan error(s) saat ini.  
footer.tpl Menampilkan footer.
  • global.tpl
global.tpl Mendefinisikan beberapa Smarty variabel JavaScript paling menonjol yang.  
Tamu-tracking.tpl Menampilkan halaman pelacakan untuk semua pelanggan (pengunjung dengan tidak ada akun).
  • order-detail.tpl
header.tpl Menampilkan header: HTML doctype, link ke file CSS, dll.
  • breadcrumb.tpl
History.tpl Menampilkan semua perintah sebelumnya dia kepada pelanggan.
  • Errors.tpl
Identity.tpl Menampilkan dan update informasi pribadi pelanggan.
  • Errors.tpl
layout.tpl Memanggil batu bata utama tema: header, footer, kolom, template saat ini dan hidup mengedit.
  • header.tpl
  • footer.tpl
Maintenance.tpl Menampilkan halaman khusus untuk ketika toko berada dalam pemeliharaan.  
produsen-list.tpl Menampilkan daftar semua produsen.
  • Errors.tpl
  • NBR-produk-page.tpl
  • pagination.tpl
Manufacturer.tpl Menampilkan produk-produk dari produsen tunggal.
  • Errors.tpl
  • Produk-sort.tpl
  • NBR-produk-page.tpl
  • Produk-compare.tpl
  • pagination.tpl
  • Produk-list.tpl
My-account.tpl Menampilkan halaman account pelanggan.  
NBR-produk-page.tpl Menampilkan jumlah produk dalam halaman aktif.  
Baru-products.tpl Menampilkan blok dengan produk-produk baru.
  • Produk-sort.tpl
  • NBR-produk-page.tpl
  • Produk-compare.tpl
  • pagination.tpl
  • Produk-compare.tpl
  • pagination.tpl
order-alamat-multishipping-products.tpl Menampilkan alamat untuk memberikan suatu produk dalam situasi multishipping.
  • order-alamat-produk-line.tpl
order-alamat-multishipping.tpl  
  • order-steps.tpl
  • Errors.tpl
  • order-alamat-multishipping-products.tpl
   
order-address.tpl  
  • order-steps.tpl
  • Errors.tpl
order-carrier.tpl  
  • order-steps.tpl
  • Errors.tpl
order-confirmation.tpl  
  • Errors.tpl
  • order-steps.tpl
order-detail.tpl    
order-follow.tpl    
order-opc-baru-account.tpl    
order-opc.tpl  
  • belanja-cart.tpl
  • order-address.tpl
  • order-opc-baru-account.tpl
  • order-carrier.tpl
  • order-payment.tpl
  • Errors.tpl
order-payment.tpl  
  • Errors.tpl
  • order-steps.tpl
  • belanja-keranjang-produk-line.tpl
 
  • Errors.tpl
order-slip.tpl    
order-steps.tpl    
pagination.tpl    
password.tpl  
  • Errors.tpl
Harga-drop.tpl  
  • Produk-sort.tpl
  • NBR-produk-page.tpl
  • Produk-compare.tpl
  • pagination.tpl
  • Produk-list.tpl
  • Produk-compare.tpl
  • pagination.tpl
Produk-compare.tpl    
Produk-Daftar-colors.tpl    
Produk-list.tpl    
Produk-sort.tpl    
Produk.tpl  
  • Errors.tpl
  • Produk-list.tpl
Produk-comparison.tpl    
country.tpl terbatas    
Scenes.tpl    
Search.tpl  
  • Errors.tpl
  • Produk-sort.tpl
  • NBR-produk-page.tpl
  • Produk-compare.tpl
  • pagination.tpl
  • Produk-list.tpl
belanja-keranjang-produk-line.tpl    
belanja-cart.tpl  
  • order-steps.tpl
  • Errors.tpl
  • belanja-keranjang-produk-line.tpl
Sitemap.tpl  
  • Kategori-pohon-branch.tpl
  • Kategori-cms-pohon-branch.tpl
Stores.tpl    
store_infos.tpl    
pemasok-list.tpl    
Supplier.tpl Memungkinkan untuk menampilkan daftar produk per pemasok.
  • Errors.tpl
  • Produk-sort.tpl
  • NBR-produk-page.tpl
  • Produk-compare.tpl
  • pagination.tpl
  • Produk-list.tpl

Mari kita menyelam ke jalan tema diselenggarakan: folder, file, di mana mereka berada dan bagaimana menanganinya dengan benar

Organisasi tema

  • Organisasi tema
    • Folder
      • Thumbnail file
      • CSS dan Sass
        • CSS
        • Sass / Kompas
      • Font
      • Gambar
      • JavaScript
      • Bahasa
      • Mobile tema
    • File
      • File template
      • Style sheet
      • File gambar
      • Alat

Folder

Folder utama setiap tema PrestaShop adalah mereka:

  • The /cache folder ini berisi semua file-file sementara yang dihasilkan dan digunakan untuk meringankan beban server. Folder kosong secara default.
  • The /CSS folder ini berisi semua CSS file.
    • The /Sass folder berisi semua Sass .scss file sumber, sebelum mereka disusun ke dalam file CSS.
  • The /font folder ini berisi file font yang diperlukan.
  • The / img folder ini berisi semua gambar.
  • The /JS folder ini berisi semua file JavaScript.
  • The /lang folder ini berisi tema terjemahan. Hak akses harus ditetapkan pada CHMOD 666 (misalnya), sehingga alat terjemahan kantor kembali dapat membaca dan menulis ke dalamnya.

Folder berikut tidak langsung yang berhubungan dengan tema, tetapi bantuan yang Anda memastikan seluruh fitur PrestaShop's memiliki desain yang konsisten dengan tema Anda:

  • The /mails folderberisi template untuk email bahwa PrestaShop mengirim (konfirmasi order, password request, pengiriman pemberitahuan, dll).
  • The / mobile folder ini berisi versi mobile dari tema.
  • The /modules folder ini berisi file template untuk banyak modul.
  • The /PDF folder ini berisi file template untuk file PDF bahwa PrestaShop menghasilkan (faktur, pengiriman slip, pasokan perintah, dll).

Akar dari folder yang berisi file TPL saja, serta preview.jpg thumbnail file.

Thumbnail file

The preview.jpg file di root folder tema adalah thumbnail yang digunakan oleh PrestaShop dengan kantor kembali tema pemilih.

Ini berfungsi sebagai pengingat visual dari apa tema, dan Anda harus membuatnya karena itu screenshot daripada logo perusahaan Anda.

Dapat memiliki berbagai ukuran-tema default adalah 180 * 445 piksel.

Itu harus JPEG file.

CSS dan Sass

CSS

Tema CSS file terletak di /CSS folder.

Dianjurkan untuk memiliki sebuah style sheet yang umum untuk global aturan CSS: global.CSS.
Kemudian, dengan controller harus memiliki file CSS-nya sendiri: misalnya, Product.CSS untuk halaman produk.

Sass / Kompas

Sass dan Kompasfile opsional: Anda tidak perlu menggunakan alat ini untuk membangun file CSS untuk tema kembali kantor Anda.

Jika Anda menggunakan Sass dan Kompas, kami sangat menyarankan untuk menempatkan sumber .scss file dalam /Sass tema, sehingga para pengembang lain dapat memiliki akses ke tema dan ulang mereka lebih mudah.

Dari sana, Anda dapat menghasilkan file CSS /CSS folder dari file Sass dalam /Sass folder!

Font

The /font folder opsional: ini berisi font yang Anda memilih untuk menggunakan tema Anda.

Misalnya, menggunakan tema PrestaShop default font Font Awesome set)http://fortawesome.GitHub.io/font-awesome/) untuk ikon yang responsif, dan karenanya memiliki berkas-berkas berikut nya /font folder:

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

Jika Anda tidak membangun tema Anda dengan huruf tertentu atau icon ditetapkan dalam pikiran, Anda dapat melewatkan folder ini.

Gambar

Tema yang berhubungan dengan gambar yang disimpan dalam / img folder.

Anda dapat membuat sub folder untuk sebuah organisasi yang lebih baik. Misalnya, tema default memiliki subfolder berikut:

  • /Icon untuk ikon sederhana (misalnya, mereka tidak tersedia dalam set font pilihan Anda).
  • /jQuery untuk gambar jQuery-spesifik.

Anda dapat membuat lebih banyak jika diperlukan.

JavaScript

JavaScript file yang akan disimpan di /JS folder.

Tidak seperti CSS file, kami sarankan Anda untuk tidak memiliki file JavaScript umum global, atau jika Anda memiliki satu file per controller.

Bahasa

Semua file terjemahan akan disimpan dalam /lang folder.

File harus diberi kode ISO 3166-1 alpha-2 dalam huruf kecil: misalnya, fr.php.

File-file ini harus dihasilkan oleh alat terjemahan terpadu PrestaShop (terletak di lokalisasi / menu terjemahan).


Gerobak 0 Kereta Belanja

Tidak ada produk

Bebas biaya kirim! pengiriman
$0.00 Total

Periksa