it-swarm-id.com

Bagaimana saya bisa menggunakan com_ajax untuk memuat dan membongkar modul lain (untuk Desain Adaptif)

Ini adalah tindak lanjut dari pertanyaan Bagaimana modul dapat dinonaktifkan berdasarkan ukuran perangkat atau viewport di Joomla 3 untuk mengoptimalkan kinerja perangkat seluler?

Bagaimana saya bisa menggunakan com_ajax untuk memuat dan menurunkan modul? Panggilan dapat dilakukan menggunakan javascript atau jquery murni, dan itu akan didasarkan pada ukuran viewport (kami menggunakan mediacheck.js untuk itu: https://github.com/sparkbox/mediaCheck ).

Bergantung pada ke mana jawaban ini pergi, kita bahkan dapat [meminta pengembang kami] menyatukan komponen untuk memungkinkan pemuatan dinamis semacam ini (pilih breakpoints, pilih modul apa yang akan di-load/unload).

Pembenaran: Responsif/Adaptif (pilih selera Anda) sangat penting saat ini, dan demikian juga mengurangi ukuran beban untuk seluler (kecepatan 3G lambat jika di area penerimaan yang baik, di sini di Brasil). Jika saya dapat menggunakan 10 ~ 15k jQuery/Javascript untuk menghindari memuat 20 ~ 200k modul (modul dapat berisi gambar, jadi, ya, dapat mencapai ukuran yang cukup besar), saya siap untuk itu. Mengurangi kekacauan layar juga merupakan keharusan pada desain ponsel yang bagus. Kami bahkan dapat berargumen bahwa ini "mobile first", karena kami mendesain tanpa modul, lalu memuatnya sesuai ukuran layar.

com_ajax hanya benar-benar digunakan jika data untuk modul didukung (berbasis JSON), meskipun memiliki fitur lain. Dalam beberapa kasus, cara termudah untuk "hanya" memuat modul, adalah dengan membuat file templat baru. Ini dapat dilakukan dengan membuat sesuatu seperti "module.php" di direktori templat. Kemudian menggunakan sesuatu seperti ini di dalam.

<?php
$jinput = JFactory::getApplication()->input;
$module = $jinput->get('module_pos', 'default_value', 'get');
?>
<jdoc:include type="modules" name="<?php echo $module; ?>"/>

Ini hanya akan memuat modul di halaman, dengan menggunakan url seperti index.php?tmpl=module&module_pos=foo Dalam permintaan ajax Anda harus bisa mendapatkan "hanya" data modul. Ini akan memuat semua modul yang ditugaskan ke posisi yang disebut oleh module_pos.

Namun ini memiliki satu masalah, javascript. Modul menambahkan javascript ke tag kepala melalui API Joomla. Untuk mengatasi hal ini, Anda perlu menambahkan lebih banyak lagi ke file module.php untuk mengetahui apa yang ada di tag kepala, apa yang belum ada di halaman saat ini dan pada dasarnya menemukan dan menambahkan apa yang dibutuhkan. Proses ini akan cukup sulit tetapi jika Anda tahu modul melakukan ini, Anda bisa menambahkan lebih banyak ke panggilan ajax Anda untuk secara otomatis melakukan ini tergantung pada modul.

Ini akan membantu Anda untuk "memuat" modul, setelah itu memuat melalui ajax gunakan saja jquery untuk menambahkan html ke halaman di mana Anda perlu, untuk "membongkar" itu, cukup hapus dari dom.

yang dapat dilakukan dengan jQuery(ROOT_ELEMENT_OF_MODULE).remove(); untuk dihapus dan jQuery(PARENT_ELEMENT_TO_INSERT_MODULE).html(MODULE_HTML);. Tentu saja ada variasi yang bisa dilakukan, tetapi itulah penjelasan sederhana.

5
Jordan Ramstad