8 |
11 |
12 |
--------------------------------------------------------------------------------
/src/assets/coat_600.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/travishorn/vue-online-store-demo/039c330236e67c44c42be9636dcede177041aeca/src/assets/coat_600.png
--------------------------------------------------------------------------------
/src/assets/heels_600.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/travishorn/vue-online-store-demo/039c330236e67c44c42be9636dcede177041aeca/src/assets/heels_600.png
--------------------------------------------------------------------------------
/src/assets/hoodie_600.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/travishorn/vue-online-store-demo/039c330236e67c44c42be9636dcede177041aeca/src/assets/hoodie_600.png
--------------------------------------------------------------------------------
/src/assets/jacket_600.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/travishorn/vue-online-store-demo/039c330236e67c44c42be9636dcede177041aeca/src/assets/jacket_600.png
--------------------------------------------------------------------------------
/src/assets/main.css:
--------------------------------------------------------------------------------
1 | @tailwind base;
2 | @tailwind components;
3 | @tailwind utilities;
4 |
--------------------------------------------------------------------------------
/src/assets/shirt_600.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/travishorn/vue-online-store-demo/039c330236e67c44c42be9636dcede177041aeca/src/assets/shirt_600.png
--------------------------------------------------------------------------------
/src/assets/sneakers_600.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/travishorn/vue-online-store-demo/039c330236e67c44c42be9636dcede177041aeca/src/assets/sneakers_600.png
--------------------------------------------------------------------------------
/src/components/SiteHeader.vue:
--------------------------------------------------------------------------------
1 |
7 |
8 |
9 |
10 | Vue Online Store
11 |
12 |
13 |
16 |
17 |
--------------------------------------------------------------------------------
/src/main.js:
--------------------------------------------------------------------------------
1 | import { createApp } from "vue";
2 | import { createPinia } from "pinia";
3 |
4 | import App from "./App.vue";
5 | import router from "./router";
6 |
7 | import "./assets/main.css";
8 |
9 | const app = createApp(App);
10 |
11 | app.use(createPinia());
12 | app.use(router);
13 |
14 | app.mount("#app");
15 |
--------------------------------------------------------------------------------
/src/router/index.js:
--------------------------------------------------------------------------------
1 | import { createRouter, createWebHistory } from "vue-router";
2 | import ShopView from "../views/ShopView.vue";
3 | import ItemView from "../views/ItemView.vue";
4 | import CartView from "../views/CartView.vue";
5 |
6 | const router = createRouter({
7 | history: createWebHistory(import.meta.env.BASE_URL),
8 | routes: [
9 | {
10 | path: "/",
11 | name: "shop",
12 | component: ShopView,
13 | },
14 | {
15 | path: "/item/:id",
16 | name: "item",
17 | component: ItemView,
18 | },
19 | {
20 | path: "/cart",
21 | name: "cart",
22 | component: CartView,
23 | }
24 | ]
25 | })
26 |
27 | export default router;
28 |
--------------------------------------------------------------------------------
/src/stores/shop.js:
--------------------------------------------------------------------------------
1 | import { defineStore } from "pinia";
2 | import coatImage from "../assets/coat_600.png";
3 | import heelsImage from "../assets/heels_600.png";
4 | import hoodieImage from "../assets/hoodie_600.png";
5 | import jacketImage from "../assets/jacket_600.png";
6 | import shirtImage from "../assets/shirt_600.png";
7 | import sneakersImage from "../assets/sneakers_600.png";
8 |
9 | export const useShopStore = defineStore("shop", {
10 | state: () => {
11 | return {
12 | forSale: [
13 | {
14 | id: "coat",
15 | title: "Coat",
16 | price: 2999,
17 | photo: coatImage,
18 | description: "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Condimentum mattis pellentesque id nibh. Varius duis at consectetur lorem donec massa sapien faucibus.",
19 | },
20 | {
21 | id: "heels",
22 | title: "Heels",
23 | price: 2124,
24 | photo: heelsImage,
25 | description: "Pellentesque sit amet porttitor eget dolor morbi. Cras pulvinar mattis nunc sed blandit. Sem fringilla ut morbi tincidunt.",
26 | },
27 | {
28 | id: "hoodie",
29 | title: "Hoodie",
30 | price: 2499,
31 | photo: hoodieImage,
32 | description: "Urna porttitor rhoncus dolor purus non enim praesent elementum. Morbi non arcu risus quis varius quam quisque id diam. Volutpat commodo sed egestas egestas fringilla phasellus faucibus.",
33 | },
34 | {
35 | id: "jacket",
36 | title: "Jacket",
37 | price: 2800,
38 | photo: jacketImage,
39 | description: "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Condimentum mattis pellentesque id nibh. Varius duis at consectetur lorem donec massa sapien faucibus.",
40 | },
41 | {
42 | id: "shirt",
43 | title: "Shirt",
44 | price: 1190,
45 | photo: shirtImage,
46 | description: "Pellentesque sit amet porttitor eget dolor morbi. Cras pulvinar mattis nunc sed blandit. Sem fringilla ut morbi tincidunt.",
47 | },
48 | {
49 | id: "sneakers",
50 | title: "Sneakers",
51 | price: 2699,
52 | photo: sneakersImage,
53 | description: "Urna porttitor rhoncus dolor purus non enim praesent elementum. Morbi non arcu risus quis varius quam quisque id diam. Volutpat commodo sed egestas egestas fringilla phasellus faucibus.",
54 | },
55 | ],
56 | cart: [],
57 | addedMessageShown: false,
58 | };
59 | },
60 | getters: {
61 | cartQuantity() {
62 | return this.cart.reduce((prev, curr) => {
63 | return prev + curr.quantity;
64 | }, 0);
65 | },
66 | cartSubtotal() {
67 | return this.cart.reduce((prev, curr) => {
68 | return prev + curr.price * curr.quantity;
69 | }, 0);
70 | },
71 | cartShipping() {
72 | return (Math.ceil(this.cartQuantity / 10)) * 500;
73 | },
74 | cartTax() {
75 | return (this.cartSubtotal * 0.08);
76 | },
77 | cartTotal() {
78 | return this.cartSubtotal + this.cartShipping + this.cartTax;
79 | },
80 | },
81 | actions: {
82 | addToCart(item) {
83 | const existingId = this.cart
84 | .findIndex((cartItem) => cartItem.id === item.id);
85 |
86 | if (existingId !== -1) {
87 | this.cart[existingId].quantity += 1;
88 | } else {
89 | this.cart.push({
90 | ...item,
91 | quantity: 1,
92 | });
93 | }
94 |
95 | this.addedMessageShown = true;
96 |
97 | setTimeout(() => {
98 | this.addedMessageShown = false;
99 | }, 2000);
100 | },
101 | removeItem(removedItem) {
102 | this.cart = this.cart.filter((item) => item.id !== removedItem.id);
103 | },
104 | },
105 | });
106 |
--------------------------------------------------------------------------------
/src/views/CartView.vue:
--------------------------------------------------------------------------------
1 |
7 |
8 |
9 |
10 |
78 |
79 |
--------------------------------------------------------------------------------
/src/views/ItemView.vue:
--------------------------------------------------------------------------------
1 |
14 |
15 |
16 | Shopping Cart
11 | 12 |
13 |
73 |
74 |
14 |
42 |
43 |
15 | ![]()
16 |
41 |
17 |
40 |
18 |
21 |
22 | {{ item.title }}
19 | ${{ item.price / 100 }}
20 |
23 |
31 |
32 |
33 |
34 |
39 |
44 |
72 | Order summary
45 | 46 |
47 |
67 |
68 |
71 |
48 |
51 |
52 | Subtotal
49 | ${{ shop.cartSubtotal / 100 }}
50 |
53 |
56 |
57 | Shipping
54 | ${{ shop.cartShipping / 100 }}
55 |
58 |
61 |
62 | Tax
59 | ${{ (shop.cartTax / 100).toFixed(2) }}
60 |
63 |
66 | Order total
64 | ${{ (shop.cartTotal / 100).toFixed(2) }}
65 |
75 | Nothing here, yet!
76 |
77 |
17 | ![]()
18 |
19 |
42 |
43 |
44 |
60 |
--------------------------------------------------------------------------------
/src/views/ShopView.vue:
--------------------------------------------------------------------------------
1 |
7 |
8 |
9 |
10 |
20 |
41 |
21 |
27 |
28 |
40 | {{ item.title }}
22 | 23 |${{ item.price / 100 }}
24 |
25 | {{ item.description }}
26 |
11 |
16 | ![280 by 320 pixel placeholder]()
21 |
26 |
27 |
28 |
--------------------------------------------------------------------------------
/tailwind.config.js:
--------------------------------------------------------------------------------
1 | /** @type {import('tailwindcss').Config} */
2 | module.exports = {
3 | content: [
4 | "./index.html",
5 | "./src/**/*.{js,vue}",
6 | ],
7 | theme: {
8 | extend: {
9 | colors: {
10 | beige: "#f7f7f7",
11 | },
12 | },
13 | },
14 | plugins: [],
15 | };
16 |
--------------------------------------------------------------------------------
/vite.config.js:
--------------------------------------------------------------------------------
1 | import { fileURLToPath, URL } from "node:url";
2 | import { defineConfig } from "vite";
3 | import vue from "@vitejs/plugin-vue";
4 |
5 | // https://vitejs.dev/config/
6 | export default defineConfig({
7 | plugins: [vue()],
8 | resolve: {
9 | alias: {
10 | "@": fileURLToPath(new URL("./src", import.meta.url))
11 | },
12 | },
13 | });
14 |
--------------------------------------------------------------------------------
22 |
25 | {{ item.title }}
23 | ${{ item.price / 100 }}
24 |