Subscription inline prices

afielder
Shopify Partner
3 0 1

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

Screen Shot 2021-10-06 at 4.24.00 PM.png

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

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

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

Replies 0 (0)