Carregando a visualização do produto na lista de categorias com o AJAX

Estou tentando carregar o bloco de exibição do produto na página de lista de categorias com o AJAX usando o Ajaxify . Tudo funciona bem, o único problema é que a caixa de opções (childhtml "container1") não está carregada corretamente. Não mostra as opções.

Alguém tem experiência com isso, talvez tenha tentado algo assim? Defino o produto ativo no controlador usando

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

antes de renderizar o layout.

Eu acho que tem algo a ver com o fato de que as opções são adicionadas à exibição em outra parte do 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>
[...]

mas não tenho certeza qual é o problema exato.

Espero que alguém possa me apontar na direção certa.

Atenciosamente, Sander Mangel

Tivemos um problema semelhante no passado ao tentar introduzir um pop-up de visualização rápida em uma página de lista de categorias. Aqui estão alguns dos problemas que encontramos: -

• /js/varien/product.js& /js/varien/configurable.jsnão estão incluídos na página da lista de categorias por padrão, necessários para a geração de menus suspensos configuráveis. O JS embutido abaixo exige isso.

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

• Outro problema que tivemos foi quando tentamos incluir mais de um desses por página; estávamos tendo problemas com IDs duplicados; em qualquer caso, isso pode não se aplicar a você, mas verifique se você tem vários e destrua-os quando fechados.

A maneira como fizemos isso é criando um arquivo de controlador em branco que nos permite usar o identificador de layout exclusivo, por exemplo ''. Qual você pode usar o seguinte 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>

Isso significava que poderíamos incluir os blocos relevantes e personalizar certos aspectos da página normal do produto.

Também adicionamos isso ao identificador para incluir os arquivos JS necessários.

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

Nosso arquivo response.phtml também parece com isso

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

Espero que isso ajude a lançar alguma luz sobre onde você está dando errado

O problema é que as opções são adicionadas via JavaScript e não como HTML em catalog / product / view / type / options / configurable.html:

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

Seu script Ajax parece substituir o HTML, mas não executa o JS nele. Você precisa executar essa parte manualmente, mas existem várias maneiras de fazer isso:

• preg_match tudo dentro de tags de script e chame isso via eval
• divida sua saída na parte html e javascript, para que você possa obter os dois individualmente

Só consegui chegar até aqui com a resposta aceita fornecida aqui. Para que as coisas funcionem com um modal de Bootstrap do Twitter, eu precisava usar o Prototype para carregar o produto configurável e configurá-lo para executar os scripts na página retornada:

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

Além disso, quando fechei meu modal, precisava limpar completamente o conteúdo:

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

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

Não forneci uma solução completa aqui, pois, agora que descobri o que está acontecendo, preciso refatorar meu controlador e preencher o modelo dos meus produtos para que ele retorne um cabeçalho limpo etc. para trabalhar com o Twitter Bootstrap Modal. No entanto, com os conselhos a seguir, deve ser fácil carregar o produto e executar o javascript que acompanha o produto para que o conteúdo funcione corretamente. Não há necessidade de adicionar product.js etc. à sua página de categoria.