From 7555f030e07abafbd563f9aab7132edfb03587da Mon Sep 17 00:00:00 2001 From: bwbl Date: Tue, 13 Jan 2026 16:02:16 +0100 Subject: [PATCH] L9 --- components/ProductDetails.js | 15 +++++++ components/ProductDisplay.js | 87 ++++++++++++++++++++++++++++++++++++ index.html | 72 ++++++++++------------------- main.js | 41 ++++------------- 4 files changed, 134 insertions(+), 81 deletions(-) create mode 100644 components/ProductDetails.js create mode 100644 components/ProductDisplay.js diff --git a/components/ProductDetails.js b/components/ProductDetails.js new file mode 100644 index 0000000..99c121c --- /dev/null +++ b/components/ProductDetails.js @@ -0,0 +1,15 @@ +app.component("product-details", { + props: { + details: [], + }, + template: + /*html*/ + ` +
+

Details:

+
+ {{ detail }} +
+
+ `, +}); diff --git a/components/ProductDisplay.js b/components/ProductDisplay.js new file mode 100644 index 0000000..05a702d --- /dev/null +++ b/components/ProductDisplay.js @@ -0,0 +1,87 @@ +app.component("product-display", { + props: { + premium: { + type: Boolean, + required: true, + }, + }, + template: + /*html*/ + `
+
+
+ +
+
+

{{ title }}

+

In Stock

+

Out of Stock

+
+
+

Shipping: {{ shipping }}

+ + +
+
+
`, + data() { + return { + product: "Socks", + brand: "Vue Mastery", + selectedVariant: 0, + details: ["50% cotton", "30% wool", "20% polyester"], + variants: [ + { + id: 2234, + color: "green", + image: "./assets/images/socks_green.jpg", + quantity: 50, + }, + { + id: 2235, + color: "blue", + image: "./assets/images/socks_blue.jpg", + quantity: 0, + }, + ], + }; + }, + methods: { + addToCart() { + this.cart += 1; + }, + updateVariant(index) { + this.selectedVariant = index; + }, + }, + computed: { + shipping() { + if (this.premium) { + return "Free"; + } else { + return 2.99; + } + }, + title() { + return this.brand + " " + this.product; + }, + image() { + return this.variants[this.selectedVariant].image; + }, + inStock() { + return; + this.variants[this.selectedVariant].quantity; + }, + }, +}); diff --git a/index.html b/index.html index e7aa711..a64fe07 100644 --- a/index.html +++ b/index.html @@ -1,53 +1,29 @@ - - - Vue Mastery - - - - - - -
-
+ + + Vue Mastery + + + + + + + +
+
+
Cart({{ cart }})
+ +
-
Cart({{ cart }})
- -
-
-
- -
-
-

{{ title }}

+ + + + -

In Stock

-

Out of Stock

-
    -
  • {{ detail }}
    • -
- -
-
- - -
-
-
-
- - - - - - - + + + diff --git a/main.js b/main.js index eb5d7f8..45d9b14 100644 --- a/main.js +++ b/main.js @@ -1,34 +1,9 @@ const app = Vue.createApp({ - data() { - return { - cart: 0, - product: 'Socks', - brand: 'Vue Mastery', - selectedVariant: 0, - details: ['50% cotton', '30% wool', '20% polyester'], - variants: [ - { id: 2234, color: 'green', image: './assets/images/socks_green.jpg', quantity: 50 }, - { id: 2235, color: 'blue', image: './assets/images/socks_blue.jpg', quantity: 0 }, - ] - } - }, - methods: { - addToCart() { - this.cart += 1 - }, - updateVariant(index) { - this.selectedVariant = index - } - }, - computed: { - title() { - return this.brand + ' ' + this.product - }, - image() { - return this.variants[this.selectedVariant].image - }, - inStock() { - return this.variants[this.selectedVariant].quantity - }, - } -}) + data() { + return { + cart: 0, + premium: true, + }; + }, + methods: {}, +});