Đang tải chế độ xem sản phẩm trong danh sách danh mục với AJAX

Tôi đang cố tải khối xem sản phẩm trong trang danh sách danh mục bằng AJAX bằng Ajaxify . Mọi thứ đều hoạt động tốt, vấn đề duy nhất là hộp tùy chọn (childhtml "container1") không được tải chính xác. Nó không hiển thị các tùy chọn.

Có ai có kinh nghiệm với điều này, có thể đã thử một cái gì đó như thế này? Tôi đặt sản phẩm hoạt động trong bộ điều khiển bằng

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

trước khi kết xuất bố cục.

Tôi nghĩ rằng nó có liên quan đến thực tế là các tùy chọn được thêm vào dạng xem trong một phần khác của 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>
[...]

nhưng tôi không chắc vấn đề chính xác là gì

Tôi hy vọng ai đó có thể chỉ cho tôi đi đúng hướng.

Trân trọng, Sander Mangel

Chúng tôi đã có một vấn đề tương tự trong quá khứ khi cố gắng giới thiệu một cửa sổ bật lên xem nhanh trên trang danh sách danh mục. Dưới đây là một số vấn đề chúng tôi gặp phải: -

• /js/varien/product.js& /js/varien/configurable.jstheo mặc định không được bao gồm trên trang danh sách danh mục được yêu cầu cho các danh sách thả xuống có thể định cấu hình được tạo. JS nội tuyến dưới đây yêu cầu điều này.

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

• Một vấn đề khác mà chúng tôi gặp phải là khi cố gắng đưa nhiều hơn một trong số này vào mỗi trang, chúng tôi đã gặp sự cố với ID trùng lặp, trong mọi trường hợp điều này có thể không áp dụng cho chính bạn nhưng hãy đảm bảo nếu bạn có nhiều bạn phá hủy chúng khi đóng.

Cách chúng tôi đã thực hiện điều này là bằng cách tạo một tệp điều khiển trống cho phép chúng tôi sử dụng trình điều khiển bố cục duy nhất, ví dụ ''. Mà bạn có thể sử dụng xml sau đây.

 <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>

Điều này có nghĩa là chúng tôi có thể bao gồm các khối có liên quan và tùy chỉnh các khía cạnh nhất định của trang sản phẩm thông thường.

Chúng tôi cũng đã thêm phần này vào phần xử lý để bao gồm các tệp JS cần thiết.

<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> 

Tập tin answer.phtml của chúng tôi cũng giống như vậy

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

Hy vọng rằng điều đó có thể giúp làm sáng tỏ về việc bạn sẽ sai ở đâu

Vấn đề là, các tùy chọn được thêm thông qua JavaScript và không phải là HTML trong danh mục / sản phẩm / chế độ xem / loại / tùy chọn / configureable.html:

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

Tập lệnh Ajax của bạn dường như chỉ thay thế HTML, nhưng không thực thi JS trong đó. Bạn phải thực hiện phần đó bằng tay, nhưng có một số cách để làm điều này:

• preg_match mọi thứ bên trong các thẻ script và gọi nó thông qua eval
• phân chia đầu ra của bạn trong phần html và javascript, do đó bạn có thể nhận được cả hai phần riêng lẻ

Tôi chỉ có thể nhận được cho đến nay với câu trả lời được chấp nhận được cung cấp ở đây. Để mọi thứ hoạt động với chế độ Twitter Bootstrap, tôi cần sử dụng Prototype để tải sản phẩm có thể định cấu hình và đặt nó để chạy các tập lệnh trong trang được trả về:

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

Hơn nữa, khi tôi đóng phương thức của mình, tôi cần phải xóa hoàn toàn nội dung:

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

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

Tôi chưa cung cấp một giải pháp hoàn chỉnh ở đây vì bây giờ tôi đã tìm thấy những gì đang diễn ra, tôi cần cấu trúc lại bộ điều khiển của mình và hoàn thành mẫu cho các sản phẩm của mình để nó trả về một tiêu đề gọn gàng, v.v. để làm việc với Twitter Bootstrap Modal. Tuy nhiên, với lời khuyên sau đây, bạn có thể dễ dàng tải lên sản phẩm của mình và chạy javascript đi kèm để nội dung của nó hoạt động chính xác. Không cần thêm sản phẩm.js vào trang danh mục của bạn.