DEV Community

Zubair Mohsin
Zubair Mohsin

Posted on

5 2

Building a Shopify App - Day4

Alrighty, kicking off day 4 of my side project with nothing but positive vibes πŸ™ŒπŸΌ

Initial Thoughts

  • This popup needs to be 3-step.
  • First step, customer enters the secret sauce.
  • Second step, we verify if it is indeed the secret sauce πŸ€“
  • Third step, customer gets a discount and we get their secret sauce. Win win πŸŽ‰
  • Need to look at some animation stuff. Because I am thinking of adding an animation when customer move to next step. Something like a Wizard or Multi-step form πŸ€”
  • Not sure how would I achieve this in TailwindCSS.

Jumping into code... πŸ‘¨πŸ½β€πŸ’»

Before that... Googling for multi-step form with TailwindCSS πŸ˜‚

Alright, below link seems like a good starting point πŸ‘‡πŸΌ
https://tailwindcomponents.com/component/multistep-form-with-tailwindcss-and-alpinejs

Jumping into code... Again πŸ‘¨πŸ½β€πŸ’»

Progress

  • I was able to tweak the above snippet according to my requirements and achieve the multi-step concept just yet. Its not fully functional of course. Multi-Step form with TailwindCSS and AlpineJS

Putting the code for this below πŸ‘‡πŸΌ

<!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">
    <title>Discount Popup</title>
</head>
<body>
    <!-- component -->
<!-- This is an example component -->
<div class="h-screen">

    <link rel="stylesheet" href="https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css">
    <script src="https://cdn.jsdelivr.net/gh/alpinejs/alpine@v2.x.x/dist/alpine.js" defer></script>

    <style>
        [x-cloak] {
            display: none;
        }
    </style>

    <div x-data="app()" x-cloak>
        <div class="container bg-purple-600 py-6 px-5 rounded">
            <div class="max-w-3xl mx-auto mb-10">

                <div x-show.transition="step === 'complete'">
                    <div class="bg-white rounded-lg p-10 flex items-center shadow justify-between">
                        <div>
                            <svg class="mb-4 h-20 w-20 text-green-500 mx-auto" viewBox="0 0 20 20" fill="currentColor">  <path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd"/></svg>

                            <h2 class="text-2xl mb-4 text-gray-800 text-center font-bold">DISCOUNT</h2>

                            <div class="text-gray-600 mb-8">
                                Thank you. Enjoy your discount at the checkout.
                            </div>

                            <button
                                @click="step = 1"
                                class="w-40 block mx-auto focus:outline-none py-2 px-5 rounded-lg shadow-sm text-center text-gray-600 bg-white hover:bg-gray-100 font-medium border" 
                            >Back to home</button>
                        </div>
                    </div>
                </div>

                <div x-show.transition="step != 'complete'">    
                    <div class="text-white py-5 px-5">
                        <h1>Hi πŸ‘‹</h1>
                        <p>Up for a Discount?</p>
                    </div>

                    <!-- Step Content -->
                    <div class="bg-white py-5 px-5 rounded">    
                        <div x-show.transition.in="step === 1">
                            <div class="mb-5">
                                <label for="firstname" class="font-bold mb-1 text-gray-700 block">Secret Sauce Part 1</label>
                                <input type="text"
                                    class="w-full px-4 py-3 rounded-lg shadow-sm focus:outline-none focus:shadow-outline text-gray-600 font-medium border-2"
                                    placeholder="Enter your secret sauce... ">
                            </div>

                            <div class="mb-5">
                                <label for="email" class="font-bold mb-1 text-gray-700 block">Secret Sauce Part 2</label>
                                <input type="text"
                                    class="w-full px-4 py-3 rounded-lg shadow-sm focus:outline-none focus:shadow-outline text-gray-600 font-medium border-2"
                                    placeholder="Enter your secret sauce...">
                            </div>
                            <div class="w-1/2">
                                <button
                                @click="step++"
                                class="w-32 focus:outline-none border border-transparent py-2 px-5 rounded-lg shadow-sm text-center text-white bg-blue-500 hover:bg-blue-600 font-medium" 
                            >Next</button>
                        </div>

                        </div>
                        <div x-show.transition.in="step === 2">
                            <div class="mb-5">
                                <label for="profession" class="font-bold mb-1 text-gray-700 block">Verification</label>
                                <input type="text"
                                    class="w-full px-4 py-3 rounded-lg shadow-sm focus:outline-none focus:shadow-outline text-gray-600 font-medium border-2"
                                    placeholder="Just making sure it belongs to you">
                            </div>
                            <div class="flex justify-between">
                                <div class="w-1/2">
                                    <button
                                    @click="step--"
                                    class="w-32 focus:outline-none py-2 px-5 rounded-lg shadow-sm text-center text-gray-600 bg-white hover:bg-gray-100 font-medium border" 
                                >Go Back</button>

                                </div>
                                <div class="w-1/2 ">
                                    <button
                                    @click="step = 'complete'"
                                    class="w-32 focus:outline-none border border-transparent py-2 px-5 rounded-lg shadow-sm text-center text-white bg-blue-500 hover:bg-blue-600 font-medium" 
                                >Verify</button>
                            </div>
                            </div>
                        </div>
                    </div>
                    <!-- / Step Content -->
                </div>
            </div>
        </div>
    </div>

    <script>
        function app() {
            return {
                step: 1,
            }
        }
    </script>
</body>
</html>
Enter fullscreen mode Exit fullscreen mode

Time Spent

1 and half hour


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.

Image of Datadog

Create and maintain end-to-end frontend tests

Learn best practices on creating frontend tests, testing on-premise apps, integrating tests into your CI/CD pipeline, and using Datadog’s testing tunnel.

Download The Guide

Top comments (3)

Collapse
 
wajahatanwar profile image
Wajahat Anwar β€’

I have a question that how you are embedding the popup from an external source. Are you using script tags for the popup or you embedding CSS in the Shopify theme?

Collapse
 
zubairmohsin33 profile image
Zubair Mohsin β€’

ScriptTag

Collapse
 
jamesking56 profile image
James King β€’

Love this series, are you continuing with more posts? I'd love to know how billing works with the Shopify store

Billboard image

The Next Generation Developer Platform

Coherence is the first Platform-as-a-Service you can control. Unlike "black-box" platforms that are opinionated about the infra you can deploy, Coherence is powered by CNC, the open-source IaC framework, which offers limitless customization.

Learn more