-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathtask.html
49 lines (40 loc) · 1.97 KB
/
task.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
<!DOCTYPE html>
<html>
<head>
<!-- Importing jQuery from Google CDN -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<!-- Importing custom css from file -->
<link rel="stylesheet" href="styles.css">
<!-- jQuery code to alter the pcode value and send to receiver -->
<script type="text/javascript">
window.onload = function () {
var receiver = document.getElementById('receiver').contentWindow;
jQuery('body').on('click', '.myCustomButton', function () {
var pcode = jQuery(this).attr("bid");
// Custom code to display the pcode of the current item clicked
$('#labelSpan').text(`P Code is ${pcode}`);
$('.measurments_btn').attr("data-sku", pcode);
receiver.postMessage(pcode, 'https://widget.viubox.com/index.html');
});
}
</script>
</head>
<body>
<span id="heading">Interview Task</span>
<!-- Displaying two images with SKU's input in the bid attribute -->
<div id="imageContainer">
<img src="tshirt1.png" id="tshirt1" class="myCustomButton" bid="F01-XXL_50" />
<img src="tshirt2.png" id="tshirt2" class="myCustomButton" bid="F02-XXL_50" />
</div>
<!-- Code to display the pcode -->
<span id="labelSpan"></span>
<p class="measurments_btn" href="javascript:void(0)" data-sku="null" >How Does It Fit On You</p>
<p id="threed_btn_id" class="measurments_btn" href="javascript:void(0)" >Try In 3D</p>
</body>
<footer>
<!-- Importing viubox embed.js file -->
<!-- This is done in the footer as the embed file requires the body to be initialised first
to function -->
<script type="text/javascript" src="https://widget.viubox.com/js/embed.js"></script>
</footer>
</html>