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>
<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>
<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" :message="test"></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>
......@@ -52,125 +58,126 @@ 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
},
name: "App",
data() {
return {
list: [],
loading: false,
};
},
props: {
productList: Array,
test: 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;
margin: 0;
}
.container {
margin: 0 200px;
margin: 0 200px;
}
.input-group {
position: relative;
display: flex;
flex-wrap: wrap;
align-items: stretch;
width: 100%;
position: relative;
display: flex;
flex-wrap: wrap;
align-items: stretch;
width: 100%;
}
.input-group-append {
margin-left: -1px;
margin-left: -1px;
}
.input-group-append,
.input-group-prepend {
display: flex;
display: flex;
}
#mcart {
background-color: #ccc;
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
background-color: #ccc;
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
}
a {
line-height: inherit;
color: #000;
text-decoration: underline;
cursor: pointer;
line-height: inherit;
color: #000;
text-decoration: underline;
cursor: pointer;
}
.row {
display: flex;
flex-wrap: wrap;
margin-right: -15px;
margin-left: -15px;
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;
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%;
flex: 0 0 66.666667%;
max-width: 66.666667%;
}
.col-lg-2 {
flex: 0 0 16.666667%;
max-width: 16.666667%;
flex: 0 0 16.666667%;
max-width: 16.666667%;
}
.col-lg-3 {
flex: 0 0 25%;
max-width: 25%;
flex: 0 0 25%;
max-width: 25%;
}
.col-lg-5 {
flex: 0 0 41.666667%;
max-width: 41.666667%;
flex: 0 0 41.666667%;
max-width: 41.666667%;
}
.col-lg-6 {
flex: 0 0 50%;
max-width: 50%;
flex: 0 0 50%;
max-width: 50%;
}
.col-lg-7 {
flex: 0 0 58.333333%;
max-width: 58.333333%;
flex: 0 0 58.333333%;
max-width: 58.333333%;
}
.col-lg-9 {
flex: 0 0 75%;
max-width: 75%;
flex: 0 0 75%;
max-width: 75%;
}
.col-lg-10 {
flex: 0 0 83.333333%;
max-width: 83.333333%;
flex: 0 0 83.333333%;
max-width: 83.333333%;
}
.col-lg-12 {
flex: 0 0 100%;
max-width: 100%;
flex: 0 0 100%;
max-width: 100%;
}
.col-1,
.col-2,
......@@ -242,65 +249,65 @@ a {
.col-xl-12,
.col-xl,
.col-xl-auto {
position: relative;
width: 100%;
padding-right: 15px;
padding-left: 15px;
position: relative;
width: 100%;
padding-right: 15px;
padding-left: 15px;
}
.no-gutters {
margin-right: 0;
margin-left: 0;
margin-right: 0;
margin-left: 0;
}
.no-gutters > .col,
.no-gutters > [class*="col-"] {
padding-right: 0;
padding-left: 0;
padding-right: 0;
padding-left: 0;
}
.col-lg-4 {
flex: 0 0 33.333333%;
max-width: 33.333333%;
flex: 0 0 33.333333%;
max-width: 33.333333%;
}
.col {
flex-basis: 0;
flex-grow: 1;
flex-basis: 0;
flex-grow: 1;
}
img {
vertical-align: middle;
border-style: none;
flex-shrink: 0;
width: 70%;
vertical-align: middle;
border-style: none;
flex-shrink: 0;
width: 70%;
}
.card-body {
flex: 1 1 auto;
min-height: 1px;
padding: 1.25rem;
flex: 1 1 auto;
min-height: 1px;
padding: 1.25rem;
}
.card-title {
margin-bottom: 0.75rem;
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;
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;
color: #fff;
background-color: #6c757d;
border-color: #6c757d;
}
</style>
src/components/ListCartItems.vue
View file @ 26899cb0
<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 class="card" v-if="loading">
loading.....
</div>
<div
v-else
class="overflow-hidden mb-2 card"
v-for="item in message"
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>
<!-- <p>This is Dynamic {{ message }}</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',
}
name: "ListCartItems",
data() {
return {
list: [],
loading: false,
selected: "1",
};
},
props: ["displaying", "message"],
computed: {
getTotal: function(price) {
return price + this.selected;
},
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);
},
methods: {
deleteCartItem(id) {
fetch("https://fakestoreapi.com/products/" + id).then((res) => {
console.log("==", res);
});
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
var index = this.list
.map((x) => {
return x.id;
})
.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>
<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;
}
.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>
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