convertpro / includes / hook.php

hook.php in EasyTest – Simplify A/B Testing trunk, at includes/hook.php

173 lines 7.4 KB

Raw Download Zip

1	<?php
2
3	if (!defined('ABSPATH')) {
4	exit; // Called directly, nothing to do here.
5	}
6	add_action('convertpro-variation-btn', 'convertpro_vari_btn');
7
8	function convertpro_vari_btn()
9	{
10	$convertpro_variation_limit = convertpro_free_limit('variations');
11	?>
12	<div class="variation-btn">
13	<a class="vari-btn" href="#">
14	<span>
15	<svg width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
16	<path d="M9 4.5V9M9 9V13.5M9 9H13.5M9 9L4.5 9" stroke="#F9FAFB" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" />
17	</svg>
18	</span>
19	<?php echo esc_html__('Add another version', 'convertpro'); ?>
20	</a>
21	</div>
22	<script>
23	jQuery(document).ready(function($) {
24	// 0 means no limit. Sites that were using EasyTest before the limits
25	// existed get 0 and never see the button disappear.
26	var maxVariations = <?php echo (int) $convertpro_variation_limit; ?>;
27
28	// A test that already has more versions than the limit keeps them, so
29	// the starting count is the floor rather than the limit.
30	var allowedVariations = Math.max(maxVariations, jQuery('.convertpro-data-variation').length);
31
32	function refreshControls() {
33	var rows = jQuery('.convertpro-data-variation').length;
34
35	// Two is the minimum a test can compare, so at two there is
36	// nothing to remove. Hiding the control beats letting someone
37	// click it and watch nothing happen, and the class collapses the
38	// column so the row does not end in an empty box.
39	jQuery('.button-delete').toggle(rows > 2);
40	jQuery('.convertpro-test-variations').toggleClass('has-delete', rows > 2);
41
42	if (!maxVariations) {
43	return;
44	}
45
46	var atLimit = rows >= allowedVariations;
47
48	jQuery('.variation-btn').toggle(!atLimit);
49	jQuery('.convertpro-variation-cap').toggle(atLimit);
50	}
51
52	function generateUniqueClassName(prefix) {
53	return prefix + Math.random().toString(36).substr(2, 9);
54	}
55
56	// The number in test-variation[N] is what decides where each row lands
57	// in the array PHP receives, so the rows have to be renumbered every
58	// time one is added or removed. Without it, deleting a row from the
59	// middle and then adding one gives two rows the same number, PHP keeps
60	// only the last, and the test saves with a version missing.
61	function renumberVariations() {
62	jQuery('.convertpro-data-variation').each(function(index) {
63	jQuery(this).find('[name^="test-variation["]').each(function() {
64	var renumbered = jQuery(this).attr('name')
65	.replace(/^test-variation\[[^\]]*\]/, 'test-variation[' + index + ']');
66
67	jQuery(this).attr('name', renumbered);
68	});
69	});
70	}
71
72	function addNewVariation() {
73	var variationsContainer = jQuery('#variations-container');
74	var currentVariationsCount = jQuery('.convertpro-data-variation').length;
75
76	if (maxVariations && currentVariationsCount >= allowedVariations) {
77	refreshControls();
78	return;
79	}
80
81	var newIndex = currentVariationsCount;
82	var uniqueClassName = generateUniqueClassName('celm-');
83
84	var newVariation = `
85	<div class="convertpro-data-variation" data-variation-id="">
86	<input type="hidden" name="test-variation[${newIndex}][id]" value="">
87	<div class="name">
88	<input class="variation-name" name="test-variation[${newIndex}][name]" type="text" value="" placeholder="Name" required />
89	</div>
90	<div class="post">
91	<select name="test-variation[${newIndex}][page-id]">
92	<option value="null" disabled selected>Select Page</option>
93	<?php
94	$pages = get_pages();
95	foreach ($pages as $page) { ?>
96	<option value="<?php echo esc_attr($page->ID); ?>"><?php echo esc_html(convertpro_page_option_label($page, $pages)); ?></option>
97	<?php } ?>
98	</select>
99	</div>
100	<div class="percentage">
101	<input class="variation-percentage" name="test-variation[${newIndex}][percentage]" type="number" value="" placeholder="Percentage" required />
102	</div>
103	<div class="convertpro-class-gen">
104	<input id="convertpro-class-name" name="test-variation[${newIndex}][customclass]" type="text" value="${uniqueClassName}" placeholder="Custom Class" />
105	<div class="copy-button" onclick="copyToClipboard(this.previousElementSibling)">Copy</div>
106	</div>
107	<div class="actions">
108	<div class="button-delete">×</div>
109	</div>
110	</div>
111	`;
112
113	variationsContainer.append(newVariation);
114	renumberVariations();
115	refreshControls();
116	}
117
118	// Handle click on Add Variation button
119	jQuery(document).on('click', '.vari-btn', function(e) {
120	e.preventDefault();
121	addNewVariation();
122	});
123
124	// Handle click on Delete button for variations
125	jQuery(document).on('click', '.button-delete', function() {
126	if (jQuery('.convertpro-data-variation').length > 2) {
127	jQuery(this).closest('.convertpro-data-variation').remove();
128	renumberVariations();
129	refreshControls();
130	}
131	});
132
133	refreshControls();
134	});
135
136	function copyToClipboard(inputElement) {
137	// Select the input field's text
138	inputElement.select();
139	inputElement.setSelectionRange(0, 99999); // For mobile devices
140
141	// Copy the text inside the input field
142	document.execCommand("copy");
143
144	// Optional: Show a message to the user that the text has been copied
145
146	}
147	</script>
148	<style>
149	.convertpro-class-gen {
150	position: relative;
151	display: inline-block;
152	}
153
154	.copy-button {
155	display: none;
156	position: absolute;
157	right: 10px;
158	top: 50%;
159	transform: translateY(-50%);
160	background-color: #080E13;
161	color: #fff;
162	border: none;
163	padding: 5px 10px;
164	cursor: pointer;
165	border-radius: 3px;
166	font-size: 12px;
167	}
168
169	.convertpro-class-gen:hover .copy-button {
170	display: block;
171	}
172	</style>
173	<?php } ?>