<div class="subscription-selector js-subscription-selector">
    <form action="" method="get" class="subscription-selector-block">
        <div class="form-block">
            <h3 class="heading heading--label">Elbil <span class="tooltip js-tooltip">This is a tooltip</span></h3>
            <p class="price"><output name="price">499</output> <span class="price-unit">kr/md</span></p>
        </div>

        <div class="form-block form-block--checkboxes form-block--elbil-ladeboks">
            <fieldset>
                <legend>Ladeboks</legend>
                <div class="form-group">
                    <div class="form-input form-input--checkbox">
                        <input id="elbil-ladeboks-1" value="200" name="elbil-ladeboks" type="checkbox" checked>
                        <label for="elbil-ladeboks-1">
                            <span>7.999 <span class="price-unit">kr</span></span>
                        </label>
                    </div>
                </div>
            </fieldset>
        </div>

        <div class="form-block form-block--button">
            <button class="form-button btn" type="submit">
                <span class="text">Bestil</span>
            </button>
        </div>
    </form>
    <form action="" method="get" class="subscription-selector-block">
        <div class="form-block">
            <h3 class="heading heading--label">Plug-in hybrid <span class="tooltip js-tooltip">This is a tooltip</span></h3>
            <p class="price"><output name="price">199</output> <span class="price-unit">kr/md</span></p>
        </div>

        <div class="form-block form-block--checkboxes form-block--ladeboks">
            <fieldset>
                <legend>Ladeboks</legend>
                <div class="form-group">
                    <div class="form-input form-input--checkbox">
                        <input id="ladeboks-1" value="200" name="ladeboks" type="checkbox" checked>
                        <label for="ladeboks-1">
                            <span>7.999 <span class="price-unit">kr</span></span>
                        </label>
                    </div>
                </div>
            </fieldset>
        </div>

        <div class="form-block form-block--button">
            <button class="form-button btn" type="submit">
                <span class="text">Bestil</span>
            </button>
        </div>
    </form>
</div>
<div class="subscription-selector js-subscription-selector">
	{% for block in subscriptionItems %}
		<form action="{{ subscriptionSelectorFormAction }}" method="{{ subscriptionSelectorFormMethod|default('get') }}" class="subscription-selector-block">
			<div class="form-block">
				<h3 class="heading heading--label">{{ block.heading }}</h3>
				<p class="price"><output name="price">{{ block.basePrice }}</output> <span class="price-unit">kr/md</span></p>
			</div>

			{% for formBlock in block.formBlocks %}
				{% include '@' ~ formBlock.type with formBlock.content %}
			{% endfor %}

			{% include '@form-block-button' with {
				formBlockButtonLabel: subscriptionButtonText,
				formBlockButtonAttributes: {
					'type': 'submit',
				},
			} %}
		</form>
	{% endfor %}
</div>
{
  "subscriptionSelectorFormAction": null,
  "subscriptionSelectorFormMethod": "get",
  "subscriptionItems": [
    {
      "heading": "Elbil <span class=\"tooltip js-tooltip\">This is a tooltip</span>",
      "basePrice": 499,
      "formBlocks": [
        {
          "type": "form-block-checkboxes",
          "content": {
            "formBlockLegend": "Ladeboks",
            "formBlockName": "elbil-ladeboks",
            "formBlockOptions": [
              {
                "label": "7.999 <span class=\"price-unit\">kr</span>",
                "value": 200,
                "checked": true
              }
            ]
          }
        }
      ]
    },
    {
      "heading": "Plug-in hybrid <span class=\"tooltip js-tooltip\">This is a tooltip</span>",
      "basePrice": 199,
      "formBlocks": [
        {
          "type": "form-block-checkboxes",
          "content": {
            "formBlockLegend": "Ladeboks",
            "formBlockName": "ladeboks",
            "formBlockOptions": [
              {
                "label": "7.999 <span class=\"price-unit\">kr</span>",
                "value": 200,
                "checked": true
              }
            ]
          }
        }
      ]
    }
  ],
  "subscriptionButtonText": "Bestil"
}

Subscription Selector

Version 2

  • Ladeboks is by default chosen.
  • When ladeboks gets unselected, the prices of the monthly payment under “Elbil” and “Plug-in is reduced to a smaller price. This is because the monthly price for ladeboks is subtracted from the two prices)
  • All three prices: 1/ Monthly subscription price 2/ Monthly ladeboks price 3/ Ladeboks installation price - are all entered in Umbraco.
  • Can be used in any component with child components (e.g. Product Card: Default)