Loading product view in category list with AJAX

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