AJAX를 사용하여 카테고리 목록에 제품보기로드

Ajaxify를 사용하여 AJAX를 사용하여 카테고리 목록 페이지에서 제품보기 블록을로드하려고합니다 . 옵션 상자 (자식 HTML "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>
[...]

그러나 정확한 문제가 무엇인지 잘 모르겠습니다.

누군가가 올바른 방향으로 나를 가리킬 수 있기를 바랍니다.

감사합니다. Sander Mangel

카테고리 목록 페이지에 빠른보기 팝업을 도입하려고 할 때 과거에도 비슷한 문제가있었습니다. 다음과 같은 몇 가지 문제가 있습니다.-

• /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_script 태그 안의 모든 것을 일치시키고 eval을 통해 호출하십시오.
• 출력을 html과 javascript 부분으로 나누면 개별적으로 얻을 수 있습니다.

나는 여기에 제공된 허용 된 대답으로 만 얻을 수있었습니다. Twitter Bootstrap 모달로 작업하기 위해 프로토 타입을 사용하여 구성 가능한 제품을로드하고 반환 된 페이지에서 스크립트를 실행하도록 설정해야했습니다.

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 등을 카테고리 페이지에 추가 할 필요가 없습니다.