Skip to content

Commit caad9b6

Browse files
jffortierjffortier
committed
Initial commit
0 parents  commit caad9b6

File tree

2 files changed

+411
-0
lines changed

2 files changed

+411
-0
lines changed

‎index.html

Lines changed: 214 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,214 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<script src="https://cdn.shopify.com/shopifycloud/checkout-web/assets/app-bridge-checkout.js"></script>
5+
<meta charset="UTF-8" />
6+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
7+
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
8+
<link rel="stylesheet" href="styles.css" />
9+
</head>
10+
<body>
11+
<button class="activator">Message us</button>
12+
<div class="dialog">
13+
<div class="dialog-header">
14+
<h1>Message us</h1>
15+
<button class="dialog-close">X</button>
16+
</div>
17+
<div class="dialog-content">
18+
<div class="message-list">
19+
<div class="message message-sent">
20+
<strong>You: </strong>
21+
Could you recommend any wax for the snowboard I have in my cart?
22+
</div>
23+
<div class="message message-received">
24+
<strong>Bob: </strong>
25+
What about this one. It's purple and who doesn't like purple, right?
26+
<a
27+
href="https://checkout-extensibility-chat-demo.myshopify.com/products/selling-plans-ski-wax?variant=41354625482848"
28+
target="_blank"
29+
>product page</a
30+
>.
31+
32+
<details>
33+
<summary>More options</summary>
34+
<ul>
35+
<li>
36+
<a href="https://checkout-extensibility-chat-demo.myshopify.com/products/selling-plans-ski-wax?variant=41354625482848"
37+
>✅ no target set</a
38+
>
39+
</li>
40+
<li>
41+
<a
42+
href="https://checkout-extensibility-chat-demo.myshopify.com/products/selling-plans-ski-wax?variant=41354625482848"
43+
target="_blank"
44+
>✅ target="_blank"</a
45+
>
46+
</li>
47+
<li>
48+
<a
49+
href="https://checkout-extensibility-chat-demo.myshopify.com/products/selling-plans-ski-wax?variant=41354625482848"
50+
target="_self"
51+
>✅ target="_self"</a
52+
>
53+
</li>
54+
<!-- <li>
55+
<a href="/" target="_self"
56+
>✅ target="_self" and same origin as iframe</a
57+
>
58+
</li> -->
59+
<li>
60+
<a
61+
href="https://checkout-extensibility-chat-demo.myshopify.com/products/selling-plans-ski-wax?variant=41354625482848"
62+
target="_top"
63+
>✅ target="_top"</a
64+
>
65+
</li>
66+
<li>
67+
<a
68+
href="https://checkout-extensibility-chat-demo.myshopify.com/products/selling-plans-ski-wax?variant=41354625482848"
69+
target="_parent"
70+
>✅ target="_parent"</a
71+
>
72+
</li>
73+
<li>
74+
<a
75+
onClick="window.open('https://checkout-extensibility-chat-demo.myshopify.com/products/selling-plans-ski-wax?variant=41354625482848', '_blank');"
76+
>✅ open() and blank</a
77+
>
78+
</li>
79+
<li>
80+
<a
81+
onClick="window.open('https://checkout-extensibility-chat-demo.myshopify.com/products/selling-plans-ski-wax?variant=41354625482848', '_self');"
82+
>✅ open() and self</a
83+
>
84+
</li>
85+
<!-- <li>
86+
<a onClick="window.open(window.location.href, '_self');"
87+
>✅ open() and self, same origin</a
88+
>
89+
</li> -->
90+
<li>
91+
<a
92+
onClick="window.open('https://checkout-extensibility-chat-demo.myshopify.com/products/selling-plans-ski-wax?variant=41354625482848', '_top');"
93+
>✅ open() and top</a
94+
>
95+
</li>
96+
<li>
97+
<a
98+
onClick="window.open('https://checkout-extensibility-chat-demo.myshopify.com/products/selling-plans-ski-wax?variant=41354625482848', '_parent');"
99+
>✅ open() and parent</a
100+
>
101+
</li>
102+
<li>
103+
<a onClick="window.open();">✅ open()</a>
104+
</li>
105+
<li>
106+
<a
107+
onClick="window.top.location.replace('https://checkout-extensibility-chat-demo.myshopify.com/products/selling-plans-ski-wax?variant=41354625482848');"
108+
>🚫 top.location.replace()</a
109+
>
110+
</li>
111+
<li>
112+
<a
113+
onClick="javascript: window.parent.location.replace('https://checkout-extensibility-chat-demo.myshopify.com/products/selling-plans-ski-wax?variant=41354625482848');"
114+
>🚫 parent.location.replace()</a
115+
>
116+
</li>
117+
<li>
118+
<a
119+
onClick="window.top.location.assign('https://checkout-extensibility-chat-demo.myshopify.com/products/selling-plans-ski-wax?variant=41354625482848');"
120+
>🚫 top.location.assign()</a
121+
>
122+
</li>
123+
<li>
124+
<a
125+
onClick="window.parent.location.assign('https://checkout-extensibility-chat-demo.myshopify.com/products/selling-plans-ski-wax?variant=41354625482848');"
126+
>🚫 parent.location.assign()</a
127+
>
128+
</li>
129+
</ul>
130+
</details>
131+
</div>
132+
<div class="message message-sent">
133+
<strong>You: </strong>
134+
Thank you!
135+
</div>
136+
</div>
137+
</div>
138+
<div class="dialog-footer">
139+
<form
140+
onSubmit="console.log('iframe form submitted'); return false;"
141+
class="form-message"
142+
>
143+
<label for="message-input">Write message...</label>
144+
<input
145+
name="message"
146+
id="message-input"
147+
placeholder="Write message..."
148+
/>
149+
<button type="submit" class="button">Send</button>
150+
</form>
151+
</div>
152+
</div>
153+
154+
<script type="text/javascript">
155+
const activator = document.querySelector(".activator");
156+
const dialog = document.querySelector(".dialog");
157+
const dialogClose = document.querySelector(".dialog-close");
158+
159+
activator.addEventListener("click", toggleDialog);
160+
dialogClose.addEventListener("click", toggleDialog);
161+
162+
const resizeObserver = new ResizeObserver((entries) => {
163+
for (let entry of entries) {
164+
if (entry.contentRect.width < 570) {
165+
isSmallScreen = true;
166+
} else {
167+
isSmallScreen = false;
168+
}
169+
if (isSmallScreen && dialog.classList.contains("visible")) {
170+
window.shopify !== undefined && window.shopify.resizeTo(9999, 9999);
171+
} else if (dialog.classList.contains("visible")) {
172+
window.shopify !== undefined && window.shopify.resizeTo(415, 700);
173+
}
174+
}
175+
});
176+
resizeObserver.observe(document.body);
177+
178+
function toggleDialog() {
179+
let width;
180+
let height;
181+
182+
if (dialog.classList.contains("visible")) {
183+
window.shopify !== undefined && window.shopify.resizeTo(165, 62);
184+
dialog.classList.remove("visible");
185+
} else {
186+
width = 415;
187+
height = 700;
188+
189+
if (isSmallScreen) {
190+
width = 9999;
191+
height = 9999;
192+
}
193+
194+
window.shopify !== undefined &&
195+
window.shopify.resizeTo(width, height);
196+
dialog.classList.add("visible");
197+
}
198+
}
199+
200+
/**
201+
* Close dialog when esc key is pressed.
202+
* Only works when iframe is active element.
203+
*/
204+
document.addEventListener("keydown", function (event) {
205+
if (event.key === "Escape" || event.key === "Esc") {
206+
if (dialog.classList.contains("visible")) {
207+
window.shopify !== undefined && window.shopify.resizeTo(165, 62);
208+
dialog.classList.remove("visible");
209+
}
210+
}
211+
});
212+
</script>
213+
</body>
214+
</html>

0 commit comments

Comments
 (0)