Goal

Use your knowledge of WordPress content management to setup an API for consumption in your cross-course project.

Brief

In this assignment, you’ll be using the WordPress REST API to manage the products for a website. Instead of having the products hardcoded into the HTML, you will use JavaScript to fetch the list of WordPress products and display them on your site.

There are two distinct aspects to this assignment:

  1. Setup and configure a headless WordPress + WooCommerce API
  2. Fetch this API as a data source and display it as part of your cross-course project

Level 1 Process

Setup a WordPress instance

  1. Install WordPress locally
  2. Install and configure the WooCommerce plugin
  3. Add at least 5 products to WooCommerce
  4. Create a Noroff admin user with a strong, unique password
  5. Deploy your WordPress instance to a remote dynamic host

Implement WordPress API using JavaScript

  1. Create JavaScript to fetch an array of product data from WordPress API
  2. Create JavaScript functionality to fetch a single product’s data from WordPress API
  3. Create JavaScript functionality to render a grid of product data in HTML as thumbnails
  4. Create a Product Detail page that uses an id search parameter render a single product’s data
  5. Make sure that all changes to your project are committed and pushed
  6. Deploy your cross-course project to a static host (e.g. Netlify, GitHub Pages)

Level 2 Process (optional)

Implement client-side sort and filter options for products. Some examples include sorting by price, filtering by custom attributes or featured status.

Important Notes

  • There is no requirement to create a working basket feature
  • There is no requirement to create a working checkout feature
  • The /wp-json/wc/store/products/ route does not require authentication

WATCH

Video: Sort() method (13m 8s)

Video: Filter() method (10m 12s)

READ

Article: Array.prototype.sort()

Article: Array.prototype.filter()

Delivery

The following links are required for delivery:

  1. Cross-course project GitHub repository
  2. Noroff user password, so that teachers can login to wp-admin
  3. Deployed website URL
  4. Deployed WooCommerce Products API endpoint (/wp-json/wc/store/products)
Tags: