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.

Top comments (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

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 • Edited

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