Moving the Skio Plan Picker to a new theme

Preface

The following is not required when your new theme is a duplicate of a theme with Skio already installed. This guide applies to brand new themes only!

If you are a developer, the easiest way to find any theme code associated with Skio is to search your entire codebase (typically ctrl+shift+f in most IDEs) for "skio", as well as any filenames that contain "skio". This will point you to all files that may be referencing Skio code that would need to be transferred.

Depending on which Skio component you're currently using, the process for moving Skio code to a new theme may look a little different. Below are the processes needed for each version of the Skio plan picker!

Which version am I using?

If you have three files (one snippet file, two asset files) prefixed with skio-plan-picker - a Liquid, CSS, and Javascript file, you are using the Liquid Component.

If your codebase has a file named assets/skio-plan-picker-component.js, you are using one of two versions:

If your file begins with a comment that says "Usage Notes" and includes an example HTML block, you are using Universal Plan Picker v1. If your file does not have this comment block, you are using Universal Plan Picker v2. Version 2 will include two additional files, skio-app-block.liquid and skio-details.liquid.

If none of these apply to you, you are either using the Skio App Block or a Custom Implementation.

Liquid Component: skio-plan-picker.liquid

The Liquid version of the Skio plan picker has three associated files: snippets/skio-plan-picker.liquid, assets/skio-plan-picker.css, and assets/skio-plan-picker.js.

From your previous theme, copy each of these three files and place them in their respective folder. 

Next, you'll need to move over the render statement, typically found in your main product form. The render statement will always include:

{% render 'skio-plan-picker' %}

It is recommended that you copy this code from the old theme to ensure any parameters in use are also moved over properly.

You may also need to move over code used to emit a variantChange event, which signals to the Skio plan picker that variant switching has occurred. That snippet will typically look something like this:

document.querySelector('[name=id]').dispatchEvent(new Event('change'))

Universal Plan Picker v1: skio-plan-picker-component.js

If you are using the Skio plan picker powered by Lit.js, you only need to transfer over one file: skio-plan-picker-component.js.

You will also need to move over the HTML that is rendering the plan picker, which like the Liquid version is typically found in your main product form (and anywhere else the Skio plan picker is being included). 

It is recommended that you copy and paste the code that renders the Skio plan picker from your previous theme. It will look something like the following:

{% assign skioSellingPlanGroups = product.selling_plan_groups | where: 'app_id', 'SKIO' %}
{% if skioSellingPlanGroups.size > 0 %}
  <skio-plan-picker 
  product='{{ product | json | escape }}'
  selectedVariant='{{ product.selected_or_first_available_variant | json | escape }}'
  formId='{{ product_form_id }}'
  currency='{{ cart.currency.iso_code }}'>
  </skio-plan-picker>
  <input type="hidden" aria-hidden="true" name="selling_plan" value="">
  <script src="{{ 'skio-plan-picker-component.js' | asset_url }}" type="module"></script>
{% endif %}

There may be additional code used to update Skio's selected variant on your PDP which would also need to be moved over. Search your codebase for Skio, or search for the following event to find the required code if it's already installed. Or simply add the following event wherever variant change logic is handled in the theme:

 document.dispatchEvent( new CustomEvent("variantChanged", { detail: { variantId: variant.id } }) );

Universal Plan Picker v2: skio-plan-picker-component.js

Version 2 of the plan picker includes Shopify customizer tool support, and has two additional files as compared to version 1: skio-app-block.liquid and skio-details.liquid.

Begin by moving these three files over from the old theme to your new one. Next, search your main product file (typically main-product.liquid) for Skio. You should find an include snippet that looks something like this inside the {% for block in section.blocks %} loop:

{% when 'skio-plan-picker' %}
  {% render 'skio-app-block',
    block: block,
    product: product
   %}

Copy this 'when' statement over and place it in the block loop of your new theme's PDP. 

Additionally, you will need to copy over the section schema from the same file you copied the 'when' statement, found within the {% schema %} object. This will maintain your existing settings used for the plan picker in your previous theme.

Next, push your changes to the new theme. You can now add the Skio Plan Picker block to your product page in the Shopify customizer tool!

App Block

Please refer to the following guide on installing the Skio app block: Skio App Block Installation Guide.

If you have further questions about moving Skio code to a new theme, or do not currently have a developer to make these updates, please reach out to help@skio.com!