Skip to content

M
mfe-mcart
Commit 26899cb0 authored by Mohammad Yousuf Khan's avatar Mohammad Yousuf Khan
Browse files
Options

Adds component to accept props from host app

parent c9576b4e
Hide whitespace changes
Inline Side-by-side
Showing with 289 additions and 277 deletions
src/App.vue
View file @ 26899cb0
<template> <template>
<div id="mcart"> <div id="mcart">
<div class="container"> <div class="container">
<div class="justify-content-md-center row"> <div class="justify-content-md-center row">
<div class="col col-lg-8"> <div class="col col-lg-8">
<top-bar></top-bar> <top-bar></top-bar>
<list-cart-items displaying="block"></list-cart-items> <list-cart-items displaying="block" :message="test"></list-cart-items>
<banner> <banner>
<div <div
class="card" class="card"
style="width: 95%; padding: 0.75rem 1.25rem; font-size: 0.875rem" style="width: 95%; padding: 0.75rem 1.25rem; font-size: 0.875rem"
> >
<div class="row" style="align-items: center"> <div class="row" style="align-items: center">
<div class="col col-lg-2"> <div class="col col-lg-2">
<img src="./assets/macyStar.svg" alt="image" /> <img src="./assets/macyStar.svg" alt="image" />
</div> </div>
<div class="col col-lg-10"> <div class="col col-lg-10">
<p>Get better benefits when you shop with Star Rewards!</p> <p>Get better benefits when you shop with Star Rewards!</p>
</div> </div>
</div> </div>
</div> </div>
</banner> </banner>
<frequently-view> <frequently-view>
<div class="card"> <div class="card">
<h3>Current Offers</h3> <h3>Current Offers</h3>
<p> <p>
Based on certain items in your bag, you qualify for additional Based on certain items in your bag, you qualify for additional
offers. Some may require a selection. offers. Some may require a selection.
</p> </p>
<list-cart-items displaying="none"></list-cart-items> <list-cart-items displaying="none"></list-cart-items>
</div> </div>
</frequently-view> </frequently-view>
<suggest-product title="Customers Also Shopped" :list="list"></suggest-product> <suggest-product
<suggest-product title="Recently Viewed" :list="list"></suggest-product> title="Customers Also Shopped"
</div> :list="list"
<div class="col col-lg-4"> ></suggest-product>
<promo></promo> <suggest-product
<checkout-info></checkout-info> title="Recently Viewed"
</div> :list="list"
</div> ></suggest-product>
</div> </div>
</div> <div class="col col-lg-4">
<promo></promo>
<checkout-info></checkout-info>
</div>
</div>
</div>
</div>
</template> </template>
<script> <script>
...@@ -52,125 +58,126 @@ import ListCartItems from "./components/ListCartItems.vue"; ...@@ -52,125 +58,126 @@ import ListCartItems from "./components/ListCartItems.vue";
import SuggestProduct from "./components/SuggestProduct.vue"; import SuggestProduct from "./components/SuggestProduct.vue";
export default { export default {
name: "App", name: "App",
data() { data() {
return { return {
list: [], list: [],
loading: false, loading: false,
}; };
}, },
props:{ props: {
productList: Array productList: Array,
}, test: Array,
components: { },
TopBar, components: {
Promo, TopBar,
CheckoutInfo, Promo,
Banner, CheckoutInfo,
FrequentlyView, Banner,
ListCartItems, FrequentlyView,
SuggestProduct, ListCartItems,
}, SuggestProduct,
mounted() { },
this.loading = true; //the loading begin mounted() {
fetch("https://fakestoreapi.com/products?limit=5") this.loading = true; //the loading begin
.then((res) => res.json()) fetch("https://fakestoreapi.com/products?limit=5")
.then((res) => { .then((res) => res.json())
this.list = res; .then((res) => {
console.log("===list", this.list) this.list = res;
}) console.log("===list", this.list);
.finally(() => (this.loading = false)); // set loading to false when request finish })
}, .finally(() => (this.loading = false)); // set loading to false when request finish
},
}; };
</script> </script>
<style> <style>
body { body {
margin: 0; margin: 0;
} }
.container { .container {
margin: 0 200px; margin: 0 200px;
} }
.input-group { .input-group {
position: relative; position: relative;
display: flex; display: flex;
flex-wrap: wrap; flex-wrap: wrap;
align-items: stretch; align-items: stretch;
width: 100%; width: 100%;
} }
.input-group-append { .input-group-append {
margin-left: -1px; margin-left: -1px;
} }
.input-group-append, .input-group-append,
.input-group-prepend { .input-group-prepend {
display: flex; display: flex;
} }
#mcart { #mcart {
background-color: #ccc; background-color: #ccc;
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
} }
a { a {
line-height: inherit; line-height: inherit;
color: #000; color: #000;
text-decoration: underline; text-decoration: underline;
cursor: pointer; cursor: pointer;
} }
.row { .row {
display: flex; display: flex;
flex-wrap: wrap; flex-wrap: wrap;
margin-right: -15px; margin-right: -15px;
margin-left: -15px; margin-left: -15px;
} }
.card { .card {
background-color: #fff; background-color: #fff;
position: relative; position: relative;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
min-width: 0; min-width: 0;
word-wrap: break-word; word-wrap: break-word;
background-color: #fff; background-color: #fff;
background-clip: border-box; background-clip: border-box;
border: 1px solid rgba(0, 0, 0, 0.125); border: 1px solid rgba(0, 0, 0, 0.125);
border-radius: 0.25rem; border-radius: 0.25rem;
margin-bottom: 20px; margin-bottom: 20px;
padding: 8px; padding: 8px;
} }
.col-lg-8 { .col-lg-8 {
flex: 0 0 66.666667%; flex: 0 0 66.666667%;
max-width: 66.666667%; max-width: 66.666667%;
} }
.col-lg-2 { .col-lg-2 {
flex: 0 0 16.666667%; flex: 0 0 16.666667%;
max-width: 16.666667%; max-width: 16.666667%;
} }
.col-lg-3 { .col-lg-3 {
flex: 0 0 25%; flex: 0 0 25%;
max-width: 25%; max-width: 25%;
} }
.col-lg-5 { .col-lg-5 {
flex: 0 0 41.666667%; flex: 0 0 41.666667%;
max-width: 41.666667%; max-width: 41.666667%;
} }
.col-lg-6 { .col-lg-6 {
flex: 0 0 50%; flex: 0 0 50%;
max-width: 50%; max-width: 50%;
} }
.col-lg-7 { .col-lg-7 {
flex: 0 0 58.333333%; flex: 0 0 58.333333%;
max-width: 58.333333%; max-width: 58.333333%;
} }
.col-lg-9 { .col-lg-9 {
flex: 0 0 75%; flex: 0 0 75%;
max-width: 75%; max-width: 75%;
} }
.col-lg-10 { .col-lg-10 {
flex: 0 0 83.333333%; flex: 0 0 83.333333%;
max-width: 83.333333%; max-width: 83.333333%;
} }
.col-lg-12 { .col-lg-12 {
flex: 0 0 100%; flex: 0 0 100%;
max-width: 100%; max-width: 100%;
} }
.col-1, .col-1,
.col-2, .col-2,
...@@ -242,65 +249,65 @@ a { ...@@ -242,65 +249,65 @@ a {
.col-xl-12, .col-xl-12,
.col-xl, .col-xl,
.col-xl-auto { .col-xl-auto {
position: relative; position: relative;
width: 100%; width: 100%;
padding-right: 15px; padding-right: 15px;
padding-left: 15px; padding-left: 15px;
} }
.no-gutters { .no-gutters {
margin-right: 0; margin-right: 0;
margin-left: 0; margin-left: 0;
} }
.no-gutters > .col, .no-gutters > .col,
.no-gutters > [class*="col-"] { .no-gutters > [class*="col-"] {
padding-right: 0; padding-right: 0;
padding-left: 0; padding-left: 0;
} }
.col-lg-4 { .col-lg-4 {
flex: 0 0 33.333333%; flex: 0 0 33.333333%;
max-width: 33.333333%; max-width: 33.333333%;
} }
.col { .col {
flex-basis: 0; flex-basis: 0;
flex-grow: 1; flex-grow: 1;
} }
img { img {
vertical-align: middle; vertical-align: middle;
border-style: none; border-style: none;
flex-shrink: 0; flex-shrink: 0;
width: 70%; width: 70%;
} }
.card-body { .card-body {
flex: 1 1 auto; flex: 1 1 auto;
min-height: 1px; min-height: 1px;
padding: 1.25rem; padding: 1.25rem;
} }
.card-title { .card-title {
margin-bottom: 0.75rem; margin-bottom: 0.75rem;
} }
.btn { .btn {
display: inline-block; display: inline-block;
font-weight: 400; font-weight: 400;
color: #212529; color: #212529;
text-align: center; text-align: center;
vertical-align: middle; vertical-align: middle;
-webkit-user-select: none; -webkit-user-select: none;
-moz-user-select: none; -moz-user-select: none;
-ms-user-select: none; -ms-user-select: none;
user-select: none; user-select: none;
background-color: transparent; background-color: transparent;
border: 1px solid transparent; border: 1px solid transparent;
padding: 0.375rem 0.75rem; padding: 0.375rem 0.75rem;
font-size: 1rem; font-size: 1rem;
line-height: 1.5; line-height: 1.5;
border-radius: 0.25rem; border-radius: 0.25rem;
transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, 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; border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
} }
.btn-secondary { .btn-secondary {
color: #fff; color: #fff;
background-color: #6c757d; background-color: #6c757d;
border-color: #6c757d; border-color: #6c757d;
} }
</style> </style>
src/components/ListCartItems.vue
View file @ 26899cb0
<template> <template>
<div> <div>
<div class="card" v-if="loading"> <div class="card" v-if="loading">
loading..... loading.....
</div> </div>
<div v-else class="overflow-hidden mb-2 card" v-for="item in list" v-bind:key="item.id"> <div
<div class="card-body"> v-else
<div class="row no-gutters"> class="overflow-hidden mb-2 card"
<div class="col col-lg-2"> v-for="item in message"
<img :src="item.image" alt="Image" class="rounded-0"/> v-bind:key="item.id"
</div> >
<div class="col col-lg-6"> <div class="card-body">
<div :title="item.title"> <div class="row no-gutters">
<div class="card-text"> <div class="col col-lg-2">
<b>{{item.title }}</b> <img :src="item.image" alt="Image" class="rounded-0" />
<p>{{item.description}}</p> </div>
</div> <div class="col col-lg-6">
<div :title="item.title">
<br /> <div class="card-text">
<br /> <b>{{ item.title }}</b>
<div class="card-text"> <p>{{ item.description }}</p>
Size: M <!-- <p>This is Dynamic {{ message }}</p> -->
</div> </div>
<div class="card-text"> <br />
Color: Red <br />
</div> <div class="card-text">
</div> Size: M
</div>
</div> <div class="card-text">
<div class="col col-lg-2"> Color: Red
<select v-model="selected"> </div>
<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 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> </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>
</div>
</template> </template>
<script> <script>
export default { export default {
name: "ListCartItems", name: "ListCartItems",
data() { data() {
return { return {
list: [], list: [],
loading: false, loading: false,
selected: '1', selected: "1",
} };
},
props: ["displaying", "message"],
computed: {
getTotal: function(price) {
return price + this.selected;
}, },
props: ['displaying'], },
computed: { methods: {
getTotal : function(price) { deleteCartItem(id) {
return price + this.selected fetch("https://fakestoreapi.com/products/" + id).then((res) => {
} console.log("==", res);
}, });
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); var index = this.list
} .map((x) => {
}, return x.id;
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 .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> </script>
<style scoped> <style scoped>
.green { .green {
color:rgb(0, 135, 87) color: rgb(0, 135, 87);
}
} .red {
.red { color: rgb(224, 26, 43);
color: rgb(224, 26, 43) }
.grey {
} color: rgb(98, 99, 105);
.grey { }
color: rgb(98, 99, 105) p {
margin: 0;
} }
p { .no-gutters {
margin: 0; margin-bottom: 20px;
} }
.no-gutters { .links {
margin-bottom: 20px; margin-top: 20px;
} }
.links { .links a {
margin-top: 20px; margin-right: 100px;
} }
.links a {
margin-right: 100px;
}
</style> </style>
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