Building an E-Commerce Store - Adding a Checkout Chapter 11}}
</button>Refresh the app and navigate to a product to ensure the correct text is being shown. Update
the addedToBasket variable to true to make sure everything is displaying as it should.
Set it back to false.
Next, within the addToBasket() method, set the property to true. This should update the
text when the item is added to the basket:
addToBasket() {
this.$store.commit('addToBasket', this);this.addedToBasket = true;
}When you click the button, the text will now update, however it will never reset. Add a
setTimeout JavaScript function afterward, which sets it back to false after a certain
period of time:
addToBasket() {
this.$store.commit('addToBasket', this);this.addedToBasket = true;
setTimeout(() => this.addedToBasket = false, 2000);
}The timing for setTimeout is in milliseconds, so 2000 is equal to two seconds. Feel free to
tweak and play with this figure as much as you see fit.
One last addition would be to reset this value back to false if the variation is updated or
the product is changed. Add the statement to both watch functions:
watch: {
variation(v) {
if(v.hasOwnProperty('image')) {
this.updateImage(v.image);
}
this.addedToBasket = false;
},'$route'(to) {
this.slug = to.params.slug;
this.addedToBasket = false;
}
}