😕 🧓 👩🏻 Revisi panel admin Webasyst 🔋 🎫 🎅🏼

Pada artikel ini saya ingin memberi tahu bagaimana, dengan cara sederhana, untuk membuat hidup saya sedikit lebih mudah, mengisi situs di mesin WebAsyst, segera melanjutkan untuk mengedit produk dan memiliki kemampuan untuk menghapus semua kotak centang pada halaman. Dan juga berpotensi menghemat 500 rubel pada pembelian plugin yang memperbaiki salah satu masalah ini.

Kata pengantar

Saya bekerja di bidang membuat dan mempromosikan situs web, dan untuk toko online kami terutama menggunakan mesin Webasyst. Saya tidak bisa mengatakan hal buruk tentang dia, tetapi dalam satu tahun mengisi situs di atasnya, saya menyadari bahwa 2 hal mengganggu saya, yang akan saya bicarakan nanti.
Dan begitu saya memutuskan untuk melihat kode panel admin itu sendiri dan mencoba untuk memperbaiki apa yang tidak saya sukai.

Beralih ke pengeditan produk dengan mengkliknya di panel admin

Ini adalah daftar barang yang terlihat:

gambar

Faktanya adalah bahwa jika Anda cukup klik pada nama dalam daftar barang, maka jendela perantara tersebut terbuka:

gambar

Di dalamnya Anda dapat pergi untuk mengedit foto atau mengubah nama ... Dan ketika Anda mengklik tombol "edit", transisi langsung untuk mengedit.

gambar

Mungkin seseorang nyaman. Seseorang tapi bukan aku.

Menjelajahi

Jika Anda melihat tautannya, menjadi jelas bahwa laman perantara memiliki alamat

https:///webasyst/shop/?action=products#/product/id

Dan halaman pengeditan + sama /editdi bagian akhir.

Kami benar

Tidak sulit menemukan template untuk halaman tampilan daftar produk, itu terletak di:

//wa-apps/shop/templates/actions/products/

Ada 3 file, yang namanya dimulai dengan product_list_. Semuanya menggambar panel admin dalam 3 variasi:

gambar

Tampilan barang dalam bentuk tabel, ikon dan tabel dengan artikel. Saya hanya menggunakan tampilan tabel, jadi pilihan saya adalah file

product_list_table.html

Setelah membuka inspektur halaman browser di panel admin, saya mengetahui bahwa tautan produk terlihat seperti ini:

<td class="drag-handle s-product-name">
    <a href="#/product/6037">
        <div>.  <i class="shortener"></i></div>
    </a>
</td>

Menemukan baris dalam file di atas:

<td class="drag-handle s-product-name">
    <a href="#/product/{%#p.id%}/">
        <div>{%#p.name%}<i class="shortener"></i></div> 
    </a>
</td>

dan ditambahkan pada akhir pengeditan, ternyata seperti ini:

<td class="drag-handle s-product-name">
    <a href="#/product/{%#p.id%}/edit">
        <div>{%#p.name%}<i class="shortener"></i></div> 
    </a>
</td>

Dan itu berhasil.

By the way, saya melihat di hamparan Installer plug-in yang diperlukan untuk tugas yang sama, tetapi biayanya 500 rubel.

Kotak centang

Di situs, yang paling sering harus diisi, berbagai komponen tambahan untuk pintu diimplementasikan menggunakan "Layanan". Setiap produk (pintu) dikaitkan dengan kategorinya, dan karena tidak mungkin menetapkan layanan ke kategorinya, semua produk masih diurutkan ke dalam berbagai jenis barang, yang biasanya menggandakan kategori.

Artinya, semua yang ada di dalam kategori "satu" milik jenis produk "satu". Tetapi ada pengecualian ketika harga komponen dalam satu kategori berbeda tergantung pada warna pintu, dll. Kemudian jenis produk "one.1", "one.2", dll dibuat. Dan untuk setiap jenis Anda perlu membuat layanan Anda sendiri dengan harga mereka sendiri.

Lihat di panel admin:

gambar

Lihat di situs:

gambar

Itu diperlukan untuk membuat banyak layanan seperti itu, dan perlu menandai dari 1 hingga 5 kotak centang, dan secara default, ketika membuat "layanan" baru, semua kotak centang dalam daftar jenis produk sudah ditandai. Pada awalnya, saya menghapus semuanya secara manual, meninggalkannya perlu, tetapi tentu saja, butuh banyak waktu untuk menghapus sekitar seratus kotak centang dan saya mulai menulis kode di konsol setiap kali saya membuat "layanan":

$('body input:checkbox').prop('checked', false);

Kode ini menghapus semua kotak centang yang dicentang pada halaman. Itu berhasil, tapi itu masih tidak nyaman. Oleh karena itu, saya melihat 2 opsi: mengedit kode sehingga ketika membuat layanan kotak centang akan muncul dalam keadaan tidak dicentang, dan tidak dalam yang ditandai atau menambahkan tombol "hapus semua kotak centang" ke antarmuka admin.

Pengetahuan saya di JS sangat kecil, jadi saya memilih metode kedua.

Ditemukan file render untuk antarmuka pengeditan layanan:

//wa-apps/shop/templates/actions/services/Services.html

Dan di dalamnya ada kode tombol untuk "Hapus Layanan":

<li>
    <a href="#" class="s-delete-service">
        <i class="icon16 delete"></i>
        [`Delete this service`]
    </a>
</li>

Tanpa berpikir dua kali, saya menambahkan sebuah tombol tepat di sebelah "delete" saat ini dengan menempatkan kode di bawah ini:

<li>
    <input type="button" value="  " onClick="$('body input:checkbox').prop('checked', false);" />
</li>

Ketika diklik, kode JS di atas dijalankan dan semuanya berfungsi.

Sebelum mengklik:

gambar

Setelah menekan:

gambar

Mungkin semua ini bisa diselesaikan dengan lebih mudah, tetapi saya memutuskan sebaik mungkin. Saya harap seseorang akan menemukan ini bermanfaat.

Revisi panel admin Webasyst

Kata pengantar

Beralih ke pengeditan produk dengan mengkliknya di panel admin

Menjelajahi

Kami benar

Kotak centang

More articles: