468 lines
18 KiB
PHP
468 lines
18 KiB
PHP
<?php
|
|
|
|
/**
|
|
* Checkout Form
|
|
*
|
|
* This template can be overridden by copying it to yourtheme/woocommerce/checkout/form-checkout.php.
|
|
*
|
|
* HOWEVER, on occasion WooCommerce will need to update template files and you
|
|
* (the theme developer) will need to copy the new files to your theme to
|
|
* maintain compatibility. We try to do this as little as possible, but it does
|
|
* happen. When this occurs the version of the template file will be bumped and
|
|
* the readme will list any important changes.
|
|
*
|
|
* @see https://docs.woocommerce.com/document/template-structure/
|
|
* @package WooCommerce\Templates
|
|
* @version 3.5.0
|
|
*/
|
|
|
|
if (!defined('ABSPATH')) {
|
|
exit;
|
|
}
|
|
|
|
do_action('woocommerce_before_checkout_form', $checkout);
|
|
|
|
// If checkout registration is disabled and not logged in, the user cannot checkout.
|
|
if (!$checkout->is_registration_enabled() && $checkout->is_registration_required() && !is_user_logged_in()) {
|
|
echo esc_html(apply_filters('woocommerce_checkout_must_be_logged_in_message', __('You must be logged in to checkout.', 'woocommerce')));
|
|
return;
|
|
}
|
|
|
|
?>
|
|
<div id='v-app'>
|
|
<form name="checkout" method="post" class="checkout woocommerce-checkout" action="<?php echo esc_url(wc_get_checkout_url()); ?>" enctype="multipart/form-data">
|
|
|
|
<?php if ($checkout->get_checkout_fields()) : ?>
|
|
<?php do_action('woocommerce_checkout_before_customer_details'); ?>
|
|
|
|
<div class="col2-set" id="customer_details">
|
|
<div class="col-1">
|
|
<div class="form-steps">
|
|
<div class="step-1" v-show="step === 'step-1'">
|
|
<?php do_action('woocommerce_checkout_billing'); ?>
|
|
<?php do_action('woocommerce_checkout_shipping'); ?>
|
|
|
|
<a href="#" class="button--primary" @click.prevent="switchStep">Review Order</a>
|
|
</div>
|
|
|
|
<div class="step-2" v-show="step === 'step-2'">
|
|
<p>Please review the information below, and enter your payment details to complete your order.</p>
|
|
<hr />
|
|
<div class="d-flex justify-content-between">
|
|
<h4>1. Subscriber Information</h4>
|
|
<a href="#" @click.prevent="switchStep">Edit</a>
|
|
</div>
|
|
<p><strong>Name (Person using the service):</strong><br />
|
|
{{ subscriber_first_name }} {{ subscriber_last_name }}<br />
|
|
<div class="d-flex justify-content-between">
|
|
<h4>Subscriber Contact Information</h4>
|
|
<a href="#" @click.prevent="switchStep">Edit</a>
|
|
</div>
|
|
<p v-html="subscriber_address_preview"></p>
|
|
|
|
<div class="d-flex justify-content-between">
|
|
<h4>2. Billing Address</h4>
|
|
<a href="#" @click.prevent="switchStep">Edit</a>
|
|
</div>
|
|
<p v-html="billing_address_preview"></p>
|
|
|
|
<div class="d-flex justify-content-between">
|
|
<h4>3. Shipping Address</h4>
|
|
<a href="#" @click.prevent="switchStep">Edit</a>
|
|
</div>
|
|
<p v-html="shipping_address_preview"></p>
|
|
|
|
<h4>4. Payment Information</h4>
|
|
<p>Your payment method won't be charged until after you've spoken to one of our sales representivites.</p>
|
|
|
|
<p class="form-row my-field-class orm-row-wide" id="card_number_field" data-priority=""><label for="card_number" class="">Credit Card <span class="optional">(optional)</span></label><span class="woocommerce-input-wrapper"><cleave v-model="card_number" type="tel" v-model="form.cardNumber" class="form-control" :options="options.creditCard" type="number" class="input-text" name="card_number" id="card_number" placeholder="" ></span></p>
|
|
<span class="cc_type"></span>
|
|
|
|
<p class="form-row my-field-class orm-row-wide" id="expiration_month_field" data-priority=""><label for="expiration_month" class="">Expiration Month <span class="optional">(optional)</span></label><span class="woocommerce-input-wrapper"><input type="number" class="input-text " name="expiration_month" id="expiration_month" placeholder="" value="" v-model="expiration_month" min="1" max="12" step="1" /></span></p>
|
|
|
|
|
|
<p class="form-row my-field-class orm-row-wide" id="expiration_year_field" data-priority=""><label for="expiration_year" class="">Expiration Year <span class="optional">(optional)</span></label><span class="woocommerce-input-wrapper"><input type="number" class="input-text " name="expiration_year" id="expiration_year" placeholder="" value="" v-model="expiration_year" min="2024" max="2032" step="1" /></span></p>
|
|
|
|
<div class="d-flex mt-3">
|
|
<input class="mt-2 me-2" type="checkbox" v-model="i_agree" />
|
|
<p>I confirm that I have read and agree with the <a href="/terms-of-use/" target="_blank">terms of use</a> associated with placing this order. Please read our <a href="/privacy-policy/" target="_blank">privacy policy</a> form for more information.</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="col-2">
|
|
<div class="d-flex ms-5">
|
|
<?php echo generateCartSummary(false); ?>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<?php do_action('woocommerce_checkout_after_customer_details'); ?>
|
|
|
|
<?php endif; ?>
|
|
|
|
<?php do_action('woocommerce_checkout_before_order_review_heading'); ?>
|
|
|
|
<h3 id="order_review_heading"><?php esc_html_e('Your order', 'woocommerce'); ?></h3>
|
|
|
|
<?php do_action('woocommerce_checkout_before_order_review'); ?>
|
|
|
|
<div id="order_review" class="woocommerce-checkout-review-order" style="position: relative;">
|
|
<div v-show="!canCheckOut" style="width: 100%; height: 100%; background: white; z-index: 1; position: absolute; opacity: 0.75;"></div>
|
|
|
|
<?php do_action('woocommerce_checkout_order_review'); ?>
|
|
</div>
|
|
|
|
<?php do_action('woocommerce_checkout_after_order_review'); ?>
|
|
|
|
</form>
|
|
</div>
|
|
|
|
<?php do_action('woocommerce_after_checkout_form', $checkout); ?>
|
|
|
|
|
|
<style>
|
|
|
|
#billing_country_field {
|
|
display: none;
|
|
}
|
|
#place_order {
|
|
border: none;
|
|
padding: 8px 20px;
|
|
background-color: #F5AD23 !important;
|
|
color: #fff !important;
|
|
font-size: 25px;
|
|
font-weight: 600;
|
|
text-decoration: none;
|
|
box-sizing: border-box;
|
|
display: inline-block;
|
|
line-height: 36px;
|
|
}
|
|
.woocommerce-billing-fields > h3 {
|
|
/* hide the billing details headline */
|
|
display: none;
|
|
visibility: hidden;
|
|
}
|
|
|
|
body.checkout-step-1 #order_review, body.checkout-step-1 #order_review_heading {
|
|
visibility: hidden;
|
|
display: none;
|
|
}
|
|
|
|
span.woocommerce-input-wrapper {
|
|
display: flex;
|
|
align-items: center;
|
|
}
|
|
span.woocommerce-input-wrapper label {
|
|
padding: 0 20px 0 5px;
|
|
}
|
|
tr.woocommerce-shipping-totals {
|
|
display: none;
|
|
visibility: hidden;
|
|
}
|
|
span.optional {
|
|
display: none;
|
|
visibility: hidden;
|
|
}
|
|
#order_review_heading, .woocommerce table.shop_table {
|
|
display: none;
|
|
visibility: hidden;
|
|
}
|
|
.cc_type {
|
|
float: right;
|
|
top: -40px;
|
|
position: relative;
|
|
right: 15px;
|
|
}
|
|
</style>
|
|
|
|
|
|
<script src="https://cdn.jsdelivr.net/npm/cleave.js@1"></script>
|
|
<script src="https://unpkg.com/vue@3.2/dist/vue.global.prod.js"></script>
|
|
<script src="https://cdn.jsdelivr.net/npm/vue-cleave-component@3"></script>
|
|
|
|
<script type="module">
|
|
|
|
// import { createApp } from 'vue'
|
|
|
|
var cctype = null;
|
|
|
|
const app = Vue.createApp({
|
|
data() {
|
|
return {
|
|
step: "",
|
|
subscriber_first_name: "",
|
|
subscriber_last_name: "",
|
|
subscriber_birthdate: "1950-01-01",
|
|
subscriber_address_1: "",
|
|
subscriber_address_2: "",
|
|
subscriber_zip: "",
|
|
subscriber_city: "",
|
|
subscriber_state: "",
|
|
subscriber_email: "",
|
|
subscriber_phone: "",
|
|
show_caregiver_form: false,
|
|
show_caregiver_form_checkbox: false,
|
|
caregiver_relation: "",
|
|
caregiver_first_name: "",
|
|
caregiver_last_name: "",
|
|
caregiver_email: "",
|
|
caregiver_phone: "",
|
|
card_number: "",
|
|
expiration_month: "",
|
|
expiration_year: "",
|
|
i_agree: false,
|
|
shipToADifferentAddress: true,
|
|
billing_address_preview: "",
|
|
shipping_address_preview: "",
|
|
SESSpromoid: "",
|
|
SESSpromotion_description: "",
|
|
SESScoupon_code: "",
|
|
allJQueryFieldsAreGood: false,
|
|
appliedCoupons: "",
|
|
form: {
|
|
cardNumber: null,
|
|
date: null,
|
|
},
|
|
options: {
|
|
creditCard: {
|
|
creditCard: true,
|
|
delimiter: '',
|
|
onCreditCardTypeChanged: function(type) {
|
|
console.log("onCreditCardTypeChanged", type);
|
|
if(type=="visa" ){
|
|
cctype = "Visa";
|
|
} else if (type=="mastercard") {
|
|
cctype = "MasterCard";
|
|
} else if (type=="amex") {
|
|
cctype = "American Express";
|
|
} else if (type=="discover") {
|
|
cctype = "Discover";
|
|
}
|
|
document.querySelector('.cc_type').innerHTML = '<input type="hidden" name="creditcard_type" id="creditcard_type" value="'+cctype+'"><img aria-hidden="true" src="/wp-content/themes/medicalalert/images/' + type +'.png" style="width: 50px;">';
|
|
}
|
|
},
|
|
date: {
|
|
date: true,
|
|
datePattern: ['d', 'm', 'Y'],
|
|
delimiter: '/',
|
|
},
|
|
}
|
|
}
|
|
},
|
|
|
|
computed: {
|
|
subscriber_address_preview: function() {
|
|
var output = this.subscriber_first_name + " " + this.subscriber_last_name + "<br />" + this.subscriber_address_1;
|
|
if (this.subscriber_address_2) {
|
|
output = output + "<br />" + this.subscriber_address_2;
|
|
}
|
|
output = output + "<br />" + this.subscriber_city + ", " + this.subscriber_state + " " + this.subscriber_zip;
|
|
if (this.subscriber_phone) {
|
|
output = output + "<br />" + this.subscriber_phone;
|
|
}
|
|
if (this.subscriber_email) {
|
|
output = output + "<br />" + this.subscriber_email;
|
|
}
|
|
|
|
return output;
|
|
},
|
|
can_proceed_to_step_two: function() {
|
|
var requiredFields = [
|
|
"subscriber_first_name",
|
|
"subscriber_last_name",
|
|
"subscriber_address_1",
|
|
"subscriber_city",
|
|
"subscriber_state",
|
|
"subscriber_zip",
|
|
];
|
|
for (var i = 0; i < requiredFields.length; i++) {
|
|
var key = requiredFields[i];
|
|
|
|
if (!this[key]) {
|
|
return false;
|
|
}
|
|
}
|
|
|
|
return this.allJQueryFieldsAreGood;
|
|
},
|
|
canCheckOut: function() {
|
|
if (this.card_number.length == 0) {
|
|
return false;
|
|
}
|
|
if (this.expiration_month.length == 0) {
|
|
return false;
|
|
}
|
|
if (this.expiration_year.length == 0) {
|
|
return false;
|
|
}
|
|
return this.i_agree;
|
|
}
|
|
},
|
|
methods: {
|
|
checkAllJQueryFieldsAreGood: function() {
|
|
var fieldIDs = [
|
|
"billing_first_name",
|
|
"billing_last_name",
|
|
"billing_address_1",
|
|
"billing_city",
|
|
"billing_postcode",
|
|
"billing_phone",
|
|
"billing_email"
|
|
];
|
|
|
|
for (var i = 0; i < fieldIDs.length; i++) {
|
|
var id = fieldIDs[i];
|
|
|
|
if ($("#"+id).val().length === 0) {
|
|
this.allJQueryFieldsAreGood = false;
|
|
return;
|
|
}
|
|
}
|
|
this.allJQueryFieldsAreGood = true;
|
|
},
|
|
getBillingFields: function() {
|
|
var output = $("#billing_first_name").val() + " " + $("#billing_last_name").val() + "<br />";
|
|
if ($("#billing_company").val()) {
|
|
output += $("#billing_company").val() + "<br />";
|
|
}
|
|
output += $("#billing_address_1").val() + "<br />";
|
|
if ($("#billing_address_2").val()) {
|
|
output += $("#billing_address_2").val() + "<br />";
|
|
}
|
|
output += $("#billing_city").val() + ", " + $("#billing_state").val() + "<br />";
|
|
if ($("#billing_phone").val()) {
|
|
output += $("#billing_phone").val() + "<br />";
|
|
}
|
|
if ($("#billing_email").val()) {
|
|
output += $("#billing_email").val() + "<br />";
|
|
}
|
|
this.billing_address_preview = output;
|
|
},
|
|
getShippingFields: function() {
|
|
if (!this.shipToADifferentAddress) {
|
|
this.shipping_address_preview = this.billing_address_preview;
|
|
return;
|
|
}
|
|
|
|
var output = $("#shipping_first_name").val() + " " + $("#shipping_last_name").val() + "<br />";
|
|
if ($("#shipping_company").val()) {
|
|
output += $("#shipping_company").val() + "<br />";
|
|
}
|
|
output += $("#shipping_address_1").val() + "<br />";
|
|
if ($("#shipping_address_2").val()) {
|
|
output += $("#shipping_address_2").val() + "<br />";
|
|
}
|
|
output += $("#shipping_city").val() + ", " + $("#shipping_state").val() + " " + $("#shipping_postcode").val() + "<br />";
|
|
output += $("#select2-shipping_country-container").text() + "<br />";
|
|
this.shipping_address_preview = output;
|
|
},
|
|
switchStep: function() {
|
|
this.checkAllJQueryFieldsAreGood();
|
|
|
|
if (this.step === "step-1") {
|
|
if (this.can_proceed_to_step_two) {
|
|
this.step = "step-2";
|
|
} else {
|
|
// validation failed... what should we do?
|
|
}
|
|
} else {
|
|
this.step = "step-1";
|
|
}
|
|
|
|
// internal vue tracking for the "ship to a differet address?" checkbox
|
|
this.shipToADifferentAddress = $("#ship-to-different-address-checkbox").is(":checked");
|
|
this.getBillingFields();
|
|
this.getShippingFields();
|
|
|
|
setTimeout(function() {
|
|
// scrolling to top...
|
|
$(window).scrollTop($("h1").offset().top);
|
|
}, 100);
|
|
}
|
|
},
|
|
watch: {
|
|
step: function() {
|
|
console.log(this.step);
|
|
if (this.step === 'step-1') {
|
|
$("body").addClass("checkout-step-1");
|
|
$("body").removeClass("checkout-step-2");
|
|
} else {
|
|
$("body").addClass("checkout-step-2");
|
|
$("body").removeClass("checkout-step-1");
|
|
}
|
|
},
|
|
|
|
},
|
|
mounted: function() {
|
|
this.step = "step-1";
|
|
this.SESSpromoid = "<?= $_SESSION["SESSpromoid"]; ?>";
|
|
this.SESSpromotion_description = "<?= $_SESSION["SESSpromotion_description"]; ?>";
|
|
this.SESScoupon_code = "<?= $_SESSION["SESScoupon_code"]; ?>";
|
|
var self = this;
|
|
|
|
}
|
|
})
|
|
|
|
app.use(VueCleave);
|
|
|
|
app.mount('#v-app');
|
|
</script>
|
|
|
|
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.13/js/select2.min.js"></script>
|
|
<script>
|
|
function copySubscriberAddress() {
|
|
var subscriberFirstName = document.getElementById("subscriber_first_name").value;
|
|
var subscriberLastName = document.getElementById("subscriber_last_name").value;
|
|
var subscriberAddress1 = document.getElementById("subscriber_address_1").value;
|
|
var subscriberAddress2 = document.getElementById("subscriber_address_2").value;
|
|
var subscriberCity = document.getElementById("subscriber_city").value;
|
|
var subscriberState = document.getElementById("subscriber_state").value;
|
|
var subscriberZip = document.getElementById("subscriber_zip").value;
|
|
var subscriberEmail = document.getElementById("subscriber_email").value;
|
|
var subscriberPhone = document.getElementById("subscriber_phone").value;
|
|
var billingFirstName = document.getElementById("billing_first_name");
|
|
var billingLastName = document.getElementById("billing_last_name");
|
|
var billingAddress1 = document.getElementById("billing_address_1");
|
|
var billingAddress2 = document.getElementById("billing_address_2");
|
|
var billingCity = document.getElementById("billing_city");
|
|
var billingState = document.getElementById("billing_state");
|
|
var billingZip = document.getElementById("billing_postcode");
|
|
var billingEmail = document.getElementById("billing_email");
|
|
var billingPhone = document.getElementById("billing_phone");
|
|
|
|
if (document.getElementById("sameAsSubscriber").checked) {
|
|
billingFirstName.value = subscriberFirstName;
|
|
billingLastName.value = subscriberLastName;
|
|
billingAddress1.value = subscriberAddress1;
|
|
billingAddress2.value = subscriberAddress2;
|
|
billingCity.value = subscriberCity;
|
|
billingState.value = subscriberState;
|
|
billingZip.value = subscriberZip;
|
|
billingEmail.value = subscriberEmail;
|
|
billingPhone.value = subscriberPhone;
|
|
|
|
$('#billing_state').val(subscriberState).trigger('change');
|
|
} else {
|
|
billingFirstName.value = "";
|
|
billingLastName.value = "";
|
|
billingAddress1.value = "";
|
|
billingAddress2.value = "";
|
|
billingCity.value = "";
|
|
billingState.value = "";
|
|
billingZip.value = "";
|
|
billingEmail.value = "";
|
|
billingPhone.value = "";
|
|
|
|
$('#billing_state').val('').trigger('change');
|
|
}
|
|
}
|
|
|
|
document.addEventListener("DOMContentLoaded", function() {
|
|
|
|
$('#billing_state').select2();
|
|
|
|
document.getElementById("sameAsSubscriber").addEventListener("change", copySubscriberAddress);
|
|
});
|
|
</script>
|