LokiCheckout_ShipperHQEnhanced

This is an add-on package to the LokiCheckout to integrate the ShipperHQ Enhanced Checkout (React application) into the checkout.

Installation

Install this package via composer (assuming you have setup the composer.yireo.com repository correctly already):

composer require loki-checkout/magento2-shipper-hq-enhanced

Next, enable this module:

bin/magento module:enable LokiCheckout_ShipperHQEnhanced

Architecture

The ShipperHQ Enhanced Checkout consists of a custom React app, that re-uses logic from the ready-made RMC Component within and connects to the GraphQL server of ShipperHQ to retrieve shipping rates and prepare the quote. The custom React sources can be found within this module under view/frontend/react/src while the RMC Component is found under view/frontend/react/lib.

The React sources can be built by navigating to view/frontend/react and running npm run build. Likewise, a Webpack Development Server can be started by using npm run start.

Because the Loki Checkout uses Alpine.js, additional logic is used to glue the React app together with the Alpine.js components. There is a Loki Component loki-checkout.shipping.methods.shipperhq-enhanced.component which initializes various options in the LokiCheckout and makes sure the shipping methods of ShipperHQ are properly validated, as part of the shipping step.

This Loki Components sends messages to the React app via an intermediate object LokiCheckoutShipperHQEnhancedBridge which exists in both the LokiCheckout and the Webpack Development Server. Because both React and Alpine.js are reactive, messages in between are sent via regular JavaScript events.

Some data relevant for the GraphQL calls towards the ShipperHQ API are copied from the Loki Component via the LokiCheckoutShipperHQEnhancedBridge into the React app (scope, token, session ID). Some other details are borrowed directly from localStorage (which is part of the private data mechanism of Magento). The localStorage item mage-cache-storage is populated by the LokiCheckout via the Magento URL customer/section/load/. This URL offers a section loki-checkout which contains generic data. The LokiCheckout_ShipperHQEnhanced module uses a DI plugin to add additional data.

Support

For getting support, create an Issue under the following project URL:

https://gitlab.yireo.com/loki-checkout/LokiCheckout_ShipperHQEnhanced