Compare commits
4 Commits
| Author | SHA1 | Date | |
|---|---|---|---|
|
68bf827963 | ||
|
6ea7ba69e6 | ||
|
9322239192 | ||
|
|
ff75ad7b6e |
@ -25,7 +25,7 @@ body {
|
|||||||
margin: 25px 100px;
|
margin: 25px 100px;
|
||||||
float: right;
|
float: right;
|
||||||
border: 1px solid #d8d8d8;
|
border: 1px solid #d8d8d8;
|
||||||
padding: 30px 30px;
|
padding: 10px 30px;
|
||||||
background-color: white;
|
background-color: white;
|
||||||
-webkit-box-shadow: 0px 2px 15px -12px rgba(0, 0, 0, 0.57);
|
-webkit-box-shadow: 0px 2px 15px -12px rgba(0, 0, 0, 0.57);
|
||||||
-moz-box-shadow: 0px 2px 15px -12px rgba(0, 0, 0, 0.57);
|
-moz-box-shadow: 0px 2px 15px -12px rgba(0, 0, 0, 0.57);
|
||||||
|
|||||||
@ -1,93 +0,0 @@
|
|||||||
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;
|
|
||||||
},
|
|
||||||
},
|
|
||||||
});
|
|
||||||
59
index.html
59
index.html
@ -1,33 +1,36 @@
|
|||||||
<!DOCTYPE html>
|
<!DOCTYPE html>
|
||||||
<html lang="en">
|
<html lang="en">
|
||||||
<head>
|
<head>
|
||||||
<meta charset="UTF-8" />
|
<meta charset="UTF-8" />
|
||||||
<title>Vue Mastery</title>
|
<title>Vue Mastery</title>
|
||||||
<!-- Import Styles -->
|
<!-- Import Styles -->
|
||||||
<link rel="stylesheet" href="./assets/styles.css" />
|
<link rel="stylesheet" href="./assets/styles.css" />
|
||||||
<!-- Import Vue.js -->
|
<!-- Import Vue.js -->
|
||||||
<script src="https://unpkg.com/vue@3.0.11/dist/vue.global.js"></script>
|
<script src="https://unpkg.com/vue@3.0.11/dist/vue.global.js"></script>
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
<div id="app">
|
<div id="app">
|
||||||
<div class="nav-bar"></div>
|
<div class="nav-bar"></div>
|
||||||
|
|
||||||
|
<div class="product-display">
|
||||||
|
<div class="product-container">
|
||||||
|
<div class="product-image">
|
||||||
|
<img :src="image" alt="">
|
||||||
|
</div>
|
||||||
|
<div class="product-info">
|
||||||
|
<h1>{{ product }}</h1>
|
||||||
|
<a :href="url">{{ url }}</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
<div class="cart">Cart({{ cart.length }})</div>
|
<!-- Import App -->
|
||||||
<product-display
|
<script src="./main.js"></script>
|
||||||
:premium="premium"
|
|
||||||
@add-to-cart="updateCart"
|
|
||||||
></product-display>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<!-- Import App -->
|
<!-- Mount App -->
|
||||||
<script src="./main.js"></script>
|
<script>
|
||||||
|
const mountedApp = app.mount('#app')
|
||||||
<!-- Import Components -->
|
</script>
|
||||||
<script src="./components/ProductDisplay.js"></script>
|
</body>
|
||||||
|
|
||||||
<!-- Mount App -->
|
|
||||||
<script>
|
|
||||||
const mountedApp = app.mount("#app");
|
|
||||||
</script>
|
|
||||||
</body>
|
|
||||||
</html>
|
</html>
|
||||||
|
|||||||
20
main.js
20
main.js
@ -1,13 +1,9 @@
|
|||||||
const app = Vue.createApp({
|
const app = Vue.createApp({
|
||||||
data() {
|
data() {
|
||||||
return {
|
return {
|
||||||
cart: [],
|
product: 'Socks',
|
||||||
premium: true,
|
image: './assets/images/socks_green.jpg',
|
||||||
};
|
url: 'https://etml.ch'
|
||||||
},
|
}
|
||||||
methods: {
|
}
|
||||||
updateCart(id) {
|
})
|
||||||
this.cart.push(id);
|
|
||||||
},
|
|
||||||
},
|
|
||||||
});
|
|
||||||
|
|||||||
Loading…
x
Reference in New Issue
Block a user