Updating the Add to basket button when adding an item

As a usability improvement to our shop, we are going to update the Add to basket button when a user clicks it. This will change to Added to your basket and apply a class for a set period of time, for example, two seconds, before returning to its previous state. The CSS class will allow you to style the button differently—for example, changing the background to green or transforming it slightly.

This will be achieved by using a data property on the component—setting it to true and false as the item gets added. The CSS class and text will use this property to determine what to show and a setTimeout JavaScript function will change the state of the property.

Open the ProductPage component and add a new key to the data object titled addedToBasket. Set this to false by default:

data() {
  return {
    slug: this.$route.params.slug,
    productNotFound: false,
    image: false,
    variation: false,
addedToBasket: false
  }
}

Update the button text...