Subscription inline prices

[afielder]

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

https://shopify.dev/themes/pricing-payments/subscriptions/subscription-ux-guidelines#selling-plan-selection

other documents followed :

https://shopify.dev/themes/product-merchandising/variants#shopify-option-selection

https://shopify.dev/themes/pricing-payments/subscriptions/selling-plans#update-selling-plan-informat…

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
-%}

## {{ product.title}}
{{ offer.price | money }}

{% if offer.compare_at_price > offer.price %}
~~{{ offer.compare_at_price | money }}~~
{% if offer.selling_plan %}Subscription{% else %}Sale{% endif %}
{% endif %}

{% form 'product', product, class:'shopify-product-form' %}

{% comment %}theme-check-disable ParserBlockingScriptTag{% endcomment %}
{{ 'option_selection.js' | shopify_asset_url | script_tag }}
{% comment %}theme-check-enable ParserBlockingScriptTag{% endcomment %}

{{ line_item.selling_plan_allocation.selling_plan.name }}

{% 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!