Custom Gutenberg inner block for WooCommerce Checkout Block
Budget: €30 – €250 EUR
I have a custom WooCommerce extension, where the customer can select a pickup location from a popup map for the order instead of entering a shipping address. I want to make this plugin compatible with the new WooCommerce checkout block.
In the most recent version of WooCommerce, there is a built-in function to allow local pickup options to appear, here is a description: https://wptavern.com/woocommerce-blocks-9-4-0-adds-support-for-local-pickup - you can use this to create a demo site.
I want to integrate my extension in the "Pickup options" step, so there is a button that opens a map(handled by my extension) and when the customer selects a pickup point, it should display the data inside the pickup options step, and also refresh the cart/checkout page, because the shipping cost might be changed.
This would be achieved by using an inner block, where the parent is set to "woocommerce/checkout-pickup-options-block", so it can only be added inside the "Pickup Options" block. More info: https://github.com/woocommerce/woocommerce-blocks/blob/trunk/packages/checkout/blocks-registry/README.md
The block has two states, please see attached screenshot. When the customer selects a pick-up point, my extension makes an ajax call and stores the info in the cart session: WC()->session->get( 'selected_vp_pont' ); This is an array, so it contains the provider name(for the icon), pickup point name and address. So the content of the block should get updated based on the values in this session variable.
See attachment for the design of the block.
In the most recent version of WooCommerce, there is a built-in function to allow local pickup options to appear, here is a description: https://wptavern.com/woocommerce-blocks-9-4-0-adds-support-for-local-pickup - you can use this to create a demo site.
I want to integrate my extension in the "Pickup options" step, so there is a button that opens a map(handled by my extension) and when the customer selects a pickup point, it should display the data inside the pickup options step, and also refresh the cart/checkout page, because the shipping cost might be changed.
This would be achieved by using an inner block, where the parent is set to "woocommerce/checkout-pickup-options-block", so it can only be added inside the "Pickup Options" block. More info: https://github.com/woocommerce/woocommerce-blocks/blob/trunk/packages/checkout/blocks-registry/README.md
The block has two states, please see attached screenshot. When the customer selects a pick-up point, my extension makes an ajax call and stores the info in the cart session: WC()->session->get( 'selected_vp_pont' ); This is an array, so it contains the provider name(for the icon), pickup point name and address. So the content of the block should get updated based on the values in this session variable.
See attachment for the design of the block.