Memuat tampilan produk dalam daftar kategori dengan AJAX


14

Saya mencoba memuat blok tampilan produk di halaman daftar kategori dengan AJAX menggunakan Ajaxify . Semuanya berfungsi dengan baik satu-satunya masalah adalah bahwa kotak opsi (childhtml "container1") tidak dimuat dengan benar. Itu tidak menunjukkan opsi.

Adakah yang punya pengalaman dengan ini, mungkin mencoba sesuatu seperti ini? Saya mengatur produk aktif di controller menggunakan

$productId  = (int) $this->getRequest()->getParam('product_id');
Mage::helper('catalog/product')->initProduct($productId, $this);

sebelum merender tata letak.

Saya pikir itu ada hubungannya dengan fakta bahwa opsi ditambahkan ke tampilan di bagian lain dari catalog.xml

[...]
<PRODUCT_TYPE_configurable translate="label" module="catalog">
   <label>Catalog Product View (Configurable)</label>
   <reference name="product.info">
      <block type="catalog/product_view_type_configurable" name="product.info.configurable" as="product_type_data" template="catalog/product/view/type/default.phtml">
         <block type="core/text_list" name="product.info.configurable.extra" as="product_type_data_extra" translate="label">
            <label>Product Extra Info</label>
         </block>
      </block>
   </reference>
   <reference name="product.info.options.wrapper">
      <block type="catalog/product_view_type_configurable" name="product.info.options.configurable" as="options_configurable" before="-" template="catalog/product/view/type/options/configurable.phtml"/>
   </reference>
</PRODUCT_TYPE_configurable>
[...]

tapi saya tidak yakin apa masalah tepatnya.

Saya harap seseorang dapat mengarahkan saya ke arah yang benar.

Salam, Sander Mangel


1
Sander - Saya mengambil ook cepat di ekstensi Ajaxify, dan tidak jelas bagaimana Anda menggunakannya. Apa javascript yang tepat (atau PHP + javascript) yang Anda gunakan untuk memanggil Ajaxify, dan apa kode yang telah Anda tambahkan di controller (jika ada), atau tata letak Ajaxify XML untuk menangani permintaan? Pada dasarnya, beri kami informasi yang cukup untuk menciptakan kembali masalah di pihak kami, dan kami mungkin bisa mengarahkan Anda ke arah yang benar.
Alan Storm

Saya telah memutuskan untuk menulis ulang kode saya tidak menggunakan Ajaxify, hanya untuk membuatnya tetap sederhana. Jika masalah masih ada posting sakit sumber ekstensi dengan pertanyaan. Itu mungkin jauh lebih mudah. Terima kasih atas komentar Anda
Sander Mangel

Anda dapat menggunakan katalog ajax memuat ekstensi magme fme, itu akan memuat produk pada gulir. Anda juga dapat menambahkan tombol dengan mengklik di mana lebih banyak produk akan dimuat. fmeextensions.com/magento-ajax-catalog-pro.html

Hai @SanderMangel, apakah Anda membuka ekstensi itu? Thx
joseantgv

Jawaban:


7

Kami memiliki masalah serupa di masa lalu ketika mencoba memperkenalkan tampilan cepat popup ke halaman daftar kategori. Berikut adalah beberapa masalah yang kami temui: -

  • /js/varien/product.js& /js/varien/configurable.jstidak disertakan pada halaman daftar kategori secara default yang diperlukan untuk menghasilkan dropdown yang dapat dikonfigurasi. JS sebaris di bawah ini membutuhkan ini.

    <script type="text/javascript">
        var spConfig = new Product.Config(<?php echo $this->getJsonConfig() ?>);
    </script>
  • Masalah lain yang kami miliki adalah ketika mencoba memasukkan lebih dari satu dari ini per halaman, kami mendapatkan masalah dengan duplikat ID, dalam hal apapun ini mungkin tidak berlaku untuk diri Anda sendiri tetapi pastikan jika Anda memiliki beberapa Anda menghancurkannya ketika ditutup.

Cara kami telah melakukan ini adalah dengan membuat file pengontrol kosong yang memungkinkan kami untuk menggunakan pegangan tata letak yang unik misalnya ''. Yang dapat Anda gunakan xml berikut.

 <custom_catalog_product_ajax_view>
        <update handle="catalog_product_view" />
        <remove name="html_calendar" />
        <reference name="root">
                <action method="setTemplate"><template>custom/catalog/ajax/product/response.phtml</template></action>
        </reference>
        <reference name="product.info">
                <action method="setTemplate"><template>custom/catalog/ajax/product/view.phtml</template></action>
                <action method="append">
                    <block>breadcrumbs</block>
                </action>
        </reference>
        <reference name="product.info.media">
                <action method="setTemplate"><template>custom/catalog/ajax/product/view/media.phtml</template></action>
        </reference>
        <reference name="product.info.options.configurable">
                <action method="setTemplate"><template>custom/catalog/ajax/product/view/type/options/configurable.phtml</template></action>
        </reference>
</custom_catalog_product_ajax_view>

Ini berarti kami dapat menyertakan blok yang relevan dan menyesuaikan aspek-aspek tertentu dari halaman produk reguler.

Kami juga menambahkan ini ke pegangan untuk menyertakan file JS yang diperlukan.

<catalog_category_default>
    <update handle="required_for_catalog_ajax_product_view" />
</catalog_category_default>

<required_for_catalog_ajax_product_view>
        <reference name="head">
                <action method="addJs"><script>varien/product.js</script></action>
                <action method="addJs"><script>varien/configurable.js</script></action>
        </reference>
</required_for_catalog_ajax_product_view> 

File response.phtml kami juga terlihat seperti itu

<?php echo Zend_Json::encode(array(
'success' => true,
'html' => $this->getChildHtml('content'),
'optionsPrice' => $this->getOptionsPrice(),
'spConfig' => $this->getSpConfig()
));

Semoga itu bisa membantu menjelaskan di mana kesalahan Anda


Hai Luke, saya pikir ini mungkin solusinya. Saya menulis ulang seluruh ekstensi. Jika berfungsi buruk tandai posting ini sebagai awnser (dan tentu saja opensource ekstensi). Terima kasih!
Sander Mangel

1

Masalahnya, bahwa opsi ditambahkan melalui JavaScript dan bukan sebagai HTML dalam katalog / produk / tampilan / tipe / opsi / konfigurasi.html:

<script type="text/javascript">
    var spConfig = new Product.Config(<?php echo $this->getJsonConfig() ?>);
</script>

Skrip Ajax Anda sepertinya menggantikan HTML, tetapi tidak mengeksekusi JS di dalamnya. Anda harus menjalankan bagian itu secara manual, tetapi ada beberapa cara untuk melakukan ini:

  • preg_match semua yang ada di dalam tag skrip dan menyebutnya melalui eval
  • pisahkan output Anda dalam bagian html dan javascript, sehingga Anda bisa mendapatkan keduanya secara terpisah

Hei Tobias, terima kasih untuk awnser. Anda benar tentang javascript yang tidak dieksekusi tetapi masih harus ada beberapa html yang dimasukkan mempersiapkan opsi. Div # product-options-wrapper benar-benar kosong.
Sander Mangel

0

Saya hanya bisa sejauh ini dengan jawaban yang diterima yang disediakan di sini. Agar semuanya berfungsi dengan modal Bootstrap Twitter, saya perlu menggunakan Prototipe untuk memuat produk yang dapat dikonfigurasi dan mengaturnya untuk menjalankan skrip di halaman yang dikembalikan:

new Ajax.Updater(target, product, {
    parameters: { evalJS: true},
    ...

Lebih lanjut, ketika saya menutup modal saya, saya harus benar-benar menghapus isinya:

$(document.body).on('hidden.bs.modal', function () {

    delete spConfig;
    $('#myModal').html('<div class="modal-dialog">...</div>');
    ...

Saya belum memberikan solusi lengkap di sini karena, sekarang saya telah menemukan apa yang terjadi, saya perlu memperbaiki controller saya dan menyelesaikan template untuk produk saya sehingga mengembalikan header yang rapi dll. Untuk bekerja dengan Modal Bootstrap Twitter. Namun, dengan saran berikut ini, mudah memuat produk Anda dan menjalankan javascript yang menyertainya agar kontennya berfungsi dengan benar. Tidak perlu menambahkan product.js dll ke halaman kategori Anda.

Dengan menggunakan situs kami, Anda mengakui telah membaca dan memahami Kebijakan Cookie dan Kebijakan Privasi kami.
Licensed under cc by-sa 3.0 with attribution required.