sequra / templates / header-js.php

header-js.php in seQura 2.0.0, at templates/header-js.php

185 lines 5.9 KB

Raw Download Zip

1	<?php
2
3	/**
4	* Header script for widgets
5	*
6	* @package woocommerce-sequra
7	*/
8
9	?>
10	<script type="text/javascript">
11	var sequraProducts = [];
12	<?php foreach ( $available_products as $p ) { ?>
13	sequraProducts.push('<?php echo esc_js( $p ); ?>');
14	<?php } ?>
15	var sequraConfigParams = {
16	merchant: '<?php echo esc_js( SequraHelper::get_instance()->get_merchant_ref() ); ?>',
17	assetKey: '<?php echo esc_js( $core_settings['assets_secret'] ); ?>',
18	products: sequraProducts,
19	scriptUri: '<?php echo esc_js( $script_base_uri ); ?>sequra-checkout.min.js',
20	decimalSeparator: '<?php echo esc_js( wc_get_price_decimal_separator() ); ?>',
21	thousandSeparator: '<?php echo esc_js( wc_get_price_thousand_separator() ); ?>',
22	locale: '<?php echo esc_js( str_replace( '_', '-', get_locale() ) ); ?>',
23	};
24
25	(function(i, s, o, g, r, a, m) {
26	i['SequraConfiguration'] = g;
27	i['SequraOnLoad'] = [];
28	i[r] = {};
29	i[r][a] = function(callback) {
30	i['SequraOnLoad'].push(callback);
31	};
32	(a = s.createElement(o)), (m = s.getElementsByTagName(o)[0]);
33	a.async = 1;
34	a.src = g.scriptUri;
35	m.parentNode.insertBefore(a, m);
36	})(window, document, 'script', sequraConfigParams, 'Sequra', 'onLoad');
37
38
39	//Helper
40	var SequraHelper = {
41	presets: {
42	L: '{"alignment":"left"}',
43	R: '{"alignment":"right"}',
44	legacy: '{"type":"legacy"}',
45	legacyL: '{"type":"legacy","alignment":"left"}',
46	legacyR: '{"type":"legacy","alignment":"right"}',
47	minimal: '{"type":"text","branding":"none","size":"S","starting-text":"as-low-as"}',
48	minimalL: '{"type":"text","branding":"none","size":"S","starting-text":"as-low-as","alignment":"left"}',
49	minimalR: '{"type":"text","branding":"none","size":"S","starting-text":"as-low-as","alignment":"right"}'
50	},
51	drawnWidgets: [],
52	getText: function(selector) {
53	return selector && document.querySelector(selector) ? document.querySelector(selector).innerText : "0";
54	},
55
56	selectorToCents: function(selector) {
57	return SequraHelper.textToCents(SequraHelper.getText(selector));
58	},
59
60	textToCents: function(text) {
61	text = text.replace(/^\D/, '').replace(/\D$/, '');
62	if (text.indexOf(sequraConfigParams.decimalSeparator) < 0) {
63	text += sequraConfigParams.decimalSeparator + '00';
64	}
65	return SequraHelper.floatToCents(
66	parseFloat(
67	text
68	.replace(sequraConfigParams.thousandSeparator, '')
69	.replace(sequraConfigParams.decimalSeparator, '.')
70	)
71	);
72	},
73
74	floatToCents: function(value) {
75	return parseInt(value.toFixed(2).replace('.', ''), 10);
76	},
77
78	mutationCallback: function(mutationlist, mutationobserver) {
79	var price_src = mutationobserver.observed_as;
80	var new_amount = SequraHelper.selectorToCents(price_src);
81	document.querySelectorAll('[observes=\"' + price_src + '\"]').forEach(function(item) {
82	item.setAttribute('data-amount', new_amount);
83	});
84	Sequra.refreshComponents();
85	},
86
87	drawPromotionWidget: function(price_src, dest, product, theme, reverse, campaign, registration_amount) {
88	if (SequraHelper.drawnWidgets[price_src + dest + product + theme + reverse + campaign]) {
89	return;
90	}
91	SequraHelper.drawnWidgets[price_src + dest + product + theme + reverse + campaign] = true;
92	var promoWidgetNode = document.createElement('div');
93	var price_in_cents = 0;
94	try {
95	var srcNode = document.querySelector(price_src);
96	var MutationObserver = window.MutationObserver \|\| window.WebKitMutationObserver;
97	if (MutationObserver && srcNode) { //Don't break if not supported in browser
98	if (!srcNode.getAttribute('observed-by-sequra-promotion-widget')) { //Define only one observer per price_src
99	var mo = new MutationObserver(SequraHelper.mutationCallback);
100	mo.observe(srcNode, {
101	childList: true,
102	subtree: true
103	});
104	mo.observed_as = price_src;
105	srcNode.setAttribute('observed-by-sequra-promotion-widget', 1);
106	}
107	}
108	promoWidgetNode.setAttribute('observes', price_src);
109	price_in_cents = SequraHelper.selectorToCents(price_src)
110	} catch (e) {
111	if (price_src) {
112	console.error(price_src + ' is not a valid css selector to read the price from, for sequra widget.');
113	return;
114	}
115	}
116	try {
117	var destNode = document.querySelector(dest);
118	} catch (e) {
119	console.error(dest + ' is not a valid css selector to write sequra widget to.');
120	return;
121	}
122	promoWidgetNode.className = 'sequra-promotion-widget';
123	promoWidgetNode.setAttribute('data-amount', price_in_cents);
124	promoWidgetNode.setAttribute('data-product', product);
125	if (this.presets[theme]) {
126	theme = this.presets[theme]
127	}
128	try {
129	attributes = JSON.parse(theme);
130	for (var key in attributes) {
131	promoWidgetNode.setAttribute('data-' + key, "" + attributes[key]);
132	}
133	} catch (e) {
134	promoWidgetNode.setAttribute('data-type', 'text');
135	}
136	if (reverse) {
137	promoWidgetNode.setAttribute('data-reverse', reverse);
138	}
139	if (campaign) {
140	promoWidgetNode.setAttribute('data-campaign', campaign);
141	}
142	if (registration_amount) {
143	promoWidgetNode.setAttribute('data-registration-amount', registration_amount);
144	}
145	if (destNode.nextSibling) { //Insert after
146	destNode.parentNode.insertBefore(promoWidgetNode, destNode.nextSibling);
147	} else {
148	destNode.parentNode.appendChild(promoWidgetNode);
149	}
150	Sequra.onLoad(
151	function() {
152	Sequra.refreshComponents();
153	}
154	);
155	},
156	waitForElement: function(selector) {
157	return new Promise(function(resolve) {
158	if (document.querySelector(selector)) {
159	return resolve();
160	}
161	const observer = new MutationObserver(function(mutations) {
162	if (document.querySelector(selector)) {
163	resolve();
164	observer.disconnect();
165	}
166	});
167	observer.observe(document.body, {
168	childList: true,
169	subtree: true
170	});
171	});
172	}
173	}
174	</script>
175	<style>
176	.sequra-educational-popup {
177	white-space: nowrap;
178	cursor: pointer;
179	}
180
181	.sequra-promotion-widget[data-type="legacy"] {
182	max-width: 320px;
183	}
184	</style>
185