14

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

  • 1
    Sander — I took a quick ook at the Ajaxify extension, and it's not clear how you're using it. What's the exact javascript (or PHP+javascript) you're using to call Ajaxify, and what's the code you've added in the controller (if any), or the Ajaxify layout XML to handle the request? Basically, give us enough information to recreate the problem on our end, and we can probably get you going in the right direction. – Alan Storm Apr 7 '13 at 17:58
  • I've decided to rewrite my code not using Ajaxify, just to keep it simple. If the issue is still present ill post the extension source with the question. That's probably a whole lot easier. Thanks for your comment – Sander Mangel Apr 8 '13 at 9:01
  • You can use ajax catalog loading fme magento extension, it will load products on scroll. you can also add a button by clicking on which more products will be loaded. fmeextensions.com/magento-ajax-catalog-pro.html – user9467 Oct 22 '14 at 16:37
  • Hey @SanderMangel, did you opensource the extension? Thx – joseantgv Apr 29 '16 at 6:53
7

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

  • Hey Luke, I think this might be the solution. I'm rewriting the whole extension. If it works ill mark this post as the awnser (and of course opensource the extension). Thanks! – Sander Mangel Apr 10 '13 at 19:40
1

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
  • Hey Tobias, thanks for the awnser. You're right about the javascript not being executed but there should still be some html inserted preparing for the options. The div #product-options-wrapper is completely empty. – Sander Mangel Apr 7 '13 at 9:35
0

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.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.