v1.5.0 - mivaecommerce/readytheme-prepworx 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;: Add Customer Payment Card</title>
</mvt:if>
<base href="&mvt:global:basehref;" />
<link rel="canonical" href="&mvte:urls:_self:auto;" />
<mvt:item name="head" param="head_tag" />
</head>
<body id="JS_&mvt:page:code;" class="&mvt:page:code;">
<mvt:item name="hdft" param="global_header" />
<mvt:item name="hdft" param="header" />
<div class="row">
<div id="fields-key" class="col-xs-12">
<div><span class="required">Bold</span> = Required</div>
<div><span class="italic">Italic</span> = Optional</div>
</div>
<form id="cpca_form" class="col-xs-12" method="post" action="&mvte:urls:CPCD:auto;">
<input type="hidden" name="Action" value="ICPC" />
<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( 'cpca_form' );
form.submit();
} );
}
}
</script>
<span onclick="onclick_submit(); return false;">
<mvt:item name="buttons" param="Save" />
</span>
</div>
</form>
</div>
<mvt:item name="hdft" param="footer" />
<mvt:item name="hdft" param="global_footer" />
</body>
</html>Header
<mvt:if expr="l.settings:messages:error_message_count">
<div class="alert alert-danger">
<mvt:foreach iterator="error" array="messages:error_messages">
&mvt:error;
</mvt:foreach>
</div>
</mvt:if>
<mvt:if expr="l.settings:messages:information_message_count">
<div class="alert alert-info">
<mvt:foreach iterator="message" array="messages:information_messages">
&mvt:message;
</mvt:foreach>
</div>
</mvt:if>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": ".bold",
"properties":
{
"font-weight": "bold"
}
},
{
"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"
}
},
{
"selector": "#mvp_addressfields_container.mvp_addressfields_hide",
"properties": {
"display": "none"
}
},
{
"selector": "input[type='text']:-moz-placeholder",
"properties": {
"color": "#000",
"font-style": "italic",
"font-weight": "700"
}
},
{
"selector": "input[type='text']::-moz-placeholder",
"properties": {
"color": "#000",
"font-style": "italic",
"font-weight": "700"
}
},
{
"selector": "input[type='text']:-ms-input-placeholder",
"properties": {
"color": "#000",
"font-style": "italic",
"font-weight": "700"
}
},
{
"selector": "input[type='text']::-webkit-input-placeholder",
"properties": {
"color": "#000",
"font-style": "italic",
"font-weight": "700"
}
},
<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"
}
}
]
}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;: Customer Payment Cards</title>
</mvt:if>
<base href="&mvt:global:basehref;" />
<link rel="canonical" href="&mvte:urls:_self:auto;" />
<mvt:item name="head" param="head_tag" />
</head>
<body id="JS_&mvt:page:code;" class="&mvt:page:code;">
<mvt:item name="hdft" param="global_header" />
<mvt:item name="hdft" param="header" />
<div class="row">
<div class="customer_add_card_link col-xs-12">
<a class="btn btn-primary btn-lg btn-block" href="&mvte:urls:CPCA:secure;">+ Add Card</a>
</div>
</div>
<div class="paymentcards-container">
<mvt:item name="paymentcards" />
</div>
<mvt:item name="hdft" param="footer" />
<mvt:item name="hdft" param="global_footer" />
</body>
</html>Header
<mvt:if expr="l.settings:messages:error_message_count">
<div class="alert alert-danger">
<mvt:foreach iterator="error" array="messages:error_messages">
&mvt:error;
</mvt:foreach>
</div>
</mvt:if>
<mvt:if expr="l.settings:messages:information_message_count">
<div class="alert alert-info">
<mvt:foreach iterator="message" array="messages:information_messages">
&mvt:message;
</mvt:foreach>
</div>
</mvt:if>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">
<div class="CPCD-payment-row row">
<div class="col-xs-6 CPCD-payment-type">
&mvte:paymentcard:type; ending in &mvte:paymentcard:lastfour;
</div>
<div class="col-xs-6 CPCD-payment-exp text-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="visible-xs-block visible-sm-block"></div>
<div class="col-md-2 col-xs-6 CPCD-payment-name">
&mvte:paymentcard:fname; &mvte:paymentcard:lname;
</div>
<div class="col-md-2 hidden-xs hidden-sm 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="col-md-2 col-xs-6 text-right">
<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&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>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;: Edit Customer Payment Card</title>
</mvt:if>
<base href="&mvt:global:basehref;" />
<link rel="canonical" href="&mvte:urls:_self:auto;" />
<mvt:item name="head" param="head_tag" />
</head>
<body id="JS_&mvt:page:code;" class="&mvt:page:code;">
<mvt:item name="hdft" param="global_header" />
<mvt:item name="hdft" param="header" />
<div class="row">
<div id="fields-key" class="col-xs-12">
<div><span class="required">Bold</span> = Required</div>
<div><span class="italic">Italic</span> = Optional</div>
</div>
<form id="cpce_form" class="col-xs-12" method="post" action="&mvte:urls:CPCD:auto;">
<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>
<span onclick="onclick_submit(); return false;">
<mvt:item name="buttons" param="Save" />
</span>
</div>
</form>
</div>
<mvt:item name="hdft" param="footer" />
<mvt:item name="hdft" param="global_footer" />
</body>
</html>Header
<mvt:if expr="l.settings:messages:error_message_count">
<div class="alert alert-danger">
<mvt:foreach iterator="error" array="messages:error_messages">
&mvt:error;
</mvt:foreach>
</div>
</mvt:if>
<mvt:if expr="l.settings:messages:information_message_count">
<div class="alert alert-info">
<mvt:foreach iterator="message" array="messages:information_messages">
&mvt:message;
</mvt:foreach>
</div>
</mvt:if>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": "'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": ".bold",
"properties":
{
"font-weight": "bold"
}
},
{
"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"
}
},
{
"selector": "#mvp_addressfields_container.mvp_addressfields_hide",
"properties": {
"display": "none"
}
},
{
"selector": "input[type='text']:-moz-placeholder",
"properties": {
"color": "#000",
"font-style": "italic",
"font-weight": "700"
}
},
{
"selector": "input[type='text']::-moz-placeholder",
"properties": {
"color": "#000",
"font-style": "italic",
"font-weight": "700"
}
},
{
"selector": "input[type='text']:-ms-input-placeholder",
"properties": {
"color": "#000",
"font-style": "italic",
"font-weight": "700"
}
},
{
"selector": "input[type='text']::-webkit-input-placeholder",
"properties": {
"color": "#000",
"font-style": "italic",
"font-weight": "700"
}
},
<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"
}
}
]
}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;: Edit Customer Subscription</title>
</mvt:if>
<base href="&mvt:global:basehref;" />
<link rel="canonical" href="&mvte:urls:_self:auto;" />
<mvt:item name="head" param="head_tag" />
</head>
<body id="JS_&mvt:page:code;" class="&mvt:page:code;">
<mvt:item name="hdft" param="global_header" />
<mvt:item name="hdft" param="header" />
<form id="csbe_form" method="post" action="&mvte:urls:CSUB:secure;">
<input type="hidden" name="Action" value="UCSB" />
<div class="subscription-container row">
<mvt:item name="subscriptionfields" />
</div>
</form>
<mvt:item name="hdft" param="footer" />
<mvt:item name="hdft" param="global_footer" />
</body>
</html>Header
<mvt:if expr="l.settings:messages:error_message_count">
<div class="alert alert-danger">
<mvt:foreach iterator="error" array="messages:error_messages">
&mvt:error;
</mvt:foreach>
</div>
</mvt:if>
<mvt:if expr="l.settings:messages:information_message_count">
<div class="alert alert-info">
<mvt:foreach iterator="message" array="messages:information_messages">
&mvt:message;
</mvt:foreach>
</div>
</mvt:if>Subscription Fields
<br>
<input type="hidden" name="Subscription_ID" value="&mvte:global:Subscription_ID;" />
<mvt:foreach iterator="item" array="subscriptionfields:items">
<div class="col-lg-6 text-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="col-lg-6">
<div class="edit-subscription-inner">
<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="col-sm-6">
<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="col-sm-6">
<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 col-sm-6">
<mvt:else>
<div class="&mvte:global:SubscriptionNextDate_Row; edit-subscription-next-order col-sm-12">
</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 col-sm-6">
<mvt:else>
<div class="&mvte:global:SubscriptionTerm_Row; edit-subscription-term col-sm-12">
</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; col-md-6 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; col-md-6 edit-subscription-shipping-method">
<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>
<None>
</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 clearfix">
<div class="&mvte:global:SubscriptionPaymentCard_Row; edit-subscription-payment-method col-sm-12">
<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>
<None>
</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="col-xs-12"> </div>
<div class="edit-subscription-quantity col-md-6">
<mvt:if expr="l.settings:subscriptionfields:productsubscriptionsettings:can_qty">
<div class="edit-subscription-quantity-inner clearfix">
<input type="text" name="Quantity" class="edit-subscription-qty text-small text-center" value="&mvte:global:Quantity;" />
</div>
<mvt:else>
Quantity: &mvte:subscriptionfields:quantity;
</mvt:if>
</div>
<div class="edit-subscription-subtotal col-md-6 text-right">
&mvt:item:formatted_base_price;
</div>
</div>
</div>
</div>
<div class="edit-subscription-charges">
<div class="row">
<div class="col-md-3 col-xs-4">Subtotal</div>
<div class="col-md-6 col-xs-2 edit-subscription-dots"></div>
<div class="col-md-3 col-xs-6 text-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="col-md-3 col-xs-4">Discount</div>
<div class="col-md-6 col-xs-2 edit-subscription-dots"></div>
<div class="col-md-3 col-xs-6 text-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="col-md-3 col-xs-4">
<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="col-md-6 col-xs-2 edit-subscription-dots"></div>
<mvt:if expr="'(' CIN l.settings:charge:formatted_disp_amt">
<div class="col-md-3 col-xs-6 text-right discount-charge">
<mvt:else>
<div class="col-md-3 col-xs-6 text-right">
</mvt:if>
&mvt:charge:formatted_disp_amt;
</div>
</div>
</mvt:foreach>
<div class="row">
<div class="col-md-3 col-xs-4 bold">
Total
</div>
<div class="col-md-6 col-xs-2 edit-subscription-dots"></div>
<div class="col-md-3 col-xs-6 text-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="col-md-6">
<input type="submit" value="Save Changes" class="btn btn-primary uppercase bold" />
</div>
</mvt:if>
<mvt:if expr="l.settings:subscriptionfields:productsubscriptionsettings:can_cancel">
<div class="col-md-6" 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="btn btn-default" />
</div>
</mvt:if>
</div>
</div>
</div>
</div>
</mvt:foreach>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;: Customer Subscriptions</title>
</mvt:if>
<base href="&mvt:global:basehref;" />
<link rel="canonical" href="&mvte:urls:_self:auto;" />
<mvt:item name="head" param="head_tag" />
</head>
<body id="JS_&mvt:page:code;" class="&mvt:page:code;">
<mvt:item name="hdft" param="global_header" />
<mvt:item name="hdft" param="header" />
<mvt:item name="subscriptions" />
<mvt:item name="hdft" param="footer" />
<mvt:item name="hdft" param="global_footer" />
</body>
</html>Header
<mvt:if expr="l.settings:messages:error_message_count">
<div class="alert alert-danger">
<mvt:foreach iterator="error" array="messages:error_messages">
&mvt:error;
</mvt:foreach>
</div>
</mvt:if>
<mvt:if expr="l.settings:messages:information_message_count">
<div class="alert alert-info">
<mvt:foreach iterator="message" array="messages:information_messages">
&mvt:message;
</mvt:foreach>
</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"><</a>
<mvt:else>
<span class="page-links-previous page-links-deactivated"><</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">></a>
<mvt:else>
<span class="page-links-next page-links-deactivated">></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 row">
<mvt:foreach iterator="subscription" array="subscriptions:items">
<div class="col-md-4 col-sm-6 subscription-item">
<div class="subscription-item-inner">
<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 text-center" style="height: &mvt:subscriptions:b_height;px;">
<a href="&mvt:item:link;"><img src="&mvt:item:src;" alt="&mvte:item:name;" class="img-responsive" /></a>
</div>
<div class="subscription-next-shipment text-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="btn btn-default text-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="btn btn-default text-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="btn btn-default text-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="col-md-2">
<div class="subscription-item-title uppercase">
Qty
</div>
<span class="subscription-order-data">&mvte:subscription:quantity;</span>
</div>
<div class="col-md-5">
<div class="subscription-item-title uppercase">
Price
</div>
<span class="subscription-order-data">&mvt:item:formatted_price;</span>
</div>
<div class="col-md-5">
<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">
<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">
<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>.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: "\f073";
font-family: 'FontAwesome';
-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;
width: 100%;
}
.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 #000;
padding: 1rem;
margin-bottom: 1rem;
color: #555;
border-radius: 0.25rem;
font-weight: bold;
cursor: pointer;
}
#l-otp:checked ~ .purchase-form_otps-otp,
#l-subscribe:checked ~ .purchase-form_otps-s {
background: #000;
border-color: #555;
color: #fff;
}
.purchase-form_otps-otp {
margin-right: 0.75rem;
}
#js-saved-cards {
margin-bottom: 0.75rem;
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;
}