Update credit-card-form.hypr.live with hypr variables for the CC expiration years instead of hard coded values.

[chris-decker-volusion]

Currently the credit card form uses hard coded values for the expiration year select element, which means the options start in 2014 and would need to be manually updated every year to remove old values. You can update this values with hypr variables as seen below:

        <select class="mz-l-formfieldgroup-halfsize" name="mz-payment-expiration-year" data-mz-value="{{ cardcontext }}expireYear">
            <option></option>                
            <option {% if model.expireYear == "{{ now|date('Y') }}" %}selected="selected"{% endif %} value="{{ now|date('Y') }}">{{ now|date('Y') }}</option>
            <option {% if model.expireYear == "{{ now|date('Y')|add(1) }}" %}selected="selected"{% endif %} value="{{ now|date('Y')|add(1) }}">{{ now|date('Y')|add(1) }}</option>
            <option {% if model.expireYear == "{{ now|date('Y')|add(2) }}" %}selected="selected"{% endif %} value="{{ now|date('Y')|add(2) }}">{{ now|date('Y')|add(2) }}</option>
            <option {% if model.expireYear == "{{ now|date('Y')|add(3) }}" %}selected="selected"{% endif %} value="{{ now|date('Y')|add(3) }}">{{ now|date('Y')|add(3) }}</option>
            <option {% if model.expireYear == "{{ now|date('Y')|add(4) }}" %}selected="selected"{% endif %} value="{{ now|date('Y')|add(4) }}">{{ now|date('Y')|add(4) }}</option>
            <option {% if model.expireYear == "{{ now|date('Y')|add(5) }}" %}selected="selected"{% endif %} value="{{ now|date('Y')|add(5) }}">{{ now|date('Y')|add(5) }}</option>
            <option {% if model.expireYear == "{{ now|date('Y')|add(6) }}" %}selected="selected"{% endif %} value="{{ now|date('Y')|add(6) }}">{{ now|date('Y')|add(6) }}</option>
            <option {% if model.expireYear == "{{ now|date('Y')|add(7) }}" %}selected="selected"{% endif %} value="{{ now|date('Y')|add(7) }}">{{ now|date('Y')|add(7) }}</option>
            <option {% if model.expireYear == "{{ now|date('Y')|add(8) }}" %}selected="selected"{% endif %} value="{{ now|date('Y')|add(8) }}">{{ now|date('Y')|add(8) }}</option>
            <option {% if model.expireYear == "{{ now|date('Y')|add(9) }}" %}selected="selected"{% endif %} value="{{ now|date('Y')|add(9) }}">{{ now|date('Y')|add(9) }}</option>
            <option {% if model.expireYear == "{{ now|date('Y')|add(10) }}" %}selected="selected"{% endif %} value="{{ now|date('Y')|add(10) }}">{{ now|date('Y')|add(10) }}</option>
        </select>

These values are currently in use on this sandbox (an active dev environment): http://t15181-s21551.sandbox.mozu.com/

[bmcminn]

Came up with an alternative solution that leverages the automation that @chris-decker provided above, but that allows the merchant to define the number of years for the expiration date via theme setting (themeSetting.ccYears).

EDIT: I updated/improved my snippet to use a numeric theme setting for number of CC years, and leveraged set_var so we don't have to deal with with scopes, and it simplifies the markup a bit.

{% set_var currentYear  pageContext.now|date('Y') %}
{% set_var yearsList    "a,b,c,d,e,f,g,h,i,j,k,l,m,n,o,p,q,r,s,t,u,v,w,x,y,z"|split(',') %} {# this gives us a list of 26 years #}
{% set_var ccYears      themeSettings.ccYears|default(10) %}

{# sanity check that theme setting is less than the length of yearsList (26) #}
{% if yearsList.length < ccYears %}
    {% set_var ccYears yearsList.length %}
{% endif %}

{# sanity check that the valid length of years is not less than 4 #}
{% if ccYears < 4 %}
    {% set_var ccYears 4 %}
{% endif %}

<code>ccYears: </code>{{ ccYears }}

<br><br>

{% partial_cache currentYear, ccYears %}
    <label for="cc-year-dynamic">CC Year: </label>
    <select name="cc-year-dynamic" id="cc-year-dynamic" required>
        <option>{{ themeSetting.blankOptionText|default('') }}</option>
        {% for year in yearsList %}
            {% if forloop.counter0 < ccYears %}
                {% set_var thisYear currentYear|add(forloop.counter0) %}
                <option value="{{ thisYear }}"{% if model.expireYear == thisYear %} selected="selected"{% endif %}>{{ thisYear }}</option>
            {% endif %}
        {% endfor %}
    </select>
{% endpartial_cache %}

Working example provided here: http://t14878-s20657.sandbox.mozu.com/testing-cc-dates