Ładowanie widoku produktu z listy kategorii za pomocą AJAX

Próbuję załadować blok widoku produktu na stronie listy kategorii za pomocą AJAX za pomocą Ajaxify . Wszystko działa dobrze, jedynym problemem jest to, że pole opcji (childhtml „kontener1”) nie jest poprawnie załadowane. Nie pokazuje opcji.

Czy ktoś ma z tym doświadczenie, może spróbował czegoś takiego? Aktywuję produkt w kontrolerze za pomocą

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

przed renderowaniem układu.

Myślę, że ma to coś wspólnego z faktem, że opcje są dodawane do widoku w innej części pliku 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>
[...]

ale nie jestem pewien, jaki jest konkretny problem.

Mam nadzieję, że ktoś wskaże mi właściwy kierunek.

Pozdrawiam, Sander Mangel

W przeszłości mieliśmy podobny problem, gdy próbowaliśmy wprowadzić okno podręczne szybkiego podglądu na stronie listy kategorii. Oto kilka napotkanych problemów: -

• /js/varien/product.jsi /js/varien/configurable.jsnie są domyślnie uwzględnione na stronie listy kategorii, które są wymagane do wygenerowania konfigurowalnych menu rozwijanych. Wymaga tego wbudowany JS poniżej.

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

• Innym problemem, jaki mieliśmy, było umieszczenie więcej niż jednego z nich na stronie, występowały problemy ze zduplikowanymi identyfikatorami, w każdym razie może to nie dotyczyć ciebie, ale upewnij się, że jeśli masz ich wiele, zniszcz je po zamknięciu.

Sposób, w jaki to zrobiliśmy, polega na utworzeniu pustego pliku kontrolera, który pozwala nam użyć unikalnego uchwytu układu, np. „”. Które możesz użyć następującego 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>

Oznaczało to, że możemy dołączyć odpowiednie bloki i dostosować niektóre aspekty zwykłej strony produktu.

Dodaliśmy to również do uchwytu, aby uwzględnić niezbędne pliki JS.

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

Tak wygląda również nasz plik response.phtml

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

Mam nadzieję, że pomoże to rzucić nieco światła na to, gdzie popełnisz błąd

Problem polega na tym, że opcje są dodawane przez JavaScript, a nie jako HTML w katalogu / product / view / type / options / configurable.html:

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

Twój skrypt Ajax wydaje się zastępować HTML, ale nie wykonuje w nim JS. Tę część trzeba wykonać ręcznie, ale można to zrobić na kilka sposobów:

• preg_match wszystko wewnątrz znaczników skryptu i wywołuje to przez eval
• podziel swoje wyniki na część html i javascript, abyś mógł uzyskać oba osobno

Do tej pory udało mi się dotrzeć tylko z zaakceptowaną odpowiedzią podaną tutaj. Aby wszystko działało w trybie modalnym Twitter Bootstrap, musiałem użyć Prototypu, aby załadować konfigurowalny produkt i ustawić uruchamianie skryptów na zwróconej stronie:

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

Ponadto, kiedy zamknąłem mój modal, musiałem całkowicie wyczyścić zawartość:

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

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

Nie dostarczyłem tutaj kompletnego rozwiązania, ponieważ teraz, gdy znalazłem, co się dzieje, muszę przebudować kontroler i wypełnić szablon dla moich produktów, aby zwrócił schludny nagłówek itp. Do pracy z Modem Bootstrap na Twitterze. Jednak z następującymi wskazówkami powinno być łatwe załadowanie produktu i uruchomienie dołączonego do niego skryptu javascript, aby jego zawartość działała poprawnie. Nie ma potrzeby dodawania pliku product.js itp. Do strony kategorii.