Skip to content

M
mfe-mcart
Commit d5d1c0d5 authored by Garima Jain's avatar Garima Jain
Browse files
Options

Added mcart app

parent d2ac2f07
Expand all Show whitespace changes
Inline Side-by-side
Showing with 40953 additions and 0 deletions
babel.config.js 0 → 100644
View file @ d5d1c0d5
module.exports = {
presets: [
'@vue/cli-plugin-babel/preset'
]
}
dist/demo.html 0 → 100644
View file @ d5d1c0d5
<meta charset="utf-8">
<title>mComponents demo</title>
<script src="./mComponents.umd.js"></script>
<script>
console.log(mComponents)
</script>
dist/img/macyStar.760f3c23.svg 0 → 100644
View file @ d5d1c0d5
This diff is collapsed.
dist/mComponents.common.js 0 → 100644
View file @ d5d1c0d5
This diff is collapsed.
dist/mComponents.common.js.map 0 → 100644
View file @ d5d1c0d5
This source diff could not be displayed because it is too large. You can view the blob instead.
dist/mComponents.umd.js 0 → 100644
View file @ d5d1c0d5
This diff is collapsed.
dist/mComponents.umd.js.map 0 → 100644
View file @ d5d1c0d5
This source diff could not be displayed because it is too large. You can view the blob instead.
dist/mComponents.umd.min.js 0 → 100644
View file @ d5d1c0d5
This diff is collapsed.
dist/mComponents.umd.min.js.map 0 → 100644
View file @ d5d1c0d5
This source diff could not be displayed because it is too large. You can view the blob instead.
package-lock.json 0 → 100644
View file @ d5d1c0d5
This diff is collapsed.
package.json 0 → 100644
View file @ d5d1c0d5
{
"name": "mcart",
"version": "0.1.5",
"private": false,
"main": "./dist/mComponents.common.js",
"files": [
"dist/*",
"src/*",
"public/*",
"*.json",
"*.js",
"plugins/*"
],
"scripts": {
"serve": "vue-cli-service serve",
"build": "vue-cli-service build",
"build-bundle": "vue-cli-service build --target lib --name mComponents ./src/components/index.js",
"lint": "vue-cli-service lint"
},
"dependencies": {
"axios": "^0.21.1",
"core-js": "^3.6.5",
"vue": "^3.0.0",
"vue-axios": "^3.2.5",
"vue-star-rating": "^2.1.0"
},
"devDependencies": {
"@vue/cli-plugin-babel": "~4.5.0",
"@vue/cli-plugin-eslint": "~4.5.0",
"@vue/cli-service": "~4.5.0",
"@vue/compiler-sfc": "^3.0.0",
"babel-eslint": "^10.1.0",
"eslint": "^6.7.2",
"eslint-plugin-vue": "^7.0.0"
},
"eslintConfig": {
"root": true,
"env": {
"node": true
},
"extends": [
"plugin:vue/vue3-essential",
"eslint:recommended"
],
"parserOptions": {
"parser": "babel-eslint"
},
"rules": {}
},
"browserslist": [
"> 1%",
"last 2 versions",
"not dead"
]
}
public/index.html 0 → 100644
View file @ d5d1c0d5
<!DOCTYPE html>
<html lang="">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<link rel="icon" href="<%= BASE_URL %>favicon.ico">
<title><%= htmlWebpackPlugin.options.title %></title>
</head>
<body>
<noscript>
<strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
</noscript>
<div id="mcart"></div>
<!-- built files will be auto injected -->
</body>
</html>
src/.DS_Store 0 → 100644
View file @ d5d1c0d5
File added
src/App.vue 0 → 100644
View file @ d5d1c0d5
<template>
<div id="mcart">
<div class="container">
<div class="justify-content-md-center row">
<div class="col col-lg-8">
<top-bar></top-bar>
<list-cart-items displaying="block"></list-cart-items>
<banner>
<div
class="card"
style="width: 95%; padding: 0.75rem 1.25rem; font-size: 0.875rem"
>
<div class="row" style="align-items: center">
<div class="col col-lg-2">
<img src="./assets/macyStar.svg" alt="image" />
</div>
<div class="col col-lg-10">
<p>Get better benefits when you shop with Star Rewards!</p>
</div>
</div>
</div>
</banner>
<frequently-view>
<div class="card">
<h3>Current Offers</h3>
<p>
Based on certain items in your bag, you qualify for additional
offers. Some may require a selection.
</p>
<list-cart-items displaying="none"></list-cart-items>
</div>
</frequently-view>
<suggest-product title="Customers Also Shopped" :list="list"></suggest-product>
<suggest-product title="Recently Viewed" :list="list"></suggest-product>
</div>
<div class="col col-lg-4">
<promo></promo>
<checkout-info></checkout-info>
</div>
</div>
</div>
</div>
</template>
<script>
import TopBar from "./components/TopBar.vue";
import Promo from "./components/Promo.vue";
import CheckoutInfo from "./components/CheckoutInfo.vue";
import Banner from "./components/Banner.vue";
import FrequentlyView from "./components/FrequentlyView.vue";
import ListCartItems from "./components/ListCartItems.vue";
import SuggestProduct from "./components/SuggestProduct.vue";
export default {
name: "App",
data() {
return {
list: [],
loading: false,
};
},
props:{
productList: Array
},
components: {
TopBar,
Promo,
CheckoutInfo,
Banner,
FrequentlyView,
ListCartItems,
SuggestProduct,
},
mounted() {
this.loading = true; //the loading begin
fetch("https://fakestoreapi.com/products?limit=5")
.then((res) => res.json())
.then((res) => {
this.list = res;
console.log("===list", this.list)
})
.finally(() => (this.loading = false)); // set loading to false when request finish
},
};
</script>
<style>
body {
margin: 0;
}
.container {
margin: 0 200px;
}
.input-group {
position: relative;
display: flex;
flex-wrap: wrap;
align-items: stretch;
width: 100%;
}
.input-group-append {
margin-left: -1px;
}
.input-group-append,
.input-group-prepend {
display: flex;
}
#mcart {
background-color: #ccc;
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
}
a {
line-height: inherit;
color: #000;
text-decoration: underline;
cursor: pointer;
}
.row {
display: flex;
flex-wrap: wrap;
margin-right: -15px;
margin-left: -15px;
}
.card {
background-color: #fff;
position: relative;
display: flex;
flex-direction: column;
min-width: 0;
word-wrap: break-word;
background-color: #fff;
background-clip: border-box;
border: 1px solid rgba(0, 0, 0, 0.125);
border-radius: 0.25rem;
margin-bottom: 20px;
padding: 8px;
}
.col-lg-8 {
flex: 0 0 66.666667%;
max-width: 66.666667%;
}
.col-lg-2 {
flex: 0 0 16.666667%;
max-width: 16.666667%;
}
.col-lg-3 {
flex: 0 0 25%;
max-width: 25%;
}
.col-lg-5 {
flex: 0 0 41.666667%;
max-width: 41.666667%;
}
.col-lg-6 {
flex: 0 0 50%;
max-width: 50%;
}
.col-lg-7 {
flex: 0 0 58.333333%;
max-width: 58.333333%;
}
.col-lg-9 {
flex: 0 0 75%;
max-width: 75%;
}
.col-lg-10 {
flex: 0 0 83.333333%;
max-width: 83.333333%;
}
.col-lg-12 {
flex: 0 0 100%;
max-width: 100%;
}
.col-1,
.col-2,
.col-3,
.col-4,
.col-5,
.col-6,
.col-7,
.col-8,
.col-9,
.col-10,
.col-11,
.col-12,
.col,
.col-auto,
.col-sm-1,
.col-sm-2,
.col-sm-3,
.col-sm-4,
.col-sm-5,
.col-sm-6,
.col-sm-7,
.col-sm-8,
.col-sm-9,
.col-sm-10,
.col-sm-11,
.col-sm-12,
.col-sm,
.col-sm-auto,
.col-md-1,
.col-md-2,
.col-md-3,
.col-md-4,
.col-md-5,
.col-md-6,
.col-md-7,
.col-md-8,
.col-md-9,
.col-md-10,
.col-md-11,
.col-md-12,
.col-md,
.col-md-auto,
.col-lg-1,
.col-lg-2,
.col-lg-3,
.col-lg-4,
.col-lg-5,
.col-lg-6,
.col-lg-7,
.col-lg-8,
.col-lg-9,
.col-lg-10,
.col-lg-11,
.col-lg-12,
.col-lg,
.col-lg-auto,
.col-xl-1,
.col-xl-2,
.col-xl-3,
.col-xl-4,
.col-xl-5,
.col-xl-6,
.col-xl-7,
.col-xl-8,
.col-xl-9,
.col-xl-10,
.col-xl-11,
.col-xl-12,
.col-xl,
.col-xl-auto {
position: relative;
width: 100%;
padding-right: 15px;
padding-left: 15px;
}
.no-gutters {
margin-right: 0;
margin-left: 0;
}
.no-gutters > .col,
.no-gutters > [class*="col-"] {
padding-right: 0;
padding-left: 0;
}
.col-lg-4 {
flex: 0 0 33.333333%;
max-width: 33.333333%;
}
.col {
flex-basis: 0;
flex-grow: 1;
}
img {
vertical-align: middle;
border-style: none;
flex-shrink: 0;
width: 70%;
}
.card-body {
flex: 1 1 auto;
min-height: 1px;
padding: 1.25rem;
}
.card-title {
margin-bottom: 0.75rem;
}
.btn {
display: inline-block;
font-weight: 400;
color: #212529;
text-align: center;
vertical-align: middle;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
background-color: transparent;
border: 1px solid transparent;
padding: 0.375rem 0.75rem;
font-size: 1rem;
line-height: 1.5;
border-radius: 0.25rem;
transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out,
border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}
.btn-secondary {
color: #fff;
background-color: #6c757d;
border-color: #6c757d;
}
</style>
src/assets/macyStar.svg 0 → 100644
View file @ d5d1c0d5
This diff is collapsed.
src/components/Banner.vue 0 → 100644
View file @ d5d1c0d5
<template>
<slot></slot>
</template>
<script>
export default {
}
</script>
src/components/CheckoutInfo.vue 0 → 100644
View file @ d5d1c0d5
<template>
<div class="card mb-3">
<h3>Offers</h3>
<p>Subtotal <span>{{ total}}</span></p>
<p>Shipping <span>Free </span></p>
<p>Shipping, duties and taxes will be calculated at checkout, where applicable.</p>
<button @click="getCode" class="checkout">Proceed to Checkout</button>
<button id="checkoutWithPayPal" class="buttonPaypal" name="PAYPAL_CHECKOUT" value="PAYPAL_CHECKOUT" aria-label="PayPal Checkout"></button>
<div class="links">
<a href="">Continue Shopping </a>
<a href="">Shipping internationalli? </a>
</div>
</div>
</template>
<script>
export default {
data() {
return {
total: 20000.00
}
}
}
</script>
<style scoped>
p span {
float: right;
}
.checkout {
width: 100%;
font-size: .875rem;
padding: .75rem 0;
background: #e01a2b;
color: white;
border: 1px solid #e01a2b;
}
.links a {
margin-right: 20px
}
.links {
margin-top: 20px;
}
.buttonPaypal {
background-image: url(../assets/paypal.png);
background-repeat: no-repeat;
width: 100%;
height: 3.125rem;
border: none;
background-color: #fff;
display: block;
margin: auto;
background-position: 50%;
background-size: contain;
max-width: 14.1875rem;
margin-top: 16px;
}
</style>
src/components/FrequentlyView.vue 0 → 100644
View file @ d5d1c0d5
<template>
<slot>
</slot>
</template>
<script>
export default {
}
</script>
src/components/ListCartItems.vue 0 → 100644
View file @ d5d1c0d5
<template>
<div>
<div class="card" v-if="loading">
loading.....
</div>
<div v-else class="overflow-hidden mb-2 card" v-for="item in list" v-bind:key="item.id">
<div class="card-body">
<div class="row no-gutters">
<div class="col col-lg-2">
<img :src="item.image" alt="Image" class="rounded-0"/>
</div>
<div class="col col-lg-6">
<div :title="item.title">
<div class="card-text">
<b>{{item.title }}</b>
<p>{{item.description}}</p>
</div>
<br />
<br />
<div class="card-text">
Size: M
</div>
<div class="card-text">
Color: Red
</div>
</div>
</div>
<div class="col col-lg-2">
<select v-model="selected">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
</select>
</div>
<div class="col col-lg-2">
<div class="card-text">
<p>Orig. {{item.price }} </p>
<p class="red">Now {{item.price}} </p>
<p class="grey">Subtotal {{item.price}} </p>
<br/>
<br/>
<p><b>Total {{item.price * selected}} </b></p>
</div>
</div>
</div>
<div :style="displaying">
<div>
<p><b>Sihip it </b></p>
<p> <span class="green">In Stock: </span> Usually ships within 3 business days.</p>
</div>
<div class="links">
<a href="">Save For later </a>
<a href="">Move to List </a>
<a href="#" @click="deleteCartItem(item.id)">Remove </a>
</div>
</div>
</div>
</div>
</div>
</template>
<script>
export default {
name: "ListCartItems",
data() {
return {
list: [],
loading: false,
selected: '1',
}
},
props: ['displaying'],
computed: {
getTotal : function(price) {
return price + this.selected
}
},
methods: {
deleteCartItem(id) {
fetch('https://fakestoreapi.com/products/'+ id)
.then((res)=> {
console.log("==", res)
})
var index = this.list.map(x => {
return x.id;
}).indexOf(id);
this.list.splice(index, 1);
}
},
mounted() {
this.loading = true //the loading begin
fetch('https://fakestoreapi.com/products?limit=5')
.then(res=> res.json())
.then((res) => {
this.list = res
})
.finally(() => (this.loading = false)) // set loading to false when request finish
}
}
</script>
<style scoped>
.green {
color:rgb(0, 135, 87)
}
.red {
color: rgb(224, 26, 43)
}
.grey {
color: rgb(98, 99, 105)
}
p {
margin: 0;
}
.no-gutters {
margin-bottom: 20px;
}
.links {
margin-top: 20px;
}
.links a {
margin-right: 100px;
}
</style>
src/components/Promo.vue 0 → 100644
View file @ d5d1c0d5
<template>
<div class="card mb-3">
<h3>Offers</h3>
<p>Enter Promo code. Linit of 1 offer per order </p>
<div class="input-group">
<input type="text" v-model="code" @change="getPromo"/>
<div class="input-group-append"><button @click="getCode" class="black">Apply</button></div>
<p v-if="error" class="error">{{ error[0]}}</p>
</div>
</div>
</template>
<script>
export default {
data() {
return {
"code" : "",
error : []
}
},
methods: {
getCode() {
if(this.code === "") {
this.error.push("Please enter propmo code")
} else {
this.error = []
}
},
getPromo(e) {
this.code = e.target.value
}
}
}
</script>
<style scoped>
p.error {
color: red
}
.black {
text-transform: capitalize;
font-weight: 700;
background-color: #000;
color: #fff;
border: 1px solid transparent;
}
</style>
src/components/SuggestProduct.vue 0 → 100644
View file @ d5d1c0d5
<template>
<div class="card">
<h3>{{title}}</h3>
<div class="row">
<div class="col-lg-2" v-for="item in list" v-bind:key="item.id">
<a href="#">
<img :src="item.image" alt="image" height="130" width="100%"/>
<p class="overflow"><b>{{item.title }}</b></p>
<p class="overflow">{{item.description}}</p>
</a>
<p><b>{{item.price}}</b></p>
<star-rating v-model:rating="rating" star-size="20" v-bind:max-rating="5" active-color="#000" show-rating="false"></star-rating>
</div>
</div>
</div>
</template>
<script>
import StarRating from 'vue-star-rating'
export default {
components: {
StarRating
},
data() {
return {
rating: "4"
}
},
props: {
title: String,
list: Array,
}
};
</script>
<style scoped>
.overflow {
max-width: 100%;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
</style>
src/components/TopBar.vue 0 → 100644
View file @ d5d1c0d5
<template>
<div>
<div class="card mb-3">
<h1>Shopping Bag </h1>
</div>
</div>
</template>
<script>
export default {
}
</script>
src/components/index.js 0 → 100644
View file @ d5d1c0d5
import Cart from "../App.vue";
const Components = {
Cart
};
function install(Vue) {
if (install.installed) return;
install.installed = true;
Object.keys(Components).forEach(name => {
Vue.component(name, Components[name]);
});
}
const plugin = {
install
};
let GlobalVue = null;
if (typeof window !== "undefined") {
GlobalVue = window.Vue;
} else if (typeof global !== "undefined") {
GlobalVue = global.vue;
}
if (GlobalVue) {
GlobalVue.use(plugin);
}
Components.install = install;
export default Components;
\ No newline at end of file
src/main.js 0 → 100644
View file @ d5d1c0d5
import { createApp } from 'vue'
import App from './App.vue'
createApp(App).mount('#mcart')
vue.config.js 0 → 100644
View file @ d5d1c0d5
module.exports = {
css: { extract: false }
}
\ No newline at end of file
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment