使用AJAX在类别列表中加载产品视图

我试图使用Ajaxify使用AJAX在类别列表页面中加载产品视图块。一切正常，唯一的问题是选项框（childhtml“ container1”）未正确加载。它不显示选项。

有没有人有经验，也许尝试过类似的东西？我在控制器中使用设置活动产品

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

在渲染布局之前。

我认为这与将选项添加到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>
[...]

但我不确定确切的问题是什么。

我希望有人能指出我正确的方向。

问候，桑德·曼格尔

过去，在尝试将快速查看弹出窗口引入类别列表页面时，我们遇到了类似的问题。以下是我们遇到的一些问题：-

• /js/varien/product.js/js/varien/configurable.js默认情况下，＆不会包含在类别列表页面上，而生成可配置下拉列表是必需的。下面的内联JS需要这样做。

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

• 我们遇到的另一个问题是，每页尝试包含多个ID时，我们遇到了ID重复的问题，无论如何这可能不适用于您自己，但请确保关闭时是否销毁了多个ID。

我们这样做的方法是创建一个空白的控制器文件，该文件允许我们使用唯一的布局句柄，例如“''。您可以使用以下xml。

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

这意味着我们可以包括相关模块并自定义常规产品页面的某些方面。

我们还将其添加到句柄中以包含必要的JS文件。

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

我们的response.phtml文件也看起来像这样

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

希望这可以帮助您弄清楚问题出在哪里

问题在于，这些选项是通过JavaScript添加的，而不是在catalog / product / view / type / options / configurable.html中作为HTML添加的：

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

您的Ajax脚本似乎只是替换HTML，但不执行其中的JS。您必须手动执行该部分，但是有几种方法可以执行此操作：

• preg_match脚本标签中的所有内容，然后通过eval调用
• 将输出分成html和javascript部分，这样就可以分别获取两者

到目前为止，我只能通过此处提供的可接受答案来解决问题。为了使事情能够与Twitter Bootstrap模式一起使用，我需要使用Prototype加载可配置产品并将其设置为运行返回页面中的脚本：

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

此外，当我关闭模态时，我需要完全清除内容：

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

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

我没有在这里提供完整的解决方案，因为现在我发现发生了什么事，我需要重构控制器并完成产品模板，以便它返回整洁的标头等，以便与Twitter Bootstrap Modal一起使用。但是，根据以下建议，应该很容易加载您的产品并运行其附带的javascript，以使其内容正常工作。无需将product.js等添加到您的类别页面。