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

14

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

Sander Mangel
la source
1
Sander - J'ai jeté un coup d'œil à l'extension Ajaxify, et on ne sait pas comment vous l'utilisez. Quel est le javascript exact (ou PHP + javascript) que vous utilisez pour appeler Ajaxify, et quel est le code que vous avez ajouté dans le contrôleur (le cas échéant), ou le XML de mise en page Ajaxify pour gérer la demande? Fondamentalement, donnez-nous suffisamment d'informations pour recréer le problème de notre côté, et nous pouvons probablement vous faire avancer dans la bonne direction.
Alan Storm
J'ai décidé de réécrire mon code sans utiliser Ajaxify, juste pour rester simple. Si le problème est toujours présent, postez la source d'extension avec la question. C'est probablement beaucoup plus facile. Merci pour votre commentaire
Sander Mangel
Vous pouvez utiliser l'extension de magento de chargement de catalogue ajax fme, il chargera les produits sur défilement. vous pouvez également ajouter un bouton en cliquant sur les autres produits qui seront chargés. fmeextensions.com/magento-ajax-catalog-pro.html
Hé @SanderMangel, avez-vous open source l'extension? Thx
joseantgv

Réponses:

7

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

lukefowell
la source
Hey Luke, je pense que cela pourrait être la solution. J'écris toute l'extension. Si cela fonctionne mal, marquez ce message comme l'avertissement (et bien sûr, ouvrez l'extension). Merci!
Sander Mangel
1

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
Tobias
la source
Salut Tobias, merci pour l'avertissement. Vous avez raison sur le fait que javascript n'est pas exécuté, mais il devrait toujours y avoir du HTML inséré pour préparer les options. Le wrapper div # product-options-wrapper est complètement vide.
Sander Mangel
0

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.

Theodores
la source