In this article, we will learn about how to get database value in the Shopify theme app extension using an app proxy in the Shopify remix app.
Contents
An app proxy is a feature provided by platforms like Shopify that allows developers to route external requests through their own server before forwarding them to another destination, such as an external API. In the context of Shopify, an app proxy enables developers to create custom endpoints within their Shopify app that can interact with external services or resources.
An App Proxy is a way to securely fetch data from your app’s server and display it in the Shopify storefront. When a customer accesses a certain URL, Shopify forwards the request to your app, which can then process it and return the data.
Overall, integrating an app proxy into your Remix Shopify app can provide a more secure, efficient, and customizable solution for interacting with Shopify’s API, enabling you to build robust e-commerce experiences for your users.
Step 1: In your app create an app.proxyapi file in your app folder.
Step 2: Write the following code in your app.proxyapi file.
import { PrismaClient } from "@prisma/client"; import { json } from "@remix-run/node"; const prisma = new PrismaClient(); export async function loader({request}) => { const url = new URL(request.url); const shop = url.searchParams.get("shop")?.toString(); const product = await prisma.product.findFirst({ where: { shop: shop, }, }); return json( { product }, { headers: { "Access-Control-Allow-Origin": "*", }, } ); }
Assume we have a product table and get particular shop data using prisma client.
Step 3: In your theme app extension create a test.liquid file in the block folder and write the following code:
{% schema %} { "name": "block name", "target": "section", "settings": [] } {% endschema %} <script> fetch('https://my-app-proxy.com/app/proxyapi?shop=' + Shopify.shop ).then((proxydata) => { return proxydata.json(); }).then((proxydata) => { console.log(proxydata); } </script>
This JavaScript code is a client-side script that fetches data from a remote server using the Fetch API and logs the response data to the console. Let’s break it down step by step.
Add your block in store theme page and see the proxydata in console.
Using an App Proxy in Shopify is a powerful way to fetch and display data from your custom database in the storefront. This method ensures secure data retrieval and enhances the functionality of your Shopify theme app extension. By following the steps outlined above, you can seamlessly integrate external data sources into your Shopify store.
Happy Coding!
Hello Magento Friends, In Magento 2, customizations to the admin panel can significantly enhance the…
Hello Magento Friends, Magento 2 provides a robust event-driven architecture that allows developers to observe…
Hyvä is gradually gaining popularity in this current market, and even 3.5% of Magento websites…
In today’s fast-paced society, where convenience and safety are paramount, curbside pickup has emerged as…
Have you ever observed how complementary and similar items are often displayed together in brick-and-mortar…
You may be familiar with Hyvä, the frontend theme for Magento 2, which has been…