WIP L10.4

components/ProductDisplay.js

@@ -0,0 +1,93 @@
+app.component("product-display", {
+	props: {
+		premium: {
+			type: Boolean,
+			required: true,
+		},
+	},
+	template:
+		/*html*/
+		`<div class="product-display">
+    <div class="product-container">
+      <div class="product-image">
+        <img v-bind:src="image">
+      </div>
+      <div class="product-info">
+        <h1>{{ title }}</h1>
+
+        <p v-if="inStock">In Stock</p>
+        <p v-else>Out of Stock</p>
+
+        <p>Shipping: {{ shipping }}</p>
+
+        <ul>
+          <li v-for="detail in details">{{ detail }}</li>
+        </ul>
+
+        <div 
+          v-for="(variant, index) in variants" 
+          :key="variant.id" 
+          @mouseover="updateVariant(index)" 
+          class="color-circle" 
+          :style="{ backgroundColor: variant.color }">
+        </div>
+        
+        <button 
+          class="button" 
+          :class="{ disabledButton: !inStock }" 
+          :disabled="!inStock" 
+          v-on:click="addToCart">
+          Add to Cart
+        </button>
+      </div>
+    </div>
+  </div>`,
+	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.$emit("add-to-cart", this.variants[this.selectedVariant].id);
+			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;
+		},
+		shipping() {
+			if (this.premium) {
+				return "Free";
+			}
+			return 2.99;
+		},
+	},
+});

index.html

@@ -12,47 +12,19 @@
 		<div id="app">
 			<div class="nav-bar"></div>
 
-			<div class="cart">Cart({{ cart }})</div>
+			<div class="cart">Cart({{ cart.length }})</div>
-
+			<product-display
-			<div class="product-display">
+				:premium="premium"
-				<div class="product-container">
+				@add-to-cart="updateCart"
-					<div class="product-image">
+			></product-display>
-						<img v-bind:src="image" />
-					</div>
-					<div class="product-info">
-						<h1>{{ title }}</h1>
-						<p v-if="variants[selectedVariant].onSale">
-							{{ sale }}
-						</p>
-						<p v-if="inStock">In Stock</p>
-						<p v-else>Out of Stock</p>
-						<ul>
-							<li v-for="detail in details">{{ detail }}</li>
-						</ul>
-
-						<div
-							v-for="(variant, index) in variants"
-							:key="variant.id"
-							@mouseover="updateVariant(index)"
-							class="color-circle"
-							:style="{ backgroundColor: variant.color }"
-						></div>
-						<button
-							class="button"
-							:class="{ disabledButton: !inStock }"
-							:disabled="!inStock"
-							v-on:click="addToCart"
-						>
-							Add to Cart
-						</button>
-					</div>
-				</div>
-			</div>
 		</div>
 
 		<!-- Import App -->
 		<script src="./main.js"></script>
 
+		<!-- Import Components -->
+		<script src="./components/ProductDisplay.js"></script>
+
 		<!-- Mount App -->
 		<script>
 			const mountedApp = app.mount("#app");

main.js

@@ -1,54 +1,13 @@
 const app = Vue.createApp({
 	data() {
 		return {
-			cart: 0,
+			cart: [],
-			product: "Socks",
+			premium: true,
-			brand: "Vue Mastery",
-			//image: "./assets/images/socks_blue.jpg",
-			//inStock: false,
-			selectedVariant: 0,
-			details: ["50% cotton", "30% wool", "20% polyester"],
-			variants: [
-				{
-					id: 2234,
-					color: "green",
-					image: "./assets/images/socks_green.jpg",
-					quantity: 50,
-					onSale: true,
-				},
-				{
-					id: 2235,
-					color: "blue",
-					image: "./assets/images/socks_blue.jpg",
-					quantity: 0,
-					onSale: false,
-				},
-			],
 		};
 	},
 	methods: {
-		addToCart() {
+		updateCart(id) {
-			this.cart += 1;
+			this.cart.push(id);
-		},
-		updateImage(variantImage) {
-			this.image = variantImage;
-		},
-		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;
-		},
-		sale() {
-			return this.brand + " " + this.product + " is on sale";
 		},
 	},
 });