Join us for an upcoming Shopify Partner webinar on February 27, 2024. Discover the latest Checkout Extensibility features, and deep dive on improvements to Shopify Functions and Web Pixels. Register now for either the 10am EST or 2pm EST sessions.

How to pass URL Parameters to App Pages

birdhouse
Visitor
1 0 0

Hey there, 

 

i am pretty new to creating Shopify Apps and React as well. I am using the boilerplate from shopify-cli and I am trying following: 

 

I have a page which uses the api to list all my products in a Resource List. In a Resource List Item you can pass a URL. So my plan was to add a new Page which is called "productdetail" and pass the product id to it (/productdetail/12345).

Then the Id should be passes to a component which is getting the product details for this specific product with an api. 

 

The "productdetail" page is looking like this: 

 

import { EmptyState, Page, Frame, Loading } from "@shopify/polaris";
import ProductPage from "./components/productPage";



const ProductCard = () => (
  <Frame>
        <ProductPage id="12345"/>

  </Frame>
)

export default ProductCard;

As long as I am passing the id "manually" all is working fine. 

 


But since I am unfamiliar with how the koa-routes working in that boilerplate I can not pass the id in the URL. 
If I am calling "/productdetail/12345" I am getting a 404 because the page is not known. I think that is clear to me because my router do not have a productdetail route with an parameter.

 

This is how my route looks: 

.get("*", verifyRequest(), async ctx => {
    await handle(ctx.req, ctx.res);
  
    ctx.respond = false;
    ctx.res.statusCode = 200;
  });

And my _app.js

import ApolloClient from "apollo-boost";
import { ApolloProvider } from "react-apollo";
import App, { Container } from "next/app";
import { AppProvider } from "@shopify/polaris";
import { Provider } from "@shopify/app-bridge-react";
import Cookies from "js-cookie";
import "@shopify/polaris/styles.css";
import translations from "@shopify/polaris/locales/en.json";

const client = new ApolloClient({
  fetchOptions: {
    credentials: "include"
  }
});
class MyApp extends App {
  render() {
    const { Component, pageProps } = this.props;
    
    const shopOrigin = Cookies.get("shopOrigin");
    return (
      <Container>
        <AppProvider i18n={translations}>
          <Provider
            config={{
              apiKey: API_KEY,
              shopOrigin: shopOrigin,
              forceRedirect: false
            }}
          >
            <ApolloProvider client={client}>
              <Component {...pageProps} />
            </ApolloProvider>
          </Provider>
        </AppProvider>
      </Container>
    );
  }
}

export default MyApp;

Can someone give me a hint what I do have to change to point the URL to that page and pass the id parameter dynamically in the Component argument? 

 

Thanks a lot!

Replies 3 (3)

SBD_
Shopify Staff
1812 266 390

Hey @birdhouse 

 

Try creating an API route: https://nextjs.org/docs/api-routes/introduction

Scott | Developer Advocate @ Shopify 

mayurc137
Shopify Partner
9 1 5

First you will have to create a file page/productdetail/[pid].js

And your page/productdetail/[pid].js should look like this ->

 

 

import { EmptyState, Page, Frame, Loading } from "@shopify/polaris";
import ProductPage from "./components/productPage";
import { useRouter } from 'next/router'

const ProductCard = () => {
    const router = useRouter()
    const { pid } = router.query

    return (
        <Frame>
            <ProductPage id={pid}/>
        </Frame>
    )
}

export default ProductCard

 

 

 

- Want to embed Instagram Stories on your store? Install our Instagram Stories & Highlights App
- Have more questions? Feel free to email me.
- My reply helped? Click Like to show me some love!
Tonegolf71
Shopify Partner
11 0 5

I'm wrestling with something similar here, but having followed the tutorials (https://shopify.dev/tutorials/build-a-shopify-app-with-node-and-react) that seem to use classes for pages, I'm having issues getting this URL parameter as the Router is a hook? ...and I'm discovering that is a no-no.

I'm pretty much on the same code as the tutorial right now with the following class in _app.js...

class MyApp extends App {
  render() {
    const { Component, pageProps } = this.props;
    const config = { apiKey: API_KEY, shopOrigin: Cookies.get("shopOrigin"), forceRedirect: false };
    return (
      <React.Fragment>
        <Head>
          <title>POC</title>
          <meta charSet="utf-8" />
        </Head>
          <Provider config={config}>
            <ClientRouter />
            <AppProvider i18n={translations}>
              <ApolloProvider client={client}>
                <Component {...pageProps} />
              </ApolloProvider>
            </AppProvider>
          </Provider>
      </React.Fragment>
    );
  }
}

 

The ClientRouter contains what I need (see: https://shopify.dev/tutorials/build-a-shopify-app-with-node-and-react/build-your-user-interface-with... ), but I want to access it in my dynamic page that is a child of the Component object (and also a class extending React.Component). Is there a way to expose what I want and pass it down in props? Or is there a better way?

Forgive me if my terminology is a bit off, I'm getting up the curve in React.