Memuat tampilan produk dalam daftar kategori dengan AJAX

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

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

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

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.