From 8f997441738e4e0a2bee3690471c44d9b21e1057 Mon Sep 17 00:00:00 2001 From: Alejandro de Arriba Date: Sun, 24 Jan 2021 13:45:45 +0100 Subject: [PATCH] Adding Shipping methods in load:shipping event --- README.md | 26 +++++++++++++++++++++++++- src/Checkout.js | 15 ++++++++++++++- src/ShippingMethod.js | 32 ++++++++++++++++++++++++++++++++ 3 files changed, 71 insertions(+), 2 deletions(-) create mode 100644 src/ShippingMethod.js diff --git a/README.md b/README.md index 77cb607..f434d00 100644 --- a/README.md +++ b/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 UPS') +}); +``` + +## Get/set checked status +```javascript +... +shippingMethods[0].checked = true; +console.log(shippingMethods[0].checked); +... +``` \ No newline at end of file diff --git a/src/Checkout.js b/src/Checkout.js index 49d5ab7..3e03e5f 100644 --- a/src/Checkout.js +++ b/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'); diff --git a/src/ShippingMethod.js b/src/ShippingMethod.js new file mode 100644 index 0000000..b715e93 --- /dev/null +++ b/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; + } +} \ No newline at end of file