summaryrefslogtreecommitdiff
path: root/iridescence
diff options
context:
space:
mode:
Diffstat (limited to 'iridescence')
-rw-r--r--iridescence/src/App.vue3
-rw-r--r--iridescence/src/components/BusyBar.vue12
-rw-r--r--iridescence/src/components/CartCheckout.vue25
-rw-r--r--iridescence/src/components/Navbar.vue16
-rw-r--r--iridescence/src/components/ProductDetail.vue75
-rw-r--r--iridescence/src/components/cart/CartItem.vue39
-rw-r--r--iridescence/src/router/index.js12
-rw-r--r--iridescence/src/store/index.js24
-rw-r--r--iridescence/src/views/Cart.vue20
-rw-r--r--iridescence/src/views/Checkout.vue12
10 files changed, 188 insertions, 50 deletions
diff --git a/iridescence/src/App.vue b/iridescence/src/App.vue
index 8851fbd..d9499c4 100644
--- a/iridescence/src/App.vue
+++ b/iridescence/src/App.vue
@@ -30,6 +30,7 @@ export default {
<style lang="scss">
@charset "utf-8";
-//$modal-background-background-color: hsla(0, 0%, 4%, 0.2);
+/*modal-background-background-color: hsla(0, 0%, 4%, 0.2);*/
+$modal-content-width: 800px;
@import "../node_modules/bulma/bulma.sass";
</style>
diff --git a/iridescence/src/components/BusyBar.vue b/iridescence/src/components/BusyBar.vue
index 721a5fd..a38cefa 100644
--- a/iridescence/src/components/BusyBar.vue
+++ b/iridescence/src/components/BusyBar.vue
@@ -5,13 +5,6 @@
max="100"
v-if="isBusy"
></progress>
- <progress
- class="progress is-small is-primary"
- v-bind:value="progress"
- max="100"
- v-if="progress < 100"
- >{{ progress }}%</progress
- >
</div>
</template>
@@ -20,10 +13,7 @@ export default {
name: "BusyBar",
computed: {
isBusy() {
- return this.$store.getters.busy;
- },
- progress() {
- return this.$store.getters.progress;
+ return this.$store.state.busy;
}
}
};
diff --git a/iridescence/src/components/CartCheckout.vue b/iridescence/src/components/CartCheckout.vue
index ec72acf..19ad706 100644
--- a/iridescence/src/components/CartCheckout.vue
+++ b/iridescence/src/components/CartCheckout.vue
@@ -1,15 +1,24 @@
<template>
- <div class="buttons">
- <button class="button">
- Cart (5)
- </button>
- <button class="button is-info">
- Checkout
- </button>
+ <div id="cartCheckout">
+ <div class="buttons">
+ <router-link to="/cart" class="button">Cart ({{ inCart }})</router-link>
+ <router-link to="/checkout" class="button is-primary">
+ Checkout
+ </router-link>
+ </div>
</div>
</template>
+
<script>
export default {
- name: "CartCheckout"
+ name: "CartCheckout",
+ computed: {
+ inCart() {
+ return Object.values(this.$store.state.cart).reduce(
+ (acc, cur) => acc + cur,
+ 0
+ );
+ }
+ }
};
</script>
diff --git a/iridescence/src/components/Navbar.vue b/iridescence/src/components/Navbar.vue
index 60db834..3ef4ead 100644
--- a/iridescence/src/components/Navbar.vue
+++ b/iridescence/src/components/Navbar.vue
@@ -82,13 +82,12 @@ export default {
},
categories() {
//const raw = this.$store.getters.products.map(p => p.category.split("/"));
- const raw = [
- [1, 2, 3],
- [1, 2, 4],
- [1, 5],
- [6, 7]
- ];
- console.log(this.generateCategories(raw));
+ //const raw = [
+ // [1, 2, 3],
+ // [1, 2, 4],
+ // [1, 5],
+ // [6, 7]
+ //];
return [];
},
routeName() {
@@ -96,9 +95,8 @@ export default {
}
},
methods: {
- generateCategories(list) {
+ generateCategories() {
let results = [];
- console.log(list);
return results;
},
diff --git a/iridescence/src/components/ProductDetail.vue b/iridescence/src/components/ProductDetail.vue
index 9802d84..430d78b 100644
--- a/iridescence/src/components/ProductDetail.vue
+++ b/iridescence/src/components/ProductDetail.vue
@@ -17,18 +17,56 @@
</div>
<div class="card-content">
- <div class="content">
- <p class="title">
- {{ product.name }}
- </p>
- <p class="subtitle">
- {{ dollars }}
- </p>
- <p class="subtitle">{{ stock }}</p>
- </div>
-
- <div class="content">
- {{ product.description }}
+ <div class="columns">
+ <div class="column">
+ <p class="title">
+ {{ product.name }}
+ </p>
+ <nav class="breadcrumb">
+ <ul>
+ <li v-for="category in categories" :key="category">
+ {{ category }}
+ </li>
+ </ul>
+ </nav>
+ <p>
+ {{ product.description }}
+ </p>
+ </div>
+ <div class="column is-one-third">
+ <p class="subtitle">{{ dollars }}</p>
+ <p class="subtitle">{{ stock }}</p>
+ <div v-if="inCart" class="field has-addons">
+ <p class="control is-expanded">
+ <a class="button is-static is-fullwidth">
+ {{ inCart }} in cart
+ </a>
+ </p>
+ <div class="control">
+ <a
+ @click="incrementCartQuantity(-1)"
+ class="button is-info is-outlined"
+ >
+ -
+ </a>
+ </div>
+ <div class="control">
+ <a
+ @click="incrementCartQuantity(1)"
+ class="button is-info is-outlined"
+ >
+ +
+ </a>
+ </div>
+ </div>
+ <button
+ v-else
+ @click="incrementCartQuantity(1)"
+ class="button is-primary is-fullwidth"
+ >
+ Add to Cart
+ </button>
+ </div>
</div>
</div>
</div>
@@ -42,9 +80,12 @@
export default {
name: "ProductDetail",
computed: {
+ inCart() {
+ return this.$store.state.cart[this.product.id];
+ },
product() {
return this.$store.getters.products.find(
- p => p.id == this.$store.getters.productDetailId
+ p => p.id == this.$store.state.productDetailId
);
},
stock() {
@@ -66,11 +107,19 @@ export default {
return [process.env.VUE_APP_IMAGE_ROOT, this.product.photo_fullsize].join(
"/"
);
+ },
+ categories() {
+ let categories = this.product.category.split("/");
+ categories.splice(0, 1, "All");
+ return categories;
}
},
methods: {
clearDetailId() {
this.$store.commit("productDetailId", 0);
+ },
+ incrementCartQuantity(by) {
+ this.$store.commit("cartItem", { id: this.product.id, by });
}
}
};
diff --git a/iridescence/src/components/cart/CartItem.vue b/iridescence/src/components/cart/CartItem.vue
new file mode 100644
index 0000000..8c2de16
--- /dev/null
+++ b/iridescence/src/components/cart/CartItem.vue
@@ -0,0 +1,39 @@
+<template>
+ <section class="section" id="cartItem">
+ <div class="media">
+ <figure class="media-left image is-square">
+ <img :src="thumbnail" :title="name" />
+ </figure>
+ <div class="media-content">
+ <div class="field">
+ <p class="control">
+ <textarea
+ class="textarea"
+ placeholder="Add a comment..."
+ ></textarea>
+ </p>
+ </div>
+ <nav class="level">
+ <div class="level-left">
+ <div class="level-item">
+ <a class="button is-info">Submit</a>
+ </div>
+ </div>
+ <div class="level-right">
+ <div class="level-item">
+ <label class="checkbox">
+ <input type="checkbox" /> Press enter to submit
+ </label>
+ </div>
+ </div>
+ </nav>
+ </div>
+ </div>
+ </section>
+</template>
+
+<script>
+export default {
+ name: "CartItem"
+};
+</script>
diff --git a/iridescence/src/router/index.js b/iridescence/src/router/index.js
index 8c05e28..cc63967 100644
--- a/iridescence/src/router/index.js
+++ b/iridescence/src/router/index.js
@@ -3,6 +3,8 @@ import VueRouter from "vue-router";
import Home from "../views/Home.vue";
import About from "../views/About.vue";
import Admin from "../views/Admin.vue";
+import Cart from "../views/Cart.vue";
+import Checkout from "../views/Checkout.vue";
Vue.use(VueRouter);
@@ -24,6 +26,16 @@ const routes = [
path: "/admin",
name: "Administration",
component: Admin
+ },
+ {
+ path: "/cart",
+ name: "Cart",
+ component: Cart
+ },
+ {
+ path: "/checkout",
+ name: "Checkout",
+ component: Checkout
}
];
diff --git a/iridescence/src/store/index.js b/iridescence/src/store/index.js
index dabcf31..8208f35 100644
--- a/iridescence/src/store/index.js
+++ b/iridescence/src/store/index.js
@@ -10,17 +10,12 @@ export default new Vuex.Store({
state: {
searchTerm: "",
products: [],
+ cart: {},
busy: false,
compare: a => (a.featured ? -1 : 1),
productDetailId: 0
},
getters: {
- busy(state) {
- return state.busy;
- },
- productDetailId(state) {
- return state.productDetailId;
- },
products(state) {
return state.products
.filter(item => {
@@ -38,6 +33,20 @@ export default new Vuex.Store({
productDetailId(state, id) {
state.productDetailId = id;
},
+ cartItem(state, { id, by }) {
+ if (state.cart[id]) {
+ let newCount = (state.cart[id] += by);
+ state.cart = {
+ ...state.cart,
+ [id]: newCount
+ };
+ } else {
+ state.cart = {
+ ...state.cart,
+ [id]: 1
+ };
+ }
+ },
compare(state, compare) {
state.compare = compare;
},
@@ -75,6 +84,5 @@ export default new Vuex.Store({
commit("toggleBusy");
return photoSet;
}
- },
- modules: {}
+ }
});
diff --git a/iridescence/src/views/Cart.vue b/iridescence/src/views/Cart.vue
new file mode 100644
index 0000000..7060b60
--- /dev/null
+++ b/iridescence/src/views/Cart.vue
@@ -0,0 +1,20 @@
+<template>
+ <div id="cart">
+ <div class="container">
+ <section class="section">
+ <CartItem></CartItem>
+ </section>
+ </div>
+ </div>
+</template>
+
+<script>
+import CartItem from "@/components/cart/CartItem.vue";
+
+export default {
+ name: "Cart",
+ components: {
+ CartItem
+ }
+};
+</script>
diff --git a/iridescence/src/views/Checkout.vue b/iridescence/src/views/Checkout.vue
new file mode 100644
index 0000000..ab28517
--- /dev/null
+++ b/iridescence/src/views/Checkout.vue
@@ -0,0 +1,12 @@
+<template>
+ <div id="checkout">
+ checkout
+ </div>
+</template>
+
+<script>
+export default {
+ name: "Checkout",
+ components: {}
+};
+</script>
generated by cgit v1.2.3 (git 2.25.1) at 2024-11-01 10:25:41 +0000