diff --git a/README.md b/README.md index 38385f32..c4b79549 100644 --- a/README.md +++ b/README.md @@ -5,9 +5,12 @@ ## Introduction This is the MyParcel delivery options module for use in any e-commerce platform's checkout, by [MyParcel], [SendMyParcel] and [Flespakket] customers. It's used to show your customers the possible delivery and/or pickup options for their location, based on your settings. It only has the bare minimum css styling so it should integrate with the design of your webshop easily. +- [Sandbox](#sandbox) - [Installation](#installation) -- [Example](#example) - [Usage](#usage) +- [Examples](#examples) +- [Contribute](#contribute) +- [Support](#support) ![screenshot](screenshots/example1.png) ![screenshot](screenshots/example2.png) @@ -15,7 +18,7 @@ This is the MyParcel delivery options module for use in any e-commerce platform' ### Browser support This app is written in [Vue.js], it supports IE9 and up. -## Example +## Sandbox An example of the delivery options functionality can be found in our [sandbox]. Here you can try out every combination of settings and copy the code for use in your project. ## Installation @@ -32,8 +35,6 @@ An example of the delivery options functionality can be found in our [sandbox]. ## Usage - - ### All options ```js window.MyParcelConfig = { @@ -215,7 +216,20 @@ You'll often want to use the delivery options module in a checkout form in your #### Integration examples -##### Attach data to an order using a hidden input +##### Our WooCommerce implementation +Files that can help you get started: + +- Backend: [/includes/frontend/class-wcmp-checkout.php](https://github.com/myparcelnl/woocommerce/blob/master/includes/frontend/class-wcmp-checkout.php) +- Frontend: [/assets/js/wcmp-frontend.js](https://github.com/myparcelnl/woocommerce/blob/master/assets/js/wcmp-frontend.js) + +##### Our Magento 2 implementation +Files that can help you get started: + +Note: It's more complex in Magento 2 because of the way shipping methods work. +- Backend: [/Model/Checkout/DeliveryOptionsToShippingMethods.php](https://github.com/myparcelnl/magento/blob/develop/Model/Checkout/DeliveryOptionsToShippingMethods.php) +- Frontend: [/view/frontend/web/js/view/delivery-options.js](https://github.com/myparcelnl/magento/blob/develop/view/frontend/web/js/view/delivery-options.js) + +#### Attach data to an order using a hidden input In WooCommerce and Magento 2 we injected a hidden text input inside the checkout `
` elements to hold this data and automatically pass it to the `$_POST` variable. ```js @@ -231,18 +245,33 @@ document.addEventListener('myparcel_updated_delivery_options', (event) => { }); ``` -##### WooCommerce -Files that can help you get started: +#### Deselect options +You might want to integrate the delivery options into a list of existing shipping methods, like we've done in [Magento 2](https://github.com/myparcelnl/magento/blob/504ea103f6b3042e1dfa7debc022251eeaba381e/view/frontend/web/js/view/delivery-options.js#L231). So when the user selects a different shipping method you'll want the delivery options to appear unselected. -- Backend: [/includes/frontend/class-wcmp-checkout.php](https://github.com/myparcelnl/woocommerce/blob/master/includes/frontend/class-wcmp-checkout.php) -- Frontend: [/assets/js/wcmp-frontend.js](https://github.com/myparcelnl/woocommerce/blob/master/assets/js/wcmp-frontend.js) +![screenshot](screenshots/deselect-1.png) -##### Magento 2 -Files that can help you get started: +Note: If you only have one option, so either "delivery" or "pickup", the option will appear disabled. Until there's a built in solution, there's the following workaround. -Note: It's more complex in Magento 2 because of the way shipping methods work. -- Backend: [/Model/Checkout/DeliveryOptionsToShippingMethods.php](https://github.com/myparcelnl/magento/blob/develop/Model/Checkout/DeliveryOptionsToShippingMethods.php) -- Frontend: [/view/frontend/web/js/view/delivery-options.js](https://github.com/myparcelnl/magento/blob/develop/view/frontend/web/js/view/delivery-options.js) +If you only use delivery: +```js +document.getElementById('myparcel-delivery-options__delivery--deliver').disabled = false; +``` + +If you only use pickup: +```js +document.getElementById('myparcel-delivery-options__delivery--pickup').disabled = false; +``` + +![screenshot](screenshots/deselect-2.png) + +To deselect all options, dispatch the `myparcel_disable_delivery_options` event. You could do this as when your users select a different shipping method, for example. +```js +document.dispatchEvent(new Event('myparcel_disable_delivery_options')); +``` + +The delivery options will look like this: + +![screenshot](screenshots/deselect-3.png) ## Contribute Please read our [contribution guidelines](CONTRIBUTING.md) diff --git a/screenshots/deselect-1.png b/screenshots/deselect-1.png new file mode 100644 index 00000000..d09098eb Binary files /dev/null and b/screenshots/deselect-1.png differ diff --git a/screenshots/deselect-2.png b/screenshots/deselect-2.png new file mode 100644 index 00000000..28b06135 Binary files /dev/null and b/screenshots/deselect-2.png differ diff --git a/screenshots/deselect-3.png b/screenshots/deselect-3.png new file mode 100644 index 00000000..3af62737 Binary files /dev/null and b/screenshots/deselect-3.png differ