Cargando vista de producto en la lista de categorías con AJAX

Estoy tratando de cargar el bloque de vista del producto en la página de lista de categorías con AJAX usando Ajaxify . Todo funciona bien, el único problema es que el cuadro de opciones (childhtml "container1") no está cargado correctamente. No muestra las opciones.

¿Alguien tiene experiencia con esto, tal vez haya intentado algo como esto? Configuré el producto activo en el controlador usando

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

antes de renderizar el diseño.

Creo que tiene algo que ver con el hecho de que las opciones se agregan a la vista en otra parte del catálogo.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>
[...]

pero no estoy seguro de cuál es el problema exacto.

Espero que alguien pueda señalarme en la dirección correcta.

Saludos, Sander Mangel

Hemos tenido un problema similar en el pasado al intentar introducir una ventana emergente de vista rápida en una página de lista de categorías. Estos son algunos de los problemas que encontramos:

• /js/varien/product.js& /js/varien/configurable.jsno se incluyen en la página de la lista de categorías de forma predeterminada, que se requieren para generar menús desplegables configurables. El JS en línea a continuación requiere esto.

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

• Otro problema que tuvimos fue al intentar incluir más de uno de estos por página, recibimos problemas con los ID duplicados, en cualquier caso, esto podría no aplicarse a usted, pero asegúrese de que si tiene varios los destruya cuando esté cerrado.

La forma en que lo hemos hecho es mediante la creación de un archivo de controlador en blanco que nos permite usar el controlador de diseño único, por ejemplo '' Que puede utilizar el siguiente 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>

Esto significaba que podíamos incluir los bloques relevantes y personalizar ciertos aspectos de la página normal del producto.

También agregamos esto al identificador para incluir los archivos JS necesarios.

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

Nuestro archivo response.phtml también se ve así

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

Espero que eso pueda ayudar a arrojar algo de luz sobre dónde te estás equivocando

El problema es que las opciones se agregan a través de JavaScript y no como HTML en el catálogo / producto / vista / tipo / opciones / configurable.html:

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

Su script Ajax parece reemplazar el HTML, pero no ejecuta el JS en él. Debe ejecutar esa parte manualmente, pero hay varias formas de hacerlo:

• preg_match todo dentro de las etiquetas de script y llamar a través de eval
• divide tu salida en html y parte de javascript, para que puedas obtener ambos individualmente

Solo pude llegar tan lejos con la respuesta aceptada que se proporciona aquí. Para que las cosas funcionen con un modal Bootstrap de Twitter, necesitaba usar Prototype para cargar el producto configurable y configurarlo para ejecutar los scripts en la página devuelta:

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

Además, cuando cerré mi modal, necesitaba borrar completamente los contenidos:

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

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

No he proporcionado una solución completa aquí ya que, ahora que he encontrado lo que está sucediendo, necesito refactorizar mi controlador y completar la plantilla de mis productos para que devuelva un encabezado ordenado, etc. para trabajar con el Twitter Bootstrap Modal. Sin embargo, con los siguientes consejos debería ser fácil cargar su producto y ejecutar el javascript que viene con él para que su contenido funcione correctamente. No es necesario agregar product.js, etc. a su página de categoría.