Theme debugging Theme debugging

Theme debugging

Jordan Wheelock Jordan Wheelock

Check your theme.liquid file and assets folder

If the Skio Plan Picker is not rendering, it is usually best to double check your theme.liquid file to make sure you have the following render after the <head> tag:

 {% render 'skio-head' %}

You should additionally have the following file in the assets folder of your store's Theme codebase (unless you are utilizing the Skio App Block element via the Shopify Customizer tool):

skio-plan-picker-component.js

If you are missing either of these (and are not using the App Block), please reach out to our Support team (help@skio.com) for assistance.

 

The Skio element should be included somewhere in your Theme code

If the 'skio-head' render is there and the 'skio-plan-picker-component.js' file exists (and you are not using the Skio App Block element via the Shopify Customizer tool), then next is to check that the Skio element exists somewhere in your Theme codebase. You can confirm this by searching for the following HMTL element end tag:

</skio-plan-picker>

 

The Skio element should include a valid `formId` value

Once you find the <skio-plan-picker> element in your Theme codebase, you should confirm that it is being passed a valid `formId` value that is used for the actual "Add to cart" form, similar to the below example:

Screen Shot 2023-11-01 at 1.38.55 PM.png


Skio plan picker is not working correctly?

Console log the variables from assets/skio-plan-picker-component.js

In the case that your Skio plan picker is rendering but still having issues with grabbing variants/prices you will want to console log the functions within skio-plan-picker-component.js to find the function call that might not be working properly.

 

Skio element price isn't changing when the selected Variant changes?

If the Skio element doesn't seem to be responding when a new variant is selected on the Product page, please place the following Event dispatch in your Theme codebase wherever the JS code that controls the changing of the variant on the Product page occurs:

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

where `variant.id` should be replaced as needed to pass the selected variant's ID value to the Event detail object.

Add comment

Please sign in to leave a comment.