Produktansicht in Kategorieliste mit AJAX laden

Ich versuche, mit Ajaxify den Produktansichtsblock auf der Kategorielistenseite mit AJAX zu laden . Alles funktioniert einwandfrei. Das einzige Problem ist, dass das Optionsfeld (childhtml "container1") nicht korrekt geladen ist. Die Optionen werden nicht angezeigt.

Hat jemand Erfahrung damit, vielleicht probiert man sowas? Ich setze das aktive Produkt im Controller mit

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

vor dem Rendern des Layouts.

Ich denke, es hat etwas damit zu tun, dass die Optionen der Ansicht in einem anderen Teil der catalog.xml hinzugefügt werden

[...]
<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>
[...]

aber ich bin nicht sicher, was das genaue Problem ist.

Ich hoffe, jemand kann mich in die richtige Richtung weisen.

Grüße, Sander Mangel

In der Vergangenheit gab es ein ähnliches Problem beim Versuch, ein Popup für die Schnellansicht einer Kategorielistenseite einzuführen. Hier sind einige der Probleme, auf die wir gestoßen sind:

• /js/varien/product.js& /js/varien/configurable.jssind standardmäßig nicht auf der Kategorielistenseite enthalten, die zum Generieren konfigurierbarer Dropdowns erforderlich sind. Die folgende Inline-JS erfordert dies.

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

• Ein weiteres Problem, das wir hatten, war der Versuch, mehr als eine dieser IDs pro Seite einzuschließen. Es gab Probleme mit doppelten IDs. In jedem Fall trifft dies möglicherweise nicht auf Sie zu. Stellen Sie jedoch sicher, dass Sie sie beim Schließen zerstören, wenn Sie mehrere haben.

Wir haben dazu eine leere Controller-Datei erstellt, mit der wir das eindeutige Layout-Handle verwenden können, z. B. ''. Welche können Sie die folgende XML verwenden.

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

Dies bedeutete, dass wir die relevanten Blöcke einschließen und bestimmte Aspekte der regulären Produktseite anpassen konnten.

Wir haben dies auch zum Handle hinzugefügt, um die erforderlichen JS-Dateien einzuschließen.

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

Unsere response.phtml-Datei sieht auch so aus

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

Hoffentlich kann das dabei helfen, ein wenig Licht ins Dunkel zu bringen, wo Sie falsch liegen

Das Problem ist, dass die Optionen über JavaScript und nicht als HTML in Katalog / Produkt / Ansicht / Typ / Optionen / konfigurierbar.html hinzugefügt werden:

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

Ihr Ajax-Skript scheint nur den HTML-Code zu ersetzen, führt jedoch den darin enthaltenen JS-Code nicht aus. Sie müssen diesen Teil manuell ausführen, es gibt jedoch mehrere Möglichkeiten, dies zu tun:

• preg_match alles in Skript-Tags und nennen Sie das über eval
• Teilen Sie Ihre Ausgabe in HTML und Javascript auf, so dass Sie beide einzeln erhalten können

Ich konnte nur mit der hier angegebenen akzeptierten Antwort weiterkommen. Um mit einem Twitter Bootstrap-Modal arbeiten zu können, musste ich Prototype verwenden, um das konfigurierbare Produkt zu laden und es so einzustellen, dass die Skripte auf der zurückgegebenen Seite ausgeführt werden:

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

Als ich mein Modal schloss, musste ich außerdem den Inhalt komplett löschen:

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

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

Ich habe hier keine vollständige Lösung zur Verfügung gestellt, da ich jetzt gefunden habe, was los ist, muss ich meinen Controller umgestalten und die Vorlage für meine Produkte vervollständigen, damit er einen ordentlichen Header usw. zurückgibt, um mit dem Twitter Bootstrap Modal zu arbeiten. Mit den folgenden Ratschlägen sollte es jedoch einfach sein, Ihr Produkt zu laden und das mitgelieferte Javascript auszuführen, damit der Inhalt ordnungsgemäß funktioniert. Es ist nicht erforderlich, product.js usw. zu Ihrer Kategorieseite hinzuzufügen.