Adding Shipping methods in load:shipping event

README.md

@@ -9,6 +9,9 @@ A little library that will help you manipulate Shopify´s Checkout via JS.
 	- [3.2. TextFields](#32-textfields)
 	- [3.3. Checkboxs](#33-checkboxs)
 	- [3.4. Dropdowns](#34-dropdowns)
+- [4. Shipping methods](#4-shipping-methods)
+	- [Add description to shipping method](#add-description-to-shipping-method)
+	- [Get/set checked status](#getset-checked-status)
 
 # 1. Build JS
 
@@ -39,7 +42,7 @@ The different types of events right now are:
 |---|---|
 |load|This is triggered for convenience in every Shopify´s ``page:load`` or ``page:change`` event.|
 |load:information|**Information** step is loaded|
-|load:shipping|**Shipping** step is loaded|
+|load:shipping|**Shipping** step is loaded. The ``event.detail`` object contains the shipping methods shown in the page.|
 |load:payment|**Payment** step is loaded|
 |load:processing|**Processing** page is loaded|
 |load:thankyou|**Thank you** page is loaded|
@@ -166,3 +169,24 @@ var select = new DropdownField({
 ```javascript
 console.log(select.value);
 ```
+
+# 4. Shipping methods
+When the ``load:shipping`` event is triggered, the ``event.detail`` object contains the shipping methods shown to the customer.
+
+## Add description to shipping method
+You can add a little description beneath the shipping method name. This accepts HTML so it can be more flexible.
+
+```javascript
+$checkout.on('load:shipping', e => { 
+    let shippingMethods = e.detail.shippingMethods;
+    shippingMethods[0].addDescription('Shipping by <b>UPS</b>')
+});
+```
+
+## Get/set checked status
+```javascript
+...
+shippingMethods[0].checked = true;
+console.log(shippingMethods[0].checked);
+...
+```

src/Checkout.js

@@ -3,6 +3,7 @@ import Field from './Fields/Field.js';
 import TextField from './Fields/TextField.js';
 import CheckboxField from './Fields/CheckboxField.js';
 import DropdownField from './Fields/DropdownField.js';
+import ShippingMethod from './ShippingMethod.js';
 
 export default class Checkout {
     constructor(){
@@ -96,6 +97,17 @@ export default class Checkout {
         document.dispatchEvent(event);
     }
 
+    _getShippingMethods(){
+        let methods = document.querySelectorAll('.radio-wrapper');
+        let shippingMethods = [];
+
+        methods.forEach( (method) => {
+            shippingMethods.push(new ShippingMethod(method));
+        });
+
+        return shippingMethods;
+    }
+
     _onLoad(event){
         try{
             this._triggerEvent('load');
@@ -105,7 +117,8 @@ export default class Checkout {
                     this._triggerEvent('load:information');
                     break;
                 case this.Steps.SHIPPING:
-                    this._triggerEvent('load:shipping');
+                    let shippingMethods = this._getShippingMethods()
+                    this._triggerEvent('load:shipping', { shippingMethods });
                     break;
                 case this.Steps.PAYMENT:
                     this._triggerEvent('load:payment');

src/ShippingMethod.js

@@ -0,0 +1,32 @@
+export default class ShippingMethod extends HTMLDivElement{
+    constructor(element){
+        if(!(element instanceof HTMLDivElement)
+            || !element.classList.contains('radio-wrapper')){
+            throw TypeError('Not a radio-wrapper');
+        }
+        Object.setPrototypeOf(element, ShippingMethod.prototype);
+        return element;
+    }
+
+    addDescription(text){
+        let span = this.querySelector('.radio__label__primary');
+        let desc = document.createElement('span');
+        desc.classList.add('small-text');
+        desc.innerHTML = text;
+
+        span.appendChild(document.createElement('br'));
+        span.appendChild(desc);
+    }
+
+    get checked(){
+        let input = this.querySelector('input');
+        if(!input) return false;
+        return input.checked;
+    }
+
+    set checked(boolean){
+        let input = this.querySelector('input');
+        if(!input || !(typeof boolean == 'boolean')) return;
+        return input.checked = boolean;
+    }
+}