Produktansicht in Kategorieliste mit AJAX laden

14

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

Sander Mangel
quelle
1
Sander: Ich habe mir die Ajaxify-Erweiterung angesehen, und es ist nicht klar, wie Sie sie verwenden. Wie lautet das genaue Javascript (oder PHP + Javascript), mit dem Sie Ajaxify aufrufen, und wie lautet der Code, den Sie dem Controller hinzugefügt haben (falls vorhanden), oder wie lautet das Ajaxify-Layout-XML, um die Anforderung zu verarbeiten? Geben Sie uns im Grunde genug Informationen, um das Problem zu lösen, und wir können Sie wahrscheinlich in die richtige Richtung bringen.
Alan Storm
Ich habe beschlossen, meinen Code neu zu schreiben, ohne Ajaxify zu verwenden, um ihn einfach zu halten. Wenn das Problem weiterhin besteht, posten Sie die Erweiterungsquelle mit der Frage. Das ist wahrscheinlich viel einfacher. Vielen Dank für Ihren Kommentar
Sander Mangel
Sie können Ajax Catalog laden, indem Sie die Magento-Erweiterung verwenden. Sie können auch eine Schaltfläche hinzufügen, indem Sie auf die Produkte klicken, die geladen werden sollen. fmeextensions.com/magento-ajax-catalog-pro.html
Hey @SanderMangel, hast du die Erweiterung Open Source? Thx
Joseantgv

Antworten:

7

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

lukefowell
quelle
Hey Luke, ich denke das könnte die Lösung sein. Ich schreibe die ganze Erweiterung um. Wenn es nicht funktioniert, markieren Sie diesen Beitrag als awnser (und natürlich Opensource die Erweiterung). Vielen Dank!
Sander Mangel
1

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
Tobias
quelle
Hey Tobias, danke für die Ahnung. Sie haben Recht, dass das Javascript nicht ausgeführt wird, aber es sollte immer noch ein HTML-Code eingefügt sein, der die Optionen vorbereitet. Der div # product-options-wrapper ist vollständig leer.
Sander Mangel
0

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.

Theodores
quelle