skio-app-block.liquid

{% comment %}
  Usage:
    {% when 'skio-plan-picker' %}
          {% render 'skio-app-block', block: block, product: product %}
{% endcomment %}

{% assign skioSellingPlanGroups = product.selling_plan_groups | where: 'app_id', 'SKIO' %}
{% assign skioRender = false %}
{% if block.settings.product_handle != null or block.settings.product_handle == null and skioSellingPlanGroups.size > 0 and product.available %}
  {% assign skioRender = true %}
{% endif %}
{% if skioRender %}
  <style>
    skio-plan-picker {
      --skio-group-border-radius: {{ block.settings.group_border_radius }}px;
      --skio-group-border-width: {{ block.settings.group_border_width }}px;
      --skio-group-border-color: {{ block.settings.group_border_color }};
      --skio-group-border-selected-color: {{ block.settings.group_border_selected_color }};
      --skio-group-background-color: {{ block.settings.group_background_color }};
      --skio-group-background-selected-color: {{ block.settings.selected_group_background_color }};
      --skio-group-text-color: {{ block.settings.group_text_color }};
      --skio-group-text-selected-color: {{ block.settings.group_selected_text_color }};
      --skio-discount-color: {{ block.settings.discount_color }};
      --skio-discount-text-color: {{ block.settings.discount_text_color }};
      --skio-button-plan-selector-width: {{ block.settings.button_plan_selector_width }};
    }
  </style>

  <{{ block.settings.element_name }}
    key='{{ block.id }}'
    options='{{ block.settings | json | escape }}'
    layout='{{ block.settings.layout }}'

    {% if block.settings.product_handle != null %}
      productHandle='{{ block.settings.product_handle }}'
    {% else %}
      product='{{ product | json | escape }}'
      selectedVariant='{{ product.selected_or_first_available_variant | json | escape }}'
    {% endif %}
  >
    <input type='hidden' name='selling_plan' form='{{ block.settings.form_id }}'>
  </{{ block.settings.element_name }}>

  <script src='{{ 'skio-plan-picker-component.js' | asset_url }}' type='module'></script>
{% endif %}