Compare commits
3 Commits
ac72852668
...
7555f030e0
| Author | SHA1 | Date | |
|---|---|---|---|
|
7555f030e0 | ||
|
bc68ec8034 | ||
|
|
82171f66ab |
15
components/ProductDetails.js
Normal file
15
components/ProductDetails.js
Normal file
@ -0,0 +1,15 @@
|
||||
app.component("product-details", {
|
||||
props: {
|
||||
details: [],
|
||||
},
|
||||
template:
|
||||
/*html*/
|
||||
`
|
||||
<div class="product-details">
|
||||
<p>Details:</p>
|
||||
<div v-for="(detail, index) in details">
|
||||
{{ detail }}
|
||||
</div>
|
||||
</div>
|
||||
`,
|
||||
});
|
||||
87
components/ProductDisplay.js
Normal file
87
components/ProductDisplay.js
Normal file
@ -0,0 +1,87 @@
|
||||
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>
|
||||
<div
|
||||
v-for="(variant, index) in variants"
|
||||
:key="variant.id"
|
||||
@mouseover="updateVariant(index)"
|
||||
class="color-circle"
|
||||
:style="{ backgroundColor: variant.color }">
|
||||
</div>
|
||||
<p>Shipping: {{ shipping }}</p>
|
||||
<product-details :details="details"></product-details>
|
||||
<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.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;
|
||||
},
|
||||
},
|
||||
});
|
||||
36
index.html
36
index.html
@ -6,48 +6,24 @@
|
||||
<!-- Import Styles -->
|
||||
<link rel="stylesheet" href="./assets/styles.css" />
|
||||
<!-- Import Vue.js -->
|
||||
<script src="https://unpkg.com/vue@3.0.0-beta.12/dist/vue.global.js"></script>
|
||||
<script src="https://unpkg.com/vue@3.0.11/dist/vue.global.js"></script>
|
||||
<!-- Import Components -->
|
||||
</head>
|
||||
<body>
|
||||
<div id="app">
|
||||
<div class="nav-bar"></div>
|
||||
|
||||
<div class="cart">Cart({{ cart }})</div>
|
||||
|
||||
<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>
|
||||
<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>
|
||||
<product-display :premium="premium"></product-display>
|
||||
</div>
|
||||
|
||||
<!-- Import App -->
|
||||
<script src="./main.js"></script>
|
||||
<script src="./components/ProductDisplay.js"></script>
|
||||
<script src="./components/ProductDetails.js"></script>
|
||||
|
||||
<!-- Mount App -->
|
||||
<script>
|
||||
const mountedApp = app.mount('#app')
|
||||
const mountedApp = app.mount("#app");
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
33
main.js
33
main.js
@ -2,33 +2,8 @@ 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 },
|
||||
]
|
||||
}
|
||||
premium: true,
|
||||
};
|
||||
},
|
||||
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].image
|
||||
}
|
||||
}
|
||||
})
|
||||
methods: {},
|
||||
});
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user