PHP test not working as expected
-
Hi,
I’v just created a PHP test for testing the new (and completely useless) EU GRAN label. It’s really a great idea to have this gigantic image right under the purchase button.
First, I tried this:
add_action( 'woocommerce_review_order_after_submit', function () { echo '<img src="' . esc_url( get_stylesheet_directory_uri() . '/img/gewaehrleistungslabel_de.svg' ) . '" alt="EU-Hinweis zur gesetzlichen Gewährleistung" style="display:block;width:100%;max-width:520px;height:auto;margin-top:2em">'; } );That didn’t work.
This, on the other hand, did work:
add_action( 'woocommerce_after_checkout_form', function () { $img = '<img id="gw-label" src="' . esc_url( get_stylesheet_directory_uri() . '/img/gewaehrleistungslabel_de.svg' ) . '" alt="EU-Hinweis zur gesetzlichen Gewährleistung" style="display:block;width:100%;max-width:520px;height:auto;margin-top:2em">'; echo '<script> jQuery( function ( $ ) { var img = ' . wp_json_encode( $img ) . '; function placeLabel() { if ( ! $( "#gw-label" ).length ) { $( "#place_order" ).after( img ); } } $( document.body ).on( "updated_checkout", placeLabel ); placeLabel(); } ); </script>'; } );The problem seems to be that the scope was limited to the checkout page which didn’t work well with the checkout AJAX:
function is_test_active(): bool { return function_exists( 'is_checkout' ) && is_checkout() && ! is_wc_endpoint_url( 'order-received' ) && ! is_wc_endpoint_url( 'order-pay' ); }Testing the checkout is a pretty common task. Maybe, you could find a better solution for this.
-
Actually, I do. I don’t use Gutenberg, but the good old checkout shortcode. Not sure, whether this makes a difference. I’ve just rechecked it without the scope limited to the checkout. That works perfectly fine without additional javascript.
My understanding is that the AJAX request doesn’t carry the nab parameter, if the scope is limited to the checkout page. So Nelio doesn’t know which variant to load in that context and falls back to the control version (or doesn’t apply the test at all).
On the initial page load, variant B is rendered correctly and the image appears below the button for just one second. Right after that, WooCommerce fires its usual AJAX request (?wc-ajax=update_order_review) to refresh the order review and payment section. Germanized also refreshes its own order submit fragment (.wc-gzd-order-submit) in that request. The fragments returned by this AJAX call are rendered without the variant, so they replace the markup and the image disappears.
I wouldn’t make such a big deal out of it. But testing just the checkout is a pretty common task. Expanding the scope to the cart page wouldn’t help, since we use a sidebar cart so that users can go directly to the checkout without ever visiting the cart page.
To make it work without js I would have to remove any limits in the scope section which would use a lot of quota.
Unfortunately, it is much more complicated. The Woocommerce template itself uses many hooks that call other templates. Some plugins, like Germanized, override templates or just a hook in a template. Yes, I could add some content to the page after the checkout shortcode. But this is very limited in terms of position and layout. In this specific case it would be almost acceptable. For other tests it just doesn’t work.
Actually, this is great about Woocommerce. You can change almost everything without touching a template. I have thousands of custom elements, but very few modified templates. This makes updates a LOT easier.
You must be logged in to reply to this topic.
