Plan Picker

Server-side Rendering with Liquid + Client-side Hydration with Javascript

The skio plan picker's initial state is loaded fully server-side with Liquid. By not relying on Javascript for the initial rendering we can put off the loading of the Javascript until the user goes to make an update. Very minimal Javascript is loaded with the initial skio plan picker HTML to set up listeners to lazy-load the skio-plan-picker.js file.

Everything is Editable

None of the plan picker code is out of reach! The javascript is not loaded in the {{ content_for_header }} or hosted on our servers. You have complete control to make the changes you want.

File locations:

assets/skio-plan-picker.js

assets/skio-plan-picker.css

snippets/skio-plan-picker.liquid