Hey @manish-sharma,
I hope you are having an amazing week so far. I’m having a hard time figuring out why my Shopify product is not importing the data that I have on Shopify but has not been imported on the page correctly.
Hello @xbrandonpowell,
I’ve been doing well, and I hope you had a pleasant weekend too.
It seems there might be an issue with your integration. Would you mind sharing the relevant code with us? I noticed that you’re attempting to create a page with the path http://localhost/eyeglass/hydrogen. Is this path integrated into your codebase?
Your cooperation in providing this information will help us better understand and address the issue you’re encountering.
Looking forward to your response.
Good Morning @manish-sharma,
I had a relaxing weekend and learning how to take breaks when comes to coding projects but still pushing on figure out builder.io below I have posted a video on what you want me to do and figure out.
Being a one-person developer is not easy for all of us but we keep on pushing through the fight to finish what must done and complete it so the next person can understand what needs to be done.
Here the video:
So the path has to be relevant within the code I did not know that because I was lost and confused in what was the on how to go about make page I was looking on the website on how correctly do this on my page but could never find out the solution so that why comeback to you.
this code have review work within ChatGTP so now has change the path name will see if this will work within the code:
import type {
GetStaticPathsContext,
GetStaticPropsContext,
InferGetStaticPropsType,
} from 'next'
import { useRouter } from 'next/router'
import { BuilderComponent, builder, useIsPreviewing } from '@builder.io/react'
import { resolveBuilderContent } from '@lib/resolve-builder-content'
import builderConfig from '@config/builder'
import shopifyConfig from '@config/shopify'
import {
getCollection,
getAllCollectionPaths,
} from '@lib/shopify/storefront-data-hooks/src/api/operations'
import DefaultErrorPage from 'next/error'
import Head from 'next/head'
import { useThemeUI } from '@theme-ui/core'
import { getLayoutProps } from '@lib/get-layout-props'
builder.init(builderConfig.apiKey!)
const builderModel = 'collection-page'
export async function getStaticProps({
params,
locale,
}: GetStaticPropsContext<{ handle: string }>) {
const collection = await getCollection(shopifyConfig, {
handle: params?.handle,
})
const page = await resolveBuilderContent(builderModel, locale, {
collectionHandle: params?.handle,
})
return {
notFound: !collection,
revalidate: 30,
props: {
page: page,
collection: collection,
...(await getLayoutProps()),
},
}
}
export async function getStaticPaths({ locales }: GetStaticPathsContext) {
const paths = await getAllCollectionPaths(shopifyConfig)
const modifiedPaths = paths.flatMap((path) => [
`/collection/eyewear/${path}`,
`/collection/sunglass/${path}`,
])
return {
paths: modifiedPaths,
fallback: 'blocking',
}
}
export default function Handle({
collection,
page,
}: InferGetStaticPropsType<typeof getStaticProps>) {
const router = useRouter()
const isPreviewing = useIsPreviewing()
const isLive = !isPreviewing
const { theme } = useThemeUI()
if (!collection && isLive) {
return (
<>
<Head>
<meta name="robots" content="noindex" />
<meta name="title"></meta>
</Head>
<DefaultErrorPage statusCode={404} />
</>
)
}
return router.isFallback && isLive ? (
<h1>Loading...</h1>
) : (
<BuilderComponent
key={collection.id}
options={{ enrich: true }}
model={builderModel}
data={{ collection, theme }}
content={page}
/>
)
}
As I was using my helpful to help better understand and figure out this error we getting within our console.log:
3eyeglasses:1 Uncaught (in promise) Error: A listener indicated an asynchronous response by returning true, but the message channel closed before a response was received
- How can I learn to Isolate Issues better in reading code?
- What type of way can understand, and read this console.log?
This are the collection I have created for the pages from the eyeglasses to sunglasses to bestselling style this all that we have created so far:
Hello @xbrandonpowell,
We’ve looked into the issue you reported. Could you please check the error message displayed in your browser’s console? It seems there’s a 401 Unauthorized error occurring when attempting to access the collection data at https://beta-sbr.myshopify.com/api/2023-10/graphql. This error typically indicates an authentication problem. I’ve recorded a loom demonstrating the issue that you can refer to at the below link
I have followed what you teach to do @manish-sharma So I have version 2023 - 10 on there already my question is:
- What is the command again to open the inspect element at builder.io?
A will still get the object Object error message. But here the video:
Just check in @manish-sharma to see if did everything correctly. In the one that you told me to do hopefully, that the correct version.
Hello @xbrandonpowell,
I was able to reproduce the issue you are experiencing, and currently working on figuring out a possible solution. I’ll update you as soon as I make any progress.
Thank you!
1 Like
Hello @manish-sharma well have an amazing weekend and look forward to learning what solve that you find out for me to learn from.
Thank you so much,
Brandon Powell
Hey @manish-sharma just want to let know updated the version to latest still did not do anything here the screenshot:
Happy Monday @manish-sharma just checkin to see if you had any success with shopify an the issues was having with the products.
Not show up on the page. Have you came across a solution that could work with this issues, please and thank you for your help.
Hello @xbrandonpowell,
Could you try updating the “shopify-buy” plugin to the latest version and see if that helps resolve the issue?
To update “shopify-buy” to latest version you can use the below npm command
npm install shopify-buy@latest
npm install @types/shopify-buy@latest
Hey @manish-sharma,
I think the issue could with BuilderIO because as I can see when go to the dropdown to pick the collection within the Builder I can see the all my collection that all posted in Shopify in there but all my products.
Are not showing up within the downtown do you have any suggestion that I can do because tried every suggestion that GPT has suggest me to do.
But still no success with that having product to load on the pages.
Thank you,
Brandon Powell
The issues was solved isses was I had to updated the all my .env files with the correct Shopify API and Key from there we have solved this issues now.