v1.2.0 - mivaecommerce/booc-readytheme GitHub Wiki
These updates are in addition to those posted here: Miva Merchant 9.0006 Template Changes
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="flood-background &mvt:global:pageClass;">
<mvt:item name="hdft" param="global_header" />
<section class="row">
<div class="column whole hdft-header">
<mvt:item name="hdft" param="header" />
</div>
</section>
<section class="row">
<div class="column whole">
<form data-hook="cpca-form" method="post" action="&mvte:urls:CPCD:auto;">
<input type="hidden" name="Action" value="ICPC" />
<mvt:item name="mivapay" />
<div class="h-align-right">
<script>
var onclick_submit = function (event) {
if (MivaPay && (typeof MivaPay.Submit === 'function')) {
MivaPay.Submit(function() {
var form;
form = document.querySelector('[data-hook="cpca-form"]');
form.submit();
});
}
}
</script>
<a href="&mvt:urls:CPCD:auto;" class="button button--hollow button--medium color--gray font--uppercase">Cancel</a>
<span onclick="onclick_submit(); return false;" class="h-inline-block">
<input type="submit" value="Save" class="button button--medium bg--primary font--uppercase" />
</span>
</div>
</form>
</div>
</section>
<section class="row">
<div class="column whole hdft-footer">
<mvt:item name="hdft" param="footer" />
</div>
</section>
<mvt:item name="hdft" param="global_footer" />
</body>
</html>Header
<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>MivaPay CSS
{
"selector": "body",
"properties": {
"margin": "0",
"font": "normal 1rem Arial, Helvetica, Verdana, sans-serif",
"font-size": "12px",
"color": "#1e1e1e",
"-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"
}
},
{
"selector": "#mvp_exp_date_container:after",
"properties": {
"content": "'Billing Address'",
"display": "block",
"font-size": "20px",
"position": "relative",
"bottom": "-1.5rem",
"padding": "2rem 0",
"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 #a9a9a9",
"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"
}
},
{
"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": "#a9a9a9",
"margin-left": "5px"
}
},
{
"selector": "#mvp_country_container",
"properties": {
"clear": "both",
"float": "none"
}
}
]
}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="flood-background &mvt:global:pageClass;">
<mvt:item name="hdft" param="global_header" />
<section class="row">
<div class="column whole hdft-header">
<mvt:item name="hdft" param="header" />
</div>
</section>
<section class="row">
<div class="column whole">
<a class="button button--block button--medium bg--primary" href="&mvte:urls:CPCA:secure;">+ Add Credit/Debit Card</a>
<mvt:item name="paymentcards" />
</div>
</section>
<section class="row">
<div class="column whole hdft-footer">
<mvt:item name="hdft" param="footer" />
</div>
</section>
<mvt:item name="hdft" param="global_footer" />
</body>
</html>Header
<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>Customer Payment Card List Layout
<mvt:if expr="l.settings:paymentcards:paymentcard_count EQ 0">
<div class="message message--info">No payment cards found.</div>
<mvt:exit />
</mvt:if>
<div class="cmp-customer-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="cmp-customer-payment-cards__entry row">
<div class="column one-fourth small-one-sixth large-one-twelfth h-align-center">
<img src="&mvt:paymentcard:image;" alt="&mvte:paymentcard:type;">
</div>
<div class="column three-fourths h-all-hidden---s">
<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="color--red font--bold">(expired)</span> &mvte:paymentcard:exp_month;/&mvte:paymentcard:exp_year;
<mvt:else>
Expires: &mvte:paymentcard:exp_month;/&mvte:paymentcard:exp_year;
</mvt:if>
</div>
<div class="column small-one-third">
&mvte:paymentcard:type; ending in &mvte:paymentcard:lastfour;
</div>
<div class="column small-one-fourth">
&mvte:paymentcard:fname; &mvte:paymentcard:lname;
</div>
<div class="column h-all-hidden h-all-shown---s one-fourth large-one-sixth h-align-center">
<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="color--red font--bold">(expired)</span> &mvte:paymentcard:exp_month;/&mvte:paymentcard:exp_year;
<mvt:else>
Expires: &mvte:paymentcard:exp_month;/&mvte:paymentcard:exp_year;
</mvt:if>
</div>
<div class="column large-one-sixth h-align-right h-align-center---l">
<a class="button bg--primary" href="&mvte:urls:CPCE:auto_sep;PaymentMethod=paymentcard:&mvta:paymentcard:id;">Edit</a>
<a class="button button--hollow color--red" href="&mvte:urls:CPCD:auto_sep;Action=DCPC&PaymentCard_ID=&mvta:paymentcard:id;" onclick="if ( !confirm( 'Deleting this payment card cannot be undone.\x0A\x0AContinue?' ) ) return false;">Delete</a>
</div>
</div>
</mvt:foreach>
</div>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="flood-background &mvt:global:pageClass;">
<mvt:item name="hdft" param="global_header" />
<section class="row">
<div class="column whole hdft-header">
<mvt:item name="hdft" param="header" />
</div>
</section>
<section class="row">
<div class="column whole">
<form data-hook="cpca-form" method="post" action="&mvte:urls:CPCD:auto;">
<input type="hidden" name="Action" value="UCPC" />
<input type="hidden" name="PaymentMethod" value="&mvte:global:PaymentMethod;" />
<mvt:item name="mivapay" />
<div class="h-align-right">
<script>
var onclick_submit = function (event) {
if (MivaPay && (typeof MivaPay.Submit === 'function')) {
MivaPay.Submit(function() {
var form;
form = document.querySelector('[data-hook="cpca-form"]');
form.submit();
});
}
}
</script>
<span onclick="onclick_submit(); return false;" class="h-inline-block">
<mvt:item name="buttons" param="Save" />
</span>
</div>
</form>
</div>
</section>
<section class="row">
<div class="column whole hdft-footer">
<mvt:item name="hdft" param="footer" />
</div>
</section>
<mvt:item name="hdft" param="global_footer" />
</body>
</html>Header
<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>MivaPayCSS
{
"selector": "body",
"properties": {
"margin": "0",
"font": "normal 1rem Arial, Helvetica, Verdana, sans-serif",
"font-size": "12px",
"color": "#1e1e1e",
"-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"
}
},
{
"selector": "#mvp_exp_date_container:after",
"properties": {
"content": "'Billing Address'",
"display": "block",
"font-size": "20px",
"position": "relative",
"bottom": "-1.5rem",
"padding": "2rem 0",
"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 #a9a9a9",
"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"
}
},
{
"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": "#a9a9a9",
"margin-left": "5px"
}
},
{
"selector": "#mvp_country_container",
"properties": {
"clear": "both",
"float": "none"
}
}
]
}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="flood-background &mvt:global:pageClass;">
<mvt:item name="hdft" param="global_header" />
<section class="row">
<div class="column whole hdft-header">
<mvt:item name="hdft" param="header" />
</div>
</section>
<section class="row">
<div class="column whole">
<mvt:item name="subscriptionfields" />
</div>
</section>
<section class="row">
<div class="column whole hdft-footer">
<mvt:item name="hdft" param="footer" />
</div>
</section>
<mvt:item name="hdft" param="global_footer" />
</body>
</html>Header
<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>Subscription Fields
<form id="csbe_form" method="post" action="&mvte:urls:CSUB:secure;">
<input type="hidden" name="Action" value="UCSB" />
<div class="cmp-edit-subscription row">
<div class="h-breaker"></div>
<input type="hidden" name="Subscription_ID" value="&mvte:global:Subscription_ID;" />
<mvt:foreach iterator="item" array="subscriptionfields:items">
<div class="column large-five-twelfths h-align-center">
<mvt:if expr="ISNULL l.settings:item:imagetypes:main">
<mvt:assign name="l.settings:item:src" value="g.theme_path $ '/images/img_coming_soon.png'" />
<mvt:else>
<mvt:assign name="l.settings:item:src" value="l.settings:item:imagetypes:main" />
</mvt:if>
<img class="cmp-edit-subscription__image" src="&mvt:item:src;" alt="&mvte:item:name;" />
</div>
<div class="column large-seven-twelfths">
<div class="cmp-edit-subscription__wrap h-bottom-shadow border--secondary">
<div class="cmp-edit-subscription__info">
<div class="cmp-edit-subscription__item-name">&mvt:item:name;</div>
<div class="cmp-edit-subscription__item-code">&mvt:item:code;</div>
<mvt:foreach iterator="discount" array="item:discounts">
<mvt:if expr="l.settings:discount:display">
<div class="cmp-edit-subscription__item-discount font--bold">&mvt:discount:descrip; - &mvt:discount:formatted_discount;</div>
</mvt:if>
</mvt:foreach>
<div class="cmp-edit-subscription-order">
<div class="row">
<div class="column small-half">
<div class="cmp-edit-subscription-order__title">
First Order Date
</div>
<div class="cmp-edit-subscription-order__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="cmp-edit-subscription-order__title">
Last Order Date
</div>
<div class="cmp-edit-subscription-order__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 cmp-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; cmp-edit-subscription-order__next-order column small-half h-nm">
<mvt:else>
<div class="&mvte:global:SubscriptionNextDate_Row; cmp-edit-subscription-order__next-order column h-nm">
</mvt:if>
<div class="cmp-edit-subscription-order__next-order-inner clearfix">
<label class="cmp-edit-subscription-order__title">Next Order Date</label>
<input id="subscriptionfields_nextorderdate" type="hidden" name="NextOrderDate" value="&mvte:global:NextOrderDate;" />
<span id="subscriptionfields_nextorderdate_display" class="cmp-edit-subscription-order__next-order-date">&mvte:global:Formatted_NextOrderDate;</span>
<mvt:item name="datepicker" />
</div>
<script>
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; cmp-edit-subscription-order__term column small-half h-nm">
<mvt:else>
<div class="&mvte:global:SubscriptionTerm_Row; cmp-edit-subscription-order__term column whole h-nm">
</mvt:if>
<label class="cmp-edit-subscription-order__title" for="ProductSubscriptionTerm_ID">Term</label>
<select class="input--medium" 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>&mvte:productsubscriptointerm:descrip;</option>
<mvt:else>
<option value="&mvte:productsubscriptointerm:id;">&mvte:productsubscriptointerm:descrip;</option>
</mvt:if>
</mvt:foreach>
</select>
</div>
</mvt:if>
</div>
</div>
<div class="cmp-edit-subscription-shipping">
<div class="row">
<div class="&mvte:global:SubscriptionAddress_Row; column cmp-edit-subscription-shipping_address">
<label class="cmp-edit-subscription-order__title" for="Address_ID">Shipping Address</label>
<select class="input--medium" 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>&mvte:address:descrip;</option>
<mvt:else>
<option value="&mvte:address:id;">&mvte:address:descrip;</option>
</mvt:if>
</mvt:foreach>
</select>
</div>
<div class="&mvte:global:SubscriptionShipping_Row; column cmp-edit-subscription-shipping_method h-nm">
<label class="cmp-edit-subscription-order__title" for="ShippingMethod">Shipping Method</label>
<select class="input--medium" name="ShippingMethod">
<mvt:if expr="l.settings:subscriptionfields:ship_id EQ 0">
<mvt:if expr="g.ShippingMethod EQ ''">
<option value="" selected><None></option>
<mvt:else>
<option value=""><None></option>
</mvt:if>
</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:shippingmethod:name; (&mvt:shippingmethod:formatted_price;)</option>
<mvt:else>
<option value="&mvte:shippingmethod:module:code;:&mvte:shippingmethod:code;">&mvt:shippingmethod:name; (&mvt:shippingmethod:formatted_price;)</option>
</mvt:if>
</mvt:foreach>
</select>
</div>
</div>
</div>
</div>
<div class="cmp-edit-subscription__payment">
<div class="row">
<div class="cmp-edit-subscription__payment-wrap">
<div class="&mvte:global:SubscriptionPaymentCard_Row; cmp-edit-subscription__payment-method column">
<label class="cmp-edit-subscription-order__title" for="PaymentCard_ID">Payment Method</label>
<select class="input--medium" 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><None></option>
<mvt:else>
<option value="0"><None></option>
</mvt:if>
</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>&mvte:paymentcard:type; ending in &mvte:paymentcard:lastfour;</option>
<mvt:else>
<option value="&mvte:paymentcard:id;">&mvte:paymentcard:type; ending in &mvte:paymentcard:lastfour;</option>
</mvt:if>
</mvt:foreach>
</select>
</div>
<div class="cmp-edit-subscription__quantity column large-five-twelfths">
<mvt:if expr="l.settings:subscriptionfields:productsubscriptionsettings:can_qty">
<div class="input-group cmp-edit-subscription__quantity-wrap" data-hook="cmp-adjust-quantity">
<button class="button button--hollow color--gray icon--subtract" data-action="decrement"></button>
<input type="tel" name="Quantity" value="&mvte:global:Quantity;" class="h-align-center h-nb input--medium">
<button class="button button--hollow color--gray icon--add" data-action="increment"></button>
</div>
<mvt:else>
Quantity: &mvte:subscriptionfields:quantity;
</mvt:if>
</div>
<div class="cmp-edit-subscription__subtotal column large-seven-twelfths h-align-right">
&mvt:item:formatted_base_price;
</div>
</div>
</div>
</div>
<div class="cmp-edit-subscription__charges bg--secondary">
<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 cmp-edit-subscription__dots"></div>
<div class="column x-large-one-sixth large-one-fifth small-one-fourth one-third h-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 cmp-edit-subscription__dots"></div>
<div class="column x-large-one-sixth large-one-fifth small-one-fourth one-third h-align-right cmp-edit-subscription__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 cmp-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 h-align-right cmp-edit-subscription__discount-charge">&mvt:charge:formatted_disp_amt;</div>
<mvt:else>
<div class="column x-large-one-sixth large-one-fifth small-one-fourth one-third h-align-right">&mvt:charge:formatted_disp_amt;</div>
</mvt:if>
</div>
</mvt:foreach>
<div class="row">
<div class="column x-large-one-sixth large-one-fifth small-one-fourth one-third font--bold">
Total
</div>
<div class="column x-large-four-sixths large-three-fifths small-half one-third cmp-edit-subscription__dots"></div>
<div class="column x-large-one-sixth large-one-fifth small-one-fourth one-third h-align-right font--bold cmp-edit-subscription__total">
&mvt:subscriptionfields:formatted_total;
</div>
</div>
<div class="cmp-edit-subscription__actions">
<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 large-half">
<input class="button button--block button--medium bg--primary font--uppercase" type="submit" value="Save Changes">
</div>
</mvt:if>
<mvt:if expr="l.settings:subscriptionfields:productsubscriptionsettings:can_cancel">
<div class="column 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 class="button button--block button--medium bg--white border--primary color--primary font--uppercase" type="submit" value="Cancel Subscription">
</div>
</mvt:if>
</div>
</div>
</div>
</div>
</mvt:foreach>
</div>
</form>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="flood-background &mvt:global:pageClass;">
<mvt:item name="hdft" param="global_header" />
<section class="row">
<div class="column whole hdft-header">
<mvt:item name="hdft" param="header" />
</div>
</section>
<section class="row">
<div class="column whole">
<mvt:item name="subscriptions" />
</div>
</section>
<section class="row">
<div class="column whole hdft-footer">
<mvt:item name="hdft" param="footer" />
</div>
</section>
<mvt:item name="hdft" param="global_footer" />
</body>
</html>Header
<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>Subscription List Layout
<mvt:if expr="l.settings:subscriptions:total_count EQ 0">
<div class="message message--info">No subscriptions found.</div>
<mvt:exit />
</mvt:if>
<mvt:if expr="l.settings:subscriptions:page_links:last_page GT 1">
<nav class="cmp-product-list__filtering">
<div class="cmp-product-list__pagination">
<mvt:if expr="l.settings:subscriptions:page_links:current_page NE 1">
<a class="button button--square button--medium bg--transparent border--black color--black icon--triangle-left cmp-product-list__pagination-link" href="&mvte:urls:_self:auto_sep;&mvte:subscriptions:page_links:prev_link_params;"></a>
<mvt:else>
<span class="button button--square button--medium bg--transparent border--black color--black icon--triangle-left cmp-product-list__pagination-link"></span>
</mvt:if>
<select class="bg--transparent input--medium cmp-product-list__pagination-select" onchange="window.location.href = this.options[this.selectedIndex].value">
<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">
<option value="&mvte:urls:_self:auto_sep;&mvte:pages:link_params;" selected>&mvte:pages:page_num;</option>
<mvt:else>
<option value="&mvte:urls:_self:auto_sep;&mvte:pages:link_params;">&mvte:pages:page_num;</option>
</mvt:if>
</mvt:foreach>
</select>
<mvt:if expr="l.settings:subscriptions:page_links:current_page NE l.settings:subscriptions:page_links:last_page">
<a class="button button--square button--medium bg--transparent border--black color--black icon--triangle-right cmp-product-list__pagination-link" href="&mvte:urls:_self:auto_sep;&mvte:subscriptions:page_links:next_link_params;"></a>
<mvt:else>
<span class="button button--square button--medium bg--transparent border--black color--black icon--triangle-right cmp-product-list__pagination-link"></span>
</mvt:if>
<span class="cmp-product-list__page-notice">Page &mvte:subscriptions:page_links:current_page; of &mvte:subscriptions:page_links:last_page;</span>
</div>
</nav>
<!-- end .cmp-product-list__filtering -->
</mvt:if>
<div class="cmp-subscriptions clearfix">
<mvt:foreach iterator="subscription" array="subscriptions:items">
<div class="column large-one-third small-half whole cmp-subscription-item">
<div class="cmp-subscription-item__wrap h-bottom-shadow">
<mvt:foreach iterator="item" array="subscription:items">
<figure class="cmp-subscription-item__image h-align-center">
<mvt:if expr="ISNULL l.settings:item:imagetypes:main">
<mvt:assign name="l.settings:item:src" value="g.theme_path $ '/images/img_coming_soon.png'" />
<mvt:else>
<mvt:assign name="l.settings:item:src" value="l.settings:item:imagetypes:main" />
</mvt:if>
<a href="&mvt:item:link;"><img src="&mvt:item:src;" alt="&mvte:item:name;"></a>
</figure>
<p class="cmp-subscription-item__next-shipment h-align-center color--gray font--uppercase">
<mvt:if expr="l.settings:subscription:nextdate EQ 0">
Next Shipment: N/A
<mvt:else>
Next Shipment: &mvt:subscription:formatted_nextdate_date;
</mvt:if>
</p>
<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 )">
<p><a class="button button--block button--hollow border--primary color--primary font--uppercase" href="&mvte:urls:CSBE:auto_sep;Subscription_ID=&mvta:subscription:id;">Edit Subscription</a></p>
<mvt:else>
<p><a class="button button--block button--hollow border--primary color--primary font--uppercase" href="&mvte:urls:CSBE:auto_sep;Subscription_ID=&mvta:subscription:id;">View Subscription</a></p>
</mvt:if>
<mvt:else>
<p><a class="button button--block button--hollow border--primary color--primary font--uppercase" href="&mvte:urls:CSBE:auto_sep;Subscription_ID=&mvta:subscription:id;">View Subscription</a></p>
</mvt:if>
<div class="cmp-subscription-item__info">
<div class="cmp-subscription-item__name">
&mvte:item:name;
</div>
<div class="cmp-subscription-item__code color--gray">
&mvte:item:code;
</div>
</div>
<div class="cmp-subscription-item__terms">
<div class="cmp-subscription-item__title font--small font--uppercase color--gray">
Term
</div>
<div class="cmp-subscription-item__term">
&mvte:subscription:productsubscriptionterm:descrip;
</div>
</div>
<div class="cmp-subscription-item__order-info">
<div class="row">
<div class="column medium-one-third one-fifth">
<div class="cmp-subscription-item__title font--small font--uppercase color--gray">
Qty
</div>
<div class="cmp-subscription-item__order-data">&mvte:subscription:quantity;</div>
</div>
<div class="column medium-one-third two-fifths">
<div class="cmp-subscription-item__title font--small font--uppercase color--gray">
Price
</div>
<div class="cmp-subscription-item__order-data">&mvt:item:formatted_price;</div>
</div>
<div class="column medium-one-third two-fifths h-nlp">
<div class="cmp-subscription-item__title font--small font--uppercase color--gray">
Item Subtotal
</div>
<div class="cmp-subscription-item__order-data">&mvt:item:formatted_subtotal;</div>
</div>
</div>
</div>
</mvt:foreach>
</div>
</div>
</mvt:foreach>
</div>cmp-customer-subscriptions.css
/**
|----|
CUSTOMER SUBSCRIPTIONS [mm5/themes/storyteller/css/components/cmp-customer-subscriptions.css]
|----|
*/
/* Customer Subscriptions */
.cmp-subscriptions {}
.cmp-subscription-item {
padding-bottom: 1rem;
margin-bottom: 2rem;
}
.cmp-subscription-item__wrap {
border: 1px solid #e6e8ec;
padding: 1.5rem;
}
.cmp-subscription-item__next-shipment,
.cmp-subscription-item__code {
font-size: 0.8125rem;
}
.cmp-subscription-item__info {
min-height: 4.5rem;
margin-bottom: 0.75rem;
}
.cmp-subscription-item__name {
font-size: 1.125rem;
}
.cmp-subscription-item__terms,
.cmp-subscription-item__order-info {
border-top: 1px solid #dbe3e5;
padding: 0.75rem 0;
}
/* Edit Subscription */
.cmp-edit-subscription {}
.cmp-edit-subscription__wrap {
border: 1px solid #e6e8ec;
border-radius: 2px;
}
.cmp-edit-subscription__info,
.cmp-edit-subscription__payment,
.cmp-edit-subscription__charges {
padding: 0 1.5rem
}
.cmp-edit-subscription__info {
padding-top: 1.5rem
}
.cmp-edit-subscription__item-name {
font-size: 2rem;
}
.cmp-edit-subscription__item-code {
margin-bottom: 0.5rem;
color: #656d78;
font-size: 0.875rem;
}
.cmp-edit-subscription__item-discount {
color: #6b9ccc;
font-size: 0.875rem;
}
.cmp-edit-subscription-order__title {
display: block;
margin-bottom: 0.25rem;
color: #4d4d4d;
font-size: 0.875rem;
}
.cmp-edit-subscription-order__info {
font-size: 0.875rem;
color: #81838a;
}
.cmp-edit-subscription-order__date-terms {
margin-top: 1rem;
}
.cmp-edit-subscription-order__next-order {
position: relative;
overflow: visible;
}
.cmp-edit-subscription-order__next-order-date {
display: block;
height: calc(3em + 2px);
padding: 0 1rem;
position: relative;
border: 1px solid #e6e8ec;
border-radius: 2px;
color: #81838a;
cursor: pointer;
font-size: 0.875rem;
line-height: 3;
}
.cmp-edit-subscription-order__next-order-date::after {
height: 100%;
padding: 0 1em;
position: absolute;
top: 0;
right: 0;
background: #f3f7f8;
color: #6b9ccc;
content: "\e023";
font-family: "ElegantIcons", sans-serif;
font-size: 1.25rem;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
font-variant: normal;
font-weight: normal;
line-height: 2;
speak: none;
text-transform: none;
}
.cmp-edit-subscription-order,
.cmp-edit-subscription-shipping,
.cmp-edit-subscription__payment-wrap {
border-top: 1px solid #dbe3e5;
margin-top: 0.5rem;
padding: 1rem 0 0.5rem 0;
margin-bottom: 1rem;
}
.cmp-edit-subscription__subtotal,
.cmp-edit-subscription__total {
font-size: 1.125rem;
}
.cmp-edit-subscription__subtotal {
margin-top: 6px;
}
.cmp-edit-subscription__wrap select {
border: 1px solid #e6e8ec;
border-radius: 2px;
padding: 0 1rem;
font-size: 0.875rem;
color: #81838a;
}
.cmp-edit-subscription__quantity-wrap {
align-items: center;
border: 1px solid #e6e8ec;
border-radius: 2px;
color: #81838a;
font-size: 0.875rem;
}
.cmp-edit-subscription__charges {
padding: 1.5rem;
background: #f3f7f8;
margin-top: 1.5rem
}
.cmp-edit-subscription__charges > .row {
margin-bottom: 0.5rem
}
.cmp-edit-subscription__discount-charge {
color: #6b9ccc;
}
.cmp-edit-subscription__dots {
overflow: hidden;
white-space: nowrap;
}
.cmp-edit-subscription__dots::before {
content: "..........................................................................................................................................................................";
color: #d6dadc;
letter-spacing: 1px;
font-size: 1.125rem;
}
.cmp-edit-subscription__actions {
margin-top: 1.5rem;
}
/* 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;
-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;
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;
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;
}