DEV Community

Cover image for Shopify + Next.js + Tailwind CSS: Modern eCommerce

Shopify + Next.js + Tailwind CSS: Modern eCommerce

iskurbanov on September 02, 2021

Article brought to you by buildnextshop.com In the last couple years, we have all gotten extremely comfortable with online shopping. This has push...
Collapse
 
benbalderas profile image
Ben Balderas

@iskurbanov is there a way to pass a custom option/variant to a certain product, and display it in the cart and checkout? Something like a textfield for an engraving, gift message, etc?

Any pointing in the right direction would be greatly appreciated!

Collapse
 
iskurbanov profile image
iskurbanov

Hey Ben, you can achieve that using the "Custom Attributes" when you are creating the checkout URL. Here is the reference: shopify.dev/api/storefront/referen...

Let me know if that helps!

Collapse
 
benbalderas profile image
Ben Balderas

@iskurbanov Thanks! I think it does help.

Are these "customAttributes" per product? or per cart?

If I purchase your course, does it come with this type of support? 🙂 I'm a bit new to these parts

Thread Thread
 
iskurbanov profile image
iskurbanov

You would add the customAttributes per line item into your cart/checkout.

Definitely! I think after the course you would have a good idea on how to create custom option/variants for your products. We go in-depth with using GraphQL to interact with the Storefront API.

Thread Thread
 
benbalderas profile image
Ben Balderas

I was hoping it would be as easy as adding customAttributes here:

```mutation {
  checkoutCreate(input: {
    lineItems: [{ variantId: "${id}", quantity: ${quantity}, customAttributes: ${customAttributes}}],
  }) {
    checkout {
      id
      webUrl
    }
  }
}```
Enter fullscreen mode Exit fullscreen mode

And passing this as an object with a value from a textfield in the UI:

customAttributes: [{ name: 'Name', value: 'David' }]

But this doesn't seem to work

Thread Thread
 
iskurbanov profile image
iskurbanov • Edited

Hey Ben,

Almost! It has to be a key-value pair, so something like this:

mutation {
  checkoutCreate(input: {
    lineItems: [
      { 
        variantId: "VARIANT_ID",
        quantity: 1
      }
    ],
    customAttributes: [
      {
        key: "Name",
        value: "David"
      }
    ]
  }) {
    checkout {
       id
       webUrl
    }
  }
}
Enter fullscreen mode Exit fullscreen mode

If you click on the [AttributeInput!] it tells you the format: shopify.dev/api/storefront/referen...

Let me know if that helps!

Thread Thread
 
prebenwulff profile image
PrebenWulff

Great! But, now where do I see the custom attributes? I cant see them on the order page.

Great course btw!

Thread Thread
 
iskurbanov profile image
iskurbanov

You should see them on your Shopify admin dashboard under orders.

Thread Thread
 
Sloan, the sloth mascot
Comment deleted
 
prebenww profile image
Preben Wulff

nvm, I figured it out.

Collapse
 
mahdisoultana profile image
Mahdi

thank you very much for this please update your field schema some are deprecated

Collapse
 
chrisb007 profile image
Chris B

Thanks for the tutorial. Very much appreciated. After following this step-by-step, I somehow continue to get this error:

FetchError: request to https://https//spnsors.myshopify.com/api/2022-04/graphql.json failed, reason: getaddrinfo ENOTFOUND https
    at ClientRequest.<anonymous>
    at ClientRequest.emit (node:events:365:28)
    at ClientRequest.emit (node:domain:470:12)
    at TLSSocket.socketErrorListener (node:_http_client:447:9)
    at TLSSocket.emit (node:events:365:28)
    at TLSSocket.emit (node:domain:470:12)
    at emitErrorNT (node:internal/streams/destroy:193:8)
    at emitErrorCloseNT (node:internal/streams/destroy:158:3)
    at processTicksAndRejections (node:internal/process/task_queues:83:21) {
  type: 'system',
  errno: 'ENOTFOUND',
  code: 'ENOTFOUND'
}
wait  - compiling /_error (client and server)...
wait  - compiling...
event - compiled client and server successfully in 124 ms (570 modules)
error - utils/fetchShop.js (26:10) @ productData
Error: Products not fetched
  24 |   } catch (error) {
  25 |     console.log(error);
> 26 |     throw new Error('Products not fetched');
     |          ^
  27 |   }
  28 | }
Enter fullscreen mode Exit fullscreen mode

Super new to shopify, how can I debug this?

Collapse
 
iskurbanov profile image
iskurbanov

Hi Chris, seems like there might be an issue with your env file. Double check to see if your values are set up properly. You can also try to input your env values directly into your code to see if that resolves the issue.

Collapse
 
franadev profile image
Fran Agulto

Thanks so much @iskurbanov , I am a Junior level React dev and this was super helpful to get me started. I will take the entire tutorial. Your content is super clear and you explain things very well. I appreciate it!

Collapse
 
fernandodomain profile image
fernandodomain • Edited

I am getting this error :(
dev-to-uploads.s3.amazonaws.com/up...

Collapse
 
iskurbanov profile image
iskurbanov

Could you push your code to github so I can take a look?

Collapse
 
fernandodomain profile image
fernandodomain
Thread Thread
 
iskurbanov profile image
iskurbanov

Shows a 404, maybe it a private repo?

Thread Thread
 
fernandodomain profile image
fernandodomain

Sorry. Made it public

Thread Thread
 
iskurbanov profile image
iskurbanov

Try to add a next.config.js file to the root directory like this: github.com/iskurbanov/shopify-next...

Your next.js might have issues accessing your env file (also I would suggest not pushing that on your public repo in case you have some sensitive information there, luckily the Storefront API is readonly).

Collapse
 
dramoslace profile image
Deiby Dayans R

Do you have some idea how to update the Shopify APP boilerplate with Next 12 version?

Collapse
 
iskurbanov profile image
iskurbanov

You can try changing the next.js version in package.json and then run the npm install command. I would personally wait a bit before implementing Next.js 12 on any major projects.

Collapse
 
x751685875 profile image
许永恒

Do you have a course catalogue?

Collapse
 
iskurbanov profile image
iskurbanov

Hi, if you’re referring to the outline, it’s available at buildnextshop.com. Let me know if that helps!

Collapse
 
danshawl profile image
Dan Shawl

Should this all still work with shopify deprecating private apps? Theres only custom apps now.

Collapse
 
iskurbanov profile image
iskurbanov

Hi Dan, yes it's the same thing, just different name.

Collapse
 
grivas97 profile image
grivas97

for some one reason im only pulling in 1 product?

Collapse
 
grivas97 profile image
grivas97 • Edited

for some reason i couldnt get the updated index.js to work but the this one in the tutorial worked for me

Collapse
 
okanserbest profile image
okanserbest

I made such a design for fashion, you can examine it.

github.com/okanserbest/Shopify-Nex...

Collapse
 
iskurbanov profile image
iskurbanov

Looks great!