Overview

We were tasked with creating a e-commerce site we had done at the beginning of our course and bettering it with the skills we had learnt. We had to clean up the code, make the site into a headless CMS and allowing users to add products to cart.

Brief

In this assignment we used the WordPress REST API to manage the products for the website deployed on Netlify. Instead of having the products hardcoded into the HTML, we used JavaScript to fetch the list of WordPress products and display them on the site.

Level 1 Process

1. Created an installation of WordPress on the web host and set it to be headless so that the front-end generated by WordPress is hidden from the public.
2. Added the WooCommerce plugin and add products onto the site.
3. Using JavaScript, fetched the data from the WordPress REST API and added it to the website in the relevant sections of the project.
4. Using query string parameters allowed the user to click on an individual item in the product list and took them to see that product, with the specific data for that product on the page.

Level 2 Process (optional)

1. If we had any filters or sorts on the website, try sorting through the results we're getting back from the API.