Lately i had the chance to build a tailor-made e-commerce for a client, totally in JAMstack philosophy. This involves using a Static Site Generator (SSG), like Nuxt.js with Vue.js, paired with a headless CMS, in this case Prismic, and then hosted on Netlify (a CDN).
What about the shop/payment logic? Well, for that there is one hell of tool, called Snipcart. It handles all the nasty things very well, lighten the burden of the work.
I want to share my method and my experience with you, so feel free to give me advices about it.
Let’s unravel!
Can’t do very much without an account on these platform right? Head over their website and create one (https://prismic.io/ , https://snipcart.com/).
Note: if the content or the cart will be managed by your client, be sure to create the accounts with his information, not yours.
Launch the create-nuxt-app
and do the initial setup. If you are doing this in an already created project, be sure to upgrade Nuxt to at least version 2.12. This is because they added a bunch of new features that are worthy.
Nothing more simple: Snipcart provides 3 lines of code (yup) to add to your code.
In the nuxt layout you want to enable the cart, past this two lines of code after the `` wrapper:
<div hidden id=”snipcart” data-api-key=”{public-key}”></div>
<script src=”https://cdn.snipcart.com/themes/v3.0.11/default/snipcart.js"></script>
The order is important, otherwise later personalization will have no effect.
The {public-key}
has to be replaced with your key. You can retrieve it on your Snipcart account, under “API KEYS” in the menu on the right. Live and Testing keys are different, be sure to swap the key when the site will go live! Now, head over nuxt.config.js in order to add the css file for Snipcart:
link: [
{ rel: 'stylesheet', href: 'https://cdn.snipcart.com/themes/v3.0.11/default/snipcart.css' },
]
Aaaand done! Note: if you are using nuxt-i18n you’ll need to add parsePages: false
in its settings.
Note2: these snippet are available on your Snipcart account, always at the newest version, be sure to check!
You don’t have to manually add products on the platform (you do this on Prismic). When the product is added to a cart and bought for the first time, the product will be added to the catalog, from there you can set a stock limit, view the buyers, and many other things.
So, how can i add a product to the cart? Easy, you add a few classes to a button
inside your product page:
<button class=”default-button cart-button extra-mt snipcart-add-item”
:data-item-id=”product.uid”
:data-item-price=”product.data.price”
:data-item-url=”$route.path”
:data-item-description=”product.data.description”
:data-item-image=”product.data.thumbnail.url”
:data-item-name=”product.data.title”
data-item-custom1-name=”Size”
:data-item-custom1-options=”size.size”
data-item-custom2-name=”Color”
:data-item-custom2-options=”color.color”>
Add to cart
</button>
This is straight out of my project. The class snipcart-add-item
will add the product to the cart, grabbing all the information from the data fields.
The layout that Snipcart provides for the cart and the checkout page is very nice, but of course you’ll want to modify that to match the style of the site.
There are 2 ways to customize the cart’s view:
I recommend you to visit the documentation (https://docs.snipcart.com/v3/), it’s very well written and they show you a bunch of cool features in order to manage the cart onsite.
Prismic offers various ways for installing their tools, depending on the language/framework. We are using Nuxt, so:
npm install @nuxtjs/prismic
In nuxt.config.js:
modules: [
'@nuxtjs/prismic',
'@/modules/static',
'@/modules/crawler',
],
prismic: {
endpoint: 'https://{your-repo}.cdn.prismic.io/api/v2',
linkResolver: '@/plugins/link-resolver',
htmlSerializer: '@/plugins/html-serializer',
}
generate: {
fallback: '404.html',
}
Mmm, let’s see:
Modules static and crawler are newly added features requiring Nuxt >2.12. What are they? They will handle the dynamic generation of your routes. You will no longer have to write server logic in nuxt.config.js in order to retrieve all the routes server side. This is, frankly, pretty awesome. The crawler will seek all the links generated on deploy phase and generate the related routes in complete autonomy.
And again:endpoint
: this is the link to your Prismic repo.
linkResolver
and htmlSerializer
: JS files needed to convert links and templating. (useful on blogs, or in projects where the content created on Prismic are articles with Rich Texts or other complex stuff; in my case, i don’t need them).
Now that everything is set, we’re gonna see some new feature introduced with Nuxt 2.12.
For Server Side Rendering, in order to retrieve data to make all the static page, asyncData()
or nuxtServerInit
were used.
But now we can use the new fetch(). What are the main differences?
asyncData()
does not have access to this
, while fetch
does.data
props directly.$fetchState.pending
, to check if the component is still loading data from the API (and showing a spinner, instead)asyncData()
would wait for the response in order to render the page.head()
meta (for example for a product page), you’ll need to use asyncData()
because it will get the data before head()
is called. In my case I made a tiny api call in asyncData()
only for title and description, the rest is retrieved by fetch()
.More here: https://nuxtjs.org/api/pages-fetch/
That said, let’s see some code fetching from Prismic API:
<script>
export default {
async fetch() {
try{
const query = await this.$prismic.api.query(this.$prismic.predicates.at('document.type','category'), { orderings : '[my.category.position]' })
this.docs = query.results
}
catch (e) {
console.log(e)
}
}, fetchDelay: 500,
data(){
return{
docs: []
}
}
}
</script>
Obviously you need to create some content on Prismic in order to retrieve something. So login and make the desired custom types and related content. Of course I won’t dive deep on how to query the api (their docs are also very good: https://prismic.io/docs/vuejs/query-the-api/how-to-query-the-api).
If you didn’t already, join netlify. Pair your github account, select the repo to deploy, assign the nuxt generate
to the master branch, connect your custom domain and start deploying! Every push you make to your repo will trigger a build (you can still disable that).
And that’s it! Now you only have to code a beautiful site/app.
Thank you…
#vuejs #nuxtjs #javascript