1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
{
  "options": [
    {
      "title": "Choose Your Dates",
      "values": [
        {
          "label": "Apr 26–May 9, 2020 and Oct 18–30, 2020<br />$6,550",
          "input": {
            "type": "radio",
            "name": "date",
            "value": 1,
            "checked": true
          }
        },
        {
          "label": "Apr 26–May 9, 2020 and Oct 18–30, 2020<br />$6,550",
          "input": {
            "type": "radio",
            "name": "date",
            "value": 2
          }
        }
      ]
    }
  ]
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
<div class="m-buy">
	{% for option in options %}
		<div class="m-buy__option">
			<h5 class="m-buy__option-title">{{ option.title }}</h5>
			<ul class="m-buy__option-values">
				{% for value in option.values %}
					<li>
						<label class="m-buy__option-value">
							<span>{{ value.label }}</span>
							<span>{% include 'components/molecules/bool-input/bool-input' with value.input only %}</span>
						</label>
					</li>
				{% endfor %}
			</ul>
		</div>
	{% endfor %}

	<div class="m-buy__primary-action">
		{% include 'components/atoms/btn/btn' with { style: "primary", text: "Buy Now" } %}
	</div>

	<ul class="m-buy__aux-actions">
		<li>
			<button data-behavior="DummyAddToCart" data-dummyaddtocart-name="{{ title }}">Add to Cart</button>
		</li>
		<li>
			<button>View My Cart (1)</button>
		</li>
	</ul>
</div>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
.m-buy {
  border: 2px solid var(--color--secondary-button__border);
  padding: 24px;

  &__option-title {
    @include f-ui-1;
  }

  &__option-values {
    padding-top: 16px;
    @include f-body-2;
  }

  &__option-values,
  &__aux-actions {
    border-color: var(--color--rules--secondary);
    & > :not(:first-child) {
      border-top-width: 1px;
      padding-top: 16px;
      margin-top: 16px;
    }
  }

  &__option-value {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    @include child-spacing-x(
      (
        xsmall: 36px
      )
    );
  }

  &__primary-action {
    padding-top: 28px;
  }

  &__aux-actions {
    padding-top: 24px;

    button {
      @include reset-btn;
      @include f-ui-1;
      @include button-focus;
    }
  }
}