Building a JAMstack shop with Strapi 4, Nuxt 3, Snipcart - part 1

what the hell is going on in here jim why you got so many candles obviously i'm building my jam style ecommerce candle shop what's it called it could sit quick hey guys so i'm gemma from pixelhop and i'm a developer um this tutorial is going to be me explaining or showing a tutorial on how to build a shop using nux 3 strappy 4 and snip cart so it's going to be split up into a few block blog posts and videos and i'll go through just the process of how i got it all working so this is the shop in front of me and we basically had a lot of fun building out and designing the shop and coming up with silly names for all the candles so it's not a serious shop it is for the sake of this tutorial um but we wanted to have fun with it so that's why we got candle names such as get rich wick fancy a wiki and two hot candle um but yeah say this is the shop and it all like works basket and then this is snip cart and you can check out you can remove things from your basket go back to can you continue shopping or you can change your quantity um yeah and then uh there's like the form sign up for the like subscribe but that's not all linked up that's just part of the designs we wanted to make it look like a real shop um but yeah that's it so i hope that you get value from this video and if there's anything that i've not explained very well or that that you'd like more information on then just get in touch and let me know but let's all get set up and get going so let's make a directory and cd into it pick a sit quick great name so that mixed directory and cdj into it next we're gonna just set up our strappy4 so create strappy and then we want the beta version gonna name this direct this project back end let's get going so what it should do is set everything up and then open up a browser tab and you should see your strappy project set up in the ui and it should be running a port 133 1337 i believe cool let's browser all right ta-da strappy done already so this is like if you're used to strappy three then you'll see there's some differences here the ui looks quite different um yeah i think it looks a lot cleaner personally um so let's go ahead and create a product type so it's we're going to create a if we go to the content type builder and we create a new selection type call it products and then we just want a text field which is going to be the title that'll be short add another field and then let's see the text field description for now and then let's add a number field which will be the price oh so that's our product done basically um next we want to create some content so let's add some products all right get rich quick lovely candle rich in aroma and oh yeah that's fine add an image upload right upload that and finish at 12.99 let's add another one as well oh yeah let's publish that let's make sure it's published let's add another one let's see a wiki the same image finish also 12.99 right so now that we've added some of these we need to make sure that these that the data is public for these candles so if we go to settings user information plugins roles and then public we should see yeah here what we want to do is make sure that find and find one is available to public this will then mean we'll be able to fetch the data in our next um just to check that what we can do is go to here here forward slash api forward slash products and we should see a list of our candles in adjacent format which it tells you as well here that the url um so yeah right so that's good now open up a new tab in terminal and let's create our next free app say mpx nuxi init front end so this is going to do all the setup and then we just need to cd into the front end npm install once that's done we can then we we like keys in tailwind so we'll install tailwind right let's go install tailwind then so that will install tailwind um i always forget the command so i've just pasted it up here and then we just need to generate the post css and the tailwind config files and that will do that and now we just need to go to the next config and add in a um a few lines for that so so it lays that tailwind and then if we do build options then require okay css perfect actually first let's just check that that's what that's running yeah next project's ready now i'm gonna remove this welcome message just add in a h1 just check to see if towing's installed correctly them hints are a promising sign nice right now that tailwind's installed properly what we want to do is add in our um like theme fonts and colors so first of all we need to add in the meta the links to the fonts the nux config so um let's just add in this that should add in the fonts and then this is just getting the google fonts um so it's playfair and um sauce sans i believe so now if we go to the tailwind config i'm just gonna paste in so these are the brand like colors and when you um add a class in the html you just prefix brand gray and then it'll be 300 400 is normally the default or 500 600 etc and then obviously we've got the beige the brown and the orange and then the headings are always playfair font and the body is sore sands so i'm not going into a huge amount of detail in this tutorial about tailwind i'm just i know it's like marmite but um it's just what we use so that should all be added and now um all we want to do is pull through from strappy pull through the real data so let's start doing that it's it's super easy now it's just one line of code so if we go to our app view and this is the main file so now we just need to change this to the next page and then i'm going to add in a folder called pages within that and create index dot view you just need to have templates just for now let's go and fetch the data so script set up so you need this setup now um and we just want to wait to get that and then we want the um url to the back end to where the products will be coming out which was the same url um this one to where we got the json list earlier so if we just add that in here then that's it that's all you need and then we can just do a loop so and then do a v4 product in link um that's gonna have the title let's just let's just okay let's just have a look open up for you so let's have a look in data so look two objects coming back which is good and then within attribute we've got the description price the title [Music] great so let's start putting that out then so we'll have here will be product dot attribute title and then let's add in a link to the product itself so url is products and we can just use the product id i need to add in the so that should just let's add in the description as well why not so products attributes let's go check awesome title text bold we'll do some more styling the next one but this was literally just a quick setup to be able to pull the data free and that's working so that's great so yeah next time we're going to start working through the design start building the pages out we'll create products page create a shop listing page and we'll work we'll create components we'll have a header footer a product teaser but yeah so that's that for this week um thank you for watching from me and my candles over and out

Channel: Pixelhop

Views: 618

Keywords:

Id: AZZ6M1YXWlk

Length: 20min 0sec (1200 seconds)

Published: Tue Nov 30 2021