Caricamento vista prodotto nell'elenco delle categorie con AJAX

Sto cercando di caricare il blocco di visualizzazione del prodotto nella pagina dell'elenco delle categorie con AJAX utilizzando Ajaxify . Tutto funziona bene, l'unico problema è che la casella delle opzioni (childhtml "container1") non è caricata correttamente. Non mostra le opzioni.

Qualcuno ha esperienza con questo, forse ha provato qualcosa del genere? Ho impostato il prodotto attivo nel controller utilizzando

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

prima di eseguire il rendering del layout.

Penso che abbia qualcosa a che fare con il fatto che le opzioni vengono aggiunte alla vista in un'altra parte di 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>
[...]

ma non sono sicuro di quale sia il problema preciso.

Spero che qualcuno possa indicarmi la giusta direzione.

Saluti, Sander Mangel

In passato abbiamo riscontrato un problema simile quando si è tentato di introdurre un popup di visualizzazione rapida in una pagina dell'elenco di categorie. Ecco alcuni dei problemi che abbiamo riscontrato: -

• /js/varien/product.jse /js/varien/configurable.jsnon sono inclusi nella pagina dell'elenco delle categorie per impostazione predefinita, necessari per generare menu a discesa configurabili. Il JS inline di seguito richiede questo.

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

• Un altro problema che abbiamo riscontrato è stato il tentativo di includere più di uno di questi per pagina, abbiamo riscontrato problemi con ID duplicati, in ogni caso questo potrebbe non essere applicabile a te stesso, ma assicurati che se ne hai multipli li distruggi quando chiuso.

Il modo in cui lo abbiamo fatto è creando un file controller vuoto che ci consente di utilizzare l'handle di layout univoco, ad esempio ''. Che puoi usare il seguente 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>

Ciò significa che potremmo includere i blocchi pertinenti e personalizzare alcuni aspetti della normale pagina del prodotto.

Abbiamo anche aggiunto questo all'handle per includere i file JS necessari.

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

Anche il nostro file response.phtml si presenta così

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

Spero che ciò possa aiutare a far luce su dove stai sbagliando

Il problema è che le opzioni vengono aggiunte tramite JavaScript e non come HTML nel catalogo / prodotto / vista / tipo / opzioni / configurable.html:

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

Il tuo script Ajax sembra semplicemente sostituire l'HTML, ma non esegue il JS in esso. Devi eseguire quella parte manualmente, ma ci sono diversi modi per farlo:

• preg_match tutto all'interno dei tag script e chiamalo via eval
• dividere l'output in html e javascript, in modo da poterli ottenere singolarmente

Sono stato in grado di arrivare così lontano solo con la risposta accettata fornita qui. Per far funzionare le cose con un Twitter Bootstrap modale avevo bisogno di usare Prototype per caricare il prodotto configurabile e impostarlo per eseguire gli script nella pagina restituita:

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

Inoltre, quando ho chiuso il mio modale avevo bisogno di cancellare completamente il contenuto:

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

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

Non ho fornito una soluzione completa qui come, ora che ho trovato quello che sta succedendo ho bisogno di refactoring il mio controller e completare il modello per i miei prodotti in modo che restituisca un'intestazione ordinata ecc. Per funzionare con il Bootstrap Modal di Twitter. Tuttavia, con i seguenti consigli dovrebbe essere facile caricare il prodotto ed eseguire il javascript che lo accompagna per far funzionare correttamente il suo contenuto. Non è necessario aggiungere product.js ecc. Alla pagina della categoria.