Skip to content

v1.5.0

Jump to bottom Edit New page
Brennan Heyde edited this page Sep 26, 2016 · 1 revision

These updates are in addition to those posted here: Miva Merchant 9.0006 Template Changes

New Pages

Page: CPCA

Template

<mvt:item name="html_profile" />
<head>
	<mvt:if expr="NOT ISNULL l.settings:page:title">
		<title>&mvt:page:title;</title>
	<mvt:else>
		<title>&mvt:store:name;: &mvt:page:name;</title>
	</mvt:if>
	<mvt:item name="head" param="head_tag" />
</head>
<body id="js-&mvte:page:code;" class="boxed <mvt:eval expr="tolower(l.settings:page:code)" /> single-column">
	<mvt:item name="hdft" param="global_header" />
	<div class="row hdft-header">
		<mvt:item name="hdft" param="header" />
	</div>
	<div class="row content-item">
		<div class="column whole align-center">
			<form id="cpca_form" method="post" action="&mvte:urls:CPCD:auto;" class="clearfix">
				<input type="hidden" name="Action" value="ICPC" />
				<div class="paymentcard-container">
					<mvt:item name="mivapay" />
				</div>
				<div class="continue-button cpca-continue-button">
					<script type="text/javascript">
						var onclick_submit = function (event) {
							if ( MivaPay && ( typeof MivaPay.Submit === 'function' ) ) {
								MivaPay.Submit( function () {
									var form;

									form = document.getElementById( 'cpca_form' );
									form.submit();
								});
							}
						}
					</script>
					<div class="large-align-right">
						<a href="&mvt:urls:CPCD:auto;" class="button button-square button-medium bg-silver black cpca-cancel column large-two-twelfths large-push-seven-twelfths half uppercase">Cancel</a>
						<span onclick="onclick_submit(); return false;" class="column large-three-twelfths large-push-seven-twelfths half">
							<input type="submit" value="Save" class="button button-square button-medium cpca-save-card uppercase" />
						</span>
					</div>
				</div>
			</form>
		</div>
	</div>
	<div class="row hdft-footer">
		<mvt:item name="hdft" param="footer" />
	</div>
	<mvt:item name="hdft" param="global_footer" />
</body>
</html>

Header

<div class="column whole">
	<mvt:if expr="l.settings:messages:error_message_count">
		<p class="message message-error">
			<mvt:foreach iterator="error" array="messages:error_messages">
				&mvte:error;<br />
			</mvt:foreach>
		</p>
	</mvt:if>
	<mvt:if expr="l.settings:messages:information_message_count">
		<p class="message message-info">
			<mvt:foreach iterator="message" array="messages:information_messages">
				&mvte:message;<br />
			</mvt:foreach>
		</p>
	</mvt:if>
</div>

MivaPay CSS

{
	"selector": "body",
	"properties": {
		"margin": "0",
		"font": "normal 1em 'Montserrat', Arial, Helvetica, Verdana, sans-serif",
		"font-size": "12px",
		"color": "#000000",
		"-webkit-font-smoothing": "antialiased",
		"-moz-osx-font-smoothing": "grayscale"
	}
},
{
	"selector": ".form_row.invalid input[type=\"text\"],.form_row.invalid select",
	"properties": {
		"border-color": "#cc0000 #ff0000 #ff0000 #ff0000"
	}
},
{
	"selector": "*, *:before, *:after ",
	"properties": {
		"-moz-box-sizing": "border-box",
		"-webkit-box-sizing": "border-box",
		"box-sizing": "border-box"
	}
},
{
	"selector": "#payment-fields:before",
	"properties": {
		"content": "'Add Card'",
		"display": "block",
		"font-size": "20px",
		"margin-bottom": "1.5rem",
		"margin-left": "0.75rem",
		"color": "#23374a"
	}

},
{
	"selector": "#mvp_exp_date_container:after",
	"properties": {
		"content": "'Billing Address'",
		"display": "block",
		"font-size": "20px",
		"position": "relative",
		"bottom": "-1.5rem",
		"padding": "2rem 0",
		"color": "#23374a",
		"clear": "both"
	}

},
{
	"selector": ".form_row",
	"properties": {
		"margin-bottom": "1rem",
		"float": "left",
		"padding-right": "0.75rem",
		"padding-left": "0.75rem",
		"position": "relative",
		"width": "100%",
		"min-height": "1px"
	}
},
{
	"selector": ".form_row label",
	"properties": {
		"display": "block",
		"margin-bottom": ".5rem"
	}
},
{
	"selector": "input[type='text'], select",
	"properties": {
		"border": "1px solid #d0cfd4",
		"padding": ".75rem .5rem",
		"width": "100%",
		"-webkit-border-radius": "3px",
		"-moz-border-radius": "3px",
		"border-radius": "3px"
	}

},
{
	"selector": ".form_row label",
	"properties": {
		"display": "block",
		"margin-bottom": ".5rem"
	}
},
{
	"selector": "#mvp_exp_month,#mvp_exp_year",
	"properties": {
		"width": "45%"
	}
},
{
	"selector": "#mvp_exp_month",
	"properties": {
		"float": "left"
	}
},
{
	"selector": "#mvp_exp_date_container:before",
	"properties": {
		"content": "'/'",
		"display": "inline-block",
		"position": "absolute",
		"left": "49%",
		"top": "28%",
		"font-size": "18px"
	}
},
{
	"selector": "#mvp_exp_year",
	"properties": {
		"float": "right"
	}
},
<mvt:comment> <!-- START @media screen and (min-width: 550px) --> </mvt:comment>
{
"at-rule": "media",
"media": "screen and (min-width: 550px)",
"selectors":
	[
		{
			"selector": "#mivapay_form",
			"properties": {
				"position": "relative",
				"height": "auto",
				"clear": "both",
				"overflow": "auto",
				"zoom": "1"
			}
		},
		{
			"selector": "#mvp_exp_date_container:after",
			"properties": {
				"display": "none"
			}
		},
		{
			"selector": "#mvp_exp_date_container:before",
			"properties": {
				"top": "48%"
			}
		},
		{
			"selector": "#mvp_cardnumber_container:after",
			"properties": {
				"content": "'Billing Address'",
				"display": "block",
				"font-size": "20px",
				"margin": "2rem 0 1rem"
			}
		},
		{
			"selector": "#mvp_cardtype_container, #mvp_address2_container, #mvp_addresslist_container, #mvp_stateselect_container, #mvp_state_container, #mvp_zip_container",
			"properties": {
				"width": "33.3332%"
			}
		},
		{
			"selector": "#mvp_cardtype_container",
			"properties": {
				"float": "none"
			}
		},
		{
			"selector": "#mvp_firstname_container, #mvp_lastname_container, #mvp_cardnumber_container, #mvp_exp_date_container, #mvp_country_container",
			"properties": {
				"width": "50%"
			}
		},
		{
			"selector": "#mvp_address1_container",
			"properties": {
				"width": "66.6665%",
				"clear": "left"
			}
		},
		{
			"selector": "#mvp_address1_container label:before, #mvp_address2_container label:before",
			"properties": {
				"content": "'Street'",
				"display": "inline-block",
				"margin-right": "5px"
			}
		},
		{
			"selector": "#mvp_addresslist_container",
			"properties": {
				"clear": "both"
			}
		},
		{
			"selector": "#mvp_addresslist_container",
			"properties": {
				"clear": "both"
			}
		},
		{
			"selector": "#mvp_address2_container label:after",
			"properties": {
				"content": "'(Optional)'",
				"display": "inline-block",
				"color": "#999",
				"margin-left": "5px"
			}
		},
		{
			"selector": "#mvp_country_container",
			"properties": {
				"clear": "both",
				"float": "none"
			}
		}
	]
}

Page:CPCD

Template

<mvt:item name="html_profile" />
<head>
	<mvt:if expr="NOT ISNULL l.settings:page:title">
		<title>&mvt:page:title;</title>
	<mvt:else>
		<title>&mvt:store:name;: &mvt:page:name;</title>
	</mvt:if>
	<mvt:item name="head" param="head_tag" />
</head>
<body id="js-&mvte:page:code;" class="boxed <mvt:eval expr="tolower(l.settings:page:code)" /> single-column">
	<mvt:item name="hdft" param="global_header" />
	<div class="row hdft-header">
		<mvt:item name="hdft" param="header" />
	</div>
	<div class="row content-item">
		<div class="column whole">
			<a href="&mvte:urls:CPCA:secure;" class="button button-block button-medium nb cpcd-add">+ Add Credit/ Debit Card</a>
			<mvt:item name="paymentcards" />
		</div>
	</div>
	<div class="row hdft-footer">
		<mvt:item name="hdft" param="footer" />
	</div>
	<mvt:item name="hdft" param="global_footer" />
</body>
</html>

Header

<div class="column whole">
	<mvt:if expr="l.settings:messages:error_message_count">
		<p class="message message-error">
			<mvt:foreach iterator="error" array="messages:error_messages">
				&mvte:error;<br />
			</mvt:foreach>
		</p>
	</mvt:if>
	<mvt:if expr="l.settings:messages:information_message_count">
		<p class="message message-info">
			<mvt:foreach iterator="message" array="messages:information_messages">
				&mvte:message;<br />
			</mvt:foreach>
		</p>
	</mvt:if>
</div>

Customer Payment Card List Layout

<mvt:if expr="l.settings:paymentcards:paymentcard_count EQ 0">
	<div class="customer_account_payment_cards_empty_container">No payment cards found</div>
	<mvt:exit />
</mvt:if>

<div class="customer_account_payment_cards">
	<mvt:foreach iterator="paymentcard" array="paymentcards:paymentcards">
			<mvt:if expr="'AMERICAN EXPRESS' EQ toupper(l.settings:paymentcard:type)">
				<mvt:assign name="l.settings:paymentcard:image" value="g.theme_path $ '/images/icons/logo_amex.png'" />
			<mvt:elseif expr="'VISA' EQ toupper(l.settings:paymentcard:type)">
				<mvt:assign name="l.settings:paymentcard:image" value="g.theme_path $ '/images/icons/logo_visa.png'" />
			<mvt:elseif expr="'MASTERCARD' EQ toupper(l.settings:paymentcard:type)">
				<mvt:assign name="l.settings:paymentcard:image" value="g.theme_path $ '/images/icons/logo_mastercard.png'" />
			<mvt:elseif expr="'DISCOVER' EQ toupper(l.settings:paymentcard:type)">
				<mvt:assign name="l.settings:paymentcard:image" value="g.theme_path $ '/images/icons/logo_discover.png'" />
			<mvt:else>
				<mvt:assign name="l.settings:paymentcard:image" value="''" />
			</mvt:if>
			<div class="CPCD-payment-row clearfix">
				<div class="column one-tenth CPCD-card-image align-center">
					<img src="&mvt:paymentcard:image;" alt="&mvte:paymentcard:type;" class="payment-card-image" />
				</div>
				<div class="column large-four-tenths half CPCD-payment-type">
					&mvte:paymentcard:type; ending in &mvte:paymentcard:lastfour;
				</div>
				<div class="column large-hide show four-tenths CPCD-payment-exp align-right">
					<mvt:if expr="mktime_t( l.settings:paymentcard:exp_year, l.settings:paymentcard:exp_month, s.tm_mday, s.tm_hour, s.tm_min, s.tm_sec, 'local') LT s.time_t">
						<span class="customer_account_payment_card_expired">(expired)</span>
					<mvt:else>
						Expires:
					</mvt:if>
					&mvte:paymentcard:exp_month;/&mvte:paymentcard:exp_year;
				</div>
				<div class="clearfix show large-hide"></div>
				<div class="column large-two-tenths four-tenths large-push-none push-one-tenth CPCD-payment-name">
					&mvte:paymentcard:fname; &mvte:paymentcard:lname;
				</div>
				<div class="column large-one-tenth large-align-center large-show hide CPCD-payment-exp">
					<mvt:if expr="mktime_t( l.settings:paymentcard:exp_year, l.settings:paymentcard:exp_month, s.tm_mday, s.tm_hour, s.tm_min, s.tm_sec, 'local') LT s.time_t">
						<span class="customer_account_payment_card_expired">(expired)</span>
					</mvt:if>
					&mvte:paymentcard:exp_month;/&mvte:paymentcard:exp_year;
				</div>
				<div class="column large-two-tenths large-align-center align-right six-tenths">
					<span class="CPCD-edit-card"><a href="&mvte:urls:CPCE:auto_sep;PaymentMethod=paymentcard:&mvta:paymentcard:id;">Edit</a></span>
					<span class="CPCD-delete-card"><a href="&mvte:urls:CPCD:auto_sep;Action=DCPC&amp;PaymentCard_ID=&mvta:paymentcard:id;" onclick="if ( !confirm( 'Deleting this payment card cannot be undone.\x0A\x0AContinue?' ) ) return false;">Delete</a></span>
				</div>
			</div>
	</mvt:foreach>
</div>

Page: CPCE

Template

<mvt:item name="html_profile" />
<head>
	<mvt:if expr="NOT ISNULL l.settings:page:title">
		<title>&mvt:page:title;</title>
	<mvt:else>
		<title>&mvt:store:name;: &mvt:page:name;</title>
	</mvt:if>
	<mvt:item name="head" param="head_tag" />
</head>
<body id="js-&mvte:page:code;" class="boxed <mvt:eval expr="tolower(l.settings:page:code)" /> single-column">
	<mvt:item name="hdft" param="global_header" />
	<div class="row hdft-header">
		<mvt:item name="hdft" param="header" />
	</div>
	<div class="row content-item">
		<div class="column whole">
			<form id="cpce_form" method="post" action="&mvte:urls:CPCD:auto;" class="clearfix">
					<input type="hidden" name="Action" value="UCPC" />
					<input type="hidden" name="PaymentMethod" value="&mvte:global:PaymentMethod;" />
					<div class="paymentcard-container">
						<mvt:item name="mivapay" />
					</div>
					<div class="continue-button">
						<script type="text/javascript">
							var onclick_submit = function( event ) {
								if ( MivaPay && ( typeof MivaPay.Submit === 'function' ) ) {
									MivaPay.Submit( function() {
										var form;

										form = document.getElementById( 'cpce_form' );
										form.submit();
									} );
								}
							}
						</script>
						<div class="large-align-right">
							<a href="&mvt:urls:CPCD:auto;" class="button button-square button-medium bg-silver black cpca-cancel column large-two-twelfths large-push-seven-twelfths half uppercase">Cancel</a>
							<span onclick="onclick_submit(); return false;" class="column large-three-twelfths large-push-seven-twelfths half large-nrp">
								<input type="submit" value="Save" class="button button-square button-medium cpca-save-card uppercase" />
							</span>
						</div>
					</div>
				</form>
		</div>
	</div>
	<div class="row hdft-footer">
		<mvt:item name="hdft" param="footer" />
	</div>
	<mvt:item name="hdft" param="global_footer" />
</body>
</html>

Header

<div class="column whole">
	<mvt:if expr="l.settings:messages:error_message_count">
		<p class="message message-error">
			<mvt:foreach iterator="error" array="messages:error_messages">
				&mvte:error;<br />
			</mvt:foreach>
		</p>
	</mvt:if>
	<mvt:if expr="l.settings:messages:information_message_count">
		<p class="message message-info">
			<mvt:foreach iterator="message" array="messages:information_messages">
				&mvte:message;<br />
			</mvt:foreach>
		</p>
	</mvt:if>
</div>

MivaPayCSS

{
	"selector": "body",
	"properties": {
		"margin": "0",
		"font": "normal 1em 'Montserrat', Arial, Helvetica, Verdana, sans-serif",
		"font-size": "12px",
		"color": "#000000",
		"-webkit-font-smoothing": "antialiased",
		"-moz-osx-font-smoothing": "grayscale"
	}
},
{
	"selector": ".form_row.invalid input[type=\"text\"],.form_row.invalid select",
	"properties": {
		"border-color": "#cc0000 #ff0000 #ff0000 #ff0000"
	}
},
{
	"selector": "*, *:before, *:after ",
	"properties": {
		"-moz-box-sizing": "border-box",
		"-webkit-box-sizing": "border-box",
		"box-sizing": "border-box"
	}
},
{
	"selector": "#payment-fields:before",
	"properties": {
		"content": "'Edit Card'",
		"display": "block",
		"font-size": "20px",
		"margin-bottom": "1.5rem",
		"margin-left": "0.75rem",
		"color": "#23374a"
	}

},
{
	"selector": "#mvp_exp_date_container:after",
	"properties": {
		"content": "'Billing Address'",
		"display": "block",
		"font-size": "20px",
		"position": "relative",
		"bottom": "-1.5rem",
		"padding": "2rem 0",
		"color": "#23374a"
	}

},
{
	"selector": ".form_row",
	"properties": {
		"margin-bottom": "1rem",
		"float": "left",
		"padding-right": "0.75rem",
		"padding-left": "0.75rem",
		"position": "relative",
		"width": "100%",
		"min-height": "1px"
	}
},
{
	"selector": ".form_row label",
	"properties": {
		"display": "block",
		"margin-bottom": ".5rem"
	}
},
{
	"selector": "input[type='text'], select",
	"properties": {
		"border": "1px solid #d0cfd4",
		"padding": ".75rem .5rem",
		"width": "100%",
		"-webkit-border-radius": "3px",
		"-moz-border-radius": "3px",
		"border-radius": "3px"
	}

},
{
	"selector": ".form_row label",
	"properties": {
		"display": "block",
		"margin-bottom": ".5rem"
	}
},
{
	"selector": "#mvp_exp_month,#mvp_exp_year",
	"properties": {
		"width": "45%"
	}
},
{
	"selector": "#mvp_exp_month",
	"properties": {
		"float": "left"
	}
},
{
	"selector": "#mvp_exp_date_container:before",
	"properties": {
		"content": "'/'",
		"display": "inline-block",
		"position": "absolute",
		"left": "49%",
		"top": "28%",
		"font-size": "18px"
	}
},
{
	"selector": "#mvp_exp_year",
	"properties": {
		"float": "right"
	}
},
<mvt:comment> <!-- START @media screen and (min-width: 550px) --> </mvt:comment>
{
"at-rule": "media",
"media": "screen and (min-width: 550px)",
"selectors":
	[
		{
			"selector": "#mivapay_form",
			"properties": {
				"position": "relative",
				"height": "auto",
				"clear": "both",
				"overflow": "auto",
				"zoom": "1"
			}
		},
		{
			"selector": "#mvp_exp_date_container:after",
			"properties": {
				"display": "none"
			}
		},
		{
			"selector": "#mvp_exp_date_container:before",
			"properties": {
				"top": "48%"
			}
		},
		{
			"selector": "#mvp_cardnumber_container:after",
			"properties": {
				"content": "'Billing Address'",
				"display": "block",
				"font-size": "20px",
				"margin": "2rem 0 1rem"
			}
		},
		{
			"selector": "#mvp_cardtype_container, #mvp_address2_container, #mvp_addresslist_container, #mvp_stateselect_container, #mvp_state_container, #mvp_zip_container",
			"properties": {
				"width": "33.3332%"
			}
		},
		{
			"selector": "#mvp_cardtype_container",
			"properties": {
				"float": "none"
			}
		},
		{
			"selector": "#mvp_firstname_container, #mvp_lastname_container, #mvp_cardnumber_container, #mvp_exp_date_container, #mvp_country_container",
			"properties": {
				"width": "50%"
			}
		},
		{
			"selector": "#mvp_address1_container",
			"properties": {
				"width": "66.6665%",
				"clear": "left"
			}
		},
		{
			"selector": "#mvp_address1_container label:before, #mvp_address2_container label:before",
			"properties": {
				"content": "'Street'",
				"display": "inline-block",
				"margin-right": "5px"
			}
		},
		{
			"selector": "#mvp_addresslist_container",
			"properties": {
				"clear": "both"
			}
		},
		{
			"selector": "#mvp_addresslist_container",
			"properties": {
				"clear": "both"
			}
		},
		{
			"selector": "#mvp_address2_container label:after",
			"properties": {
				"content": "'(Optional)'",
				"display": "inline-block",
				"color": "#999",
				"margin-left": "5px"
			}
		},
		{
			"selector": "#mvp_country_container",
			"properties": {
				"clear": "both",
				"float": "none"
			}
		}
	]
}

Page: CSBE

Template

<mvt:item name="html_profile" />
<head>
	<mvt:if expr="NOT ISNULL l.settings:page:title">
		<title>&mvt:page:title;</title>
	<mvt:else>
		<title>&mvt:store:name;: &mvt:page:name;</title>
	</mvt:if>
	<mvt:item name="head" param="head_tag" />
</head>
<body id="js-&mvte:page:code;" class="<mvt:eval expr="tolower(l.settings:page:code)" /> single-column">
	<mvt:item name="hdft" param="global_header" />
	<div class="row hdft-header">
		<mvt:item name="hdft" param="header" />
	</div>
	<div class="row content-item">
		<div class="column whole">
			<form id="csbe_form" method="post" action="&mvte:urls:CSUB:secure;">
				<input type="hidden" name="Action" value="UCSB" />
				<div class="subscription-container"><mvt:item name="subscriptionfields" /></div>
			</form>
		</div>
	</div>
	<div class="row hdft-footer">
		<mvt:item name="hdft" param="footer" />
	</div>
	<mvt:item name="hdft" param="global_footer" />
</body>
</html>

Header

<div class="column whole">
	<mvt:if expr="l.settings:messages:error_message_count">
		<p class="message message-error">
			<mvt:foreach iterator="error" array="messages:error_messages">
				&mvte:error;<br />
			</mvt:foreach>
		</p>
	</mvt:if>
	<mvt:if expr="l.settings:messages:information_message_count">
		<p class="message message-info">
			<mvt:foreach iterator="message" array="messages:information_messages">
				&mvte:message;<br />
			</mvt:foreach>
		</p>
	</mvt:if>
</div>

Subscription Fields

<div class="breaker"></div>
<input type="hidden" name="Subscription_ID" value="&mvte:global:Subscription_ID;" />
<mvt:foreach iterator="item" array="subscriptionfields:items">
	<div class="column large-half large-five-twelfths large-align-left align-center">
		<mvt:if expr="ISNULL l.settings:item:imagetypes:main">
			<mvt:assign name="l.settings:item:src" value="g.theme_path $ '/images/img_no_thumb.jpg'" />
		<mvt:else>
			<mvt:assign name="l.settings:item:src" value="l.settings:item:imagetypes:main" />
		</mvt:if>
		<img src="&mvt:item:src;" alt="&mvte:item:name;" />
	</div>
	<div class="column large-half large-seven-twelfths">
		<div class="edit-subscription-inner bottom-shadow">
			<div class="edit-subscription-top">
				<div class="edit-subscription-item-name">&mvt:item:name;</div>
				<div class="edit-subscription-item-code">&mvt:item:code;</div>

				<mvt:foreach iterator="discount" array="item:discounts">
					<mvt:if expr="l.settings:discount:display">
						<div class="edit-subscription-item-discount bold">&mvt:discount:descrip; - &mvt:discount:formatted_discount;</div>
					</mvt:if>
				</mvt:foreach>

				<div class="edit-subscription-order">
					<div class="row">
						<div class="column small-half">
							<div class="edit-subscription-title">
								First Order Date
							</div>
							<div class="edit-subscription-info">
								<mvt:if expr="l.settings:subscriptionfields:firstdate EQ 0">
									N/A
								<mvt:else>
									&mvt:subscriptionfields:formatted_firstdate_date;
								</mvt:if>
							</div>
						</div>
						<div class="column small-half">
							<div class="edit-subscription-title">
								Last Order Date
							</div>
							<div class="edit-subscription-info">
								<mvt:if expr="l.settings:subscriptionfields:lastdate EQ 0">
									N/A
								<mvt:else>
									&mvt:subscriptionfields:formatted_lastdate_date;
								</mvt:if>
							</div>
						</div>
					</div>
					<div class="row edit-subscription-order-date-terms">
						<mvt:if expr="l.settings:subscriptionfields:productsubscriptionsettings:can_date">
							<mvt:if expr="l.settings:subscriptionfields:productsubscriptionsettings:can_term">
								<div class="&mvte:global:SubscriptionNextDate_Row; edit-subscription-next-order column small-half nm">
							<mvt:else>
								<div class="&mvte:global:SubscriptionNextDate_Row; edit-subscription-next-order column nm">
							</mvt:if>
								<div class="edit-subscription-next-order-inner clearfix">
									<label class="edit-subscription-title">Next Order Date</label>
									<input type="hidden" name="NextOrderDate" id="subscriptionfields_nextorderdate" value="&mvte:global:NextOrderDate;" />
									<span id="subscriptionfields_nextorderdate_display">&mvte:global:Formatted_NextOrderDate;</span>
									<mvt:item name="datepicker" />
								</div>

								<script type="text/javascript">
									var miva_datepicker, element_subscriptionfields_nextorderdate, element_subscriptionfields_nextorderdate_display;

									element_subscriptionfields_nextorderdate = document.getElementById( 'subscriptionfields_nextorderdate' );
									element_subscriptionfields_nextorderdate_display = document.getElementById( 'subscriptionfields_nextorderdate_display' );

									miva_datepicker = new MivaDatePicker( '&mvtj:subscriptionfields:nextdate;' );
									miva_datepicker.SetDateLimit_Past( new Date() );
									miva_datepicker.oncomplete = function( date )
									{
										var day = date.getDate();
										var month = date.getMonth() + 1;

										element_subscriptionfields_nextorderdate.value = date.getTime() / 1000;
										element_subscriptionfields_nextorderdate_display.innerHTML = ( month < 10 ? '0' : '' ) + month + '/' + ( day < 10 ? '0' : '' ) + day + '/' + date.getFullYear();
									}

									element_subscriptionfields_nextorderdate_display.onclick = function()
									{
										miva_datepicker.Show();
									}
								</script>
							</div>
						</mvt:if>

						<mvt:if expr="l.settings:subscriptionfields:productsubscriptionsettings:can_term">
							<mvt:if expr="l.settings:subscriptionfields:productsubscriptionsettings:can_date">
								<div class="&mvte:global:SubscriptionTerm_Row; edit-subscription-term column small-half nm">
							<mvt:else>
								<div class="&mvte:global:SubscriptionTerm_Row; edit-subscription-term column whole nm">
							</mvt:if>
								<label class="edit-subscription-title" for="ProductSubscriptionTerm_ID">Term</label>
								<select name="ProductSubscriptionTerm_ID">
									<mvt:foreach iterator="productsubscriptointerm" array="subscriptionfields:productsubscriptionterms">
										<mvt:if expr="l.settings:productsubscriptointerm:id EQ g.ProductSubscriptionTerm_ID">
											<option value="&mvte:productsubscriptointerm:id;" selected>
										<mvt:else>
											<option value="&mvte:productsubscriptointerm:id;">
										</mvt:if>

											&mvte:productsubscriptointerm:descrip;
										</option>
									</mvt:foreach>
								</select>
							</div>
						</mvt:if>
					</div>
				</div>

				<div class="edit-subscription-shipping-info">
					<div class="row">
						<div class="&mvte:global:SubscriptionAddress_Row; column whole edit-subscription-shipping-address">
							<label class="edit-subscription-title" for="Address_ID">Shipping Address</label>
							<select name="Address_ID">
								<mvt:foreach iterator="address" array="customer:addresses">
									<mvt:if expr="l.settings:address:id EQ g.Address_ID">
										<option value="&mvte:address:id;" selected>
									<mvt:else>
										<option value="&mvte:address:id;">
									</mvt:if>

										&mvte:address:descrip;
									</option>
								</mvt:foreach>
							</select>
						</div>
						<div class="&mvte:global:SubscriptionShipping_Row; column whole edit-subscription-shipping-method nm">
							<label class="edit-subscription-title" for="ShippingMethod">Shipping Method</label>
							<select name="ShippingMethod">
								<mvt:if expr="l.settings:subscriptionfields:ship_id EQ 0">
									<mvt:if expr="g.ShippingMethod EQ ''">
										<option value="" selected>
									<mvt:else>
										<option value="">
									</mvt:if>
										&lt;None&gt;
									</option>
								</mvt:if>

								<mvt:foreach iterator="shippingmethod" array="subscriptionfields:shippingmethods">
									<mvt:if expr="( l.settings:shippingmethod:module:code $ ':' $ l.settings:shippingmethod:code ) EQ g.ShippingMethod">
										<option value="&mvte:shippingmethod:module:code;:&mvte:shippingmethod:code;" selected>
									<mvt:else>
										<option value="&mvte:shippingmethod:module:code;:&mvte:shippingmethod:code;">
									</mvt:if>

										&mvt:shippingmethod:name; (&mvt:shippingmethod:formatted_price;)
									</option>
								</mvt:foreach>
							</select>
						</div>
					</div>
				</div>
			</div>

			<div class="edit-subscription-paymentinfo">
				<div class="row">
					<div class="edit-subscription-paymentinfo-inner">
						<div class="&mvte:global:SubscriptionPaymentCard_Row; edit-subscription-payment-method column whole">
							<label class="edit-subscription-title" for="PaymentCard_ID">Payment Method</label>
							<select name="PaymentCard_ID">
								<mvt:if expr="l.settings:subscriptionfields:custpc_id EQ 0">
									<mvt:if expr="g.PaymentCard_ID EQ 0">
										<option value="0" selected>
									<mvt:else>
										<option value="0">
									</mvt:if>

										&lt;None&gt;
									</option>
								</mvt:if>

								<mvt:foreach iterator="paymentcard" array="paymentcards:paymentcards">
									<mvt:if expr="l.settings:paymentcard:id EQ g.PaymentCard_ID">
										<option value="&mvte:paymentcard:id;" selected>
									<mvt:else>
										<option value="&mvte:paymentcard:id;">
									</mvt:if>

										&mvte:paymentcard:type; ending in &mvte:paymentcard:lastfour;
									</option>
								</mvt:foreach>
							</select>
						</div>

						<div class="edit-subscription-quantity column large-five-twelfths half">
							<mvt:if expr="l.settings:subscriptionfields:productsubscriptionsettings:can_qty">
								<div class="edit-subscription-quantity-inner clearfix">
									<span data-icon="&#x4b;" class="qty-dec align-center"></span>
									<input type="text" name="Quantity" class="edit-subscription-qty small align-center" value="&mvte:global:Quantity;" />
									<span data-icon="&#x4c;" class="qty-inc align-center"></span>
								</div>
							<mvt:else>
								Quantity: &mvte:subscriptionfields:quantity;
							</mvt:if>
						</div>

						<div class="edit-subscription-subtotal column large-seven-twelfths half align-right">
							&mvt:item:formatted_base_price;
						</div>
					</div>
				</div>
			</div>
			<div class="edit-subscription-charges">
				<div class="row">
					<div class="column x-large-one-sixth large-one-fifth small-one-fourth one-third">Subtotal</div>
					<div class="column x-large-four-sixths large-three-fifths small-half one-third edit-subscription-dots"></div>
					<div class="column x-large-one-sixth large-one-fifth small-one-fourth one-third align-right">
						&mvt:item:formatted_subtotal_base_price;
					</div>
				</div>
				<mvt:foreach iterator="discount" array="item:discounts">
					<mvt:if expr="l.settings:discount:display">
						<div class="row">
							<div class="column x-large-one-sixth large-one-fifth small-one-fourth one-third">Discount</div>
							<div class="column x-large-four-sixths large-three-fifths small-half one-third edit-subscription-dots"></div>
							<div class="column x-large-one-sixth large-one-fifth small-one-fourth one-third align-right discount-charge">
								<mvt:assign name="l.settings:discount:total_discount" value="l.settings:discount:discount * l.settings:item:quantity" />
								<mvt:do file="g.Module_Store_Module_Currency" name="l.settings:discount:formatted_total_discount" value="CurrencyModule_AddFormatting( g.Store:currncy_mod, l.settings:discount:total_discount )" />
								<!-- @@ &mvt:global:MvDO_Error; -->
								(&mvt:discount:formatted_total_discount;)
							</div>
						</div>
					</mvt:if>
				</mvt:foreach>
				<mvt:foreach iterator="charge" array="subscriptionfields:charges">
					<div class="row">
						<div class="column x-large-one-sixth large-one-fifth small-one-fourth one-third">
							<mvt:assign name="l.settings:charge:descrip" value="glosub( l.settings:charge:descrip, 'Sales', '' )" />
							<mvt:assign name="l.clean_descrip" value="miva_splitstring( l.settings:charge:descrip, ':', l.settings:charge:clean_descrip, '' )"/>
							<mvt:if expr="l.settings:charge:clean_descrip[1]">
								&mvt:charge:clean_descrip[1];
							<mvt:else>
								&mvt:charge:descrip
							</mvt:if>
						</div>
						<div class="column x-large-four-sixths large-three-fifths small-half one-third edit-subscription-dots"></div>
						<mvt:if expr="'(' CIN l.settings:charge:formatted_disp_amt">
							<div class="column x-large-one-sixth large-one-fifth small-one-fourth one-third align-right discount-charge">
						<mvt:else>
							<div class="column x-large-one-sixth large-one-fifth small-one-fourth one-third align-right">
						</mvt:if>
							&mvt:charge:formatted_disp_amt;
						</div>
					</div>
				</mvt:foreach>
				<div class="row">
					<div class="column x-large-one-sixth large-one-fifth small-one-fourth one-third bold">
						Total
					</div>
					<div class="column x-large-four-sixths large-three-fifths small-half one-third edit-subscription-dots"></div>
					<div class="column x-large-one-sixth large-one-fifth small-one-fourth one-third align-right bold edit-subscription-total">
						&mvt:subscriptionfields:formatted_total;
					</div>
				</div>

				<div class="edit-subscription-buttons">
					<div class="row">
						<mvt:if expr="( l.settings:subscriptionfields:productsubscriptionsettings:can_qty ) OR ( l.settings:subscriptionfields:productsubscriptionsettings:can_term ) OR ( l.settings:subscriptionfields:productsubscriptionsettings:can_date )">
							<div class="column whole large-half">
								<input type="submit" value="Save Changes" class="button edit-subscription-save-button button-block uppercase white bold" />
							</div>
						</mvt:if>

						<mvt:if expr="l.settings:subscriptionfields:productsubscriptionsettings:can_cancel">
							<div class="column whole large-half" onclick="if ( !confirm( 'Are you sure you want to cancel your subscription? This action cannot be undone.\x0A\x0AContinue?' ) ) { return false; } else { document.forms.csbe_form.elements.Action.value = 'DCSB'; }">
								<input type="submit" value="Cancel Subscription" class="button-block button edit-subscription-cancel-button bg-transparent" />
							</div>
						</mvt:if>
					</div>
				</div>
			</div>
		</div>
</mvt:foreach>

Page: CSUB

Template

<mvt:item name="html_profile" />
<head>
	<mvt:if expr="NOT ISNULL l.settings:page:title">
		<title>&mvt:page:title;</title>
	<mvt:else>
		<title>&mvt:store:name;: &mvt:page:name;</title>
	</mvt:if>
	<mvt:item name="head" param="head_tag" />
</head>
<body id="js-&mvte:page:code;" class="boxed <mvt:eval expr="tolower(l.settings:page:code)" /> single-column">
	<mvt:item name="hdft" param="global_header" />
	<div class="row hdft-header">
		<mvt:item name="hdft" param="header" />
	</div>
	<div class="row content-item">
		<div class="column whole">
			<mvt:item name="subscriptions" />
		</div>
	</div>
	<div class="row hdft-footer">
		<mvt:item name="hdft" param="footer" />
	</div>
	<mvt:item name="hdft" param="global_footer" />
</body>
</html>

Header

<mvt:if expr="g.Action EQ 'UCSB'">
	<div class="column whole white align-center" id="js-subscription-success"><span data-icon="&#x52;"></span> Subscription Successfully Updated</div>
<mvt:elseif expr="NOT g.Action EQ 'UCSB'">
	<div class="column whole">
		<mvt:if expr="l.settings:messages:error_message_count">
			<p class="message message-error">
				<mvt:foreach iterator="error" array="messages:error_messages">
					&mvte:error;<br />
				</mvt:foreach>
			</p>
		</mvt:if>
		<mvt:if expr="l.settings:messages:information_message_count">
			<p class="message message-info">
				<mvt:foreach iterator="message" array="messages:information_messages">
					&mvte:message;<br />
				</mvt:foreach>
			</p>
		</mvt:if>
	</div>
</mvt:if>

Subscription List Layout

<mvt:if expr="l.settings:subscriptions:total_count EQ 0">
	<div class="subscriptions_container subscriptions_empty">No subscriptions</div>
	<mvt:exit />
</mvt:if>
<div class="breaker"></div>
<div class="subscriptions_container">
	<div id="filter-items-container">

		<mvt:if expr="l.settings:subscriptions:page_links:last_page GT 1">
			<div class="page-links">
				<span class="page-links-title">Page(s):</span>
				<span class="page-links-container">
					<mvt:if expr="l.settings:subscriptions:page_links:current_page NE 1">
						<a href="&mvte:urls:_self:auto_sep;&mvte:subscriptions:page_links:prev_link_params;" class="page-links-previous">&lt;</a>
					<mvt:else>
						<span class="page-links-previous page-links-deactivated">&lt;</span>
					</mvt:if>
					<mvt:if expr="l.settings:subscriptions:page_links:current_page NE l.settings:subscriptions:page_links:last_page">
						<a href="&mvte:urls:_self:auto_sep;&mvte:subscriptions:page_links:next_link_params;" class="page-links-next">&gt;</a>
					<mvt:else>
						<span class="page-links-next page-links-deactivated">&gt;</span>
					</mvt:if>
					<span class="page-disp">
						<mvt:if expr="NOT l.settings:subscriptions:page_links:contains_first">
							<a href="&mvte:urls:_self:auto_sep;&mvte:subscriptions:page_links:first_link_params;" class="page-links-inactive">1</a>...
						</mvt:if>
						<mvt:foreach iterator="pages" array="subscriptions:page_links:pages">
							<mvt:if expr="l.settings:subscriptions:page_links:current_page EQ l.settings:pages:page_num">
								<span class="page-links-active">&mvte:pages:page_num;</span>
							<mvt:else>
								<a href="&mvte:urls:_self:auto_sep;&mvte:pages:link_params;" class="page-links-inactive">&mvte:pages:page_num;</a>
							</mvt:if>
						</mvt:foreach>
						<mvt:if expr="NOT l.settings:subscriptions:page_links:contains_last">
							...<a href="&mvte:urls:_self:auto_sep;&mvte:subscriptions:page_links:last_link_params;" class="page-links-inactive">&mvte:subscriptions:page_links:last_page;</a>
						</mvt:if>
					</span>
				</span>
			</div>
		</mvt:if>
	</div>

	<div class="clear"></div>

<div class="subscriptions-list clearfix">
	<mvt:foreach iterator="subscription" array="subscriptions:items">
		<div class="column large-one-third small-half whole subscription-item">
			<div class="subscription-item-inner bottom-shadow">
				<mvt:foreach iterator="item" array="subscription:items">
					<mvt:if expr="ISNULL l.settings:item:imagetypes:main">
						<mvt:assign name="l.settings:item:src" value="g.theme_path $ '/images/img_no_thumb.jpg'" />
					<mvt:else>
						<mvt:assign name="l.settings:item:src" value="l.settings:item:imagetypes:main" />
					</mvt:if>

					<div class="subscription-item-image align-center" style="height: &mvt:subscriptions:b_height;px;">
						<a href="&mvt:item:link;"><img src="&mvt:item:src;" alt="&mvte:item:name;" class="block" /></a>
					</div>

					<div class="subscription-next-shipment align-center uppercase">
						Next Shipment:
						<mvt:if expr="l.settings:subscription:nextdate EQ 0">
							N/A
						<mvt:else>
							&mvt:subscription:formatted_nextdate_date;
						</mvt:if>
					</div>

					<mvt:if expr="( l.settings:subscription:productsubscriptionsettings:can_qty ) OR ( l.settings:subscription:productsubscriptionsettings:can_term ) OR ( l.settings:subscription:productsubscriptionsettings:can_date ) OR ( l.settings:subscription:productsubscriptionsettings:can_cancel )">
							<mvt:if expr="( l.settings:subscription:productsubscriptionsettings:can_qty ) OR ( l.settings:subscription:productsubscriptionsettings:can_term ) OR ( l.settings:subscription:productsubscriptionsettings:can_date )">
								<div class="subscription-edit-wrap">
									<a href="&mvte:urls:CSBE:auto_sep;Subscription_ID=&mvta:subscription:id;" class="block align-center subscription-edit-btn bold uppercase">Edit Subscription</a>
								</div>
							<mvt:else>
								<div class="subscription-edit-wrap">
									<a href="&mvte:urls:CSBE:auto_sep;Subscription_ID=&mvta:subscription:id;" class="block align-center subscription-edit-btn bold uppercase">View Subscription</a>
								</div>
							</mvt:if>
					<mvt:else>
						<div class="subscription-edit-wrap">
									<a href="&mvte:urls:CSBE:auto_sep;Subscription_ID=&mvta:subscription:id;" class="block align-center subscription-edit-btn bold uppercase">View Subscription</a>
								</div>
					</mvt:if>

					<div class="subscription-item-info">
						<div class="subscription-item-name">
							&mvte:item:name;
						</div>
						<div class="subscription-item-code">
							&mvte:item:code;
						</div>
					</div>

					<div class="subscription-item-terms">
						<div class="subscription-item-title uppercase">
							Term
						</div>
						<div class="subscription-item-term">
							&mvte:subscription:productsubscriptionterm:descrip;
						</div>
					</div>
					<div class="subscription-order-info">
						<div class="row">
							<div class="column medium-one-third one-fifth">
								<div class="subscription-item-title uppercase">
									Qty
								</div>
								<span class="subscription-order-data">&mvte:subscription:quantity;</span>
							</div>
							<div class="column medium-one-third two-fifths">
								<div class="subscription-item-title uppercase">
									Price
								</div>
								<span class="subscription-order-data">&mvt:item:formatted_price;</span>
							</div>
							<div class="nlp column medium-one-third two-fifths">
								<div class="subscription-item-title uppercase">
									Item Subtotal
								</div>
								<span class="subscription-order-data">&mvt:item:formatted_subtotal;</span>
							</div>
						</div>
					</div>
				</mvt:foreach>
			</div>
		</div>
	</mvt:foreach>
</div>
<!-- / End -->

	<mvt:if expr="NOT l.settings:subscriptions:page_disp_count GT 0">
		<mvt:if expr="( g.Offset OR g.NextOffset ) AND ( l.settings:subscriptions:per_page NE 0 )">
			<div class="next-previous">
				<div class="previous-button">
					<mvt:if expr="g.Offset EQ 0">
						&nbsp;
					<mvt:else>
						<form method="post" action="&mvte:urls:_self:auto;" />
							<input type="hidden" name="Sort_By" value="&mvte:global:Sort_By;" />
							<input type="hidden" name="Offset" value="&mvte:global:PrevOffset;" />
							<input type="hidden" name="Per_Page" value="&mvte:global:Per_Page;" />
							<mvt:item name="buttons" param="Previous" />
						</form>
					</mvt:if>
				</div>
				<div class="next-button">
					<mvt:if expr="g.NextOffset EQ 0">
						&nbsp;
					<mvt:else>
						<form method="post" action="&mvte:urls:_self:auto;">
							<input type="hidden" name="Sort_By" value="&mvte:global:Sort_By;" />
							<input type="hidden" name="Offset" value="&mvte:global:NextOffset;" />
							<input type="hidden" name="Per_Page" value="&mvte:global:Per_Page;" />
							<mvt:item name="buttons" param="Next" />
						</form>
					</mvt:if>
				</div>
			</div>
	
			<div class="clear"></div>
		</mvt:if>
	</mvt:if>
</div>
<div class="breaker"></div><div class="breaker"></div>

New CSS

.CPCD-payment-row {
		background: #f3f7f8;
		line-height: 32px;
		padding: 1.25rem 0;
		margin-bottom: 5px;
	}
		.CPCD-payment-name,
		.CPCD-payment-exp {
			font-weight: lighter;
		}
		.CPCD-edit-card a,
		.CPCD-delete-card a {
			text-decoration: underline;
			color: #2a527a;
			font-size: 14px;
		}
		.CPCD-edit-card {
			margin-right: 0.5rem;
		}
		.cpcd-add {
			color: #fff !important;
			margin: 1rem 0;
		}
.cpca-save-card {
	border: 0;
	width: 100%;
	height: auto;
	padding:.25rem 0;
}
.cpca-cancel {
	border: 0;
	height: auto;
	padding:.25rem 0;
}
.cpca-continue-button {
	margin: 1.5rem 0;
}
.CPCA-breaker-add-spacing {
	margin-bottom: 14rem;
}
#cpca_form,
#cpce_form {
	border: 1px solid #dedede;
	width: 100% !important;
	margin-top: 1.5rem;
	padding: 2rem;
}
@media screen and (min-width: 960px) {
	.cpca main > .wrap > .row,
	.cpcd main > .wrap > .row,
	.cpce main > .wrap > .row {
		width: 83.3332%;
		margin: auto;
	}
}

/* Subscription management */
#js-subscription-success {
	padding:1rem 0;
	background: #38c574;
	-webkit-border-radius: 2px;
	-moz-border-radius: 2px;
	border-radius: 2px;
}
#js-subscription-success span {
	position: relative;
	top: 1px;
}
.subscription-next-shipment {
	color: #656d78;
	font-size: 13px;
	margin: 1.5rem 0 1.5rem;
}
.subscription-edit-btn,
.subscription-edit-btn:hover {
	color: #6b9ccc;
	font-size: 14px;
	display: block;
	border: 2px solid #6b9ccc;
	-webkit-border-radius: 2px;
	-moz-border-radius: 2px;
	border-radius: 2px;
	padding: 10px 0;
	margin-bottom: 2rem;
}
.subscription-item {
	padding-bottom: 1rem;
	margin-bottom: 2rem;
}
.subscription-item-inner {
	border: 1px solid #e6e8ec;
	padding: 1.5rem;
}
.subscription-item-name {
	font-size: 18px;
	color: #383f48;
}
.subscription-item-code {
	color: #656d78;
	font-size: 13px;
	font-weight: 100;
	margin-bottom: 10px;
}
.subscription-item-info {
	min-height: 75px;
}
.subscription-item-terms,
.subscription-order-info {
	border-top: 1px solid #dbe3e5;
	padding: 10px 0;
}
.subscription-item-title {
	font-size: 11px;
	color: #656d78;
}
.subscription-order-data {
	color: #383f48;
}
/* Edit Subscription */
.edit-subscription-inner {
	border: 1px solid #e6e8ec;
	-webkit-border-radius: 2px;
	-moz-border-radius: 2px;
	border-radius: 2px;
}
	.edit-subscription-top,
	.edit-subscription-paymentinfo,
	.edit-subscription-charges {
		padding: 0 1.5rem;
	}
		.edit-subscription-charges > .row {
			margin-bottom: 0.5rem;
		}
	.edit-subscription-top {
		padding-top: 1.5rem;
	}
	.edit-subscription-charges {
		padding: 1.5rem;
		background: #f3f7f8;
		margin-top: 1.5rem;
	}
.edit-subscription-item-name {
	font-size: 32px;
	color: #383f48;
}
.edit-subscription-item-code {
	color: #656d78;
	font-size: 14px;
	margin-bottom: 0.5rem;
}
.edit-subscription-item-discount {
	font-size: 14px;
	color: #6b9ccc;
}
.discount-charge {
	color: #6b9ccc;
}
.edit-subscription-order,
.edit-subscription-shipping-info,
.edit-subscription-paymentinfo-inner {
	border-top: 1px solid #dbe3e5;
	margin-top: 0.5rem;
	padding: 1rem 0 0.5rem 0;
	margin-bottom: 1rem;
}
.edit-subscription-title {
	font-size: 14px;
	color: #4d4d4d;
	margin-bottom: 5px;
	display: block;
}
.edit-subscription-info {
	font-size: 14px;
	color: #81838a;
}
.edit-subscription-order-date-terms {
	margin-top: 1rem;
}
.edit-subscription-next-order {
	position: relative;
	overflow: visible;
}
#subscriptionfields_nextorderdate_display {
	cursor: pointer;
	display:block;
	position: relative;
	border: 1px solid #e6e8ec;
	-webkit-border-radius: 2px;
	-moz-border-radius: 2px;
	border-radius: 2px;
	padding: 10px 15px;
	font-size: 14px;
	color: #81838a;
}
.edit-subscription-subtotal,
.edit-subscription-total {
	font-size: 20px;
}
.edit-subscription-subtotal {
	margin-top: 6px;
}
#subscriptionfields_nextorderdate_display:after {
	content: "";
	font-family: 'ElegantIcons';
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	font-variant: normal;
	font-weight: normal;
	line-height: 1;
	speak: none;
	text-transform: none;
	background: #f3f7f8;
	color: #6b9ccc;
	font-size: 20px;
	position: absolute;
	right: 0;
	height: 100%;
	top: 0;
	line-height: 40px;
	padding: 0 20px;
}
.edit-subscription-dots {
	overflow: hidden;
	white-space: nowrap;
}
.edit-subscription-inner select,
.edit-subscription-quantity-inner {
	border: 1px solid #e6e8ec;
	-webkit-border-radius: 2px;
	-moz-border-radius: 2px;
	border-radius: 2px;
	padding: 10px 15px;
	font-size: 14px;
	color: #81838a;
	height: auto;
	background: #fff;
	min-height: 20px;
}
	.edit-subscription-quantity-inner {
		padding: 6px 0;
	}
.edit-subscription-dots:before {
	content: "..........................................................................................................................................................................";
	color: #d6dadc;
	letter-spacing: 1px;
	font-size: 18px;
}
.edit-subscription-buttons {
	margin-top: 1.5rem;
}
.edit-subscription-save-button {
	background: #6b9ccc;
	font-size: 14px;
	padding: 7px 0;
	height: auto;
	border: 0;
}
.edit-subscription-cancel-button {
	border:0;
	padding:0;
	text-decoration: underline;
	color: #2a527a;
	padding: 7px 0;
	font-size: 14px;
	height: auto;
}
.qty-inc,
.qty-dec {
	width: 15%;
	cursor: pointer;
	color: #4d4d4d;
	display: inline-block;
	float:left;
	margin-top: 5px;
}
.edit-subscription-quantity-inner .edit-subscription-qty {
	width: 70%;
	display: inline;
	border: 0;
	font-size: 14px;
	color: #81838a;
	box-shadow: none !important;
	float:left;
}


/* Miva Date Picker */
.miva_datepicker{
	position:absolute;
	display:none;
	z-index:1000;
	background:#fff;
	padding:20px;
	border:1px solid #ccc;
	width: 100%;
}

.miva_datepicker_calendar_container{
	position:relative;
	display:block;
	vertical-align:top;
	width:214px;
	-webkit-touch-callout:none;
	-webkit-user-select:none;
	-khtml-user-select:none;
	-moz-user-select:none;
	-ms-user-select:none;
	user-select:none;
	margin: auto;
}
.miva_datepicker_calendar_month_selector{
	position:relative;
	height:35px;
	margin:2px;
	background:#666;
}

.miva_datepicker_calendar_month_selector_prev{
	position:absolute;
	top:0;
	left:0;
	width:35px;
	height:35px;
	background-position:0 -35px;
	background-repeat:no-repeat;
	cursor:pointer;
}

.miva_datepicker_calendar_month_selector_prev:hover{
	background-color:#555;
}

.miva_datepicker_calendar_month_selector_title{
	position:absolute;
	top:0;
	right:35px;
	bottom:0;
	left:35px;
	text-align:center;
	padding:9px;
	font-size:14px;
	color:#fff;
}

.miva_datepicker_calendar_month_selector_title_month{
	position:relative;
	display:inline-block;
	color:#fff;
}

.miva_datepicker_calendar_month_selector_title_year{
	position:relative;
	display:inline-block;
	margin-left:3px;
	color:#fff;
}

.miva_datepicker_calendar_month_selector_next{
	position:absolute;
	top:0;
	right:0;
	width:35px;
	height:35px;
	background-position:0 -35px;
	background-repeat:no-repeat;
	cursor:pointer;
}

.miva_datepicker_calendar_month_selector_next:hover{
	background-color:#555;
}

.miva_datepicker_cancel{
	float: right;
	border: 2px solid #e0ebed;
	color:#7d848f;
	padding: 3px 9px 2px;
	font-size: 12px;
	font-weight: bold;
	margin-top: 0.75rem;
	text-transform: uppercase;;
}

.miva_datepicker_calendar_weekday_container{
	position:relative;
	height:24px;
	margin:2px;
	width: 214px;
	margin: auto;
}
.miva_datepicker_calendar_week_container {
	width: 214px;
	margin: auto;
}

.miva_datepicker_calendar_weekday_title{
	position:absolute;
	display:inline-block;
	width:28px;
	height:14px;
	padding:3px 0;
	font-weight:bold;
	text-align:center;
}
.miva_datepicker_cancel {

}
#miva_datepicker_calendar_week_container{
	position:relative;
	margin:2px;
}

.miva_datepicker_calendar_week{
	position:relative;
	display:block;
	height:30px;
}

.miva_datepicker_calendar_day{
	position:absolute;
	display:inline-block;
	top:1px;
	bottom:1px;
	width:26px;
	height:11px;
	padding:7px 0 8px;
	text-align:center;
	font-size:11px;
	border:1px solid #ccc;
	cursor:pointer;
	line-height: 1;
	height: 24px;
}

.miva_datepicker_calendar_day:hover{
	background:#666;
	border-color:#555;
	color:#fff;
}

.miva_datepicker_calendar_day_noselect,
.miva_datepicker_calendar_day_noselect:hover{
	background:#e3e3e3;
	border-color:#ccc;
	color:#777;
}

.miva_datepicker_calendar_day_current{
	border-color:#666;
	color:#666;
	font-weight:bold;
}

.miva_datepicker_calendar_day_current:hover{
	border-color:#666;
	background:#666;
	color:#fff;
	font-weight:bold;
}

.miva_datepicker_calendar_day_active{
	background:#666;
	border-color:#555;
	color:#fff;
	font-weight:bold;
}

.miva_datepicker_calendar_day_0{
	left:1px;
}

.miva_datepicker_calendar_day_1{
	left:31px;
}

.miva_datepicker_calendar_day_2{
	left:61px;
}

.miva_datepicker_calendar_day_3{
	left:91px;
}

.miva_datepicker_calendar_day_4{
	left:121px;
}

.miva_datepicker_calendar_day_5{
	left:151px;
}

.miva_datepicker_calendar_day_6{
	left:181px;
}

#miva_datepicker_cancel{
	position:relative;
	display:inline-block;
	margin-top:10px;
}
/* OSEL & OPAY Changes */
.payment-method-selectors label {
	margin: 0;
	text-align: left;
}
.payment-method-selectors input {
	position: relative;
	width: auto;
	height: auto;
	opacity: 1;
	display: inline-block;
	margin-right: 0.75rem;
}
.payment-method-selectors label img {
	margin-right: 0.75rem;
}
.payment-method-selectors label span {
	display: inline-block;
	max-width: 63%;
	vertical-align: middle;
}
.payment-method-selectors {
	margin-bottom: 0.75rem;
}
/* PROD */
@media screen and (min-width: 960px) {
	#l-Product_Subscription_Term_ID {
		width: 63%;
	}
}
#js-subscription #l-Product_Subscription_Term_ID {
	width: 100%;
}
.hide-subs {display: none !important;}
#l-otp:checked ~ #js-subscription {
	display: none;
}
.purchase-form_otps-otp,
.purchase-form_otps-s {
	display: inline-block;
	font-size: 14px !important;
	text-align: center !important;
	border: 2px solid #e0ebed;
	padding: 1rem;
	margin-bottom: 1rem;
	color: #7d848f;
	-webkit-border-radius: 0.25rem;
	-moz-border-radius: 0.25rem;
	border-radius: 0.25rem;
	font-weight: bold;
}
#l-otp:checked ~ .purchase-form_otps-otp,
#l-subscribe:checked ~ .purchase-form_otps-s {
	color: #285373;
	border-color: #469bd1;
}
.purchase-form_otps-otp {margin-right:0.75rem;}
#js-saved-cards {
	border: 1px solid #e3e3e8;
	border-radius: 3px;
}
.js-saved-cards-title {
	margin :0 0 1.5rem 0;
	border-top: 0 none;
}
.payment-method-selectors {font-size: 14px;}

New JavaScript

Append to scripts.js

	},

	jsCSBE: function () {
		$('.qty-dec').on('click', function() {
			var qtyBox = $(this).parent().find('[name="Quantity"]'),
				qty = parseFloat( $(qtyBox).val() );
			if ( qty > 1 ) {
				$(qtyBox).val( qty - 1 );
			}
		});
		$('.qty-inc').on('click', function() {
			var qtyBox = $(this).parent().find('[name="Quantity"]'),
				qty = parseFloat( $(qtyBox).val() );
			if ( qty ) {
				$(qtyBox).val( qty + 1 );
			}
		});
Add a custom footer
Add a custom sidebar
Clone this wiki locally