docs: update delivery options documentation

src/documentation/60.delivery-options.md

@@ -10,45 +10,69 @@ This is the documentation for the stable version of the Delivery Options. If you
 
 This is the MyParcel delivery options module for use in any e-commerce platform's checkout, by [MyParcel] and [SendMyParcel] customers. It's used to show your customers the possible delivery and/or pickup options for their location, based on your settings.
 
-## Getting started
+## Installation
 
 First, you need to add the delivery options script to your page. You can do this using your favorite package manager or by including the script from the CDN in your HTML.
 
-### CDN
+- [Option 1: CDN](#option-1-cdn)
+- [Option 2: Install via package manager](#option-2-install-via-package-manager)
+
+### Option 1: CDN
 
 This is the easiest way. Include Vue 3 and the `@myparcel/delivery-options` JavaScript and CSS from the CDN in your HTML.
 
 ```html
-<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
-<script src="https://unpkg.com/@myparcel/delivery-options@beta/dist/myparcel.lib.js"></script>
+<script src="https://cdn.jsdelivr.net/npm/vue@3.4"></script>
+<script src="https://cdn.jsdelivr.net/npm/@myparcel/delivery-options@6/dist/myparcel.lib.js"></script>
 <link
   rel="stylesheet"
-  href="https://unpkg.com/@myparcel/delivery-options@beta/dist/style.css" />
+  href="https://cdn.jsdelivr.net/npm/@myparcel/delivery-options@6/dist/style.css" />
 ```
 
-### Package manager
+Or, when there is already a different version of Vue on the page, you can use a compiled version of the delivery options that includes Vue. This way you can avoid conflicts between Vue versions.
+
+```html
+<script src="https://cdn.jsdelivr.net/npm/@myparcel/delivery-options@6/dist/myparcel.js"></script>
+<link
+  rel="stylesheet"
+  href="https://cdn.jsdelivr.net/npm/@myparcel/delivery-options@6/dist/style.css" />
+```
+
+::: tip
+Continue to [usage](#usage) to see how to initialize the delivery options.
+:::
+
+### Option 2: Install via package manager
 
 Install the package using your favorite package manager.
 
 <InstallNode package="@myparcel/delivery-options^beta" />
 
-#### Plain JavaScript
+And include the script and CSS in your project.
 
 ```js
 import '@myparcel/delivery-options/dist/myparcel.js';
 import '@myparcel/delivery-options/dist/style.css';
 ```
 
-Add the wrapper div to your html:
+::: tip
+Continue to [usage](#usage) to see how to initialize the delivery options.
+:::
 
-```html
-<div id="myparcel-delivery-options" />
-```
+## Usage
+
+If you're using Vue 3, you can use the Vue component. If you're using plain JavaScript, you can use the plain JavaScript version.
+
+- [Vue 3](#usage-option-1-vue-3)
+- [Plain JavaScript](#usage-option-2-plain-javascript)
 
-#### Vue 3
+### Usage option 1: Vue 3
+
+When you're developing in an existing Vue 3 app, you can use the Vue component instead. This is the easiest way to use the delivery options. See the [configuration](#configuration) section for all possible options. You can use the [smallest possible configuration](#smallest-possible-configuration) as an example and/or starting point.
 
 ```vue
 <script setup>
+import {ref} from 'vue';
 import {
   MyParcelDeliveryOptions,
   MyParcelConfiguration,
@@ -57,7 +81,10 @@ import {
 
 const configuration = ref(
   defineConfig({
-    // Your configuration here
+    // Your configuration here:
+    config: {},
+    address: {},
+    strings: {},
   }),
 );
 </script>
@@ -67,9 +94,78 @@ const configuration = ref(
 </template>
 ```
 
+::: tip
+Continue to the [configuration](#configuration) section to see all possible options.
+:::
+
+### Usage option 2: Plain JavaScript
+
+Create a wrapper div in your html where you want the delivery options to appear.
+
+```html
+<div id="myparcel-delivery-options"></div>
+```
+
+Then, initialize the delivery options with your configuration. See the [configuration](#configuration) section for all possible options. For now, we will use the [smallest possible configuration](#smallest-possible-configuration) as an example.
+
+```js
+const configuration = {
+  // This is the default selector, you can change it to any CSS selector you want. Make sure it only selects one element.
+  selector: '#myparcel-delivery-options',
+  address: {
+    cc: 'NL',
+    postalCode: '2132JE',
+    number: '31',
+    street: 'Antareslaan 31',
+    city: 'Hoofddorp',
+  },
+  config: {
+    platform: 'myparcel',
+    carrierSettings: {
+      postnl: {},
+    },
+  },
+};
+
+document.dispatchEvent(
+  new CustomEvent('myparcel_update_delivery_options', {detail: configuration}),
+);
+```
+
+::: tip
+See the [configuration](#configuration) section to see all possible options.
+:::
+
+To retrieve the selected delivery options, you can listen for the `myparcel_updated_delivery_options` event.
+
+```js
+document.addEventListener('myparcel_updated_delivery_options', (event) => {
+  console.log(event.detail);
+});
+```
+
+When you change your selection in the rendered delivery options, the event will be fired with the new selection.
+Example output:
+
+```json lines
+{
+  "carrier": "postnl",
+  "date": "2024-04-10 00:00:00.000000",
+  "deliveryType": "morning",
+  "isPickup": false,
+  "packageType": "package",
+  "shipmentOptions": {
+    "signature": true,
+    "onlyRecipient": true
+  }
+}
+```
+
+This can then be used to update the shipping costs in your checkout.
+
 ## Configuration
 
-Almost all settings can be set globally or per carrier. If you set a setting globally, it will be used for all carriers unless you override it for a specific carrier.
+Almost all settings can be set globally or per carrier. If you set a setting globally, it will be used for all carriers unless you override it for a specific carrier. How you should pass the configuration to the delivery options depends on whether you're using the Vue component or plain JavaScript. See the [usage](#usage) section for more information.
 
 ::: tip
 For the most comprehensive information, you can check out our [Sandbox]. Here you can see (and try) all the possible configuration options and see the result in real-time.
@@ -144,7 +240,7 @@ In this example the drop-off days are as follows:
 | Wednesday | 15:00 (default) | 9:30 (default)       |
 | Friday    | 14:00           | 9:30 (default)       |
 
-### Smallest possible config
+### Smallest possible configuration
 
 Most keys of the config are optional. The only required keys are:
 
@@ -178,10 +274,14 @@ All delivery types and options are enabled by default. This has the following re
 
 <MPImg src="/documentation/delivery-options/basic-config.jpg" alt="MyParcel Delivery Options with basic configuration" />
 
-### Full reference
+### Full configuration reference
+
+These are all the possible configuration options. The `strings` object is used for translations. The `config` object is used for all other settings.
 
 ```json lines
 {
+  // string, CSS selector for the element where the delivery options will be rendered. Optional, defaults to "#myparcel-delivery-options".
+  "selector": "#myparcel-delivery-options",
   "address": {
     // string, ISO 3166-1 alpha-2 country code
     "cc": "NL",