Skip to content

Commit 6fc0ac6

Browse files
DennisGardingDennisGarding
committed
PT-13150 - Improve button rendering for Safari browser
1 parent 5db9f9a commit 6fc0ac6

8 files changed

+160
-73
lines changed

‎Resources/views/frontend/_public/src/js/jquery.button-config.js‎

Lines changed: 8 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -250,7 +250,14 @@
250250
*
251251
* @type string
252252
*/
253-
paypalErrorPage: ''
253+
paypalErrorPage: '',
254+
255+
/**
256+
* Interval for the PayPal object check
257+
*
258+
* @type number
259+
*/
260+
interval: 50
254261
};
255262
};
256263
})(jQuery);

‎Resources/views/frontend/_public/src/js/jquery.swag-paypal-unified-sepa.js‎

Lines changed: 18 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -37,6 +37,7 @@
3737

3838
init: function() {
3939
this.applyDataAttributes();
40+
this.buttonIsRendered = false;
4041

4142
this.createOrderFunction = $.createSwagPaymentPaypalCreateOrderFunction(this.opts.createOrderUrl, this);
4243
this.formValidityFunctions = $.createSwagPaymentPaypalFormValidityFunctions(
@@ -77,6 +78,7 @@
7778
var me = this,
7879
$head = $('head');
7980

81+
this.payPalObjectInterval = setInterval(this.payPalObjectCheck.bind(this), this.opts.interval);
8082
if (!$head.hasClass(this.opts.paypalScriptLoadedSelector)) {
8183
$.ajax({
8284
url: this.renderSdkUrl(),
@@ -88,12 +90,19 @@
8890
me.renderButton();
8991
}
9092
});
91-
} else {
92-
this.paypal = window.paypal;
93-
this.renderButton();
9493
}
9594
},
9695

96+
payPalObjectCheck: function () {
97+
if (window.paypal === undefined || window.paypal === null || typeof window.paypal.Buttons !== 'function') {
98+
return;
99+
}
100+
101+
clearInterval(this.payPalObjectInterval);
102+
this.paypal = window.paypal;
103+
this.renderButton();
104+
},
105+
97106
renderSdkUrl: function() {
98107
var params = {
99108
'client-id': this.opts.clientId,
@@ -117,6 +126,12 @@
117126
},
118127

119128
renderButton: function() {
129+
if (this.buttonIsRendered) {
130+
return;
131+
}
132+
133+
this.buttonIsRendered = true;
134+
120135
var buttonConfig = this.getButtonConfig(),
121136
el = this.$el.get(0);
122137

‎Resources/views/frontend/_public/src/js/jquery.swag-paypal-unified.advanced-credit-debit-card.js‎

Lines changed: 17 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -113,6 +113,7 @@
113113

114114
init: function() {
115115
this.applyDataAttributes();
116+
this.fieldsAreRendered = false;
116117

117118
this.$submitBtn = $(this.opts.confirmFormSubmitButtonSelector);
118119
this.$submitBtn.prop('disabled', true);
@@ -126,6 +127,7 @@
126127
insertScript: function() {
127128
var $head = $('head');
128129

130+
this.payPalObjectInterval = setInterval(this.payPalObjectCheck.bind(this), this.opts.interval);
129131
if (!$head.hasClass(this.opts.paypalScriptLoadedSelector)) {
130132
var payPalScript = document.createElement('script');
131133

@@ -137,11 +139,18 @@
137139

138140
document.head.appendChild(payPalScript);
139141
$head.addClass(this.opts.paypalScriptLoadedSelector);
140-
} else {
141-
this.renderHostedFields();
142142
}
143143
},
144144

145+
payPalObjectCheck: function () {
146+
if (window.paypal === undefined || window.paypal === null || typeof window.paypal.Buttons !== 'function') {
147+
return;
148+
}
149+
150+
clearInterval(this.payPalObjectInterval);
151+
this.renderHostedFields();
152+
},
153+
145154
registerEventListeners: function() {
146155
$.subscribe('plugin/swPreloaderButton/onShowPreloader', this.resetPreloaderPlugin.bind(this, false));
147156
$.subscribe('plugin/swagPayPalUnifiedAdvancedCreditDebitCard/captureOrderFinished', this.resetPreloaderPlugin.bind(this, true));
@@ -199,8 +208,13 @@
199208
return;
200209
}
201210

202-
var me = this;
211+
if (this.fieldsAreRendered) {
212+
return;
213+
}
203214

215+
this.fieldsAreRendered = true;
216+
217+
var me = this;
204218
paypal.HostedFields.render({
205219
createOrder: me.createPaypalOrder.bind(me),
206220
fields: me.getFieldsConfig()

‎Resources/views/frontend/_public/src/js/jquery.swag-paypal-unified.express-checkout-button.js‎

Lines changed: 44 additions & 47 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
;(function($, window) {
1+
;(function ($, window) {
22
'use strict';
33

44
$.plugin('swagPayPalUnifiedExpressCheckoutButton', {
@@ -123,9 +123,10 @@
123123
*/
124124
expressCheckoutButton: null,
125125

126-
init: function() {
126+
init: function () {
127127
this.applyDataAttributes();
128128
this.applyOrderNumberDataAttribute();
129+
this.buttonIsRendered = false;
129130

130131
if (this.isProductExcluded()) {
131132
return;
@@ -146,15 +147,15 @@
146147
}
147148
},
148149

149-
applyOrderNumberDataAttribute: function() {
150+
applyOrderNumberDataAttribute: function () {
150151
this.opts.productNumber = this.$el.attr('data-productNumber');
151152
},
152153

153154
/**
154155
* Will be triggered when the selected variant was changed.
155156
* Re-initializes this plugin.
156157
*/
157-
onChangeVariant: function() {
158+
onChangeVariant: function () {
158159
window.StateManager.addPlugin('*[data-paypalUnifiedEcButton="true"]', 'swagPayPalUnifiedExpressCheckoutButton');
159160
},
160161

@@ -163,7 +164,7 @@
163164
*
164165
* @return {boolean}
165166
*/
166-
isProductExcluded: function() {
167+
isProductExcluded: function () {
167168
var me = this,
168169
productNumber = me.opts.productNumber,
169170
excludedProductNumbers,
@@ -193,26 +194,34 @@
193194
/**
194195
* Creates the PayPal express checkout button with the loaded PayPal javascript
195196
*/
196-
createButton: function() {
197+
createButton: function () {
197198
var me = this,
198199
$head = $('head');
199200

201+
this.payPalObjectInterval = setInterval(this.payPalObjectCheck.bind(this), this.opts.interval);
200202
if (!$head.data(me.opts.paypalScriptLoadedSelector)) {
201203
$.ajax({
202204
url: me.renderSdkUrl(me.opts.clientId, me.opts.currency),
203205
dataType: 'script',
204206
cache: true,
205-
success: function() {
207+
success: function () {
206208
$head.data(me.opts.paypalScriptLoadedSelector, true);
207-
me.renderButton();
208209
}
209210
});
210-
} else {
211-
me.renderButton();
212211
}
213212
},
214213

215-
renderSdkUrl: function(clientId, currency) {
214+
payPalObjectCheck: function () {
215+
if (window.paypal === undefined || window.paypal === null || typeof window.paypal.Buttons !== 'function') {
216+
return;
217+
}
218+
219+
clearInterval(this.payPalObjectInterval);
220+
this.paypal = window.paypal;
221+
this.renderButton();
222+
},
223+
224+
renderSdkUrl: function (clientId, currency) {
216225
var enabledFundings = this.opts.enabledFundings,
217226
params = {
218227
'client-id': clientId,
@@ -253,44 +262,32 @@
253262
/**
254263
* Renders the ECS button
255264
*/
256-
renderButton: function() {
265+
renderButton: function () {
257266
var me = this;
258267

259-
if (this.opts.isListing && this.opts.showPayLater) {
260-
$('.' + this.opts.hasNotPayLaterClass).removeClass(this.opts.hasNotPayLaterClass).addClass(this.opts.hasPayLaterClass);
268+
if (this.buttonIsRendered) {
269+
return;
261270
}
262271

263-
// wait for the PayPal javascript to be loaded
264-
me.buffer(function() {
265-
me.expressCheckoutButton = paypal
266-
.Buttons(me.createPayPalButtonConfiguration())
267-
.render(me.$el.get(0));
272+
this.buttonIsRendered = true;
268273

269-
$.publish('plugin/swagPayPalUnifiedExpressCheckoutButtonCart/createButton', [me, me.expressCheckoutButton]);
270-
});
271-
},
272-
273-
/**
274-
* Buffer helper function to set a timeout for a function
275-
*
276-
* @param {function} fn
277-
* @param {number} timeout
278-
* @return {number}
279-
*/
280-
buffer: function(fn, timeout) {
281-
var me = this;
274+
if (this.opts.isListing && this.opts.showPayLater) {
275+
$('.' + this.opts.hasNotPayLaterClass).removeClass(this.opts.hasNotPayLaterClass).addClass(this.opts.hasPayLaterClass);
276+
}
282277

283-
timeout = timeout || 100;
278+
me.expressCheckoutButton = paypal
279+
.Buttons(me.createPayPalButtonConfiguration())
280+
.render(me.$el.get(0));
284281

285-
return window.setTimeout(fn.bind(me), timeout);
282+
$.publish('plugin/swagPayPalUnifiedExpressCheckoutButtonCart/createButton', [me, me.expressCheckoutButton]);
286283
},
287284

288285
/**
289286
* Creates the configuration for the button
290287
*
291288
* @return {Object}
292289
*/
293-
createPayPalButtonConfiguration: function() {
290+
createPayPalButtonConfiguration: function () {
294291
var me = this,
295292
config;
296293

@@ -330,7 +327,7 @@
330327
* This method dispatches a request to the `\Shopware_Controllers_Widgets_PaypalUnifiedV2ExpressCheckout`-controller (default)
331328
* which initialises an order at PayPal.
332329
*/
333-
createOrder: function() {
330+
createOrder: function () {
334331
var me = this,
335332
data = {};
336333

@@ -350,41 +347,41 @@
350347
return $.ajax({
351348
url: me.opts.createOrderUrl,
352349
data: data
353-
}).then(function(response) {
350+
}).then(function (response) {
354351
if (response.riskManagementFailed === true) {
355352
me.isRiskManagementError = true;
356353

357354
return;
358355
}
359356

360357
return response.token;
361-
}, function() {
358+
}, function () {
362359
}).promise();
363360
},
364361

365362
/**
366363
* This method dispatches a request to the `\Shopware_Controllers_Widgets_PaypalUnifiedV2ExpressCheckout`-controller (default)
367364
* which creates a new customer account and also logs the user in.
368365
*/
369-
onApprove: function(data, actions) {
366+
onApprove: function (data, actions) {
370367
var me = this;
371368

372369
return $.ajax({
373370
url: me.opts.onApproveUrl,
374371
data: data
375-
}).then(function(response) {
372+
}).then(function (response) {
376373
var params = {
377374
expressCheckout: response.expressCheckout,
378375
token: response.token
379376
};
380377

381378
actions.redirect($.swagPayPalRenderUrl(me.opts.confirmUrl, params));
382-
}, function() {
379+
}, function () {
383380
me.onPayPalAPIError();
384381
}).promise();
385382
},
386383

387-
onPayPalAPIError: function() {
384+
onPayPalAPIError: function () {
388385
var content,
389386
config;
390387

@@ -418,7 +415,7 @@
418415
*
419416
* @returns {Number}
420417
*/
421-
getProductQuantity: function() {
418+
getProductQuantity: function () {
422419
var me = this,
423420
quantity = $(me.opts.productQuantitySelector).val();
424421

@@ -432,7 +429,7 @@
432429
/**
433430
* Destroys the plugin and unsubscribes from subscribed events
434431
*/
435-
destroy: function() {
432+
destroy: function () {
436433
var me = this;
437434

438435
$.unsubscribe(me.getEventName('plugin/swAjaxVariant/onRequestData'));
@@ -445,15 +442,15 @@
445442
* After the loading another product variant, we lose the
446443
* plugin instance, therefore, we have to re-initialize it here.
447444
*/
448-
$.subscribe('plugin/swAjaxVariant/onRequestData', function() {
445+
$.subscribe('plugin/swAjaxVariant/onRequestData', function () {
449446
window.StateManager.addPlugin('*[data-paypalUnifiedEcButton="true"]', 'swagPayPalUnifiedExpressCheckoutButton');
450447
});
451448

452-
$.subscribe('plugin/swInfiniteScrolling/onFetchNewPageFinished', function() {
449+
$.subscribe('plugin/swInfiniteScrolling/onFetchNewPageFinished', function () {
453450
window.StateManager.addPlugin('*[data-paypalUnifiedEcButton="true"]', 'swagPayPalUnifiedExpressCheckoutButton');
454451
});
455452

456-
$.subscribe('plugin/swInfiniteScrolling/onLoadPreviousFinished', function() {
453+
$.subscribe('plugin/swInfiniteScrolling/onLoadPreviousFinished', function () {
457454
window.StateManager.addPlugin('*[data-paypalUnifiedEcButton="true"]', 'swagPayPalUnifiedExpressCheckoutButton');
458455
});
459456

0 commit comments

Comments
 (0)