#shipping-state field is removed from Checkout page when using blocks

  • Christian

    (@christian1983)


    2 weeks, 5 days ago

    Hey there,

    Hope you are doing well!

    We have a select field with Id=”shipping-state” in the checkout blocks, this field must exist, it can change the label again like in Canada, Japan, or it can even be hidden, but it cannot be removed.
    In traditional checkout the plugin works correctly, leaving the field hidden as we can see in the file includes/class-wc-gzd-checkout.php line 431

    public function filter_de_states_locale( $locale ) { if ( $this->disable_de_state_select() && isset( $locale['DE'], $locale['DE']['state'] ) ) { $locale['DE']['state']['hidden'] = true; } return $locale; }

    However, in block checkout the plugin removes the HTML element from the DOM, this action breaks when customer use Amazon Pay Express checkout
    (The file responsible for this seems to be: assets/js/blocks/checkout-pickup-location-select/slotfills/pickup-location-select.js)?

    related thread in Amazon Pay plugin Support

    Let us know if you need more information.

    Best,
    Christian

Viewing 4 replies - 1 through 4 (of 4 total)
  • Plugin Contributor Dennis

    (@vdwoocommercesupport)

    Hi Christian,

    I guess that (removed from the DOM) is due to the nature of React ?? Germanized does only hide the field for Germany though, as asking for the state is quite unusual in Germany and may lead to a worser conversion rate. You may use a filter to force the field to be shown for Germany too though: https://gist.github.com/dennisnissle/7fe811038855dd721bf58512edc01372

    Best

    Thread Starter Christian

    (@christian1983)

    Hey @vdwoocommercesupport ,

    Thanks for the quick reply—hope you’re doing great too!

    The filter you sent worked like a charm, and now the shipping-state field is showing up, so that’s cool! But here’s the thing—it’s still not fixing the main issue. Even with the field there, when I use Amazon Pay Express Checkout in the block setup, the address fills in for a hot second and then gets wiped out. Doesn’t happen in classic checkout, where it all plays nice.

    I’m thinking it’s tied to how the block checkout handles things—maybe that pickup-location-select.js file is still messing with the DOM in a way that trips up Amazon Pay? Since that combo’s pretty common and blocks are getting more popular, it’d be awesome if you could take another look. I’ve got a video of it acting weird if that helps, and there’s a related thread on the Amazon Pay plugin support too.

    Let me know if you need anything else from me—appreciate the help!

    Cheers,
    Christian

    Plugin Contributor Dennis

    (@vdwoocommercesupport)

    Hi Christian,

    maybe that pickup-location-select.js file is still messing with the DOM in a way that trips up Amazon Pay?

    Yes, maybe. Are there pickup locations being shown on your checkout page? As far as I know the Amazon Pay Plugin (I’ve looked into it before) works a little “special” by transmitting/fixing the static address data via PHP/server-side filters/variables. As soon as another plugin/extension calls the endpoints provided by Woo (e.g. to set extension data), the customer data gets (re-) populated and in this case, lost as the actual client-side state (what is stored within React/DOM) is not populated by Amazon Pay. I think the Amazon Pay plugin developers will need to rethink their implementation approach because I don’t think that is the right way to do it..

    Thread Starter Christian

    (@christian1983)

    Hey @vdwoocommercesupport

    Thanks for the info, will take a look with Amazon Pay plugin developers.

    I will get back to you in case I need your support.

    Best,
    Christian

Viewing 4 replies - 1 through 4 (of 4 total)
  • You must be logged in to reply to this topic.