Chargement de la vue des produits dans la liste des catégories avec AJAX

Im essayant de charger le bloc de vue du produit dans la page de liste des catégories avec AJAX en utilisant Ajaxify . Tout fonctionne bien, le seul problème étant que la boîte d'options (childhtml "container1") n'est pas chargée correctement. Il ne montre pas les options.

Quelqu'un at-il une expérience avec cela, peut-être essayé quelque chose comme ça? Je mets le produit actif dans le contrôleur en utilisant

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

avant de rendre la mise en page.

Je pense que cela a quelque chose à voir avec le fait que les options sont ajoutées à la vue dans une autre partie du catalogue.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>
[...]

mais je ne sais pas quel est le problème précis.

J'espère que quelqu'un pourra m'orienter dans la bonne direction.

Cordialement, Sander Mangel

Nous avons eu un problème similaire dans le passé lorsque nous avons essayé d'introduire une fenêtre contextuelle rapide sur une page de liste de catégories. Voici quelques-uns des problèmes que nous avons rencontrés: -

• /js/varien/product.js& /js/varien/configurable.jsne sont pas inclus par défaut dans la page de liste des catégories, ce qui est requis pour la génération de listes déroulantes configurables. Le JS en ligne ci-dessous l'exige.

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

• Un autre problème que nous avons rencontré était en essayant d'en inclure plus d'un par page, nous rencontrions des problèmes avec les identifiants en double, dans tous les cas cela pourrait ne pas s'appliquer à vous-même, mais assurez-vous que si vous en avez plusieurs, vous les détruisez à la fermeture.

Pour ce faire, nous avons créé un fichier de contrôleur vierge qui nous permet d'utiliser la poignée de mise en page unique, par exemple ''. Que vous pouvez utiliser le xml suivant.

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

Cela signifiait que nous pouvions inclure les blocs pertinents et personnaliser certains aspects de la page de produit standard.

Nous avons également ajouté cela à la poignée pour inclure les fichiers JS nécessaires.

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

Notre fichier response.phtml ressemble également à

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

J'espère que cela peut aider à faire la lumière sur les problèmes

Le problème est que les options sont ajoutées via JavaScript et non en HTML dans catalogue / produit / vue / type / options / configurable.html:

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

Votre script Ajax semble simplement remplacer le HTML, mais n'exécute pas le JS dedans. Vous devez exécuter cette partie manuellement, mais il existe plusieurs façons de procéder:

• preg_match tout dans les balises de script et appelez-le via eval
• divisez votre sortie en partie html et javascript, afin que vous puissiez obtenir les deux individuellement

Je n'ai pu aller jusqu'ici qu'avec la réponse acceptée fournie ici. Pour que les choses fonctionnent avec un modal Twitter Bootstrap, j'avais besoin d'utiliser Prototype pour charger le produit configurable et le configurer pour exécuter les scripts dans la page retournée:

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

De plus, lorsque j'ai fermé mon modal, j'avais besoin de vider complètement le contenu:

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

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

Je n'ai pas fourni de solution complète ici car, maintenant que j'ai trouvé ce qui se passe, j'ai besoin de refactoriser mon contrôleur et de compléter le modèle pour mes produits afin qu'il renvoie un en-tête soigné, etc. pour fonctionner avec Twitter Bootstrap Modal. Cependant, avec les conseils suivants, il devrait être facile de charger votre produit et d'exécuter le javascript qui l'accompagne pour que son contenu fonctionne correctement. Il n'est pas nécessaire d'ajouter product.js etc. à votre page de catégorie.