Alrighty, let's kick off Day 3 of the side project.
Few thoughts
- I want to focus on the major use case of this app which is where end-user ( customer ) interacts with app functionality. Which is a "popup".
- I have decided to load that functionality inside an iframe so that styles don't conflict and we have full control of the web page being rendered inside iframe.
- Looked at some inspirations for popup designs and I think, I will go with Intercom messenger popup concept in the beginning. Will refine it later.
Jumping into code...👨🏽💻
Progress
- Loaded app functionality inside a iframe. Provided some hardcoded styles for positioning and stuff.
var iframeNode = document.createElement('iframe');
iframeNode.setAttribute('id', 'secret-id');
iframeNode.style.position = 'fixed';
iframeNode.style.bottom = '100px';
iframeNode.style.right = '20px';
iframeNode.style.width = '376px';
iframeNode.style.zIndex = 2147483000;
iframeNode.style.border = '0';
iframeNode.style.minHeight = '360px';
iframeNode.style.maxHeight = '704px';
iframeNode.style.height = 'calc(100% - 120px);'
iframeNode.setAttribute('src', '{{route('storefront.popup')}}');
document.body.appendChild(iframeNode);
- Added TailwindCSS to make the popup design. Behold... My popup design 😂 Not even close to Intercom's but the gist 🤷🏻♂️ Will improve it later of course.
popup.blade.php
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link href="https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css" rel="stylesheet">
<title>Discount Popup</title>
</head>
<body>
<div class="container bg-purple-600 py-10 px-5">
<div class="text-white py-5 px-10">
<h1>Hi 👋</h1>
<p>Up for a Discount?</p>
</div>
<div class="bg-white py-10 px-5 rounded">
<div class="mb-3">
<input type="text" class="border-2 w-full p-1" placeholder="Then enter a secret sauce"/>
</div>
<div class="flex">
<button class="bg-purple-600 hover:bg-purple-700 text-white font-bold py-2 px-4 rounded">Submit</button>
</div>
</div>
</div>
</body>
</html>
- Need to improve upon my CSS skills too 😣
- Decided to go with Purple as base color for now
Time Spent
1 and half hour ( Damn you popup 😅 )
Signing off 😴
P.S.
If anybody ( other than me 😂 ) reading it, you might be interested in following me on Twitter. I tweet about Laravel, Shopify and React stuff.
Top comments (4)
Thank you so much to present it.
Where did you write JavaScript? Then you passed a view file via controller name method storefront.popup creating a route. Could you please share the source code? That will be very helpful. Please sir
Will reply you on Twitter DM.
Thanks 👍
Did you embed that popup in the Shopify theme?
Nope. Using ScriptTag API for this. In this app, it is okay for a bit of delay.