Skip to content

Commit f35e6ee

Browse files
sacr3dc0wsacr3dc0w
sacr3dc0w
authored and
sacr3dc0w
committed
sweetalert2 to replace JavaScript alert/confirmations
1 parent d9a05d8 commit f35e6ee

19 files changed

+274
-28
lines changed

‎CHANGELOG.md

+1
Original file line numberDiff line numberDiff line change
@@ -5,6 +5,7 @@
55
- Use different id for gift cert in cart page [#1044](https://github.com/bigcommerce/cornerstone/pull/1044)
66
- Restore product image carousel [#1028](https://github.com/bigcommerce/cornerstone/pull/1028)
77
- Reduce theme bundle size by using minified libraries where applicable [#1039](https://github.com/bigcommerce/cornerstone/pull/1039)
8+
- Replace JavaScript alert/confirmations with sweetalert2 library [#1035](https://github.com/bigcommerce/cornerstone/pull/1035)
89

910
## 1.9.0 (2017-07-18)
1011
- Product Images were obscuring product details on smaller viewports [#1019](https://github.com/bigcommerce/cornerstone/pull/1019)

‎assets/js/theme/account.js

+9-2
Original file line numberDiff line numberDiff line change
@@ -5,6 +5,7 @@ import Wishlist from './wishlist';
55
import validation from './common/form-validation';
66
import stateCountry from './common/state-country';
77
import { classifyForm, Validators, insertStateHiddenField } from './common/form-utils';
8+
import swal from 'sweetalert2';
89

910
export default class Account extends PageManager {
1011
constructor() {
@@ -105,7 +106,10 @@ export default class Account extends PageManager {
105106

106107
if (!submitForm) {
107108
event.preventDefault();
108-
alert(this.context.selectItem);
109+
swal({
110+
text: this.context.selectItem,
111+
type: 'error',
112+
});
109113
}
110114
});
111115
}
@@ -179,7 +183,10 @@ export default class Account extends PageManager {
179183
return true;
180184
}
181185

182-
alert(errorMessage);
186+
swal({
187+
text: errorMessage,
188+
type: 'error',
189+
});
183190

184191
return event.preventDefault();
185192
});

‎assets/js/theme/cart.js

+46-20
Original file line numberDiff line numberDiff line change
@@ -5,6 +5,7 @@ import giftCertCheck from './common/gift-certificate-validator';
55
import utils from '@bigcommerce/stencil-utils';
66
import ShippingEstimator from './cart/shipping-estimator';
77
import { defaultModal } from './global/modal';
8+
import swal from 'sweetalert2';
89

910
export default class Cart extends PageManager {
1011
loaded(next) {
@@ -31,9 +32,15 @@ export default class Cart extends PageManager {
3132

3233
// Does not quality for min/max quantity
3334
if (newQty < minQty) {
34-
return alert(minError);
35+
return swal({
36+
text: minError,
37+
type: 'error',
38+
});
3539
} else if (maxQty > 0 && newQty > maxQty) {
36-
return alert(maxError);
40+
return swal({
41+
text: maxError,
42+
type: 'error',
43+
});
3744
}
3845

3946
this.$overlay.show();
@@ -48,7 +55,10 @@ export default class Cart extends PageManager {
4855
this.refreshContent(remove);
4956
} else {
5057
$el.val(oldQty);
51-
alert(response.data.errors.join('\n'));
58+
swal({
59+
text: response.data.errors.join('\n'),
60+
type: 'error',
61+
});
5262
}
5363
});
5464
}
@@ -59,7 +69,10 @@ export default class Cart extends PageManager {
5969
if (response.data.status === 'succeed') {
6070
this.refreshContent(true);
6171
} else {
62-
alert(response.data.errors.join('\n'));
72+
swal({
73+
text: response.data.errors.join('\n'),
74+
type: 'error',
75+
});
6376
}
6477
});
6578
}
@@ -89,7 +102,10 @@ export default class Cart extends PageManager {
89102
const data = result.data || {};
90103

91104
if (err) {
92-
alert(err);
105+
swal({
106+
text: err,
107+
type: 'error',
108+
});
93109
return false;
94110
}
95111

@@ -162,18 +178,16 @@ export default class Cart extends PageManager {
162178

163179
$('.cart-remove', this.$cartContent).on('click', (event) => {
164180
const itemId = $(event.currentTarget).data('cart-itemid');
165-
const openTime = new Date();
166-
const result = confirm($(event.currentTarget).data('confirm-delete'));
167-
const delta = new Date() - openTime;
181+
const string = $(event.currentTarget).data('confirm-delete');
182+
swal({
183+
text: string,
184+
type: 'warning',
185+
showCancelButton: true,
186+
}).then(() => {
187+
// remove item from cart
188+
cartRemoveItem(itemId);
189+
});
168190
event.preventDefault();
169-
170-
// Delta workaround for Chrome's "prevent popup"
171-
if (!result && delta > 10) {
172-
return;
173-
}
174-
175-
// remove item from cart
176-
cartRemoveItem(itemId);
177191
});
178192

179193
$('[data-item-edit]', this.$cartContent).on('click', (event) => {
@@ -214,14 +228,20 @@ export default class Cart extends PageManager {
214228

215229
// Empty code
216230
if (!code) {
217-
return alert($codeInput.data('error'));
231+
return swal({
232+
text: $codeInput.data('error'),
233+
type: 'error',
234+
});
218235
}
219236

220237
utils.api.cart.applyCode(code, (err, response) => {
221238
if (response.data.status === 'success') {
222239
this.refreshContent();
223240
} else {
224-
alert(response.data.errors.join('\n'));
241+
swal({
242+
text: response.data.errors.join('\n'),
243+
type: 'error',
244+
});
225245
}
226246
});
227247
});
@@ -252,14 +272,20 @@ export default class Cart extends PageManager {
252272
event.preventDefault();
253273

254274
if (!giftCertCheck(code)) {
255-
return alert($certInput.data('error'));
275+
return swal({
276+
text: $certInput.data('error'),
277+
type: 'error',
278+
});
256279
}
257280

258281
utils.api.cart.applyGiftCertificate(code, (err, resp) => {
259282
if (resp.data.status === 'success') {
260283
this.refreshContent();
261284
} else {
262-
alert(resp.data.errors.join('\n'));
285+
swal({
286+
text: resp.data.errors.join('\n'),
287+
type: 'error',
288+
});
263289
}
264290
});
265291
});

‎assets/js/theme/cart/shipping-estimator.js

+5-1
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,7 @@ import stateCountry from '../common/state-country';
33
import nod from '../common/nod';
44
import utils from '@bigcommerce/stencil-utils';
55
import { Validators } from '../common/form-utils';
6+
import swal from 'sweetalert2';
67

78
export default class ShippingEstimator {
89
constructor($element) {
@@ -100,7 +101,10 @@ export default class ShippingEstimator {
100101
// Requests the states for a country with AJAX
101102
stateCountry(this.$state, this.context, { useIdForStates: true }, (err, field) => {
102103
if (err) {
103-
alert(err);
104+
swal({
105+
text: err,
106+
type: 'error',
107+
});
104108

105109
throw new Error(err);
106110
}

‎assets/js/theme/common/product-details.js

+5-1
Original file line numberDiff line numberDiff line change
@@ -8,6 +8,7 @@ import 'foundation-sites/js/foundation/foundation.reveal';
88
import ImageGallery from '../product/image-gallery';
99
import modalFactory from '../global/modal';
1010
import _ from 'lodash';
11+
import swal from 'sweetalert2';
1112

1213
// We want to ensure that the events are bound to a single instance of the product details component
1314
let productSingleton = null;
@@ -228,7 +229,10 @@ export default class Product {
228229
const tmp = document.createElement('DIV');
229230
tmp.innerHTML = errorMessage;
230231

231-
return alert(tmp.textContent || tmp.innerText);
232+
return swal({
233+
text: tmp.textContent || tmp.innerText,
234+
type: 'error',
235+
});
232236
}
233237

234238
// Open preview modal and update content

‎assets/js/theme/common/state-country.js

+5-1
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,7 @@ import $ from 'jquery';
22
import utils from '@bigcommerce/stencil-utils';
33
import _ from 'lodash';
44
import { insertStateHiddenField } from './form-utils';
5+
import swal from 'sweetalert2';
56

67
/**
78
* If there are no options from bcapp, a text field will be sent. This will create a select element to hold options after the remote request.
@@ -129,7 +130,10 @@ export default function (stateElement, context = {}, options, callback) {
129130

130131
utils.api.country.getByName(countryName, (err, response) => {
131132
if (err) {
132-
alert(context.state_error);
133+
swal({
134+
text: context.state_error,
135+
type: 'error',
136+
});
133137

134138
return callback(err);
135139
}

‎assets/js/theme/compare.js

+5-1
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
11
import PageManager from './page-manager';
22
import $ from 'jquery';
3+
import swal from 'sweetalert2';
34

45
export default class Compare extends PageManager {
56

@@ -8,7 +9,10 @@ export default class Compare extends PageManager {
89

910
$('body').on('click', '[data-comparison-remove]', (event) => {
1011
if (this.context.comparisons.length <= 2) {
11-
alert(message);
12+
swal({
13+
text: message,
14+
type: 'error',
15+
});
1216
event.preventDefault();
1317
}
1418
});

‎assets/js/theme/global.js

+2
Original file line numberDiff line numberDiff line change
@@ -16,6 +16,7 @@ import carousel from './common/carousel';
1616
import 'lazysizes';
1717
import loadingProgressBar from './global/loading-progress-bar';
1818
import FastClick from 'fastclick';
19+
import sweetAlert from './global/sweet-alert';
1920

2021
function fastClick(element) {
2122
return new FastClick(element);
@@ -41,6 +42,7 @@ export default class Global extends PageManager {
4142
privacyCookieNotification();
4243
maintenanceMode(this.context.maintenanceMode);
4344
loadingProgressBar();
45+
sweetAlert();
4446
next();
4547
}
4648
}

‎assets/js/theme/global/compare-products.js

+9-2
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
11
import $ from 'jquery';
22
import _ from 'lodash';
3+
import swal from 'sweetalert2';
34

45
function decrementCounter(counter, item) {
56
const index = counter.indexOf(item);
@@ -57,7 +58,10 @@ export default function (urlContext) {
5758
const productsToCompare = $this.find('input[name="products\[\]"]:checked');
5859

5960
if (productsToCompare.length <= 1) {
60-
alert('You must select at least two products to compare');
61+
swal({
62+
text: 'You must select at least two products to compare',
63+
type: 'error',
64+
});
6165
event.preventDefault();
6266
}
6367
});
@@ -66,7 +70,10 @@ export default function (urlContext) {
6670
const $clickedCheckedInput = $('body').find('input[name="products\[\]"]:checked');
6771

6872
if ($clickedCheckedInput.length <= 1) {
69-
alert('You must select at least two products to compare');
73+
swal({
74+
text: 'You must select at least two products to compare',
75+
type: 'error',
76+
});
7077

7178
return false;
7279
}

‎assets/js/theme/global/sweet-alert.js

+10
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,10 @@
1+
import swal from 'sweetalert2';
2+
3+
export default function () {
4+
// Set defaults for sweetalert2 popup boxes
5+
swal.setDefaults({
6+
buttonsStyling: false,
7+
confirmButtonClass: 'button',
8+
cancelButtonClass: 'button',
9+
});
10+
}

‎assets/scss/components/_components.scss

+3
Original file line numberDiff line numberDiff line change
@@ -12,6 +12,9 @@
1212
// Pace Ajax loading progress bar
1313
@import "vendor/pace/component";
1414

15+
// SweetAlert2 replacement for JavaScript alert/confirmations
16+
@import "vendor/sweetalert2/component";
17+
1518

1619
// Foundation components
1720
// -----------------------------------------------------------------------------

‎assets/scss/components/vendor/sweetalert2/_component.scss

+9
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
1+
// =============================================================================
2+
// SWEETALERT2
3+
// =============================================================================
4+
5+
// Vendor SCSS
6+
@import "../../../../../node_modules/sweetalert2/src/sweetalert2";
7+
8+
// Compnent
9+
@import "sweetalert2";

0 commit comments

Comments
 (0)