Building a Shopify App - Day3

#webdev #sideprojects #laravel #shopify

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)

Mohin patwary • Nov 14 '20

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