Unlimited WordPress themes, graphics, videos & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Code
  2. Web Development
Code

Tema PrestaShop dijelaskan

by
Length:LongLanguages:

Indonesian (Bahasa Indonesia) translation by Keti Pritania (you can also view the original English article)

PrestaShop adalah #1 solusi open source e-Commerce di web. Hotel ini menawarkan banyak fitur, Pengaya dan tema, tetapi kurangnya dokumentasi yang baik telah diberikan pendatang baru persepsi tak terhampiri. Dalam artikel ini, saya akan memandu Anda melalui proses membangun tema kustom Anda, serta membuat dan menyesuaikan modul Prestashop.

PrestaShop berjalan pada PHP dan mySQL, dan bergantung pada mesin Smarty untuk yang "template" (halaman). Jangan khawatir, jika Anda tidak akrab dengan Smarty. Pada dasarnya Anda menggunakannya untuk membuat halaman dengan pengganti bagian, dan Prestashop mengisi info ketika halaman load. Sangat mudah untuk transisi ke, jika Anda menggunakan sesuatu seperti setang atau menekankan template.

Saya akan berasumsi bahwa Anda sudah mengunduh dan memasang Prestashop. Jika tidak, Anda dapat men-download versi terbaru; mereka memiliki video instruksional Anda dapat menonton untuk belajar bagaimana untuk memasangnya.

Prestashop Website

Mendaftar tema Anda

Situs Anda harus melihat sesuatu seperti gambar berikut, jika Anda mengatur Prestashop dengan pengaturan default.

Proses pembangunan tema Anda sendiri dimulai dengan membuat folder. Di peramban pilihan file, arahkan ke direktori root Prestashop dan Anda akan menemukan folder, yang disebut tema. Di dalam folder tema, menciptakan direktori baru dengan nama tema Anda. Aku akan memanggil saya, "Demo".

Jika Anda menambahkan gambar dari template Anda ke folder ini dan nama itu preview.jpg, Prestashop harus secara otomatis menemukan dan menambahkan template Anda ke back-end. Jika tidak, atau Anda lebih memilih untuk menambahkan gambar kemudian, Anda dapat secara manual menambahkan tema. Untuk melakukan ini, pergi ke pilihan tema di bawah menu preferensi, dan klik Add New di bagian atas. Setelah selesai, Anda akan melihat tema Anda di tengah halaman. Mengaktifkannya dengan hanya mengklik di atasnya dan menekan tombol Simpan.

Tambahkan logo(s) Anda saat Anda berada di sini; Anda dapat menemukan pilihan ini di bagian bawah halaman. Anda mungkin perlu menambah batas meng-upload file di Prestashop (atau mungkin bahkan file konfigurasi PHP) jika Anda memiliki gambar yang sangat besar.


Kecelakaan kursus di Prestashop

Smarty adalah mesin template untuk PHP, memfasilitasi pemisahan presentasi dari logika aplikasi.

Seperti yang saya sebutkan sebelumnya, Prestashop menggunakan Smarty untuk menghasilkan halaman; Jadi, semua file template memiliki ekstensi .tpl. Ada banyak halaman yang Anda harus membuat untuk memiliki tema lengkap; Luangkan waktu sejenak dan melihat daftar file.

Pada akhirnya, fungsi tema Anda menentukan halaman mana yang Anda harus menerapkan. Halaman ini didasarkan pada file dalam controllers folder, dan Anda dapat menimpa kontroler standar atau menambahkan kontroler kustom Anda sendiri untuk menyesuaikan tema Anda. Tapi yang berada di luar cakupan artikel ini. Di antara controller dalam direktori controllers\front adalah dua file template yang secara otomatis beban: header.tpl dan footer.tpl.

Isi utama dari situs akan dimuat oleh modul dengan bantuan "Kait".

Ada dua jenis kait di Prestashop: tindakan dan layar kait. Keduanya berfungsi dengan cara yang sama, tetapi mereka berbeda dalam tujuan. Sebuah hook pada dasarnya memberikan pengguna cara untuk melampirkan kode kustom untuk sumber luar. Dalam kasus tindakan hook, kode apapun melekat pada pengait berjalan ketika hook disebut. Sebagai contoh, Prestashop dilengkapi dengan sebuah hook default yang disebut actionProductAdd yang berjalan ketika menambahkan produk. Jadi Anda dapat melampirkan sebuah modul untuk hook ini jika Anda ingin mengirim email newsletter setiap kali produk baru ditambahkan.

Hook tampilan sangat mirip, tapi bukan menghubungkan fungsi untuk sebuah acara, Anda menghubungkan fungsi ke tempat tertentu pada template. Dengan kata lain, Prestashop akan memanggil modul Anda dengan sebuah titik tertentu (misalnya sidebar kanan), dan apa-apa kembali ditempatkan ke dalam halaman. Anda dapat melihat semua kait saat ini terdaftar dengan pergi ke modul > halaman posisi di belakang admin.

Secara pribadi, saya menemukan itu terbaik untuk memulai dengan tema HTML standar. Ini bukan persyaratan, tetapi saya sangat merekomendasikan hal ini untuk sejumlah alasan:

  • Hal ini memungkinkan Anda untuk segera melihat yang kait Anda perlu dan bagaimana untuk membagi konten Anda.
  • Itu memberikan arah yang jelas dari file template yang Anda harus membuat, serta memberi Anda gagasan tentang apa yang akan menjadi konten statis dan apa yang harus menjadi sebuah modul. Hal ini juga memungkinkan Anda untuk menambahkan preview.jpg file segera.

Gambar berikut adalah gambar dari template HTML contoh saya:

Dan di sini Anda dapat melihat bagaimana saya akan split menjadi Prestashop kait:


Menciptakan Template parsial

Sekarang mari kita membuat header.tpl file dalam direktori tema Anda, dan mengisinya dengan header tema Anda. Ini termasuk doctype, daerah, dan segala sesuatu di dalam tubuh yang Anda inginkan ditampilkan pada semua halaman. Berikut adalah contoh file header.tpl:

Ada beberapa hal untuk menunjukkan dalam kode ini. Saya preprended CSS file nama dengan {$css_dir}. Ini adalah variabel Smarty yang menunjuk ke folder, yang disebut css di dalam direktori tema Anda, dimana semua file CSS Anda harus pergi.

Baris berikutnya menggunakan Smarty foreach loop untuk menambahkan semua file CSS modul diaktifkan. It's worth dicatat bahwa, jika Anda membuat sebuah file CSS yang disebut global.css dalam direktori css, loop secara otomatis menambahkan file ke halaman.

Beberapa baris kemudian, lain foreach loop proses JavaScript file dalam direktori js dan menambahkan mereka ke halaman. Dalam bagian terakhir, aku membuka dari elemen body dan mendefinisikan sebuah kait untuk modul menu. Akhirnya, saya menyelesaikan dengan menampilkan logo situs.

Kecuali Anda seorang veteran Prestashop, Anda Anda mungkin bertanya-tanya mana aku datang dengan variabel ini. Seperti saya katakan sebelumnya, sayangnya Prestashop's dokumentasi yang kurang, tetapi mereka menyediakan alat debugging yang Anda dapat memulai dengan menambahkan {debug} ke setiap file template. Ketika Anda membuka halaman yang sesuai pada browser Anda, Anda akan mendapatkan pop-up yang berisi daftar semua variabel template yang spesifik. Hal ini memungkinkan Anda untuk dengan cepat (menggunakan ctrl/cmd-F secara dramatis membantu) mengidentifikasi apa variabel yang ditetapkan, serta nilai-nilai mereka.

Sekarang mari kita membuat footer.tpl template. Saya akan terus ini sederhana dan tutup<body></body>dan<html></html>elemen, tetapi merasa bebas untuk menambahkan apa yang Anda inginkan untuk menampilkan di bagian bawah setiap halaman. Ini dapat mencakup apa pun dari kait untuk JavaScript kustom; ada tidak ada batas untuk apa yang dapat Anda masukkan di sini.

File terakhir yang saya ingin menerapkan adalah index.tpl file. Ini adalah file "halaman depan" yang menampilkan ketika pengguna mengakses akar dari situs Anda. Tema Prestashop default, sidebars yang dimuat dalam header.tpl file, dan sebenarnya Indeks template hanya berisi panggilan untuk displayHome hook. Ini baik jika Anda ingin sidebars pada semua halaman, tapi sekali lagi, saya ingin menekankan bahwa kait diimplementasikan pada kenyamanan Anda sendiri. Anda tidak perlu untuk mengimplementasikan hook apapun, dan Anda dapat menambahkan kait kustom Anda sendiri jika Anda membutuhkan lebih dari fungsi standar.

Ketika membuat halaman indeks Anda, Anda harus memutuskan bagian mana statis dan bagian mana harus dimuat secara dinamis melalui modul. Aku dihapus menu utama dari header karena itu adalah sesuatu yang saya ingin kontrol dengan modul. Jadi saya meletakkan hook mana aku ingin menu dan saya dapat membuat modul yang melekat pada kait ini. Anda dapat memuat beberapa item dengan hook sama. Tidak ada alasan untuk menambahkan beberapa kait bersama-sama, dan Anda dapat mengatur urutan hook modul di back-end under modul > posisi.

Lokalisasi

Fitur khusus Prestashop terakhir yang Anda harus mempertimbangkan adalah alat-alat lokalisasi Prestashop's. PrestaShop memungkinkan Anda untuk dengan mudah menerjemahkan situs Anda ke dalam berbagai bahasa dengan menggunakan fungsi Smarty, bernama l. Anda menggunakannya dengan mengganti string standar dengan fungsi l, melewati string sebagai parameter. Berikut adalah contoh dari<h1></h1>elemen, baik dengan dan tanpa terjemahan:

Bahkan jika Anda saat ini tidak berencana menerjemahkan situs Anda, itu adalah perubahan kecil yang memungkinkan Anda untuk dengan mudah menerjemahkan halaman Anda jika Anda kemudian memutuskan untuk melakukannya. Setelah Anda membuat perubahan ke template Anda, Anda dapat pergi ke lokalisasi > terjemahan halaman di back-end dan klik pada kewarganegaraan Anda ingin menerjemahkan ke.

Menambahkan bahasa non-standar sederhana, dan aku menutupi itu di bagian kedua pada halaman (aptly bernama "Tambah/Mutakhirkan bahasa").

Manfaat lain menggunakan Prestashop's lokalisasi adalah daftar frasa Prestashop memberi Anda. Daripada pergi melalui seluruh situs Anda, Anda dapat tangan Daftar frasa untuk penutur asli bahasa yang Anda dan cepat masukan nilai-nilai, sementara tidak pernah menyentuh tema Anda.

Sekarang masukkan halaman rumah Anda khusus HTML untuk index.tpl, dan pastikan untuk menyediakan kait yang ingin Anda gunakan. Ingatlah untuk menggunakan {debug} fungsi Smarty, jika Anda perlu melihat variabel tersedia untuk template Anda.

Sekarang Anda dapat membuka browser dan navigasikan ke root situs Anda. Tambang terlihat seperti ini:

Ini mungkin tidak tampak seperti banyak, tetapi Anda telah membangun cangkang template Anda. Jika template Anda terlihat seperti berantakan objek, hal ini mungkin karena Anda memiliki banyak modul diinstal. Secara default, Prestashop memungkinkan modul banyak; Saya sarankan pergi ke halaman modul dan menghapus semua modul. Jangan khawatir tentang kehilangan mereka karena Anda dapat menginstal ulang mereka dengan mengklik tombol install di modul yang diinginkan.

Ketika membuat suatu tema Prestashop, Anda akan melihat modul bertanggung jawab untuk sekitar 90% konten. Ada modul yang menampilkan produk, modul untuk keranjang belanja, dll. Bagian utama menjadi Prestashop themer mencakup, setidaknya, pengetahuan tentang bagaimana untuk menyesuaikan tampilan modul.


Modul

Modul di Prestashop tidak sama dengan Wordpress widget.

Modul di Prestashop tidak sama dengan widget Wordpress; Modul PrestaShop's hanya dapat dilampirkan ke kait yang menentukan pencipta modul. Misalnya, jika Anda membuat sebuah modul yang menampilkan sebuah "berlangganan newsletter" blok dan Anda memasangnya untuk pergi di salah satu dari sidebars, Anda tidak bisa kemudian tempat itu di daerah footer.

Ini mungkin tampak rumit, tetapi ada alasan yang sangat bagus untuk ini: ketika Anda membuat modul, Anda menyediakan fungsi yang terpisah untuk masing-masing kait yang ingin Anda gunakan. Misalnya, jika modul menu dapat berperilaku berbeda berdasarkan lokasinya di template.

Ini memberi Anda banyak ruang untuk menyesuaikan modul.

Praktek ini membuat banyak lebih masuk akal jika Anda mempertimbangkan jenis lain kait: tindakan kait. Anda jelas tidak ingin fungsi yang mengeksekusi ketika Anda menambahkan produk baru untuk mengeksekusi ketika pengguna membeli produk dari Anda. Hal yang sama berlaku untuk menampilkan kait; setiap kail memiliki fungsi tersendiri, membiarkan Anda melakukan apa pun yang Anda inginkan dengan itu.

Ketika membangun sebuah tema, ada dua cara Anda dapat pergi tentang menambahkan modul. Opsi pertama adalah untuk membuat modul sendiri. Ini adalah pilihan lebih membosankan, tetapi Anda mendapatkan lebih banyak kontrol dalam produk akhir. Di sisi lain, ada lebih dari 2000 modul di Katalog resmi modul (dan bahkan lebih situs pihak ketiga). Kemungkinan baik Anda dapat menemukan sesuatu yang sesuai dengan kebutuhan Anda.

Pilihan kedua adalah dengan menginstal modul siap pakai; PrestaShop memberi Anda pilihan untuk menyesuaikan penampilan dengan meng-override file template. Ini adalah pilihan yang lebih baik, jika Anda tidak benar-benar ingin untuk memulai coding modul Anda sendiri, dan memungkinkan Anda untuk fokus pada sisi grafis. Aku akan menutupi kedua pilihan; Jadi mari kita mulai dengan yang pertama.


Membuat modul Anda sendiri

Kita akan membangun sebuah modul yang menampilkan sejumlah dikonfigurasi dari produk pada home page. Longgar ini didasarkan pada modul saham, tetapi modul saya akan pergi sedikit lebih ke Prestashop's mendasari kelas untuk mudah-mudahan memberikan lebih mendalam melihat proses.

Pertama, membuat folder dalam direktori modul, dan kemudian membuat file PHP itu dengan nama yang sama sebagai folder. Ketika Anda membuka folder modul, Anda akan melihat konvensi penamaan, di mana semua modul yang hanya menampilkan konten mulai dengan kata "blok". Ini, tentu saja, bukanlah suatu kebutuhan, tapi masuk akal. Aku akan nama saya blockdisplayproducts folder, dan di dalamnya, saya akan membuat PHP file dengan nama yang sama.

Membuka PHP file dan mendefinisikan kelas modul:

PrestaShop modul berorientasi objek; oleh karena itu, Anda harus membuat class modul Anda. Nama kelas Anda harus versi cased unta nama folder Anda.

Di bagian atas dari file, Anda dapat melihat jika pernyataan. Hal ini memastikan bahwa file tersebut tidak dimuat secara langsung melalui browser. Selanjutnya, kelas Anda baik harus langsung subclass modul kelas atau subclass mendiang kelas modul.

Dalam konstruktor, kami setup modul properti. PrestaShop menggunakan informasi ini untuk menampilkan di back-end:

  • nama unik "kode nama", dan itu bukanlah nama sebenarnya ditampilkan dalam back-end.
  • tab memberitahu Prestashop modul kategori. Anda dapat menemukan daftar lengkap kategori dengan membuka Controllers\Admin\AdminModuleController.php file.
  • penulis, nama, dan versi adalah diri-explanitory.
  • needs_instance memberitahu Prestashop untuk membuat sebuah instance dari variabel Anda saat mengakses halaman modul. Hal ini biasanya tidak diperlukan, tetapi jika modul Anda perlu menunjukkan pesan atau log sesuatu ketika halaman modul aktif, maka Anda harus mengubah ini ke 1.

Dua baris terakhir setup aktual tampilan nama dan deskripsi untuk modul, dan mereka menggunakan metode lokalisasi yang sama untuk memungkinkan menerjemahkan mereka untuk bahasa yang berbeda. Dua baris harus pergi setelah inisialisasi orangtua sesuai urutan pilihan Prestashop's digunakan oleh modul resmi mereka.

Langkah berikutnya adalah untuk meng-override metode instalasi. Ini adalah dimana kita dapat menentukan kait yang kita butuhkan, serta pilihan default untuk modul kami. Jika pengaturan gagal, maka instalasi akan gagal.

Modul ini ditujukan untuk halaman rumah, jadi saya akan menghubungkannya ke rumah hook. Kami juga ingin menambahkan CSS file untuk header, berarti kita harus menambahkan hook header juga. Jika Anda pergi ke back-end di bawah modul > posisi halaman, Anda dapat menemukan nama teknis kait (yang adalah apa yang kita akan menentukan di sini).

Tepat setelah fungsi __construct(), tambahkan berikut:

Hal ini menambah dua kait dan menetapkan standar jumlah produk ke enam. Anda harus nama properti sesuatu yang unik sehingga modul lain tidak mengganggu dengan nilai-nilai Anda. Pendekatan sederhana menambahkan nama modul Anda atau inisial ke awal nama.

Anda sekarang dapat menginstal modul di halaman modul, dan itu harus berhasil menginstal jika semuanya sudah disetel dengan benar. Pergi ke halaman posisi, dan akan menampilkan yang terdaftar di bawah kait dua.

Menerapkan kait cukup sederhana; membuat fungsi umum dengan kata "hook" diikuti dengan nama hook. Mari kita mulai dengan header hook. Kami hanya ingin untuk menambahkan CSS file untuk tema kami. Berikut adalah fungsi lengkap:

Membuat CSS file dalam direktori tema Anda, dan di header template Anda, Anda harus memuat.

Hook berikutnya sedikit lebih rumit. Harus mengambil sejumlah produk dari database dan memuat mereka ke dalam template file. Fungsi untuk mengambil produk tidak kembali produk-produk gambar atau link, jadi kita harus memanggil beberapa fungsi yang berbeda dan 'membangun' array produk. Berikut adalah fungsi lengkap:

Ini dimulai dengan mendapatkan jumlah produk untuk menampilkan dan id pengguna bahasa. Kami kemudian membuat panggilan untuk mendapatkan nomor ditetapkan produk mulai dari produk pertama yang terdaftar. Setelah itu, kami memastikan bahwa ada masalah mendapatkan produk keluar jika ada. Blok berikutnya adalah bagian yang saya sebutkan sebelumnya, yang membangun sebuah array dengan semua sifat-sifat kita akan membutuhkan ketika menampilkan item. Ini termasuk gambar dan link yang tidak dikembalikan dengan sisa data produk. Bagian terakhir menambahkan produk array ke Smarty dan load file template yang Anda pilih. Aku bernama template file dan CSS file dengan nama yang sama sebagai modul, tapi ini bukan keharusan; Anda dapat nama apapun yang Anda inginkan.

Jika Anda membuka situs Anda sekarang, Anda hanya akan melihat pesan, mencatat "Template tidak ditemukan untuk modul blockdisplayproducts." Jadi mari kita membuat file template di dalam direktori modul kami, penamaan itu sama seperti Anda hanya ditentukan dalam fungsi kait. Bagian ini sangat tergantung pada tata letak tema tertentu Anda, tapi di sini adalah file template saya:

Karena Prestashop menggunakan template Smarty, Anda memiliki sejumlah fungsi pembantu yang dapat Anda gunakan ketika menampilkan data Anda. Kita mulai dengan jika fungsi untuk memastikan array produk baik-baik saja. Jika itu adalah, kita masuk ke dalam untuk loop, menghasilkan HTML tertentu untuk masing-masing. Kami menggunakan Smarty dibangun pada fungsi pembantu untuk strip tag HTML dan rahasia nama penulis untuk huruf besar, dan kami menggunakan metode lain untuk memformat harga untuk jumlah desimal yang diinginkan. Untuk melihat daftar lengkap pengubah, lihat di sini.

Juga, perhatikan bahwa, ketika menerjemahkan string di sini, Anda harus memasukkan nama modul Anda. Hal ini karena terjemahan tidak terikat untuk tema, tetapi untuk modul itu sendiri. Di sisi lain, fungsi l adalah template spesifik; Jadi, dalam rangka untuk itu untuk menemukan file terjemahan, hal ini membutuhkan nama modul.

Anda sekarang dapat melihat situs Anda dalam browser; Jika Anda telah menambahkan produk, mereka harus ditampilkan pada home page sekarang.

Sekarang, modul kami berfungsi sepenuhnya, tetapi tidak ada cara untuk menyesuaikan jumlah produk yang dikembalikan. Untuk melakukan ini, kita perlu menambahkan fungsi, disebut getContents. Jika modul memiliki fungsi ini, kemudian Prestashop akan secara otomatis menambahkan mengkonfigurasi tombol pada halaman "modul". Apa pun yang dikembalikan oleh fungsi ini akan ditampilkan dalam halaman konfigurasi. Untuk memulai, menambahkan fungsi modul kelas dan mengisinya dengan berikut:

Fungsi ini hanya membangun HTML yang diperlukan untuk menampilkan bentuk dengan sebuah nomor dan Simpan tombol. Sekali lagi, saya menggunakan metode $this->l() sehingga Anda dapat menerjemahkan modul ke dalam bahasa lain di masa depan, jika Anda perlu melakukannya. Saya telah menggunakan bidang nomor dalam bentuk HTML, tapi hati-hati, jika Anda membuat modul komersial. Masih tidak didukung oleh semua browser. Yang mengatakan, jika itu adalah untuk penggunaan pribadi Anda sendiri, kemudian merasa gratis!

Satu-satunya hal yang mungkin tampak samar adalah fungsi Tools:: safeOutput() yang kita panggil pada URL. Saya jujur tidak 100% yakin bagaimana penting adalah panggilan ini, tetapi apa yang dilakukannya adalah striping semua tag HTML dan mengkonversi karakter diperlukan to html entitas.

Selanjutnya, pergi ke halaman modul dan klik tombol configure pada modul Anda. Anda akan disambut dengan bentuk yang kita baru saja dibuat.

Anda dapat mengatur nomor dan tekan Simpan, tapi kami belum ditulis dalam fungsi tabungan belum, sehingga akan terus ulang ke 6 (nilai yang sudah tersimpan).

Kembali dalam fungsi, tambahkan kode berikut ke awal fungsi:

Ini akan memeriksa untuk melihat jika nilai telah disampaikan - yaitu, jika nilai numProds ada sebagai $_GET atau variabel $_POST. Kami kemudian memperbarui properti kami menyimpan nilai. Metode Tools::getValue menerima nama bidang formulir dan opsional kedua string apa kembali jika bidang formulir tidak ditemukan; itu kemudian mengembalikan sebuah string yang diformat dengan nilai yang disampaikan. Hal ini penting untuk menempatkan ini sebelum Anda menghasilkan bentuk HTML; Sebaliknya, formulir akan berisi nilai-nilai lama sebagai apposed ke yang diperbarui.

Dengan bahwa sedikit akhir kode, kami telah menyelesaikan modul. Satu-satunya hal yang harus Anda lakukan adalah menambahkan sebuah 16 x 16 GIF ikon folder modul.

Sekarang kita siap untuk beralih ke opsi berikutnya untuk mengintegrasikan modul dengan tema Anda.


Mengganti modul yang sudah ada

Pilihan kedua adalah dengan menggunakan modul yang ada dan re-tema itu sesuai dengan likings Anda. Pilihan ini jauh lebih sederhana karena Anda hanya perlu membuat ulang file ".tpl" dari modul.

Tema contoh saya masih hilang menu navigasi atas, jadi mari kita menyesuaikan modul tersebut. Untuk memulai, Aktifkan/menginstal modul di halaman 'modul', disebut 'Top horizontal menu'. Langkah berikutnya adalah untuk menciptakan sebuah folder dalam direktori tema Anda, disebut modul. Di dalamnya, Buat folder lain dengan nama sebenarnya dari modul - dalam kasus kami, ini adalah blocktopmenu. Ketika loading file tpl modul, Prestashop terlebih dahulu memeriksa untuk melihat apakah ada file dalam direktori modul-override tema diaktifkan dengan nama yang sama. Jika demikian, itu akan memuat versi tema bukan saham. Modul menu tpl file bernama blocktopmenu.tpl, sehingga Anda perlu membuat file dengan nama yang sama di folder baru yang kami hanya dibuat.

Cara termudah untuk mencari tahu apa jenis data modul menawarkan baik Lihatlah file tpl mereka dan melihat data apa yang mereka gunakan, atau memuat alat {debug}. Untuk mempercepat hal-hal, saya dapat memberitahu Anda bahwa plugin ini hanya menawarkan sebuah variabel, nama MENU, yang berisi string dengan semua item menu yang digabungkan bersama-sama dalam

  • Tag. Sekarang, dengan sendirinya, ini tidak memberi Anda banyak ruang gerak, ketika datang untuk menyesuaikan penampilan. Tapi, bagaimana jika Anda ingin menambahkan sesuatu selain hanya li tag untuk setiap item? Yah, Untungnya, Smarty untuk menyelamatkan! Ini bukanlah sebuah artikel tentang Smarty jadi aku akan menyimpan bagian ini pendek, tapi, pada dasarnya, kita akan menggunakan kombinasi dari string menggantikan fungsi dan PHP meledak fungsi untuk mengisolasi unsur-unsur individu. Setelah itu, kita dapat membangun kode HTML dengan foreach loop. Berikut adalah file template selesai saya untuk modul ini:

    Sekarang ini adalah banyak kode baru, jadi aku akan pergi melalui itu baris demi baris. Ini dimulai dengan pembukaan tag div dan ul; ini adalah murni untuk alasan estetika. Selanjutnya, kita menggunakan perintah Smarty, yang disebut menetapkan. Hal ini persis apa yang kedengarannya seperti: menetapkan nilai ke variabel. Dalam pernyataan menetapkan pertama, kami akan menghapus pembukaan li tag, dan, dalam kedua, kita meledak string oleh penutupan li tag. Hasilnya adalah array yang berisi daftar link item menu. Kami kemudian pindah ke foreach loop, dimana kami menampilkan setiap item di dalam

  • Tag - kecuali, kali ini, kami telah menambahkan gambar ikon setelah setiap menu item kecuali item menu terakhir. Juga, Anda mungkin telah memperhatikan bahwa aku menghindari nilai terakhir dalam array semua bersama-sama. Hal ini karena nilai terakhir adalah hanya karakter newline.

    Jika Anda telah dieksekusi semuanya dengan benar sejauh ini, Anda dapat sekarang tema itu sesuai dengan keinginan Anda dan menambahkan beberapa halaman ke menu dari modul "mengkonfigurasi" halaman. Setelah selesai, Anda dapat pergi ke situs Anda dan melihat menu bekerja seperti yang diharapkan!


    Kesimpulan

    Ini telah menjadi sangat singkat tapi menyeluruh review teknik yang dibutuhkan untuk membuat tema PrestaShop. Selama tutorial, aku sudah melalui langkah-langkah yang diperlukan untuk membuat tema penuh multi-bahasa, dan dua cara yang berbeda untuk menempatkan bertema modul ke template Anda.

    Bergerak maju, saya sarankan bahwa Anda menyelam sedikit lebih dalam ke dalam Smarty, karena menawarkan sejumlah fitur tersembunyi yang benar-benar dapat membantu Anda keluar. Untuk tempat yang baik untuk mempelajari lebih lanjut tentang Prestashop, Yah, tidak ada banyak; Saya sarankan membaca sumber. Pada saat penulisan ini, Prestashop's dokumentasi agak jerawatan di cakupan topik; Namun, kode sumber mereka sangat baik didokumentasikan. Pilihan yang sangat baik adalah untuk memeriksa modul dan tema untuk mendapatkan pemahaman yang lebih dalam dari apa yang Prestashop mampu lainnya.

    Saya harap Anda menikmati membaca artikel ini. Jika Anda memiliki pertanyaan tentang artikel itu sendiri, atau Prestashop pada umumnya, merasa bebas untuk meninggalkan komentar di bawah ini!

    Membutuhkan premium, siap-to-go PrestaShop tema? Periksa ThemeForest!

  • Berguna link: PrestaShop plugin dari CodeCanyon.

    Advertisement
    Advertisement
    Advertisement
    Advertisement
    Looking for something to help kick start your next project?
    Envato Market has a range of items for sale to help get you started.