Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
define([
"jquery",
"backstretch",
"plugins/hero",
"plugins/panel",
"validate",
"additional-validation",
"creditcard-validator"
], function($, Backstretch, Hero, Panel, validate, additionalValidation, creditCardValidator){
/**
* The constructor of our template, mostly just initing some values
*/
var CheckoutTemplate = function(){
// Init'ing some values for our top selection criteria
this.locationName = false;
this.distributionType = false;
// has the intial scroll happened after we went through that form?
this.hasPerformedInitialScroll = false;
// caching some vars
this.$loader = $(".submit-button-container").find("span");
};
/**
* Getting the ball rolling and initing a few different things
* @return {void}
*/
CheckoutTemplate.prototype.init = function(){
var self = this;
// init heros
var hero = new Hero();
hero.init();
//init panel
var panel = new Panel(".crustomers-container");
panel.init();
// init various dropdowns
$(".hidden-dropdown").on({
change: function(){
var val = $(this).val();
var text = $("option[value='"+val+"']").html();
$(this).parent().find(".select-text").empty().html(text);
}
});
// init our Distribution and Delviery form stuff
this.initLocationAndDelivery();
// init card icon toggling
$('#payment_card_no').validateCreditCard(function(result){
$(".cc.is-active").removeClass("is-active");
if(result.card_type !== null){
self.activateCardIcon(result.card_type);
}
});
// init the actual form
this.initForm();
};
/**
* the toggling of our credit card stuff
* @param {string} cardType The card that was matched
* @return {void}
*/
CheckoutTemplate.prototype.activateCardIcon = function(cardType){
switch(cardType.name){
case "visa":
$(".cc.visa").addClass("is-active");
break;
case "mastercard":
$(".cc.mastercard").addClass("is-active");
break;
case "discover":
$(".cc.discover").addClass("is-active");
break;
case "amex":
$(".cc.amex").addClass("is-active");
break;
default:
break;
}
}
CheckoutTemplate.prototype.initForm = function(){
var self = this;
// Hide shipping address fields
if( $(".address-secondary").is(':checked')) {
$(".delivery-form").hide();
}
// Toggle shippping address
$(".address-secondary").click(function() {
if( $(this).is(':checked')) {
$(".delivery-form").hide();
} else {
$(".delivery-form").show();
}
});
// Getting Stripe Script
console.log(window.environment);
$.getScript('https://js.stripe.com/v2/', function() {
if(window.environment === "production"){
Stripe.setPublishableKey("pk_live_uWE4IhljgsTvB15vabn8HHUu");
}else{
Stripe.setPublishableKey("pk_test_nsrjxpFtdvynGlEMZYMCrRES");
}
});
// Our huge form validation
$("#store-checkout-form").validate({
debug: true,
submitHandler: function(form){
if(!self.formSubmitted){
self.disableForm();
self.createStripeToken(form);
}
return false;
},
errorPlacement: function(error, element) {
error.insertAfter(element);
},
rules: {
billing_name: {
required: true
},
order_email: {
required: true,
email: true
},
billing_address1: {
required: true
},
billing_address2: {
required: false
},
billing_city: {
required: true
},
billing_state: {
required: true
},
billing_postcode: {
required: true,
zipcodeUS: true
},
shipping_name: {
required: function(){
$("#shipping_same_as_billing").is(":checked");
}
},
shipping_address1: {
required: function(){
$("#shipping_same_as_billing").is(":checked");
}
},
shipping_address2: {
required: function(){
return false;
}
},
shipping_city: {
required: function(){
$("#shipping_same_as_billing").is(":checked");
}
},
shipping_state: {
required: function(){
$("#shipping_same_as_billing").is(":checked");
}
},
shipping_postcode: {
required: function(){
$("#shipping_same_as_billing").is(":checked");
},
zipcodeUS: true
},
payment_name: {
required: true
},
payment_card_no: {
required: true,
creditcard: true
},
payment_exp_month: {
required: true,
number: true
},
payment_exp_year: {
required: true,
number: true
},
payment_card_csc: {
required: true,
number: true
}
}
});
};
/**
* Init'ing the top form item animations
* @return {void} [description]
*/
CheckoutTemplate.prototype.initLocationAndDelivery = function(){
var self = this;
$(".pickup-delivery-button").on({
click: function(){
if($(this).attr("id").indexOf("pickup") > -1){
self.setDistribution("pickup");
}else{
self.setDistribution("delivery");
}
$(".pickup-delivery-row-container").toggleClass("showing-location");
}
});
$(".location-button").on({
click: function(){
var $el = $(this);
if($el.hasClass("is-active")){
return;
}
$(".location-button").removeClass("is-active");
$el.addClass("is-active");
if($el.attr("id").indexOf("wrigleyville") > -1){
self.setLocation("wrigleyville");
}else{
self.setLocation("six corners");
}
}
});
$("#back-to-delivery-method").on({
click: function(){
$(".pickup-delivery-row-container").toggleClass("showing-location");
}
})
};
/**
* Creating our stripe token for processing
* @param {htmlObj} form form html el
* @return {void}
*/
CheckoutTemplate.prototype.createStripeToken = function(form){
var self = this;
var fields = {};
var fieldsArr = $(form).serializeArray();
$.each(fieldsArr, function(i, field){
fields[field["name"]] = field["value"];
});
Stripe.createToken({
name: fields["payment_name"],
number: fields["payment_card_no"],
cvc: fields["payment_card_csc"],
exp_month: fields["payment_exp_month"],
exp_year: fields["payment_exp_year"]
}, function(status, response){
if(!response.error){
// prep for submission, and submit
self.hideErrorMessage();
self.clearPaymentInputNames();
$("#payment_token").val(response["id"]);
console.log(response);
form.submit();
}else{
// alert user of error
self.showErrorMessage(response.error.message);
self.enableForm();
}
});
};
/**
* Clearing out payment fields before we submit the form, so we don't submit them
* in the form
* @return {void}
*/
CheckoutTemplate.prototype.clearPaymentInputNames = function(){
$("#payment_name").attr("name", "");
$("#payment_card_no").attr("name", "");
$("#payment_card_csc").attr("name", "");
$("#payment_exp_year").attr("name", "");
$("#payment_exp_month").attr("name", "");
};
/**
* Showing a payment error message -- returned from stripe when creating a token
* @param {message} message The message to be shown
* @return {void}
*/
CheckoutTemplate.prototype.showErrorMessage = function(message){
$(".form-error-message").show();
$(".form-error-message").find("p").html(message);
};
/**
* Hiding the form's big error message up top
*/
CheckoutTemplate.prototype.hideErrorMessage = function(){
$(".form-error-message").hide();
};
/**
* Setting the type of distribution we are using
* @param {string} type
*/
CheckoutTemplate.prototype.setDistribution = function(type){
this.distributionType = type;
$("#location-input").val(type);
this.setCaption();
};
/**
* Setting our location
* @param {string} locationName
*/
CheckoutTemplate.prototype.setLocation = function(locationName){
this.locationName = locationName;
$("#location-input").val(locationName);
this.setCaption();
if(this.hasPerformedInitialScroll === false){
this.hasPerformedInitialScroll = true;
var top = $(".payment-title").offset().top - 50;
$("html, body").animate({ scrollTop: top });
}
};
/**
* Disabling the form after a user has submitted
* @return {void}
*/
CheckoutTemplate.prototype.disableForm = function(){
this.$loader.show();
this.formSubmitted = true;
};
/**
* Enabling the form
* @return {void}
*/
CheckoutTemplate.prototype.enableForm = function(){
this.$loader.hide();
this.formSubmitted = false;
};
/**
* Setting the Distribution and Loation caption above the order review section
* of the payment form
*/
CheckoutTemplate.prototype.setCaption = function(){
var caption = "";
if(this.distributionType === "delivery"){
caption += "I'm having my order delivered ";
}else{
caption += "I'm picking up my order ";
}
if(this.locationName){
if(this.locationName.toLowerCase() === "wrigleyville"){
caption += "from Dimo's Wrigleyville."
}else if(this.locationName.toLowerCase() === "six corners"){
caption += "from Dimo's Six Corners."
}
}
$(".delivery-caption").html(caption);
};
return CheckoutTemplate;
});
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment