Skip to content

Commit

Permalink
13 & 14 Improve Card UI
Browse files Browse the repository at this point in the history
  • Loading branch information
@codingforentrepreneurs
codingforentrepreneurs committed Oct 16, 2017
1 parent 1da80c2 commit c1a67d9
Show file tree
Hide file tree
Showing 5 changed files with 171 additions and 10 deletions.
3 changes: 1 addition & 2 deletions src/carts/urls.py
View file
Original file line number Diff line number Diff line change
Expand Up @@ -12,5 +12,4 @@
url(r'^checkout/success/$', checkout_done_view, name='success'),
url(r'^checkout/$', checkout_home, name='checkout'),
url(r'^update/$', cart_update, name='update'),
]

]
Binary file modified src/db.sqlite3
View file
Binary file not shown.
89 changes: 85 additions & 4 deletions src/static_my_proj/js/ecommerce.main.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -71,23 +71,99 @@ card.addEventListener('change', function(event) {
});

// Handle form submission
var form = document.getElementById('payment-form');
form.addEventListener('submit', function(event) {
// var form = document.getElementById('payment-form');
// form.addEventListener('submit', function(event) {
// event.preventDefault();
// // get the btn
// // display new btn ui
// var loadTime = 1500
// var errorHtml = "<i class='fa fa-warning'></i> An error occured"
// var errorClasses = "btn btn-danger disabled my-3"
// var loadingHtml = "<i class='fa fa-spin fa-spinner'></i> Loading..."
// var loadingClasses = "btn btn-success disabled my-3"

// stripe.createToken(card).then(function(result) {
// if (result.error) {
// // Inform the user if there was an error
// var errorElement = document.getElementById('card-errors');
// errorElement.textContent = result.error.message;
// } else {
// // Send the token to your server
// stripeTokenHandler(nextUrl, result.token);
// }
// });
// });

var form = $('#payment-form');
var btnLoad = form.find(".btn-load")
var btnLoadDefaultHtml = btnLoad.html()
var btnLoadDefaultClasses = btnLoad.attr("class")

form.on('submit', function(event) {
event.preventDefault();
// get the btn
// display new btn ui
var $this = $(this)
// btnLoad = $this.find('.btn-load')
btnLoad.blur()
var loadTime = 1500
var currentTimeout;
var errorHtml = "<i class='fa fa-warning'></i> An error occured"
var errorClasses = "btn btn-danger disabled my-3"
var loadingHtml = "<i class='fa fa-spin fa-spinner'></i> Loading..."
var loadingClasses = "btn btn-success disabled my-3"

stripe.createToken(card).then(function(result) {
if (result.error) {
// Inform the user if there was an error
var errorElement = document.getElementById('card-errors');
var errorElement = $('#card-errors');
errorElement.textContent = result.error.message;
currentTimeout = displayBtnStatus(
btnLoad,
errorHtml,
errorClasses,
1000,
currentTimeout
)


} else {
// Send the token to your server
currentTimeout = displayBtnStatus(
btnLoad,
loadingHtml,
loadingClasses,
10000,
currentTimeout
)

stripeTokenHandler(nextUrl, result.token);

}
});
});


function displayBtnStatus(element, newHtml, newClasses, loadTime, timeout){
// if (timeout){
// clearTimeout(timeout)
// }
if (!loadTime){
loadTime = 1500
}
//var defaultHtml = element.html()
//var defaultClasses = element.attr("class")
element.html(newHtml)
element.removeClass(btnLoadDefaultClasses)
element.addClass(newClasses)
return setTimeout(function(){
element.html(btnLoadDefaultHtml)
element.removeClass(newClasses)
element.addClass(btnLoadDefaultClasses)
}, loadTime)
}


function redirectToNext(nextPath, timeoffset) {
// body...
if (nextPath){
Expand Down Expand Up @@ -118,11 +194,16 @@ function stripeTokenHandler(nextUrl, token){
} else {
alert(succesMsg)
}
btnLoad.html(btnLoadDefaultHtml)
btnLoad.attr('class', btnLoadDefaultClasses)
redirectToNext(nextUrl, 1500)

},
error: function(error){
console.log(error)
// console.log(error)
$.alert({title: "An error occured", content:"Please try adding your card again."})
btnLoad.html(btnLoadDefaultHtml)
btnLoad.attr('class', btnLoadDefaultClasses)
}
})
}
Expand Down
2 changes: 1 addition & 1 deletion src/templates/base/js_templates.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -14,7 +14,7 @@
<div id="card-errors" role="alert"></div>
</div>

<button class='btn btn-primary my-3'>{{:btnTitle }}</button>
<button class='btn btn-primary my-3 btn-load'>{{:btnTitle }}</button>

</form>

Expand Down
87 changes: 84 additions & 3 deletions static_cdn/static_root/js/ecommerce.main.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -71,23 +71,99 @@ card.addEventListener('change', function(event) {
});

// Handle form submission
var form = document.getElementById('payment-form');
form.addEventListener('submit', function(event) {
// var form = document.getElementById('payment-form');
// form.addEventListener('submit', function(event) {
// event.preventDefault();
// // get the btn
// // display new btn ui
// var loadTime = 1500
// var errorHtml = "<i class='fa fa-warning'></i> An error occured"
// var errorClasses = "btn btn-danger disabled my-3"
// var loadingHtml = "<i class='fa fa-spin fa-spinner'></i> Loading..."
// var loadingClasses = "btn btn-success disabled my-3"

// stripe.createToken(card).then(function(result) {
// if (result.error) {
// // Inform the user if there was an error
// var errorElement = document.getElementById('card-errors');
// errorElement.textContent = result.error.message;
// } else {
// // Send the token to your server
// stripeTokenHandler(nextUrl, result.token);
// }
// });
// });

var form = $('#payment-form');
var btnLoad = form.find(".btn-load")
var btnLoadDefaultHtml = btnLoad.html()
var btnLoadDefaultClasses = btnLoad.attr("class")

form.on('submit', function(event) {
event.preventDefault();
// get the btn
// display new btn ui
var $this = $(this)
// btnLoad = $this.find('.btn-load')
btnLoad.blur()
var loadTime = 1500
var currentTimeout;
var errorHtml = "<i class='fa fa-warning'></i> An error occured"
var errorClasses = "btn btn-danger disabled my-3"
var loadingHtml = "<i class='fa fa-spin fa-spinner'></i> Loading..."
var loadingClasses = "btn btn-success disabled my-3"

stripe.createToken(card).then(function(result) {
if (result.error) {
// Inform the user if there was an error
var errorElement = document.getElementById('card-errors');
var errorElement = $('#card-errors');
errorElement.textContent = result.error.message;
currentTimeout = displayBtnStatus(
btnLoad,
errorHtml,
errorClasses,
1000,
currentTimeout
)


} else {
// Send the token to your server
currentTimeout = displayBtnStatus(
btnLoad,
loadingHtml,
loadingClasses,
1000,
currentTimeout
)

stripeTokenHandler(nextUrl, result.token);

}
});
});


function displayBtnStatus(element, newHtml, newClasses, loadTime, timeout){
// if (timeout){
// clearTimeout(timeout)
// }
if (!loadTime){
loadTime = 1500
}
//var defaultHtml = element.html()
//var defaultClasses = element.attr("class")
element.html(newHtml)
element.removeClass(btnLoadDefaultClasses)
element.addClass(newClasses)
return setTimeout(function(){
element.html(btnLoadDefaultHtml)
element.removeClass(newClasses)
element.addClass(btnLoadDefaultClasses)
}, loadTime)
}


function redirectToNext(nextPath, timeoffset) {
// body...
if (nextPath){
Expand Down Expand Up @@ -118,11 +194,16 @@ function stripeTokenHandler(nextUrl, token){
} else {
alert(succesMsg)
}
btnLoad.html(btnLoadDefaultHtml)
btnLoad.attr('class', btnLoadDefaultClasses)
redirectToNext(nextUrl, 1500)

},
error: function(error){
console.log(error)
$.alert({title: "An error occured", content:"Please try adding your card again."})
btnLoad.html(btnLoadDefaultHtml)
btnLoad.attr('class', btnLoadDefaultClasses)
}
})
}
Expand Down

0 comments on commit c1a67d9

Please sign in to comment.