Data collection on subscribe page

gistfile1.mustache

{% extends "base.html" %}

{% macro ship_option(product, discount) %}
	{% if product.ship_option_string == "pricedin" %}
		<p class="ship_discount sml-text">FREE Shipping
			{% if discount %}
				<br />Save {{ ((1 - discount) * 100) | int }}%
			{% else %}
				<br />
			{% endif %}
		</p>
	{% elif product.ship_option_string == "flat" %}
		<p class="ship_discount sml-text">{{ product.flat_ship_price | currency }} Shipping</p>
	{% else %}
		<p class="ship_discount sml-text"></p>
	{% endif %}
{% endmacro %}

{%- macro cell_div(np, loop) -%}
	{% if np == 1 %}
		col-md-4 col-md-offset-4

	{% elif np == 2 and loop.first %}
		col-md-4 col-md-offset-2

	{% elif np == 5 and loop.first %}
		col-md-2 col-md-offset-1

	{% elif np == 5 %}
		col-md-2

	{% elif np == 3 %}
		col-md-4

	{% elif np == 6 %}
		col-md-2

	{% else %}
		col-md-3

	{% endif %}
{%- endmacro -%}

<!--PRODUCT CELL-->
{%- macro product_cell(np, loop, product) -%}
	
		<div class="{{ cell_div(np, loop) }}">
			<a class="btn btn-default" href="{{ product | product_subscribe_url }}">{{ product.name }}</a>
		</div>
{%- endmacro -%}

<!--VARIANT CELL-->
{%- macro variant_cell(np, loop, variant, value) -%}
	
		<div class="{{ cell_div(np, loop) }}">
			<div data-barley="variant_value.{{ value.id }}.img" data-barley-editor="image-logo">
				{% if value.images %}
					{{ value.images[0].url | img_tag(css_class="variant_image center-block") }}
				{% else %}
					{{ settings.variant_placeholder_img | asset_url | img_tag(css_class="variant_image center-block") }}
				{% endif %}
			</div>

			<a class="btn btn-default" href="{{ product | product_subscribe_url(chosen_values, value) }}" data-barley="variant_value.{{ value.id }}.value" data-barley-editor="linkedit">{{ value.value }}</a>
		</div>
{%- endmacro -%}

<!--TERM CELL-->
{%- macro term_cell(np, loop, term_price) -%}
	{% if term_price.term.enabled %}
		{% set term = term_price.term %}
		<div class="termcell {{ cell_div(np, loop) }}">
			{% if loop.index == 1 %}
				{{ 'img/sub1.jpg' | asset_url | img_tag(css_class="center-block") }}
				{% set summary = 'ONE' %}
			{% elif loop.index == 2 %}
				{{ 'img/sub2.jpg' | asset_url | img_tag(css_class="center-block") }}
				{% set summary = 'THREE' %}
			{% elif loop.index == 3 %}
				{{ 'img/sub3.jpg' | asset_url | img_tag(css_class="center-block") }}
				{% set summary = 'SIX' %}
			{% endif %}

			<h2 class="text-center" data-barley="term_price.{{ term_price.id }}.summary" data-barley-editor="simple">
				{{ summary }}
			</h2>

			<h4 class="text-center" data-barley="term.{{ term.id }}.name" data-barley-editor="simple">{{ term_price.term.name }}</h4>
			<h6 class="text-center" data-barley="term_price.{{ term_price.id }}.price" data-barley-editor="simple">{{ (term_price.price / term_price.term.num_cycles) | currency(0) }}/month</h6>
			<h6 class="text-center" data-barley="term_price.{{ term_price.id }}.bonus" data-barley-editor="simple">{{ settings['termbonus' ~ loop.index] }}</h6>
			<h6 class="text-center" data-barley="term_price.{{ term_price.id }}.renew" data-barley-editor="simple">{{ settings['termrenew' ~ loop.index] }}</h6>
			
			<a class="btn btn-default" href="{{ product | product_subscribe_url(chosen_values, term_price.term, next_stage="survey") }}" data-barley="term_price.{{ term_price.id }}.choose" data-barley-editor="linkedit">CHOOSE</a>
			{{ ship_option(product, discount=instance.calc_term_discount(term_price)) }}
		</div>
	{% endif %}
{%- endmacro -%}

<!--THE PAGE-->
{% block page_content %}

	{% do steps.append(("survey", "survey")) %}
	<div class="subscribe">
		<div class="row">
			<div class="col-md-12" id="steps-container">
				<ul class="list-inline steps">
					{% if stage == "product" %}
						<li class='' data-barley="subscribe_step.product" data-barley-editor="simple">
							<h4>
								Choose Product
							</h4>
						</li>
					{% else %}
						{% for key, val in steps %}
							{% if loop.index == cur_step %}
								{% set klass='' %}
							{% elif loop.index < cur_step %}
								{% set klass='prev-step' %}
							{% else %}
								{% set klass='next-step' %}
							{% endif %}

							{% if key == 'variant' %}
								<li class='{{ klass }}'>
									<h4 data-barley="subscribe_step.{{ key }}.{{ val.name }}" data-barley-editor="simple">
										{{ val.name }}
									</h4>
								</li>
							{% elif key == 'survey' %}
								<li class='{{ klass }}'>
									<h4 data-barley="subscribe_step.baby" data-barley-editor="simple">
										About Baby
									</h4>
								</li>
							{% else %}
								<li class='{{ klass }}'>
									<h4 data-barley="subscribe_step.term" data-barley-editor="simple">
										Monthly Plan
									</h4>
								</li>
							{% endif %}
							<li class='{{ klass }}'>
								<i class="icon icon-play"></i>
							</li>
						{% endfor %}
					{% endif %}
					<li class='next-step'>
						<h4>Checkout</h4>
					</li>
				</ul>
			</div>
			<h2>{{ settings.subscribe_heading }}</h2>
			<p>{{ settings.subscribe_subheading }}</p>
		</div>

		
		{% if stage == "product" %}
			<div class="termhead" data-barley="subscribe_product_heading" data-barley-editor="plus">
				<h1 class="text-center">Choose product</h1>
			</div>
			<div class="option-picker col-lg-12">
				{% set np = store.products | length %}
				{% for product in store.products %}
					{{ product_cell(np, loop, product) }}
				{% endfor %}
			</div>
		{% elif stage == "variants" %}
			{% set current_variant = unspecified_variants[0] %}
			<div class="termhead" data-barley="subscribe_variant{{ current_variant.id }}_heading" data-barley-editor="plus">
				<h1 class="text-center">Choose {{ current_variant.name }}</h1>
			</div>
			<div class="option-picker col-lg-12">
				{% set np = possible_values | length %}
              	{% if np == 6 and cur_step == 1 %}
              		{{ variant_cell(np, loop, possible_values[0].variant_type, possible_values[0]) }}
              		{{ variant_cell(np, loop, possible_values[1].variant_type, possible_values[1]) }}
              		{{ variant_cell(np, loop, possible_values[2].variant_type, possible_values[2]) }}
              		{{ variant_cell(np, loop, possible_values[3].variant_type, possible_values[3]) }}
              		{{ variant_cell(np, loop, possible_values[5].variant_type, possible_values[5]) }}
              		{{ variant_cell(np, loop, possible_values[4].variant_type, possible_values[4]) }}
              	{% else %}
                  {% for value in possible_values %}
                      {{ variant_cell(np, loop, value.variant_type, value) }}
                  {% endfor %}
              	{% endif %}
              <span style='display:none'>{{np}}, {{step}}</span>
			</div>
		{% elif stage == "terms" %}
			<div class="row">
				<div class="termhead">
					<h1 class="text-center">Choose Your Plan</h1>	
				</div>	
					{% set np = instance.calc_num_enabled_terms() %}
					{% for term_price in instance.term_prices %}	
						{{ term_cell(np, loop, term_price) }}
					{% endfor %}
			</div>
		{% elif stage == "survey" %}
			<div class="row">
				<div class="col-md-6 col-md-offset-3">
					<form role="form" class="survey-form" method="POST" action="/cart/survey">
						<div class="form-group">
							<label for="inputName3" class="control-label" data-barley="babyname_title" data-barley-editor="simple">Baby's Name?</label>
							<span class="help-block text-center" data-barley="babyname_subtitle" data-barley-editor="simple">Haven't decided on a name yet? No problem, just leave this blank.</span>
							<input type="text" name="mf:cart.survey.baby_name.string" class="form-control text-center" id="inputName3" placeholder="Baby's Name">
						</div>

						<div class="form-group center">
							{{ 'images/birthday-hat.jpg' | asset_url | img_tag }}
							<label for="inputName3" class="control-label" data-barley="babybirthday_title" data-barley-editor="simple">Baby's Birthday?</label>
							<span class="help-block text-center" data-barley="babybirthday_subtitle" data-barley-editor="simple">Don't know yet? No problem, just leave this blank.</span>
							<input type="text" name="mf:cart.survey.baby_birthday.string" class="form-control text-center" id="inputName3" placeholder="MM/DD/YYYY">
						</div>

						<div class="form-group center">
							{{ 'images/Tellusmore-Checkout.jpg' | asset_url | img_tag }}
							<label for="inputInfo3" class="control-label" data-barley="info_title" data-barley-editor="simple">We love to hear more!</label>
							<span class="help-block text-center" data-barley="info_subtitle" data-barley-editor="simple">Please disclose anything the mom or baby dislike, are allergic to, or simply want to let us know!</span>
							<textarea name="mf:cart.survey.info.string" class="form-control" rows="5"></textarea>
						</div>
						<div class="form-group">
							<button type="submit" class="btn btn-subscribe">Subscribe Now</button>
							<span class="help-block text-center" data-barley="payment_info_title" data-barley-editor="simple">You will be directed to the payment page after you click on 'Subscribe Now'. <br/>Thank you so much for your support & love!</span>
							<span class="help-block text-center" data-barley="shipping_info_title" data-barley-editor="simple">All Plans have FREE shipping. Plans automatically renew. You can cancel at any time.</span>
							
							<input type="hidden" name="redirect_url" value="{{ base_url }}" />
						</div>
					</form>
				</div>
			</div>
		{% endif %}

	</div>
{% endblock %}