Magento 1.7 – Load Product View in Category List with AJAX

ajaxce-1.7.0.2

Im trying to load the product view block in the category list page with AJAX using Ajaxify.
Everything works fine the only issue being that the options box (childhtml "container1") is not loaded correctly. It does not show the options.

Does anyone have experience with this, maybe tried something like this?
I set the active product in the controller using

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

before rendering the layout.

I think it has something to do with the fact that the options are added to the view in an other part of the 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>
[...]

but I'm not sure what the precise issue is.

I hope someone can point me in the right direction.

Regards,
Sander Mangel

Best Answer

We have had a similar issue in the past when trying to introduce a quick view popup onto a category list page. Here are a few of the issues we encountered: -

  • /js/varien/product.js & /js/varien/configurable.js are not included on the category list page by default which are required for configurable dropdowns to be generated. The inline JS below requires this.

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

  • Another issue we had was when trying to include more than one of these per page, we were getting issues with duplicate ID's, in any case this might not apply to yourself but make sure if you have multiple you destroy them when closed.

The way we have done this is by creating a blank controller file which allows us to use the unique layout handle e.g. ''. Which you can use the following 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>

This meant we could include the relevant blocks and customise certain aspects of the regular product page.

We also added this to the handle to include the necessary JS files.

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

Our response.phtml file also looks like so

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

Hopefully that can help shed some light on where your going wrong

Related Topic