กำลังโหลดมุมมองผลิตภัณฑ์ในรายการหมวดหมู่ด้วย AJAX

อิ่มพยายามโหลดบล็อกมุมมองสินค้าในหน้าหมวดหมู่รายการด้วย AJAX ใช้ajaxify ทุกอย่างทำงานได้ดีปัญหาเดียวคือกล่องตัวเลือก (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>
[...]

แต่ฉันไม่แน่ใจว่าปัญหาที่แท้จริงคืออะไร

ฉันหวังว่าใครบางคนสามารถชี้ฉันในทิศทางที่ถูกต้อง

ขอแสดงความนับถือ 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>

• ปัญหาอื่นที่เรามีเมื่อพยายามรวมมากกว่าหนึ่งรายการต่อหน้าเราได้รับปัญหาเกี่ยวกับรหัสซ้ำในกรณีใด ๆ สิ่งนี้อาจใช้ไม่ได้กับตัวคุณเอง แต่ให้แน่ใจว่าคุณมีหลายที่คุณทำลายพวกเขาเมื่อปิด

วิธีที่เราทำคือการสร้างไฟล์คอนโทรลเลอร์ที่ว่างซึ่งทำให้เราสามารถใช้เลย์เอาต์ที่เป็นเอกลักษณ์เช่น '' ซึ่งคุณสามารถใช้ 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()
));

หวังว่าจะช่วยให้คุณเข้าใจว่าคุณผิดพลาดไปไหน

ปัญหาคือว่าตัวเลือกที่มีการเพิ่มผ่านทาง JavaScript และไม่เป็น HTML ในแคตตาล็อก / ผลิตภัณฑ์ / ดู / ประเภท / ตัวเลือก / configurable.html:

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

ดูเหมือนว่าสคริปต์ Ajax ของคุณจะแทนที่ HTML แต่ไม่ได้ดำเนินการกับ JS คุณต้องดำเนินการส่วนนั้นด้วยตนเอง แต่มีหลายวิธีในการทำเช่นนี้:

• preg_match ทุกอย่างภายในแท็กสคริปต์แล้วเรียกมันว่าผ่าน eval
• แยกเอาท์พุทของคุณในส่วน html และ javascript เพื่อให้คุณสามารถได้รับทั้งสองอย่างเป็นรายบุคคล

ฉันสามารถทำได้จนถึงตอนนี้เท่านั้นที่มีคำตอบที่ยอมรับได้ที่นี่ เพื่อให้สิ่งต่าง ๆ ทำงานร่วมกับ Modal Bootstrap ของ Twitter ได้ฉันจำเป็นต้องใช้ 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>');
    ...

ฉันยังไม่ได้ให้วิธีการแก้ปัญหาที่สมบูรณ์ขณะนี้เมื่อฉันได้พบสิ่งที่เกิดขึ้นฉันต้อง refactor ควบคุมของฉันและทำแม่แบบสำหรับผลิตภัณฑ์ของฉันเพื่อที่จะส่งคืนส่วนหัวเรียบร้อย ฯลฯ เพื่อทำงานกับ Twitter Bootstrap Modal อย่างไรก็ตามด้วยคำแนะนำต่อไปนี้มันควรจะง่ายต่อการโหลดผลิตภัณฑ์ของคุณและเรียกใช้จาวาสคริปต์ที่มาพร้อมกับมันเพื่อให้เนื้อหาของมันทำงานได้อย่างถูกต้อง ไม่จำเป็นต้องเพิ่ม product.js ฯลฯ ในหน้าหมวดหมู่ของคุณ