show button

[damonrcr]

I want to show button in the place of this template if my "shop_domain,  shop_id, name and email" exist in the database. I am using remix when i install the app then the shop collection and session collection saved in db. Now based on that i want to show the button on the Remix Template page if this details are present in my db.

This is my backend api code.

import { Shop } from "../models/shop.js";

export const checkShop = async (req, res) => {

    try {

      const { shop_id } = req.params;

      const shop = await Shop.findOne({ shop_id });

      if (shop && shop.myshopify_domain && shop.name && shop.email) {

        return res.status(200).json({ showButton: true, message: 'Shop found' });

      }

      res.status(404).json({ showButton: false, message: 'Please register yourself' });

    } catch (error) {

      res.status(500).json({ error: 'Internal Server Error', details: error.message });

    }

  };

 Now from where frontend developer get that shop_id which we get after installing the app and it saved in db by using graphql at the time of afterAuth call. By using that shop_id check other details also existing in db or not, if existing then able to show button by replacing all this below Remix app template otherwise not able to show or i need to perform changes in my api if yes then what

[rajweb · Accepted solution]

Hey @damonrcr ,

Thanks for reaching out!

To achieve this functionality in your Remix app, follow these steps:

1. Retrieve shop_id on the Frontend

- After app installation, Shopify provides the shop’s domain (e.g., shop=myshop.myshopify.com) as a query parameter. However, you saved the shop_id in your database, which means you need to fetch it from your backend.

- You can store the shop domain in session storage or retrieve it from the database using the authenticated user session.

2. Modify the Backend API (Optional Fixes)

- Your current API works well for checking if shop_id exists, but the frontend does not have shop_id directly after installation. Instead, modify your API to accept shop (the Shopify domain) and fetch the shop_id:

- Updated API Code (checkShop.js):

import { Shop } from "../models/shop.js";

export const checkShop = async (req, res) => {
    try {
        const { shop } = req.query;  // Get shop domain from query params

        if (!shop) {
            return res.status(400).json({ showButton: false, message: "Shop domain is required" });
        }

        // Find the shop using myshopify_domain
        const shopData = await Shop.findOne({ myshopify_domain: shop });

        if (shopData && shopData.shop_id && shopData.name && shopData.email) {
            return res.status(200).json({ showButton: true, message: "Shop found" });
        }

        res.status(404).json({ showButton: false, message: "Please register yourself" });
    } catch (error) {
        res.status(500).json({ error: "Internal Server Error", details: error.message });
    }
};

3. Update the Remix Frontend to Fetch the Shop Status

- Modify your loader function in the Remix component to call the backend API and check if the shop details exist:

- Updated app/routes/index.jsx 

import { useLoaderData } from "@remix-run/react";

export const loader = async ({ request }) => {
    const url = new URL(request.url);
    const shop = url.searchParams.get("shop");  // Get shop from query params

    if (!shop) {
        return { showButton: false };
    }

    try {
        const response = await fetch(`https://your-backend.com/api/checkShop?shop=${shop}`);
        const data = await response.json();
        return { showButton: data.showButton };
    } catch (error) {
        return { showButton: false };
    }
};

export default function Index() {
    const { showButton } = useLoaderData();

    return (
        <div>
            {showButton ? (
                <button className="btn-primary">Get Started</button>
            ) : (
                <div>
                    <h2>Remix app template</h2>
                    <p>Congrats on creating a new Shopify app 🎉</p>
                    {/* Original template content */}
                </div>
            )}
        </div>
    );
}

Final Thoughts:

- The frontend extracts the shop parameter from the URL after installation.

- The backend fetches shop_id from the database based on myshopify_domain.

- If the shop exists with all required fields, the Remix template is replaced with the button.

Let me know if you need further improvements. Happy coding!

If I was able to help you, please don't forget to Like and mark it as the Solution!

Best Regard,
Rajat

[damonrcr]

Hello @rajweb Thank you for your support. this working fine, but i got little problem while installing the app first time, it will show message on the UI "Please register yourself" but after refreshing it, then button is showed on ui but clicking on it, it doesn't refer me where i want to refer on clicking that button.

// routes/index.jsx

import { useLoaderData } from "@remix-run/react";

export const loader = async ({ request }) => {

    const url = new URL(request.url);

    const shop = url.searchParams.get("shop"); // Get shop from query params

    if (!shop) {

        return { showButton: false, message: "Shop domain is required" };

    }

    try {

        const response = await fetch(`http://localhost:3000/api/check-shop?shop=${shop}`);

        console.log("response", response);

        const data = await response.json();

        console.log("data", data);

        return { showButton: data.showButton, message: data.message };

    } catch (error) {

        console.error("Error fetching shop data:", error);

        return { showButton: false, message: "Internal Server Error" };

    }

};

export default function Index() {

    const { showButton, message } = useLoaderData();

    return (

        <div>

            {showButton ? (

                <button

                    className="btn-primary"

                    onClick={() => window.location.href = "https://www.youtube.com/results?search_query=script+tags+in+shopify+app"}

                >

                    Get Started

                </button>

            ) : (

                <div>

                    <h2>Remix app template</h2>

                    <p>{message}</p>

                </div>

            )}

        </div>

    );

}, backend code as same as it. i want to refer on button click and if any of details missing then give the message "Please register". and want to handle this after installing the if all the 4 details saved successfully in db then buttonis showed otherwise give "Please register" message.