Customize plan picker

Plan Picket Customizer

For developers, the Skio Plan Picker can be fully customized from Snippets/skio-plan-picker.liquid
Feel free to check out how some of our customers have customized the Skio Plan Picker by clicking on any of the logos on our homepage

Set One-time Purchase as the Default Selected

From Snippets/skio-plan-picker-rewrites.liquid find the function onLoad() and remove the function call initialCheckPlanOnSelect(); or you can replace your function with the code below:

function onLoad() {
              patchRequests();
              document.querySelectorAll('fieldset.skio-plan-picker').forEach(function (planSelector) {
                setupPlanSelector(planSelector);
                addObserver(planSelector);
                //initialCheckPlanOnSelect();
                planSelector.querySelectorAll('[name="skio-subscription-value"]').forEach(function(node) {
                  node.addEventListener('change', function (e) {
                    filterGroupsForVariantAndThenUpdate(planSelector);
                  });
                });
                planSelector.querySelectorAll('select').forEach(function(node) {
                  node.addEventListener('change', function (e) {
                    checkPlanOnSelect(planSelector);
                    filterGroupsForVariantAndThenUpdate(planSelector);
                  });
                });
              });
            }
          	

Add Prices to Plan Selected

From Snippets/skio-plan-picker-rewrites.liquid find the function onLoad() and remove the function call initialCheckPlanOnSelect(); or you can replace your function with the code below:

function onLoad() {
              patchRequests();
              document.querySelectorAll('fieldset.skio-plan-picker').forEach(function (planSelector) {
                setupPlanSelector(planSelector);
                addObserver(planSelector);
                //initialCheckPlanOnSelect();
                planSelector.querySelectorAll('[name="skio-subscription-value"]').forEach(function(node) {
                  node.addEventListener('change', function (e) {
                    filterGroupsForVariantAndThenUpdate(planSelector);
                  });
                });
                planSelector.querySelectorAll('select').forEach(function(node) {
                  node.addEventListener('change', function (e) {
                    checkPlanOnSelect(planSelector);
                    filterGroupsForVariantAndThenUpdate(planSelector);
                  });
                });
              });
            }
          	

Add Prices to Plan Selected

From Snippets/skio-plan-picker.liquid find <span>One-time purchase</span> and replace it with the code below:

<span class="one-time-price">One-time purchase: {{ product.selected_or_first_available_variant.price | money }}</span>
          

From Snippets/skio-plan-picker.liquid find <span>Subscribe and save</span> and replace it with the code below:

<span class="subscribe-price">Subscribe and save: {{ product.selected_or_first_available_variant.selling_plan_allocations[0].price | money }}</span>
          

Add Savings to Subscribe and Save

From Snippets/skio-plan-picker.liquid find the code block below and uncomment it:

{% assign sellingPlanPrice = group.selling_plans[0].price_adjustments[0].value %}
          {% assign variantPriceFloat = variantPrice | times: 1.0 %}
          {% assign sellingPlanPriceFloat = sellingPlanPrice | times: 1.0 %}
          {% assign savingsFlat = variantPriceFloat | minus: sellingPlanPriceFloat %}
          {% assign savings = savingsFlat | times: 100.0 | divided_by: variantPriceFloat | round %}
          

From Snippets/skio-plan-picker.liquid find <span>Subscribe and save</span> and replace it with the code below:

<span class="subscribe-price">Subscribe and save {{ savings }}%</span>
          

How did we do?


Powered by HelpDocs (opens in a new tab)