Giter Club home page Giter Club logo

hull's Introduction

Headless Shopify starter built on Next.js 🤘
Headless CMS powered by Sanity.io


FeaturesToursSet UpSpin UpDeploymentExtras



✨ Features

  • Utility-first CSS with Tailwind CSS
  • Animations powered by Framer Motion
  • Cart powered by Shopify Buy SDK
  • Real-time inventory check for products using SWR
  • Customizable Filtering & Sorting for product collections
  • Klaviyo waitlist form for out-of-stock products
  • Klaviyo newsletter form with opt-in field
  • Dynamic Page Routes for custom page creation
  • Automatic Sitemap.xml generation
  • Automatic robots.txt generation
  • Automatic 301 Redirects from Sanity
  • Live Preview content directly from Sanity
  • Modern Image component using Sanity's Hotspot, Crop, and automatic WEBP format
  • Modular page content for all pages, including dynamic grid layouts
  • Customizable Promotion Banner
  • Customizable Cookie Notice
  • Accessibility features:
    • ARIA Landmark Roles
    • Default focus states preserved for keyboard navigation
    • Correctly trap focus for drawers with focus-trap-react
    • Roving tabindex for radio buttons
    • Input-based quantity counters
    • Required alt text for all images
    • "Skip to Content" link
  • SEO features:
    • Page-level SEO/Share settings with previews
    • Fallback Global SEO/Share settings
    • Automatic JSON-LD Schema markup for products

Shopify Integration Features

  • Automatically syncs products from Shopify into Sanity
  • Custom action to sync product cart thumbnails back to Shopify from Sanity
  • Tracks product status (draft/published) from Shopify to help control visibility while editing
  • Deleted products and variants are preserved and flagged in Sanity
  • Updates the URL on variant changes while keeping a clean history stack
  • Vanity shop URL masking
  • Global Cart with access to all variant data for line items
  • Supports Single Variant products out of the box
  • Product photo galleries with variant granularity
  • Dynamic /shop collection page
  • Custom collection pages
  • Ability to surface a variant option on product cards

🎧 Tours

Still not sold? Here's some videos to get you psyched:

Famous 5-Minute Setup™ - Coming Soon
From sync to sale, watch me spin up a fresh storefront in under 5 minutes!

Explore the file Structure - Coming Soon
In-depth look at the file structure, naming conventions, and logic under the hood

Setting up your first Product - Coming Soon
Explore the Product settings within Sanity and how to properly setup PDP pages and PLP cards

Connecting to Klaviyo and testing your Forms - Coming Soon
Learn how to quickly connect Klaviyo to utilize product waitlist and newsletter forms

Setup your first Vercel deployment - Coming Soon
Using the Sanity Vercel Deploy plugin, see how easy it is to empower your clients to trigger deploys


🔥 Automatic Set Up

Quickly deploy as a Sanity Starter on Vercel with a pre-populated store! Once deployed, simply follow step 2 and 3 below to connect your Shopify store.

Warning
You should delete the demo products once you connect your own Shopify account. Demo products will not function properly as they are not part of your Shopify store. Additionally, any existing products in your Shopify store will not automatically sync into Sanity. To trigger a sync, you must make a change to your existing product(s) in Shopify first.


💀 Manual Set Up

Clone this repository from your GitHub account with the Use this template button

1) Sanity

  1. Initialize and build the Sanity Studio
    • Make sure you have the Sanity CLI installed globally first
    • yarn && sanity init in the /studio folder
    • During Sanity's initalization it will warn you that the Sanity Studio is already configured. Type Y and hit enter to reconfigure it to your own project
    • When it asks you what dataset configuration to use, go with the default
  2. Add CORS Origins to Sanity project
    • Visit manage.sanity.io and go to [your-project] > API > "CORS origins"
    • Add your Studio URLs with credentials: http://localhost:3333 and [subdomain].sanity.studio
    • Add your front-end URLs without credentials: http://localhost:3000 and https://[subdomain].vercel.app

2) Shopify Storefront Access

  1. Allow custom app development in Shopify
    • Go to "Settings" (bottom left) > "Apps and sales channels" > "Develop apps" (top right)
    • click "Allow custom app development"
  2. Create a custom app in Shopify
    • Go to "Settings" (bottom left) > "Apps and sales channels" > "Develop apps" (top right)
    • click "Create an app"
    • Give this a relevant App name, I prefer: "Headless Storefront", so it's clear what it's being used for
    • Use your dev account as the App developer to know when there are issues
  3. Configure Admin API scopes
    • Configuration > Admin API integration > "Configure"
    • Check the following boxes for the "Products" scope: write_products and read_products
  4. Configure Storefront API scopes
    • Configuration > Storefront API integration > "Configure"
    • Check the following boxes for the "Products" scope: unauthenticated_read_product_listings and unauthenticated_read_product_inventory
    • Check the following boxes for the "Checkout" scope: unauthenticated_write_checkouts and unauthenticated_read_checkouts
  5. Install the App

3) Shopify Webhooks

  1. Go to "Settings" (bottom left) -> "Notifications" -> "Webhooks" (very bottom)
  2. add the following webhooks with the (Latest) stable API version:
    • Product creation - [live-domain]/api/shopify/product-update
    • Product update - [live-domain]/api/shopify/product-update
    • Product deletion - [live-domain]/api/shopify/product-delete

      Warning
      You have to use a real, live domain name (not localhost!). Be sure to use your Vercel project URL during development, and then switch to the production domain once live. You may not know your Vercel project URL until you deploy, feel free to enter something temporary, but make sure to update this once deployed!

4) NextJS

  1. yarn in the project root folder on local
  2. Create an .env.local file in the project folder, and add the following variables:
NEXT_PUBLIC_SANITY_PROJECT_DATASET=production
NEXT_PUBLIC_SANITY_PROJECT_ID=XXXXXX
SANITY_API_TOKEN=XXXXXX
SANITY_STUDIO_PREVIEW_SECRET=XXXXXX

NEXT_PUBLIC_SHOPIFY_STORE_ID=XXXXXX
NEXT_PUBLIC_SHOPIFY_STOREFRONT_API_TOKEN=XXXXXX
SHOPIFY_ADMIN_API_TOKEN=XXXXXX
SHOPIFY_WEBHOOK_INTEGRITY=XXXXXX

// Needed for Klaviyo forms:
KLAVIYO_API_KEY=XXXXXX

// Needed for Mailchimp forms:
MAILCHIMP_API_KEY=XXXXXX-usX
MAILCHIMP_SERVER=usX

// Needed for SendGrid forms:
SENDGRID_API_KEY=XXXXXX
  1. Update all the XXXXXX values, here's where to find each:
  • NEXT_PUBLIC_SANITY_PROJECT_ID - You can grab this after you've initalized Sanity, either from the studio/sanity.json file, or from your Sanity Manage dashboard
  • SANITY_API_TOKEN - Generate an API token for your Sanity project. Access your project from the Sanity Manage dashboard, and navigate to: "Settings" -> "API" -> "Add New Token" button. Make sure you give read + write access!
  • SANITY_STUDIO_PREVIEW_SECRET - A unique string of your choice. This is used to confirm the authenticity of "preview mode" requests from the Sanity Studio
  • NEXT_PUBLIC_SHOPIFY_STORE_ID - This is your Shopify store ID, it's the subdomain behind .myshopify.com
  • NEXT_PUBLIC_SHOPIFY_STOREFRONT_API_TOKEN - Copy the Storefront API access token from "Apps" -> "Develop apps" -> [your_custom_app] -> "API credentials".
  • SHOPIFY_ADMIN_API_TOKEN - Copy the Admin API access token from "Apps" -> "Develop apps" -> [your_custom_app] -> "API credentials". (Note: you’ll only be able to reveal your Admin API token once.)
  • SHOPIFY_WEBHOOK_INTEGRITY - Copy the Integrity hash from "Settings" -> "Notifications" -> "Webhooks" (very bottom of page)
  • KLAVIYO_API_KEY - Create a Private API Key from your Klaviyo Account "Settings" -> "API Keys"
  • MAILCHIMP_API_KEY - Create an API key from "Account -> "Extras" -> API Keys
  • MAILCHIMP_SERVER - This is the server your account is from. It's in the URL when logged in and at the end of your API Key
  • SENDGRID_API_KEY - Create an API key from "Settings" -> "API Keys" with "Restricted Access" to only "Mail Send"
  1. Create an .env.production and .env.development file in the /studio folder, and add the following (using the same value as above):
SANITY_STUDIO_PREVIEW_SECRET=XXXXXX

5) Shopify Store Theme

Since we're serving our store through a headless environment, we don't want visitors accessing our unused shopify theme. The domain for this is visible during checkout, and is publicly accessible. To silence it, replace your current theme's theme.liquid file with the one from this repo, and replace YOUR_STOREFRONT_DOMAIN_NO_PROTOCOL with your actual frontsite domain URL (do not include protocol or trailing slash)

This will essentially "pass-through" URLs accessed at your Shopify Store to your true headless storefront (ie. shop.hull.dev/products -> hull.dev/products)


⚡ Spin Up

Next (Front End)

yarn dev in the project folder to start the front end locally

Sanity (Back End)

yarn dev in the /studio folder to start the studio locally

  • Your Sanity Studio should be running on http://localhost:3333

    Warning
    If you did not manually set up your project, the projectId in /studio/sanity.json will still be set to the HULL demo project. Make sure to update this before starting the studio, otherwise you will be denied access when trying to access your studio.


🚀 Deployment

Vercel

This is setup to work seamlessly with Vercel, which I highly recommend as your hosting provider of choice. Simply follow the on-screen instructions to setup your new project, and be sure to add the same .env.local variables to your Vercel Project

Sanity

This is an easy one, you can simply run sanity deploy from the /studio folder in your project. Select a subdomain you want; your Studio is now accessible from the web. This is where I'll invite the client to manage the project so they can both add billing info and begin editing content.

Client Updates

Once you hand off to the client you'll want to give them the ability to generate builds when they make updates within the Sanity Studio. The easiest way to do this is through my Vercel Deploy plugin.


🤘 Extras/Tips

This looks like a theme... How can I use this like a starter?

While this starter is relatively opinionated, the goal was three-fold:

  1. Use high-quality packages that don't get in the way
  2. Solve common UX problems and complex logic so you can focus on the fun stuff
  3. Create a more approachable starter for anyone looking to build production-ready headless Shopify experiences

That being said, I understand this means a lot of what's included is very opinionated. However, you'll find that at it's core the structure and naming conventions lend itself to really making it your own.

I've purposefully used extracted component classes, not only for cleaner file structure, but also so you can easily work in your own styles exclusively within the styles folder. Feel free to extend or outright remove the applied styles for all of the components!

What's up with the CSS? Why are you using @apply?

Previously, @apply was used to extract component classes away from your javascript files. However, since then Tailwind has been opposed to this approach. In the coming releases HULL will move away from this approach in favor of applying styles directly to the components so functionality and styling is done in one place.

You can read more about Tailwind's stance on @apply here: https://tailwindcss.com/docs/reusing-styles#avoiding-premature-abstraction

Can I use this for non-Shopify projects?

Absolutely! This starter was actually born out of a non-shopify starter I had been using for my own client projects.

I made a marketing-starter branch that is HULL without all the Shopify logic! The fastest way to get started is simply cloning that branch locally into an empty project folder:

git clone -b marketing-starter --single-branch [email protected]:ndimatteo/HULL.git .

You can read the setup instructions for this version from the branch's README.

Error: Failed to communicate with the Sanity API

If you get this error in your CLI, you need to logout and log back in again. Simply do sanity logout and then sanity login to fix.

Access your "product_sync" metafields in Shopify without using a plugin

Simply navigate directly to: https://[store_id].myshopify.com/admin/bulk?resource_name=Product&edit=metafields.sanity.product_sync

(making sure to replace [store_id] with your Shopify Store ID)

How do I properly hand-off a Vercel project to the client?

While not as easy as Netlify, what I prefer to do is:

  1. Have the client create their own Vercel account
  2. At the time of writing, Github connections can only be connected to one Vercel account at a time, so have the client create a Github account if they don't already have one, and transfer the project repo to them
  3. Delete the dev project from your own Vercel account (this is so the client can utilize the project name and domain you were using during dev)
  4. You or the client can now connect their newly transferred Github repo to their own Vercel account!
How can I see the bundle size of my website?

Simply run yarn analyze from the project folder. This will run a build of your site and automatically open the Webpack Bundle Analyzer visuals for your site's build files.


💯 Shoutouts

Huge ups to the following talented and rad folks who helped in countless ways. Thank you for all the support, code contributions, and discussions.

Developers

Designers


🤝 License

nickdimatteo.com  ·  Github @ndimatteo  ·  Instagram @ndimatteo

hull's People

Contributors

brob avatar ndimatteo avatar tom1mat avatar tuckercs avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

hull's Issues

Missing api sync functions?

Hi Nick,

Great project!
I was fiddling around and found that the product sync functions are not (yet) in place?

Implementing search

I'm trying to implement a search component based on product titles to the collection page. (working with a large number of products) Wondering if you have any tips/best practice ideas to implement this in Hull? My first thought is to extend the filter component.

Could also be a useful core feature as well? Thanks for your work on this starter, it's been a huge help.

Cannot read property 'product' of null

I'm seeing my Shopify products come through into Sanity via the webhook but whenever I add a product to a page and click it, I am met with the following error when navigating to the URL (/products/<slug>)

Server Error
TypeError: Cannot read property 'product' of null

This error happened while generating the page. Any console logs will be displayed in the terminal window.
Source
pages/products/[slug].js (60:46) @ Product

  58 |   console.log(data)
  59 |   // set our Product state
> 60 |   const [product, setProduct] = useState(page.product)
     |                                              ^
  61 | 
  62 |   // find the default variant for this product by matching against the first product option
  63 |   const defaultVariant = page.product.variants?.find((v) => {

Is there something special I need to do for a Shopify product to have a "detail" page?

[feature-request] Multi-currency

Hi @ndimatteo,

Thanks again for this amazing repo. Using it for another project now. I like the features you've added since I last pulled the code. Awesome!

I implemented a multi currency feature on the last project, which I need on this project as well so I thought I'd bring it up as a feature request. I solved it by making all of my prices available through an API, to avoid having to update the records in Sanity every time the exchange rate changed

What I wrote is a quite handheld/hacky and is breakable with +250 products, but maybe you can use my code for inspiration.

I'm very happy to hear if this is something you've already thought about how you'd go about implement it, since I'd be happy to find a more future-proof solution. Also, detecting the IP and duplicating the checkout to create a new checkout on Shopify's side is something I've worked on but haven't yet found a good solution for.

Keep up the good work!

in /api/shopify/product-prices?currencyCode=DKK

import axios from 'axios'

export default async function send(req, res) {
  const {
    query: { currencyCode },
  } = req

  const hasShopify =
    process.env.SHOPIFY_STORE_ID && process.env.SHOPIFY_API_PASSWORD

  if (!currencyCode)
    return res.status(401).json({ error: 'Currency code is required' })

  if (!hasShopify)
    return res.status(401).json({ error: 'Shopify API not setup' })

  // Setup our Shopify connection
  const shopifyConfig = {
    'Content-Type': 'application/json',
    'X-Shopify-Storefront-Access-Token': process.env.SHOPIFY_API_TOKEN,
  }

  const countries = [
    { currencyCode: 'USD', countryCode: 'US' },
    {
      currencyCode: 'DKK',
      countryCode: 'DK',
    },
    {
      currencyCode: 'GBP',
      countryCode: 'GB',
    },
  ]
  const countryCode =
    countries.find((c) => c.currencyCode === currencyCode)?.countryCode || 'DE'

  // Fetch product prices for all products
  let data = {}
  await axios({
    url: `https://${process.env.SHOPIFY_STORE_ID}.myshopify.com/api/2021-07/graphql.json`,
    method: 'POST',
    headers: shopifyConfig,
    data: {
      query: `
        query allProducts($countryCode: CountryCode) @inContext(country: $countryCode) {
          products(first: 250) {
            edges {
              node {
                handle
                variants(first: 250) {
                  edges {
                    node {
                      id
                      priceV2 {
                        amount
                        currencyCode
                      }
                    }
                  }
                }
              }
            }
          }
        }
        `,
      variables: {
        countryCode,
      },
    },
  }).then((result) => {
    data = result.data?.data
      ? (data = {
          data: {
            products: result.data.data.products.edges.map(({ node }) => ({
              handle: node.handle,
              ...node.variants.edges[0].node.priceV2,
            })),
          },
        })
      : result.data
  })

  res.statusCode = 200
  res.json(data)
}

Videos coming soon? :-)

I'm really looking forward to the videos on this project! I hope you can get them done soon :-).

Accounts and Logins

Hey I noticed the Account links to this url - https://go.insane.codes/account/login how do I connect my Shopify login/account flow and can I access User information on the Client if they've logged in through Shopify? would be really interested to know how Shopify - Auth is handled :)

Shopify: Exceeded 2 calls per second for api client

Hi there,

I have a large catalogue of products +600 and are trying to change them all from Draft > Active through Shopify. However, due to an API limit HULL and Shopify are giving some issues.

Maybe there needs to be added some sort of queue to prevent this from happening, as this could easily also happen if two or more people are updating Shopify at the same time.

[POST] /api/shopify/product-update — 10:24:47:73
url: 'https://[shop-name].myshopify.com/admin/products/[pid]/metafields.json',
method: 'get',
...
data: {
  errors: 'Exceeded 2 calls per second for api client. Reduce request rates to resume uninterrupted service.'
}

I found this link: https://help.apidrop.com/en/articles/5220902-shopify-platform-comunication-error-exceeded-2-calls-per-second-for-api-client-reduce-request-rates-to-resume-uninterrupted-service

Cannot develop locally although app running on vercel

hi, I clone https://github.com/ndimatteo/HULL.git and deploy on sanity. The apps is running OK on vercel. However I cannot run it locally for development. I get this error: error - Failed to load next.config.js, I have tried using node 12.x, 14.x, 16.x but I get same error. When I run vercel env pull, I get this error: Error! The Secret "sec_nMOI8Xhg6lD5DndLXHpcdPDM" is not decryptable. I am new and I hope someone knows how to help me fix this.

I run it like this and it builds: vercel -e NODE_ENV=development -e SECRET=sec_nMOI8Xhg6lD5DndLXHpcdPDM

Change url from root/product/slug to root/slug

Is there a simple way to move the product slug to root url?

Tried something like this but getting error and page not found.

<Link
                href={`/products/${
                  product.slug 
                  }
                as={`/${
                  product.slug 
                }`}
 >

Manual Set Up: cannot access studio backend locally

I'm stuck in the "please sign in" page when trying to access sanity locally. No matter what login option I use, I get thrown back at the "please sign in" page. I verified that my projectId matches the one from sanity's dashboard, CORS Origins are placed correctly and the API Token has read + write access.

I also deployed sanity to be accesible from the web and get the same error.

Also, the front end throws this error message:

Home Page" is not set in Sanity, or the page data is missing.

Any help would be appreciated! Thanks!

Error creating project on Vercel

Hi,

I am trying to create a project using the 'Sanity Create Project' button from the repo but it fails during build. The error I'm getting is:

Error: Minified React error #321; visit https://reactjs.org/docs/error-decoder.html?invariant=321 for the full message or use the non-minified dev environment for full errors and additional helpful warnings.
--

Unable to add product swatch colours, validation errors

Hey! I appreciate everything put into this project, it's amazing!
I'm trying to edit the colours(Options Settings) on products imported from Shopify with multiple variants, and I'm getting an error in sanity studio saying:
TypeError: modules: Error validating value: undefined is not an object (evaluating 'blocks.filter')
TypeError: undefined is not an object (evaluating '_patchEvent.default.from')

This happens as soon as I press add item on 'Options Settings'..
The same error is thrown when I try and edit an existing product too (eg. Ultra Magic tee). I can't seem to find any sanity documentation about this process. Do you have any ideas as to why this would happen? I haven't made any modifications to the schema supplied. I also get the same error on products with only one variant too if that helps.

Thanks!
Jaysen

Add to Cart from Collection page

Hey I love this starter and have built a decent portion of a new client site with it,

I need to add the Add to Cart to the collection page for each product tile, is there an easy way to do that?

Any support would be really appreciated.

I must be missing a step - not seeing my products

Hello and thank you so much for this starter!!
I used the automatic setup.
I've put my shopify environment variables in both vercel and .env.local. I've followed steps 2 & 3 in the docs to a T.
I'm still seeing the starter's original products.
Forgive my ignorance. I wish i could give more details. I must be missing a step somewhere.

never mind! I got it working!
( The environment variable that needed to be regenerated is a bit confusing )

Filtering sync based on sales channel

I have a need to only sync products from Shopify that have been checked off in the "Sales channels" for my headless storefront. At the moment, it is currently being ignored.

Skærmbillede 2021-06-08 kl  10 16 59

403 error using the Automatic Set Up

hey, first and foremost I want to say this template is 🔥🔥🔥

Anyways I wanted to report that I was trying to use the Automatic Set Up and received this blocker: https://cln.sh/3RZf32GzMRUTMN17fRto

CleanShot.2021-08-30.at.19.56.07.mp4

ps: I am actually looking for a good template starter for NextJS + Sanity.io that I don’t have to wire from scratch. HULL seems to do that AND WAY MORE! I love the features include tailwind and framer motion so this is a perfect template for me to start tinkering.

To be honest I don't really need the Shopify (aware of the marketing-starter branch) but since it comes with it so I figured why not play around with it anyways.

For now, I am not really blocked, trying to do the Manual Set Up way in the meantime and see if I could deploy this on Vercel. Thanks again for sharing this masterpiece as a template 🙇🏻‍♂️

EDIT: yes as replied below this is Vercel‘s deployment tool, this repo works just fine ✨

Cant build project

Hello!
In vercel and locally, I am getting these errors. What can I do to fix this?
branch: marketing-starter

03:48:30.840
info  - Generating static pages (0/3)
03:48:31.577
03:48:31.577
Error occurred prerendering page "/". Read more: https://nextjs.org/docs/messages/prerender-error
03:48:31.577
TypeError: Cannot read property 'modules' of null
03:48:31.577
    at Object.Home (/vercel/path0/.next/server/pages/index.js:2799:28)
03:48:31.577
    at m (/vercel/path0/node_modules/preact-render-to-string/dist/commonjs.js:1:2523)
03:48:31.577
    at m (/vercel/path0/node_modules/preact-render-to-string/dist/commonjs.js:1:2667)
03:48:31.577
    at m (/vercel/path0/node_modules/preact-render-to-string/dist/commonjs.js:1:2667)
03:48:31.577
    at m (/vercel/path0/node_modules/preact-render-to-string/dist/commonjs.js:1:1576)
03:48:31.577
    at m (/vercel/path0/node_modules/preact-render-to-string/dist/commonjs.js:1:1767)
03:48:31.577
    at m (/vercel/path0/node_modules/preact-render-to-string/dist/commonjs.js:1:2667)
03:48:31.578
    at m (/vercel/path0/node_modules/preact-render-to-string/dist/commonjs.js:1:1576)
03:48:31.578
    at m (/vercel/path0/node_modules/preact-render-to-string/dist/commonjs.js:1:2667)
03:48:31.578
    at m (/vercel/path0/node_modules/preact-render-to-string/dist/commonjs.js:1:2667)
03:48:31.600
03:48:31.600
Error occurred prerendering page "/404". Read more: https://nextjs.org/docs/messages/prerender-error
03:48:31.600
TypeError: Cannot read property 'seo' of null
03:48:31.600
    at Object.ErrorPage (/vercel/path0/.next/server/pages/404.js:5151:17)
03:48:31.600
    at m (/vercel/path0/node_modules/preact-render-to-string/dist/commonjs.js:1:2523)
03:48:31.600
    at m (/vercel/path0/node_modules/preact-render-to-string/dist/commonjs.js:1:2667)
03:48:31.601
    at m (/vercel/path0/node_modules/preact-render-to-string/dist/commonjs.js:1:2667)
03:48:31.602
    at m (/vercel/path0/node_modules/preact-render-to-string/dist/commonjs.js:1:1576)
03:48:31.602
    at m (/vercel/path0/node_modules/preact-render-to-string/dist/commonjs.js:1:1767)
03:48:31.602
    at m (/vercel/path0/node_modules/preact-render-to-string/dist/commonjs.js:1:2667)
03:48:31.602
    at m (/vercel/path0/node_modules/preact-render-to-string/dist/commonjs.js:1:1576)
03:48:31.602
    at m (/vercel/path0/node_modules/preact-render-to-string/dist/commonjs.js:1:2667)
03:48:31.602
    at m (/vercel/path0/node_modules/preact-render-to-string/dist/commonjs.js:1:2667)
03:48:31.602
03:48:31.602
> Build error occurred
03:48:31.602
Error: Export encountered errors on following paths:
03:48:31.602
	/
03:48:31.602
	/404
03:48:31.602
    at /vercel/path0/node_modules/next/dist/export/index.js:31:1106
03:48:31.602
    at async Span.traceAsyncFn (/vercel/path0/node_modules/next/dist/telemetry/trace/trace.js:5:584)
03:48:31.602
    at async /vercel/path0/node_modules/next/dist/build/index.js:43:49
03:48:31.602
    at async Span.traceAsyncFn (/vercel/path0/node_modules/next/dist/telemetry/trace/trace.js:5:584)
03:48:31.602
    at async /vercel/path0/node_modules/next/dist/build/index.js:25:1475
03:48:31.603
    at async Span.traceAsyncFn (/vercel/path0/node_modules/next/dist/telemetry/trace/trace.js:5:584)
03:48:31.603
info  - Generating static pages (3/3)
03:48:31.651
npm ERR! code ELIFECYCLE
03:48:31.651
npm ERR! errno 1
03:48:31.654
npm ERR! [email protected] build: `next build`
03:48:31.654
npm ERR! Exit status 1
03:48:31.654
npm ERR! 
03:48:31.654
npm ERR! Failed at the [email protected] build script.
03:48:31.654
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.
03:48:31.660
03:48:31.660
npm ERR! A complete log of this run can be found in:
03:48:31.661
npm ERR!     /vercel/.npm/_logs/2021-07-25T00_48_31_654Z-debug.log
03:48:31.673
Error: Command "npm run build" exited with 1

Unexpected behavour if options not configured

Great project. Just bumped into some unexpected behavior issues. If there is no SEO configured for the home page, the site crashes with the following error.

components/head-seo.js (118:26) @ eval

  116 | 
  117 |   templateTags.map((v) => {
> 118 |     newString = newString.replace(new RegExp(v.tag, 'g'), v.value)
      |                          ^
  119 |   })
  120 | 
  121 |   return newString

Once I added SEO that was fixed, but next I got an error for cookie consent bar. Which is disabled by default. By enabling it and adding details this error below went away.

error - components/cookie-bar.js (28:10) @ eval
TypeError: Cannot destructure property 'enabled' of 'data' as it is null.
  26 |
  27 | const CookieBar = React.memo(({ data = {} }) => {
> 28 |   const { enabled, message, link } = data
     |          ^
  29 |
  30 |   if (!enabled) return null
  31 |

The next error is for the promo bar.

error - components/header.js (27:4) @ Header
TypeError: Cannot destructure property 'promo' of 'data' as it is null.
  25 |   // expand our header data
  26 |   const {
> 27 |     promo,
     |    ^
  28 |     menuDesktopLeft,
  29 |     menuDesktopRight,
  30 |     menuMobilePrimary,

I tried enabling and configuring the promo bar but the error persists. I tried disabling it again and it persists.

Just wondering if I am missing some configuration. I read the setup instructions again and can't see anything discussing this topic.

Non Sanity pages showing blank screen

Hey I'm trying to create some other pages and just trying wrap my head around what I believe comes down to site context.

When I add a new page file to the pages directory that isn't being generated by the Sanity page builder and doesn't have any specicifc references to Sanity documents if I try to visit the page in the browser I just get a blank screen with and empty tag.

Why is this?

If I needed to add pages what's the best way to do this?

Strange Error when using Sanity Auto Setup

image
I get this error after spinning up a new demo project. I kept going and set up all the variables/webhooks. After lots of debugging, I cannot find a solution to Shopify not syncing with my Sanity. I double-checked all envs on local and vercel, I updated products, deployed multiple times, and tried to check out only to receive a constant 401 from /api/Shopify/product-inventory?id=6584939413682

{
  "error": "Product not found"
}

I am uncertain where to go from here.

I will note that my sanity says it has synced from Shopify
image

But my local version was pointing to the original sanity URL hull.dev which seemed strange. My deployed sanity is pointing to the correct URL. My Shopify remains empty and devoid of any products regardless of what tactics I try.

Edit: tried three times, same result each time. Also important to note I am using hobby version for vercel

Question about Products showing up inside the Sanity Studio

Great project 🤘 Quick question about the Products syncing in Sanity

First off, great job on this project 💯 🔥 🔥
I have been looking through the code, and really digging it.

So I have the whole project up and running locally with the Sanity Studio server running on http://localhost:3333 and I have the Next site running locally on http://localhost:3000.

When I go to the Shop section of the Studio, everything looks to be working fine.
I can see listings of Products there, and I can see listings under Product Variants.
But only products that have variants are getting listed in either section.
If I add a product on Shopify without variants, then I don't see it in the Studio.
It looks like it is just doubling up the Product Variant data instead of having 2 different types of product data.

I didn't know if you had any idea as to why this was happening, or how best to debug it?
Any insight would be appreciated 👍

Thanks 😄

Here are some screenshots showing I get the views and url's for both Products and Product Variants.

Product View:
sanity-products

Product Variant View:
sanity-product-variant

Cannot sync shopify with sanity studio

Hey, here is the question. I fully delete the dummy data in the sanity studio of the HULL template.

Screen Shot 2021-08-22 at 11 50 31 PM

But I encounter a new problem. When I deploy the application to Vercel, it constantly fails with this error.



23:44:07.462 | > Build error occurred
-- | --
23:44:07.464 | TypeError: Cannot read property 'split' of null
23:44:07.465 | at /vercel/path0/.next/server/pages/[...slug].js:85:29
23:44:07.465 | at Array.map (<anonymous>)
23:44:07.465 | at getStaticPaths (/vercel/path0/.next/server/pages/[...slug].js:83:74)
23:44:07.466 | at processTicksAndRejections (internal/process/task_queues.js:95:5)
23:44:07.466 | at async buildStaticPaths (/vercel/path0/node_modules/next/dist/build/utils.js:16:80)
23:44:07.466 | at async /vercel/path0/node_modules/next/dist/build/utils.js:26:622
23:44:07.466 | at async Span.traceAsyncFn (/vercel/path0/node_modules/next/dist/telemetry/trace/trace.js:6:584) {
23:44:07.466 | type: 'TypeError'
23:44:07.466 | }

It totally makes sense since there is no product being added to the sanity studio. But since the application fails to deploy to Vercel, there is no way that the Shopify webhooks can be fired, it relies on the live URL. So… I kind of entering a rabbit hole, that without syncing products to sanity studio, the application can not be deployed. Without being deployed, the Shopify products cannot be synced. Is there anything that I can do to roughly set up the application and successfully deploy it to Vercel so as to sync Shopify products to sanity studio?😊

Question: How do Shopify products get synced to Sanity?

Hi,

Just wondering how this part works, because everything's running fine except that Sanity isn't pulling my products from Shopify. Not getting any errors regarding my Shopify creds. My guess is it's about the product meta-data?

Nuxt version?

Just curious if there will be a Nuxt.js version? :) love the project otherwise.

Unexpected error only on some computers

Hey guys,

I'm getting an error consistently on some computers, and I'm unable to replicate the issue on my local machine. Does anyone know why this would happen?

Wondering if anyone else gets the same issue? Check out the site here

image

Wondering how to achieve this

see image for reference

I want to have de categories/collection/menu appear as swiper menu below header.

What is the best approach to achieve this
Schermafbeelding 2022-01-12 om 13 37 03
?

Unable to update products

Hey,

First of all the project is amazing! Hella props!

I have followed the automatic setup guide and have the project up and deployed and running locally with no hassle.
The only problem I can't seem to get around is triggering the product updates from my Shopify setup to be reflected in my project data.

I have setup the env with the shopify keys, permissions as well as the web-hooks inside Shopify.
I have also updated products to try and trigger the update but so far no dice.

How does one trigger the build of the sanity data from the Shopify products.

I'm relatively new to both shopify and sanity so forgive me if this is an obvious question!

Thanks

Analytics Support

I'm guessing because you're using the GraphQL Buy SDK which doesn't support Shopify's built in Analytics there is no support for any analytics or metric tracking such as view product, add to cart or start a checkout?

Trying to deploy theme.liquid

theme deploy --env=production ─╯

invalid environment [production]: (invalid theme_id)

production:
password: shptka_c2d807afd591c92d93xxxxxxxxxx
theme_id: "theme.liquid"
store: open-my-shopify-com.myshopify.com

Unable to sync Shopify products in Sanity, serverless functions error out.

Hello!

This project is great, I appreciate your work and documentation! I'm having some issues getting the Sanity product sync working. I feel like I've been diligent about getting the correct API keys tokens and passwords, I've deployed to Vercel.

I've tried sending a test webhook to the product-update API route and get errors in the Vercel dashboard. I'm not sure if that would be related to the issue though.

Here's a repo if that helps.

Any insight on how to get this working or if there's something I'm missing in your documentation would be helpful!

Thank you!

Documentation: Sanity projectId needs to be changed

Hi,

I scratched my head a bit over this one.

Couldn't find anywhere in the documentation where it said that the projectId in sanity.json needed to be changed, so couldn't understand why I was locked out of sanity locally but not on my live environment.

No easy way of having an .env variable in the .json file I assume?

Display variants as products on collection pages

Hi @ndimatteo

Firstly, many thanks for creating and sharing this repo. It's so great.

Have you considered adding the ability for product variants to be displayed as unique products on collection pages? Going a step further, it would be great if this feature were controllable at a product (and/or variant) level, in a way not dissimilar to the 'Surface Option' function.

Cheers

Cannot delete test products

I am receiving the following error when trying to delete the starter demo products:
A document of the unknown type homePage
A document of the unknown type shopPage

When trying to "delete anyway" I receive the following error:
the mutation(s) failed: Document "product-6584939413682" cannot be deleted as there are references to it from "homePage"

All connections have been removed from the products as well.

CORS problem, adding product

Hello,
thanks for the great boilerplate.

ISSUE:
I cannot add products to the cart.

URL: https://hull-shopify-starter-xi-blush.vercel.app/

Reproduce:

  • Add product at Homepage (see console in browser then)
  • Add product in the productdetails page (see console in browser then)
Access to XMLHttpRequest at 'https://h4xropcb.apicdn.sanity.io/v2021-03-25/data/query/production?query=%0A%20%20%20%20%20%20*%5B_type%20%3D%3D%20%22productVariant%22%20%26%26%20variantID%20%3D%3D%2042055549878491%5D%5B0%5D%7B%0A%20%20%20%20%20%20%20%20%22product%22%3A%20*%5B_type%20%3D%3D%20%22product%22%20%26%26%20productID%20%3D%3D%20%5E.productID%5D%5B0%5D%7B%0A%20%20%20%20%20%20%20%20%20%20title%2C%0A%20%20%20%20%20%20%20%20%20%20%22slug%22%3A%20slug.current%2C%0A%20%20%20%20%20%20%20%20%7D%2C%0A%20%20%20%20%20%20%20%20%22id%22%3A%20variantID%2C%0A%20%20%20%20%20%20%20%20title%2C%0A%20%20%20%20%20%20%20%20price%2C%0A%20%20%20%20%20%20%20%20%22photos%22%3A%20%7B%0A%20%20%20%20%20%20%20%20%20%20%22cart%22%3A%20*%5B_type%20%3D%3D%20%22product%22%20%26%26%20productID%20%3D%3D%20%5E.productID%5D%5B0%5D.cartPhotos%5B%5D%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20forOption%2C%0A%20%20%20%20%20%20%20%20%20%20%20%20%22default%22%3A%20cartPhoto%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%0A%20%20%22alt%22%3A%20coalesce(alt%2C%20asset-%3EaltText)%2C%0A%20%20asset%2C%0A%20%20crop%2C%0A%20%20customRatio%2C%0A%20%20hotspot%2C%0A%20%20%22id%22%3A%20asset-%3EassetId%2C%0A%20%20%22type%22%3A%20asset-%3EmimeType%2C%0A%20%20%22aspectRatio%22%3A%20asset-%3Emetadata.dimensions.aspectRatio%2C%0A%20%20%22lqip%22%3A%20asset-%3Emetadata.lqip%0A%0A%20%20%20%20%20%20%20%20%20%20%20%20%7D%2C%0A%20%20%20%20%20%20%20%20%20%20%7D%0A%20%20%20%20%20%20%20%20%7D%2C%0A%20%20%20%20%20%20%20%20options%5B%5D%7B%0A%20%20%20%20%20%20%20%20%20%20name%2C%0A%20%20%20%20%20%20%20%20%20%20position%2C%0A%20%20%20%20%20%20%20%20%20%20value%0A%20%20%20%20%20%20%20%20%7D%0A%20%20%20%20%20%20%7D%0A%20%20%20%20' from origin 'https://hull-shopify-starter-xi-blush.vercel.app' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.

it is related to this query

*[_type == "productVariant" && variantID == 42055549878491][0]{
        "product": *[_type == "product" && productID == ^.productID][0]{
          title,
          "slug": slug.current,
        },
        "id": variantID,
        title,
        price,
        "photos": {
          "cart": *[_type == "product" && productID == ^.productID][0].cartPhotos[]{
            forOption,
            "default": cartPhoto{
              
  "alt": coalesce(alt, asset->altText),
  asset,
  crop,
  customRatio,
  hotspot,
  "id": asset->assetId,
  "type": asset->mimeType,
  "aspectRatio": asset->metadata.dimensions.aspectRatio,
  "lqip": asset->metadata.lqip

            },
          }
        },
        options[]{
          name,
          position,
          value
        }
      }

SVG Import support

While trying to update the logo in my fork I tried replacing public/HULL-Logo.svg and quickly noticed it did not work, as this was the actual logo being used:

case 'Logo':

I was wondering if adding SVG support is something to consider here (I have a working prototype in a branch, it's just basically adding the @svgr/webpack package). It would help with duplications like that and the file becoming cumbersome once you add more SVGs. To keep the color parameter we could just use something like currentColor. It might also be unnecessary optimization.

I'll make a PR if it's something that could be worthwhile.

Other meta fields not included

Hi there,

Thanks again for the good work.

I was curious to know why only some fields on a product are not stored in Sanity? For example I need to retrieve things such as "Product type", "Tags" and "Collections" from Shopify.

As far as I can tell it's not possible to retrieve it via the metafields.json but I can see that it does come up when I request product.json

Do you have any thoughts on why you're not using the other endpoint, and can shine a light on what trouble I might potentially face by changing the endpoint?

Products syncing on update when the private app is not selected.

When updating products I have 2 private apps that should feed 2 different projects. When the app that is configured with the hull sanity studio is selected in available sales channels and apps for the product the sync works, but the problem is that products with the other app selected also sync to sanity.

Preview on Vercel

Hi again,

I see that it is stated in the documentation that "Live preview from Sanity" is possible and I was wondering if you could provide some insight into how to best set this up?

I'm quite new to Next.js as I come from Gatsby where things are done in a completely different way, and is also the primary reason for my recent switch to NextJS where it is my understanding that I have more options.

Now, I've deployed my project to Vercel and it's working fine. However, my build time is around 5 minutes which I'd like to speed up — however only on my test-domain. Is it possible to reach the same speeds as my local environment and see the changes I've made in Sanity with a simple page refresh? If so, I'd love to know if you could point me in the right direction.

Thanks in advance again and thank you for all the support so far to my other questions!

Much love for this project. It's already saved me soooo many hours of work, so I couldn't be more grateful 🙌

How to display collections on homepage?

Hey there,

I'm trying to figure out a way to make adding collections (eg: all vinyl, all t-shirts) as an option to my pages in Sanity (including the homepage). Is there a simple way to achieve this using this template? Thanks

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.