diff --git a/components/ProductDisplay.js b/components/ProductDisplay.js deleted file mode 100644 index b764ac127..000000000 --- a/components/ProductDisplay.js +++ /dev/null @@ -1,102 +0,0 @@ -app.component('product-display', { - props: { - premium: { - type: Boolean, - required: true - } - }, - template: - /*html*/ - ` -
- -
-
- -
- -
-

{{ productName }}

-

In Stock

-

Out of Stock

-

Shipping: {{ shipping }}

- -
    -
  • {{ detail }}
  • -
- -
-
- - -
-
- - - -
- `, - data() { - return { - product: 'Socks', - brand: 'Vue Mastery', - selectedVariant: 0, - details: ['80% cotton', '20% polyester', 'Gender-neutral'], - variants: [ - { - id: 2234, - color: 'green', - image: './assets/images/socks_green.jpg', - quantity: 10 - }, - { - id: 2235, - color: 'blue', - image: './assets/images/socks_blue.jpg', - quantity: 0 - } - ], - reviews: [], - tabs: ['review-form', 'review-list'], - activeTab: 'review-form' - } - }, - methods: { - addToCart() { - this.$emit('add-to-cart', this.variants[this.selectedVariant].id) - }, - updateProduct(index) { - this.selectedVariant = index - }, - addReview(review) { - this.reviews.push(review) - } - }, - computed: { - productName() { - return this.brand + ' ' + this.product - }, - image() { - return this.variants[this.selectedVariant].image - }, - inStock() { - return this.variants[this.selectedVariant].quantity - }, - shipping() { - if (this.premium) { - return 'Free' - } - return 2.99 - } - } -}) diff --git a/components/ReviewForm.js b/components/ReviewForm.js deleted file mode 100644 index 6e24ea34d..000000000 --- a/components/ReviewForm.js +++ /dev/null @@ -1,52 +0,0 @@ -app.component('review-form', { - template: - /*html*/ - ` -
-

Leave a review

- - - - - - - - - - - - -
- `, - data() { - return { - name: '', - text: '', - rating: null - } - }, - methods: { - onSubmit() { - if (this.name === '' || this.text === '' || this.rating === null) { - alert('Review is incomplete. Please fill out every field.') - return - } - - const review = { - name: this.name, - text: this.text, - rating: this.rating - } - this.$emit('review-submitted', review) - this.name = '' - this.text = '' - this.rating = null - } - } -}) diff --git a/components/ReviewList.js b/components/ReviewList.js deleted file mode 100644 index 5f6f68df3..000000000 --- a/components/ReviewList.js +++ /dev/null @@ -1,22 +0,0 @@ -app.component('review-list', { - template: - /*html*/ - ` -
-

Reviews:

- -
- `, - props: { - reviews: { - type: Array, - required: true - } - } -}) diff --git a/index.html b/index.html index 318bb07d0..5c53ce222 100644 --- a/index.html +++ b/index.html @@ -6,7 +6,7 @@ - +
@@ -27,7 +27,8 @@

{{ product }}

  • {{ detail }}
  • {{ variant.color }}
    - + +
    diff --git a/main.js b/main.js index fe5f42bc4..75c3512f9 100644 --- a/main.js +++ b/main.js @@ -13,11 +13,16 @@ const app = Vue.createApp({ } }, methods: { - addToCart() { + addToCart(){ this.cart += 1 }, - updateImage(variantImage) { + updateImage(variantImage){ this.image = variantImage + }, + deleteFromCart(){ + if (this.cart >0){ + this.cart -= 1 + } } } })