DEV Community

Zubair Mohsin
Zubair Mohsin

Posted on

Building a Shopify App - Day3

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);
Enter fullscreen mode Exit fullscreen mode
  • 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 design 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>
Enter fullscreen mode Exit fullscreen mode
  • 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.

Discussion (4)

Collapse
mohinpatwary profile image
Mohin patwary

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

Collapse
zubairmohsin33 profile image
Zubair Mohsin Author

Will reply you on Twitter DM.

Thanks 👍

Collapse
wajahatanwar profile image
Wajahat Anwar

Did you embed that popup in the Shopify theme?

Collapse
zubairmohsin33 profile image
Zubair Mohsin Author • Edited on

Nope. Using ScriptTag API for this. In this app, it is okay for a bit of delay.