Modul kait super

Contoh menunjukkan dua blok, disorot dalam warna berbeda hijau dan oranye. Setiap blok, selain konten di dalamnya (Harga: 20 rubel dan Modul Super Hook), dibingkai oleh apa yang disebut tag. Tag pertama adalah blok pembuka, tag kedua dengan tanda hubung adalah blok penutup, dalam kasus kami ini adalah

dan , yang pada gilirannya memiliki pengenal (id) dan kelas (kelas) sendiri. Mereka dimaksudkan untuk desain visual (styling) halaman situs web menggunakan teknologi CSS, yang disebut pemilih id dan pemilih kelas.

Untuk membedakannya dalam CSS, mereka dilambangkan dengan simbol. Untuk id itu adalah hash #, dan untuk kelas itu adalah sebuah titik. Misalnya, dalam contoh kita, id=’cena’ akan dinotasikan sebagai

Dan class=’nazvanie_tovara’ akan dilambangkan sebagai

Nama_produk.

Selektor ini juga digunakan dalam JavaScript dan jQuery untuk mengikat skrip ke blok tertentu.

Selain itu, CSS menggunakan pemilih tipe. Ini adalah bagian dari tag. Dalam kasus kami, ini adalah pemilih tipe div dan pemilih tipe span.

Mendefinisikan pemilih menggunakan browser Mozilla FireFox

Cara termudah untuk menentukan pemilih adalah menggunakan Mozilla. Saya akan menunjukkan cara melakukannya. Buka halaman dengan produk dan kali ini pindah , yang sekarang berada di bawah tombol troli, di atas label harga produk. Artinya, kita perlu mendefinisikan pemilih blok dengan harga produk sebagai blok induk dan pemilih modul sebagai blok anak. Membuka panel tambahan di FireFox sama seperti di Chrome, kombinasi tombolnya adalah Ctrl+Shift+I. Kemudian, di menu bidang tambahan di sebelah kiri, temukan panah (pilih elemen halaman) dan klik. Sekarang, dengan menggerakkan kursor ke halaman situs, kita melihat pemilihan blok. Kami memindahkan kursor ke blok dengan label harga dan, ketika memilih blok ini, klik di atasnya. Sekarang di kolom tambahan, sorot awal blok html

Klik kanan padanya dan pilih "salin pemilih unik" di jendela yang muncul.

Kami melakukan hal yang sama dengan modul Informasi tambahan

di bidang pengaturan modul Pemilih modul atau kode HTML, masukkan pemilih anak.block_wnd

Pilih posisi dalam kaitannya dengan blok “Di dalam blok di bawah” dan simpan hasilnya.

Dulu Sekarang

Petunjuk video: https://www.youtube.com/watch?v=xTSXTj0QM5E

Mendefinisikan penyeleksi menggunakan browser Google Chrome

Dalam modul Super Hook, kita perlu menentukan pemilih blok (blok induk) yang ingin kita ikat blok modulnya (blok anak). Penyeleksi ini sangat mudah ditentukan menggunakan browser Google Chrome. Untuk melakukan ini, Anda perlu membuka alat pengembang di browser menggunakan kombinasi tombol Ctrl+Shift+I atau cukup arahkan kursor mouse ke halaman situs dan tekan tombol kanan mouse. Dan di menu drop-down pilih Lihat kode elemen. Jendela tambahan akan terbuka menampilkan kode html dan jendela kecil di sebelah kanan dengan kode CSS. Jendela tersebut memiliki menu dengan gambar kaca pembesar ponsel dan nama tab yang dimulai dengan Elemen.

Di bagian bawah bidang yang dipilih kita melihat catatan kaki dengan pemilih yang kita perlukan untuk mengkonfigurasi modul. Gambar menunjukkan pemilih tipe div, pemilih id

#short_description_content

Berikut ini adalah penyeleksi kelas yang dipisahkan oleh sebuah titik, namun kami tidak tertarik padanya. Kami hanya tertarik pada pemilih id utama. Ini akan diperlukan sebagai penunjuk ke blok induk. Dalam pengaturan modul, di bidang Pemilih blok, tulis pengidentifikasi blok ini

#short_description_content

Sekarang mari lampirkan modul logo pembayaran ke blok ini, yang sekarang terletak di bawah tombol tambahkan ke troli. Untuk melakukan ini, kita perlu mendefinisikan pemilih blok logo.

Dan saya akan menunjukkan metode penentuan yang kedua. Alihkan menu alat pengembang ke Elemen di jendela bawah. Dan gerakkan kursor mouse ke modul logo pembayaran. Klik kanan. Di daftar drop-down, pilih tab bawah Lihat kode elemen. Di jendela pengembang dalam kode HTML, gerakkan kursor mouse hingga blok modul logo disorot dengan warna biru dan Anda akan melihat tag div pembuka dengan id='product_Payment_logos'. Ini adalah pengenal anak. Mari kita tuliskan pada pengaturan modul pada kolom “Pemilih modul atau kode HTML” sebagai pemilih

#logo_pembayaran_produk

Mari kita pilih posisi relatif terhadap blok di pengaturan dengan nilai “Di bawah blok” dan simpan hasilnya.

Buka halaman situs dan lihat hasilnya

Petunjuk video: https://www.youtube.com/watch?v=c5UafCGsr-U

Dengan cara ini kita dapat memindahkan blok modul, dan bukan hanya modul, ke tempat mana pun di halaman situs. Transfer hanya dibatasi pada halaman itu sendiri. Transfer ke halaman lain tidak dapat dilakukan.

Fitur modul tambahan

Seperti yang Anda lihat di halaman pengaturan, ada beberapa kolom lagi yang belum kami isi. Saya akan menjelaskan kegunaannya dengan menggunakan sebuah contoh. Selain memindahkan blok, modul ini memungkinkan Anda melengkapi halaman dengan konten Anda sendiri menggunakan teknologi HTML, JS, dan CSS. Misalnya, mari tambahkan widget grup VKontakte ke sidebar situs terlebih dahulu.

Jadi, mari kita tentukan pemilih induk. Sebagai contoh, saya menawarkan modul kategori di sidebar.

Salin kode HTML

< div id = "vk_groups" > < / div >

dan tempelkan ke kolom “Pemilih modul atau blok HTML”.

Situs blog saya telah mengumpulkan banyak informasi tentang mesin PrestaShop yang semakin populer. Menurut situs resminya, distribusinya telah diunduh oleh satu setengah juta pengguna. Di Internet Rusia, minat terhadap CMS ini juga meningkat, bahkan jika kita mempertimbangkan blog ini - 60% transisi terkait dengan PrestaShop.
Oleh karena itu, saya menggabungkan semua postingan yang saya tulis, menyelesaikan sesuatu dan ternyata menjadi lengkap instruksi PrestaShop.

Januari 2015: Instruksi yang diperbarui untuk PrestaShop 1.6

Tergantung pada tingkat pengguna, Anda dapat bekerja dengan salah satu dari tiga file PDF:

“Dasar-dasar bekerja dengan PrestaShop untuk manajer toko” – cocok untuk pengguna yang bekerja dengan toko yang sudah dikonfigurasi. Tugas mereka hanya mencakup pemeliharaan database produk terkini, sehingga semua operasi dijelaskan dalam bahasa yang paling mudah dipahami.

“PrestaShop - instruksi untuk pengguna” – jika Anda sendiri yang meluncurkan toko online, maka instruksi ini cocok untuk Anda. Ini menjelaskan operasi dasar untuk menginstal Prestashop, menyiapkan komponen utama, bekerja dengan modul dan templat penyimpanan. Setelah membaca instruksinya, Anda akan dapat bekerja lebih bermanfaat dengan Presta, memodifikasi template, menginstal dan mengedit modul.

“PrestaShop - instruksi untuk pengembang” – penekanan utamanya adalah pada bagian perangkat lunak: bagaimana mengembangkan modul Anda sendiri, kelas apa yang menjadi tanggung jawabnya, dan banyak lagi. Petunjuk ini akan berguna bagi pengembang komponen dan pengguna yang memutuskan untuk memperluas fungsionalitas dasar presta.

Rilis sebelumnya.

Juni 2012: Saat ini instruksi untuk Prestashop memiliki 26 halaman, tetapi saya berencana untuk menambahkan halaman baru saat postingan blog baru muncul. Dalam panduan ini, saya mencoba mempertimbangkan masalah yang lebih kompleks daripada penambahan produk atau kategori yang sepele. Misalnya, instruksi mencakup pemindahan modul dari hook ke hook, memodifikasi template default, dll. Manual ini tidak cocok untuk pengembang tingkat lanjut, karena membahas masalah yang lebih dangkal daripada sistem kelas atau pengontrol.

September 2012: Petunjuk dasar tidak diubah, namun petunjuk tambahan telah ditambahkan untuk pemula atau manajer toko. Ada kategori orang yang belum tentu mengetahui apa itu hosting atau cara memindahkan troli ke kolom lain, misalnya pengelola toko. Mereka harus bekerja dengan kategori, menambahkan produk, dan melakukan hal serupa. Bagi merekalah instruksi “Dasar-dasar bekerja dengan PrestaShop untuk manajer toko” ditulis; saat ini berisi 4 bab dan 13 halaman. Saya sedang berpikir untuk meningkatkan volume seiring waktu.

Agustus 2013: Menambahkan instruksi untuk pengembang untuk PrestaShop 1.5. Ini membahas kelas dasar secara lebih rinci, menjelaskan prosedur untuk membuat modul dan bekerja dengan template. Menambahkan instruksi untuk memperbarui PrestaShop ke 1.5

Oktober 2013: Semua instruksi untuk Prestashop dibagi menjadi dua folder, tergantung pada versi mesinnya. Folder “prestashop 1_4″ berisi instruksi yang diterbitkan pada tahun 2012, semua instruksi baru terletak di folder “prestashop 1_5″.

September 2014: Menambahkan instruksi untuk PrestaShop 1.6.

PrestaShop adalah platform e-commerce yang populer dan sangat terspesialisasi. Mesinnya sendiri gratis dan sangat mudah digunakan, tetapi semua tema dan add-on berbayar, jadi ini bukan pilihan paling populer. Namun, PrestaShop:

• komunitas maju tempat Anda dapat menemukan jawaban atas pertanyaan Anda;
• sejumlah besar tema dan tambahan luar biasa untuk memenuhi segala kebutuhan toko online;
• Ada dukungan yang juga bisa Anda ajukan pertanyaan.

Bagaimana cara menginstal PrestaShop

Langkah pertama tentu saja menginstal CMS itu sendiri di hosting Anda. Anda tidak akan mengalami kesulitan dengan ini jika Anda menonton video yang kami jelaskan:

• apa persyaratan sistem minimum untuk memasang mesin ini;
• cara install PrestaShop menggunakan cPanel;
• pengaturan apa yang perlu dilakukan setelah instalasi.

Menyiapkan PrestaShop: administrasi

Setelah berhasil menginstal mesin, Anda perlu memahami pengaturan dan administrasinya. Anda tidak akan menemukan banyak pengaturan, karena semua pengaturan utama sudah berfungsi secara default. Ini merupakan keunggulan besar PrestaShop dibandingkan CMS lain, seperti WordPress atau Joomla!, yang memerlukan instalasi add-on khusus untuk e-commerce. Namun, beberapa konfigurasi masih perlu dilakukan. Jadi apa yang akan Anda pelajari dari video ini:

• cara mengubah bahasa antarmuka;
• apa saja tombol panel kontrol utama;
• cara menyesuaikan tampilan menu;
• kategori apa yang ada di menu.

Menyiapkan PrestaShop: pemeliharaan, administrator, mode pengeditan langsung

Mari kita lihat pengaturan terpenting untuk menjalankan toko online di PrestaShop. Setelah menonton video tutorial kami, Anda akan belajar:

• aktifkan mode pemeliharaan;
• tambahkan pengguna baru dengan hak untuk bekerja di panel admin;
• mengedit desain situs web;
• bekerja dengan demodata.

Modul PrestaShop: cara mengubah, mengedit, menambah dan menghapus

Modul adalah komponen penting dari CMS. Hampir semua pengaturan tampilan situs akan dilakukan menggunakan modul. Mari kita lihat cara bekerja dengan mereka:

• di mana blok dengan modul berada di area admin;
• cara menambah, menghapus, mengedit atau mengubah modul.

Bagaimana cara menambahkan produk baru ke katalog PrestaShop

PrestaShop memberikan banyak peluang untuk bekerja dengan produk, selain menambahkan dan mengeditnya. Dalam video kita akan melihat:

• bagaimana menambahkan kombinasi dan karakteristik produk;
• bekerja dengan file: penyesuaian dan lampiran;
• cara menambahkan produk selangkah demi selangkah dan mengonfigurasi tampilannya;
• cara memasukkan harga barang;
• cara bekerja dengan bidang SEO;
• cara mengunggah file baru.

Cara bekerja dengan kategori produk di PrestaShop

Mari kita lihat kategori produk dan pengaturannya lebih detail. Dengan menggunakan kategori, produk dikelompokkan menurut karakteristik tertentu, yang menyederhanakan pekerjaan dengan toko online baik bagi pemilik maupun penggunanya. Kami telah menyiapkan video untuk Anda tentang pertanyaan-pertanyaan berikut:

• apa itu subkategori dan bagaimana mengkonfigurasi tampilannya;
• cara menambahkan kategori baru;
• cara menyesuaikan tampilan kategori untuk pengguna;
• cara mengisi semua kolom yang wajib diisi saat menambahkan kategori;
• Bagaimana cara menambahkan produk ke kategori yang sudah ada.

Pada postingan kali ini kami akan menganalisa secara detail CMS khusus untuk membuat toko online PrestaShop. Mesin ini sangat populer di tanah kelahirannya - di Perancis, namun belum terlalu populer di Rusia. Hanya 5% toko di Rusia yang diluncurkan dengan mesin ini, dibandingkan 37% di OpenCart. Mengapa, meskipun fungsinya kaya, gratis dan level tinggi, skrip tidak bisa menjadi yang terdepan, akan kita bahas di postingan kali ini.

Seperti inilah tampilan etalasenya: http://demo.prestashop.com/en/?view=front

Etalase toko online PrestaShop

Berikut tampilan panel adminnya: http://demo.prestashop.com/en/?view=back

Bagian administratif dari toko online di PrestaShop

Ini diadaptasi dengan sempurna untuk meluncurkan toko online di Rusia. Distribusi yang diunduh dari situs resmi selalu memiliki dukungan 100% untuk bahasa Rusia. Ini berarti pekerjaan akan terasa nyaman sejak langkah pertama: semua antarmuka jendela instalasi dan panel admin sepenuhnya dalam bahasa Rusia! Demo toko dalam bahasa Rusia dapat dilihat di situs pengujian kami http://prestashop-testshop.ru/, yang kami terapkan di hosting Beget dalam 1 klik berkat penginstal otomatis hosting.

Semua layanan terpopuler untuk toko online, seperti agregator pembayaran dan layanan obrolan online, memiliki plugin resmi untuk PrestaShop. Anda dapat dengan mudah mengunduh, misalnya, modul Yandex.Checkout secara gratis dari halaman resmi agregator.

Tentang PrestaShop dan pengembang

Asal usul Prestashop ada dua orang, Igor Schlumberger dan Bruno Levesque. Mereka sekarang menjadi salah satu pendiri dan perusahaan tersebut dimiliki oleh investor swasta.

Seperti yang dikatakan Bruno Levesque dalam salah satu wawancaranya, awalnya kantor mereka terletak di sebuah ruangan yang sangat kecil. Kemudian pada tahun 2007 di Paris mereka menjadi tim kecil yang berkembang di bidang online trading.

Selama bulan pertama pengerjaan mesin PrestaShop, telah diunduh lebih dari 1000 kali. Fakta ini menjadi dorongan kuat untuk pengembangan lebih lanjut. Saat ini tim PrestaShop memiliki 70 karyawan, dan Bruno Levesque menyebut dirinya seorang jutawan.

Bruno Levesque

Muncul pada tahun 2007, PrestaShop terus mendapatkan popularitas dan pada tahun 2011 menjadi mesin e-commerce gratis terbaik. Kami menulis tentang ini di artikel: .

Tim PrestaShop

Kegembiraan tim setelah mencapai 100.000 unduhan

Omong-omong, Bruno Levesque, sebagai pengembang dan pemrogram utama, secara pribadi memeriksa semua kode program baru miliknya dan semua plugin resmi.

PrestaShop baru-baru ini melakukan rebranding dari desain cerah dan asam dengan logo berbentuk tangan di tas menjadi desain yang lebih formal dengan ciri khas hewan peliharaan: penguin.

Logo baru

Saat ini, perusahaan memiliki rencana besar terkait memasuki pasar Rusia.

Untuk siapa PrestaShop terbaik?

“Jika Anda membutuhkan CMS gratis luar negeri siap pakai untuk toko online dengan terjemahan resmi 100%, maka PrestaShop adalah yang Anda butuhkan!”

Mesin ini mudah diunduh, mudah dipasang, dan mudah digunakan. Seperti yang telah kami katakan, semua isinya dalam bahasa Rusia. Selain itu, terdapat asisten bawaan yang akan membantu Anda memulai: membuat semua pengaturan yang diperlukan dan mengisi katalog produk. Artinya ini adalah mesin yang ideal untuk pemula!

PrestaShop juga selalu memiliki templat berkualitas tinggi yang disertakan secara default. Mereka terus-menerus memperbarui template mereka sesuai dengan mode. Artinya, jika Anda tidak mempunyai uang untuk membeli templat untuk toko Anda, Anda dapat mulai menggunakan templat gratis dan berkualitas tinggi yang disertakan.

Pro dan kontra utama dari PrestaShop

“Tidak ada mesin yang ideal. Pencarian abadi untuk keseimbangan antara kesederhanaan dan fungsionalitas mengarah pada fakta bahwa Anda selalu dapat menyoroti kelebihan dan kekurangan mesin!”

Mari kita lihat pro dan kontra CMS PrestaShop yang diterima secara umum untuk memahami apa yang menanti Anda saat Anda mulai mengerjakannya.

Kelebihan PrestaShop

1. Kemampuan SEO. Presta telah memikirkan segalanya untuk SEO dalam paket dasar. Nah, Anda perlu mencari plugin pihak ketiga. CNC dihasilkan secara otomatis, pengalihan 301, mengisi deskripsi dan tag meta kata kunci untuk halaman produk.
2. Katalog produk tingkat lanjut. Awalnya, PrestaShop ditujukan untuk toko-toko berukuran menengah. Oleh karena itu, fungsionalitas untuk bekerja dengan katalog produk cukup luas. Anda akan bisa menjual produk dengan banyak tambahan. karakteristik yang dapat ditemukan dengan mudah oleh pelanggan Anda menggunakan filter lanjutan untuk opsi tambahan. properti lalu bandingkan.
3. Fungsionalitas yang sangat kaya untuk mempertahankan pelanggan. Anda dapat memelihara database pelanggan, mengirimi mereka buletin email tentang promosi atau ulang tahun. Anda akan dapat bekerja dengan pelanggan melalui media sosial. jaringan.

Kekurangan PrestaShop

1. Tidak cukup populer di Rusia. Kebetulan dia kurang dikenal di Rusia. Tidak seperti OpenCart, misalnya, pengembangnya jauh lebih sedikit, dan forum tempat Anda dapat mengajukan pertanyaan jauh lebih sedikit.
2. Membuat beban di server. Jika Anda memiliki banyak produk, beban di server meningkat secara signifikan. Inilah sebabnya mengapa hosting gratis tidak cocok untuk Anda.
3. Tidak dimungkinkan untuk mengatur teks selain deskripsi untuk pengumuman produk. Hal ini menyebabkan duplikat konten, yang dapat berdampak buruk untuk pengoptimalan.

Memulai dengan PrestaShop

Selama proses instalasi, Anda hanya perlu mengklik Berikutnya beberapa kali, dan pengaturan dapat dilakukan dengan mudah menggunakan wizard pengaturan bawaan.

Jendela pertama dari wizard pengaturan

Memulai, serta bekerja di PrestraShop itu sendiri, sangatlah sederhana, karena... Pengembang telah menjadikan kemudahan penggunaan sebagai dasar produk mereka. Menurut mereka, PrestaShop seharusnya mudah dirawat dan dioperasikan karena... Hal ini ditujukan terutama pada toko online kecil. Ini berarti PrestaShop lebih cocok untuk startup dibandingkan orang lain: dengan menggunakannya Anda dapat dengan mudah memulai toko online baru.

Bagaimana dengan PrestaShop di Rusia?

Seperti yang sudah kami tulis di postingan sebelumnya, pangsa PrestaShop di Rusia mencapai 5%. Banyak layanan Rusia untuk toko online, seperti Yandex.Checkout, merilis plugin untuk memudahkan integrasi PrestaShop. Anda dapat membaca lebih lanjut tentang integrasi di artikel.

Ada komunitas PrestaDev Rusia, ada beberapa perusahaan khusus yang mengembangkan PrestaShop dan memproduksi plugin.

fungsionalitas PrestaShop

Sudah siap pakai, PrestaShop memiliki fungsionalitas yang sangat kaya. Kemungkinan besar Anda tidak akan langsung menguasai seluruh kekuatan PrestaShop. Dengan mendownload dan menginstal script ini secara gratis, Anda mendapatkan toko online kelas dunia:

• berbagai kategori dan sifat barang
• filter produk yang nyaman berdasarkan properti
• semua jenis alat pemasaran
• Anda dapat mengunduh plugin Yandex.Checkout di situs web Yandex
• berbagai laporan statistik tentang produk dan pelanggan
• semua jenis pengaturan SEO

Ada toko di situs resmi tempat Anda dapat membeli satu dari ribuan plugin jika Anda kehilangan beberapa fungsi tertentu.

Perbandingan PrestaShop dengan mesin gratis lainnya

Semua mesin toko online memiliki kelebihannya masing-masing. Mari kita bandingkan PrestaShop dengan mesin gratis populer lainnya dan lihat apakah ia kalah atau, sebaliknya, menang:

• PrestaShop bukanlah CMS berfitur lengkap dalam pengertian konvensional. Ini adalah mesin toko online yang sangat terspesialisasi. Dalam hal ini, ia kalah nyata dari, misalnya, WooCommerce atau VirtueMart, yang, sebagai plugin untuk CMS lengkap, memiliki kemampuan luas dari CMS klasik.
• Mesin templat Smarty digunakan sebagai alat pembuat templat. Meskipun bagi banyak orang ini akan menjadi nilai tambah.
• Komunitas berbahasa Rusia tidak mencukupi. Dukungan bahasa Rusia di forum resmi tidak terlalu bagus. Dalam hal ini, ini jauh lebih rendah daripada, misalnya, OpenCart, yang mudah untuk menemukan forum dengan banyak jawaban atas banyak pertanyaan tentang mesin.
• Situs resminya belum diterjemahkan ke dalam bahasa Rusia. Dalam hal ini, semua mesin asing serupa. Tapi beberapa bagian. situs telah diterjemahkan (demo, toko plugin).
• Ini masih lebih kompleks daripada, misalnya, musuh terburuknya OpenCart. Meskipun lebih mudah dibandingkan, misalnya, Magento.

Kesimpulan. Apakah PrestaShop layak digunakan?

Menurut pendapat kami, ini sangat bermanfaat jika Anda segera membutuhkan mesin canggih dan terspesialisasi yang dirancang untuk e-commerce. Script ini terus bergerak dan berkembang, yang berarti toko Anda akan selalu dalam tren dan tidak akan dibiarkan tanpa dukungan.

Di postingan tersebut Anda dapat membiasakan diri dengan toko online di mesin ini.