4

I changed the frontend templates (override by copying the file(s) into my custom theme folder) of the cart and checkout page by replacing some table-row-columns-constructs with div containers in order to create a (in my opinion) clearer layout, also for handling responsive layout changes.

It seems, the Wordpress hook/action woocommerce_checkout_order_review triggered from the template checkout/form-checkout.php template uses the code from cart/cart-shipping.php which is fine, because ist keeps the list containing the choosable shipping methods consistant on both pages.

A 'critical' change was: removing the td and th tags, and replacing <tr class="shipping"> with <div class="shipping"> in cart/cart-shipping.php.

This leads to the problem:

Clicking a list item of the shipping_methods ul triggers the events update_checkout and updated_checkout, which (i think) are responsible for updating the cart/chekout page. With my changed HTML templates things are not working as they should; with every click the whole ul gets replicated. I could not find any occurences of tr.shipping or .shipping in the woocommerce js code.

Why is changing the template structure breaking the jQuery code? And how can I achieve that change without breaking?

ILCAI
  • 1,164
  • 2
  • 15
  • 35
  • I can see references to the selector 'tr.shiping' in the file "\woocommerce\assets\js\admin\meta-boxes-order.js". Are you refering to the admin screen? This is the only place I can see where it would cause an issue with you renaming the tr to a div in the script files. – Andrew Schultz Nov 06 '17 at 00:11
  • I just updated my question to be a little bit clearer. No, I am refering to the frontend. I also could not find occurences of selectors, that could fail mathing the renamed `
    `     – ILCAI Nov 07 '17 at 07:45
  • any luck with this? If you provide a link I might be able to help more. – Matthew Brent Nov 17 '17 at 18:20

1 Answers1

1

without more code it's very hard to say. Perhaps if you could provide a link I can assist more?

Going blind, it sounds like this is an issue tied to clicking...

I can confirm that in assets/js/admin/meta-boxes-order.js there are several references to tr.shipping from line 250-251 and lines 541, 786 and 874. It will likely be these lines that are causing the issue.

It's kind of hackish what you are trying to do...and without being able to test it's hard to say or confirm, but try duplicating those concerned functions but only call it on your div.shipping

See where that nets you out.

Matthew Brent
  • 1,366
  • 11
  • 23
  • You are right. It's not a good idea to change the markup in this way. I feel a little bit frustrated about the fact, that markup and functionality are not well decoupled. But on the other hand, WooCommerce is a quite nice piece of software. I will have to live with the table layout. – ILCAI Nov 30 '17 at 23:46
  • Ideally they wouldn't target with div. It might be worth making a pull request to their repo with that change? – Matthew Brent Dec 01 '17 at 00:18