loading...

Building a Shopify App - Day3

zubairmohsin33 profile image Zubair Mohsin ・2 min read

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

pic
Editor guide
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

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