Subscription inline prices
Hi Everyone.
I'm creating a block app to display the subscriptions available for a product and I'm having issues displaying the price and how it changes for the different possibilities.
In the image below it would be item A and B
other documents followed :
https://shopify.dev/themes/product-merchandising/variants#shopify-option-selection
I'm working with the subscription app extension and trying to add the modal on the online store theme as a block app using Dawn
HTML
{%- liquid
assign current_variant = product.selected_or_first_available_variant | default: product.variants.first
assign current_selling_plan_allocation = current_variant.selected_selling_plan_allocation
if current_selling_plan_allocation == nil and current_variant.requires_selling_plan
assign current_selling_plan_allocation = current_variant.selling_plan_allocations | first
endif
assign offer = current_selling_plan_allocation | default: current_variant
-%}
<h2>{{ product.title}}</h2>
{{ offer.price | money }}
<!-- <script>console.log({{ product | json }});</script> -->
{% if offer.compare_at_price > offer.price %}
<s>{{ offer.compare_at_price | money }}</s>
<span>{% if offer.selling_plan %}Subscription{% else %}Sale{% endif %}</span>
{% endif %}
{% form 'product', product, class:'shopify-product-form' %}
<input type="hidden" name="id" value="{{ current_variant.id }}">
<input type="hidden" name="selling_plan" value="{{ current_selling_plan_allocation.selling_plan.id | default: '' }}">
{% comment %}theme-check-disable ParserBlockingScriptTag{% endcomment %}
{{ 'option_selection.js' | shopify_asset_url | script_tag }}
{% comment %}theme-check-enable ParserBlockingScriptTag{% endcomment %}
<select id="product-select" name="id" class="select">
{% for variant in product.variants %}
<option value="{{ variant.id }}"
{% if variant == product.selected_or_first_available_variant %}selected="selected"{% endif %}
>
{{ variant.title }} - {{ variant.price | money }}
</option>
{% endfor %}
</select>
<fieldset class="selling-plan-fieldset" data-product='{{ product | json }}'>
<legend>Purchase options</legend>
<ul>
<li>
{% unless product.requires_selling_plan %}
<input type="radio" name="purchase_option"> One-time purchase
<hr>
{% endunless %}
</li>
{% for group in product.selling_plan_groups %}
{% unless product.selling_plan_groups.first == group %}
<hr>
{% endunless %}
<li>
<input type="radio" name="purchase_option" value="{{group.id}}" checked> {{ group.name}}
{% for option in group.options %}
<label>{{ option.name }}</label>
<select data-position="{{ option.position }}" data-group="{{group.id}}">
{% for value in option.values %}
<option value="{{value}}" {% if product_option.selected_value == value %}selected{% endif %}>{{ value }}</option>
{% endfor %}
</select>
{% endfor %}
</li>
{% endfor %}
</ul>
</fieldset>
<p class="selling-plan">{{ line_item.selling_plan_allocation.selling_plan.name }}</p>
<button type="submit" name="add"
class="product-form__submit button button--full-width {% if block.settings.show_dynamic_checkout and product.selling_plan_groups == empty %}button--secondary{% else %}button--primary{% endif %}"
{% if product.selected_or_first_available_variant.available==false %}disabled{% endif %}>
{%- if product.selected_or_first_available_variant.available -%}
Add to cart
{%- else -%}
{{ 'products.product.sold_out' | t }}
Sold out
{%- endif -%}
</button>
{% endform %}
{% schema %}
{
"name": "Subscription",
"target": "section",
"stylesheet": "subscription.css",
"javascript": "subscription.js",
"templates": ["product"],
"settings": []
}
{% endschema %}JavaScript
var sellingPlanContainer = document.querySelector(".selling-plan-fieldset");
var product = JSON.parse(sellingPlanContainer.dataset.product);
var productForm = document.querySelector(".shopify-product-form");
var findSelectedVariant = function () {
var selectedVariantId = parseInt(
document.querySelector('.shopify-product-form [name="id"]').value
);
var selectedVariant;
for (var i = 0; i < product.variants.length; i++) {
if (product.variants[i].id === selectedVariantId) {
selectedVariant = product.variants[i];
break;
}
}
return selectedVariant;
};
// Watch for variant selection to update selling plan option selectors
productForm.addEventListener("change", function (e) {
var selectedVariant = findSelectedVariant();
var availableSellingPlanAllocations =
selectedVariant.selling_plan_allocations;
console.log("change", e.target.attributes);
var radioValue = e.target?.attributes[2]?.value || null;
console.log("radio", radioValue);
if (availableSellingPlanAllocations) {
var sellingId = document.querySelector('[name="selling_plan"]').value;
for (const e of availableSellingPlanAllocations) {
if (e.selling_plan_id == sellingId) {
product.selected_or_first_available_variant == e;
}
}
}
console.log("selected?", availableSellingPlanAllocations || null);
// Update the selling plan option selectors based on the available selling plan allocations
// for the selected variant
});
// Watch for selling plan option change to update the selected selling plan
sellingPlanContainer
.querySelectorAll("select")
.forEach(function (optionSelector) {
optionSelector.addEventListener("change", function (e) {
var selectedVariant = findSelectedVariant();
var availableSellingPlanAllocations =
selectedVariant.selling_plan_allocations;
var selectedSellingPlanId;
console.log("En el segundo", availableSellingPlanAllocations);
console.log("En el segundo e", e);
let groupIdSelected = e.target.dataset.group;
let itemSelected = e.target.value;
let sellingPlanSelected = getSubscriptionPlanId(
groupIdSelected,
itemSelected
);
if (sellingPlanSelected) {
selectedSellingPlanId = sellingPlanSelected;
}
selectedSellingPlanId =
typeof selectedSellingPlanId === "undefined"
? ""
: selectedSellingPlanId;
document.querySelector('[name="selling_plan"]').value =
selectedSellingPlanId;
});
});
const getSubscriptionPlanId = (selectedSellingGroupId, optionValue) => {
let sellingPlanGroup = product.selling_plan_groups.find(
(x) => x.id === selectedSellingGroupId
);
let sellingPlanSelected = sellingPlanGroup.selling_plans.find(
(x) => x.options[0].value === optionValue
).id;
return sellingPlanSelected;
};
var selectCallback = function (variant, selector) {
console.log(product || null);
console.log("variante", variant ? variant : "sin variante");
this.variant = variant;
console.log("selector", selector ? selector : "sin selector");
selector.product.selected_variant = variant;
document.querySelector('[name="id"]').value = variant.id;
};
new Shopify.OptionSelectors("product-select", {
product: product,
onVariantSelected: selectCallback,
});
Thank you!
