3

I am working on an e-commerce website, I want to display a Javascript dialogue box with two options "Go to Cart" & "Continue Shopping", If user clicks on first option control will redirect to Cart page and if user chooses second one it will go to Home page.

I have an option of using javascript's Confirm() function but I can not change its options to "Add to cart" and "Continue Shopping"

How can I display such a dialog?

Cœur
  • 37,241
  • 25
  • 195
  • 267
Saqib A. Azhar
  • 994
  • 1
  • 15
  • 27
  • 1
    Such a dialog is usually called "modal", you can use a library like https://github.com/mkay581/modal-js or https://sweetalert.js.org/ or implement it yourself. – yuriy636 Nov 08 '17 at 11:46
  • Possible duplicate of [How to code a JavaScript modal popup (to replace Ajax)?](https://stackoverflow.com/questions/288867/how-to-code-a-javascript-modal-popup-to-replace-ajax) – Xpleria Nov 08 '17 at 12:24

4 Answers4

2

You can not customize confirm dialogue box, but there are several libraries for alerts,

Following are some well known libraries for such purpose

  • Bootbox
  • AmaranJS
  • Notie.js
  • Sweet Alert
  • Alertify.js
1

The best option to you is to use sweet alert, I'm using it in some projects and it's really easy and looks good. Try not to use javascript's confirm... is not very professional

https://limonte.github.io/sweetalert2/

you can download it from there and see some examples. For your problem, sweet alert can do something like this:

swal({  title: 'Are you sure?',  text: "You won't be able to revert this!",  type: 'warning',  showCancelButton: true,  confirmButtonColor: '#3085d6',  cancelButtonColor: '#5bc0de',  confirmButtonText: 'Go to cart',  cancelButtonText: 'Continue shopping!',  confirmButtonClass: 'btn btn-success',  cancelButtonClass: 'btn btn-info',  buttonsStyling: false}).then(function () {//redirect to the cart pagewindow.location.assign("/thecartpage.yourextension");}, function (dismiss) {  // dismiss can be 'cancel', 'overlay',  // 'close', and 'timer'... use cancel to this.  if (dismiss === 'cancel') {//Here you close the modal    swal().close();}})
Federico Martínez Pignataro
  • 11
  • 2
1

Try Vex plugin for alerts its one of the best UI elements styling and customizing option

http://github.hubspot.com/vex/docs/welcome/

Faiza Rehman
  • 19
  • 2
1

Try Notie.js Its a clean and simple notification, input, and selection suite for javascript with no dependencies.

You can get it from here

Square Glasses
  • 11
  • 2