AJAXを使用してカテゴリリストに製品ビューをロードする

Ajaxifyを使用してAJAXでカテゴリリストページに製品ビューブロックをロードしようとしています。すべてが正常に機能する唯一の問題は、オプションボックス（childhtml "container1"）が正しく読み込まれないことです。オプションは表示されません。

誰もがこれを経験したことがありますか、おそらくこのようなことを試しましたか？を使用してコントローラーにアクティブな製品を設定します

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

レイアウトをレンダリングする前。

それは、オプションが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>
[...]

しかし、私は正確な問題が何であるかわかりません。

誰かが私を正しい方向に向けてくれることを願っています。

よろしく、サンダーマンジェル

カテゴリリストページにクイックビューポップアップを導入しようとしたときに、過去に同様の問題が発生しました。発生した問題のいくつかを次に示します。-

• /js/varien/product.js＆/js/varien/configurable.jsは、デフォルトでは、構成可能なドロップダウンの生成に必要なカテゴリリストページに含まれていません。以下のインラインJSにはこれが必要です。

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

• 私たちが持っていた別の問題は、ページごとにこれらの複数を含めるようにしようとしたとき、重複したIDの問題が発生していました。いずれにしても、これは自分には当てはまらないかもしれませんが、閉じたときにそれらを破棄することを確認してください。

これを行う方法は、空のコントローラーファイルを作成することにより、一意のレイアウトハンドル（例： ''）を使用できるようにすることです。次の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>

つまり、関連するブロックを含めて、通常の製品ページの特定の側面をカスタマイズできます。

また、これをハンドルに追加して、必要な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> 

response.phtmlファイルも次のようになります

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

うまくいけば、それがあなたの間違っているところに光を当てるのに役立つことができます

問題は、catalog / product / view / type / options / configurable.htmlにHTMLとしてではなくJavaScriptによってオプションが追加されることです。

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

AjaxスクリプトはHTMLを置き換えるように見えますが、その中でJSを実行しません。その部分を手動で実行する必要がありますが、これを行う方法はいくつかあります。

• スクリプトタグ内のすべてをpreg_matchし、eval経由で呼び出します
• 出力をhtmlとjavascript部分に分割し、両方を個別に取得できるようにします

ここで提供された受け入れられた答えで私はこれまでのところ得ることができました。Twitter Bootstrapモーダルを使用するには、Prototypeを使用して構成可能な製品を読み込み、返されたページでスクリプトを実行するように設定する必要がありました。

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

さらに、モーダルを閉じたときに、内容を完全にクリアする必要がありました。

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

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

ここで完全なソリューションを提供していません。現在、コントローラーをリファクタリングし、製品のテンプレートを完成して、Twitter Bootstrap Modalで動作するようにきちんとしたヘッダーなどを返す必要があることがわかったためです。ただし、次のアドバイスを使用すると、製品を簡単にロードし、付属のjavascriptを実行してコンテンツを正常に機能させることができます。product.jsなどをカテゴリページに追加する必要はありません。