Day: February 17, 2011

  • jQuery dialog widget moves dialog DOM to the very end of body

    我在 checkout page 上使用 jQuery dialog widget 来显示 terms and conditions。Terms and conditions 的内容不随 checkout 页面加载(因为大部分顾客不会去读它),而在首次点击 Read terms and conditions 链接后以 ajax 获取内容后用 jQuery dialog 展示。再次点击则不必再用 ajax 获取,而直接用 jQuery dialog 展示。

    因为不同种类的产品会对应不同的 terms and conditions,所以 checkout page 会根据 shopping cart 里的所有产品列示出对应的 terms and conditions,可能会有多条。我原想把每条 Read terms and conditions 链接获取的 terms and conditions 内容插入在该链接的后面,在点击事件发生后就可以判断其后的内容 DOM 存在与否决定是否要执行 ajax post 操作。这样可以避免重复获取每个 terms and conditions,以加快用户响应和减少服务器负担。

    可如意算盘打了一通,写出最初稿一运行,发现每点一次 Read terms and conditions,ajax post 都要执行一次。一开始我还以为内容 DOM 插入位置不正确,被判断为没加载过而去执行 ajax post。查了好久才发现,内容 DOM 插入位置是正确的,只是每次执行 jQuery dialog(),它就把 dialog DOM(也就是内容 DOM)移到了 body DOM 的最后。

    这意味着我不能在 Read terms and conditions 链接后寻取对应的内容 DOM,而必须用另外的办法链接和内容的关系。当然办法有很多,这里就不多说了。

  • Is appending block by handle possible in Magento layout xml?

    In the product list on Magento category page, I have a deeply nested blocks for each product in the list. The structure is something like:

    <block type="..." name="product_in_category" template="...">
     <block type="..." name="product_options_selector" template="...">
     <block type="..." name="product_price_container" template="...">
     <!-- possibly more opening tags of nestings here -->
     <block type="..." name="product_prices" template="..."/>
     <!-- closing tags of nestings -->
     </block>
     </block>
    </block>
    

    If I want to add all above blocks to product list, there is a ready solution:

    <my_product_list>
     <reference name="product_list">
     <block type="..." name="product_in_category" template="...">
     <block type="..." name="product_options_selector" template="...">
     <block type="..." name="product_price_container" template="...">
     <block type="..." name="product_prices" template="..."/>
     </block>
     </block>
     </block>
     </reference>
    </my_product_list>
    

    Once I put them together as a handle, I can easily duplicate them to 3 category layouts.

    <catalog_category_default>
     <update handle="my_product_list" />
    </catalog_category_default>
    
    <catalog_category_layered>
     <update handle="my_product_list" />
    </catalog_category_layered>
    
    <catalog_category_layered_nochildren>
     <update handle="my_product_list" />
    </catalog_category_layered_nochildren>
    

    So every time I make changes to product list, I only change the content in <my_product_list> and 3 category layouts get updates automatically.

    It saves me a lot of time. However, since product list is also used in search result and advanced search result, product list in the result misses updates because it is named as “search_result_list” instead of “product_list”. The instance reaction is duplicating codes for “search_result_list”, i.e.

    <my_product_list_of_result>
     <reference name="search_result_list">
     <block type="..." name="product_in_category" template="...">
     <block type="..." name="product_options_selector" template="...">
     <block type="..." name="product_price_container" template="...">
     <block type="..." name="product_prices" template="..."/>
     </block>
     </block>
     </block>
     </reference>
    </my_product_list_of_result>
    
    <catalogsearch_result_index>
     <update handle="my_product_list_of_result" />
    </catalogsearch_result_index>
    
    <catalogsearch_advanced_result>
     <update handle="my_product_list_of_result" />
    </catalogsearch_advanced_result>
    

    I do not like duplication, because I keep forgetting when and where the duplication is when I want to make changes. So after a think, I come up with an alternative:

    <every_product>
     <reference name="product_in_category">
     <block type="..." name="product_options_selector" template="...">
     <block type="..." name="product_price_container" template="...">
     <block type="..." name="product_prices" template="..."/>
     </block>
     </block>
     </reference>
    </every_product>
    
    <add_every_product_to_category>
     <reference name="product_list">
     <block type="..." name="product_in_category" template="..."/>
     </reference>
    </add_every_product_to_category>
    <!-- Cannot merge to the above handle! Update handle does not work in the same handle when block is newly appended. -->
    <add_every_product_to_category>
     <update handle="every_product" />
    </add_every_product_to_category>
    
    <add_every_product_to_result>
     <reference name="search_result_list">
     <block type="..." name="product_in_category" template="..."/>
     </reference>
    </add_every_product_to_result>
    <!-- Cannot merge to the above handle! Update handle does not work in the same handle when block is newly appended. -->
    <add_every_product_to_result>
     <update handle="every_product" />
    </add_every_product_to_result>
    
    <catalog_category_default>
     <update handle="add_every_product_to_category" />
    </catalog_category_default>
    
    <catalog_category_layered>
     <update handle="add_every_product_to_category" />
    </catalog_category_layered>
    
    <catalog_category_layered_nochildren>
     <update handle="add_every_product_to_category" />
    </catalog_category_layered_nochildren>
    
    <catalogsearch_result_index>
     <update handle="add_every_product_to_result" />
    </catalogsearch_result_index>
    
    <catalogsearch_advanced_result>
     <update handle="add_every_product_to_result" />
    </catalogsearch_advanced_result>
    

    You will see the code is messy. That is why I am not satisfied with the alternative, either. I would like the layout xml file recognise something like

    <my_product_layout>
     <block type="..." name="product_in_category" template="...">
     <block type="..." name="product_options_selector" template="...">
     <block type="..." name="product_price_container" template="...">
     <block type="..." name="product_prices" template="..."/>
     </block>
     </block>
     </block>
    </my_product_layout>
    
    <add_layout_to_category>
     <reference name="product_list">
     <layout handle="my_product_layout" />
     </reference>
    </add_layout_to_category>
    
    <add_layout_to_result>
     <reference name="search_result_list">
     <layout handle="my_product_layout" />
     </reference>
    </add_layout_to_result>
    
    <catalog_category_default>
     <update handle="add_layout_to_category" />
    </catalog_category_default>
    
    <catalog_category_layered>
     <update handle="add_layout_to_category" />
    </catalog_category_layered>
    
    <catalog_category_layered_nochildren>
     <update handle="add_layout_to_category" />
    </catalog_category_layered_nochildren>
    
    <catalogsearch_result_index>
     <update handle="add_layout_to_result" />
    </catalogsearch_result_index>
    
    <catalogsearch_advanced_result>
     <update handle="add_layout_to_result" />
    </catalogsearch_advanced_result>
    

    Handling the layout of product list is not the worst case. Handling the layout of order, invoice, shipment, credit note is much more time taking, becuase each document is rendered in many media, such as customer screen, admin screen, email, pdf. And if I have custom documents, and custom documents are customised for suppliers, drop shipper, etc, an easy layout update mechanism will be very handy.

    In a summary, I am trying to add child blocks by handle. At mement I am intended to believe there is no way to trigger the layout xml into batch adding blocks by handle without overriding Block abstract or Layout model, but there maybe some tricky way out there. If you know it, let me know please.