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.