Customize plan picker
Plan Picket Customizer
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>
