Loading product view in category list with AJAX

Question

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

Answer 1

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

Answer 2

The problem ist, that the options are added via JavaScript and not as HTML in catalog/product/view/type/options/configurable.html:

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

Your Ajax script just seems to replace the HTML, but does not execute the JS in it. You have to execute that part manually, but there are several ways to do this:

• preg_match everything inside script tags and call that via eval
• split your output in html and javascript part, so you could get both individually

Answer 3

I was only able to get so far with the accepted answer provided here. To get things to work with a Twitter Bootstrap modal I needed to use Prototype to load the configurable product and set it to run the scripts in the returned page:

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

Furthermore, when I closed my modal I needed to completely clear out the contents:

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

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

I have not provided a complete solution here as, now that I have found what is going on I need to refactor my controller and complete the template for my products so that it returns a neat header etc. to work with the Twitter Bootstrap Modal. However, with the following advice it should be easy to load up your product and run the javascript that comes with it to get its content to work correctly. There is no need to add product.js etc to your category page.