feat(marketplace): seller profile page
This commit is contained in:
karthikeyan5
parent
2894f7935a
commit
4df6003bd9
@ -14,11 +14,11 @@ import FeaturedItems from './pages/FeaturedItems.vue';
|
||||
import PublishedItems from './pages/PublishedItems.vue';
|
||||
import Item from './pages/Item.vue';
|
||||
import Seller from './pages/Seller.vue';
|
||||
import SellerItems from './pages/SellerItems.vue';
|
||||
import Publish from './pages/Publish.vue';
|
||||
import Buying from './pages/Buying.vue';
|
||||
import Selling from './pages/Selling.vue';
|
||||
import Messages from './pages/Messages.vue';
|
||||
import Profile from './pages/Profile.vue';
|
||||
import NotFound from './pages/NotFound.vue';
|
||||
|
||||
function get_route_map() {
|
||||
@ -28,10 +28,11 @@ function get_route_map() {
|
||||
'marketplace/category/:category': Category,
|
||||
'marketplace/item/:item': Item,
|
||||
'marketplace/seller/:seller': Seller,
|
||||
'marketplace/seller/:seller/items': SellerItems,
|
||||
'marketplace/not-found': NotFound,
|
||||
}
|
||||
const registered_routes = {
|
||||
'marketplace/profile': Profile,
|
||||
'marketplace/profile': Seller,
|
||||
'marketplace/saved-items': SavedItems,
|
||||
'marketplace/featured-items': FeaturedItems,
|
||||
'marketplace/publish': Publish,
|
||||
|
||||
@ -1,81 +0,0 @@
|
||||
<template>
|
||||
<div
|
||||
class="marketplace-page"
|
||||
:data-page-name="page_name"
|
||||
v-if="init || profile"
|
||||
>
|
||||
|
||||
<detail-view
|
||||
:title="title"
|
||||
:image="image"
|
||||
:sections="sections"
|
||||
:show_skeleton="init"
|
||||
>
|
||||
|
||||
<detail-header-item slot="detail-header-item"
|
||||
:value="country"
|
||||
></detail-header-item>
|
||||
<detail-header-item slot="detail-header-item"
|
||||
:value="site_name"
|
||||
></detail-header-item>
|
||||
<detail-header-item slot="detail-header-item"
|
||||
:value="joined_when"
|
||||
></detail-header-item>
|
||||
|
||||
</detail-view>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'profile-page',
|
||||
data() {
|
||||
return {
|
||||
page_name: frappe.get_route()[1],
|
||||
|
||||
init: true,
|
||||
|
||||
profile: null,
|
||||
title: null,
|
||||
image: null,
|
||||
sections: [],
|
||||
|
||||
country: '',
|
||||
site_name: '',
|
||||
joined_when: '',
|
||||
};
|
||||
},
|
||||
created() {
|
||||
this.get_profile();
|
||||
},
|
||||
methods: {
|
||||
get_profile() {
|
||||
hub.call(
|
||||
'get_hub_seller_profile',
|
||||
{ hub_seller: hub.settings.hub_seller_name }
|
||||
).then(profile => {
|
||||
this.init = false;
|
||||
|
||||
this.profile = profile;
|
||||
this.title = profile.company;
|
||||
|
||||
this.country = __(profile.country);
|
||||
this.site_name = __(profile.site_name);
|
||||
this.joined_when = __(`Joined ${comment_when(profile.creation)}`);
|
||||
|
||||
this.image = profile.logo;
|
||||
this.sections = [
|
||||
{
|
||||
title: __('About the Company'),
|
||||
content: profile.company_description
|
||||
? __(profile.company_description)
|
||||
: __('No description')
|
||||
}
|
||||
];
|
||||
});
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped></style>
|
||||
@ -22,30 +22,77 @@
|
||||
|
||||
</detail-view>
|
||||
|
||||
<h5 v-if="profile">{{ item_container_heading }}</h5>
|
||||
<item-cards-container
|
||||
:container_name="item_container_heading"
|
||||
:items="items"
|
||||
:item_id_fieldname="item_id_fieldname"
|
||||
:on_click="go_to_item_details_page"
|
||||
>
|
||||
</item-cards-container>
|
||||
<div v-if="items.length">
|
||||
<h5>
|
||||
{{ item_container_heading }}
|
||||
<small v-if="is_user_registered() && is_own_company">
|
||||
<a class="pull-right" href="#marketplace/featured-items">Customize your Featured Items</a>
|
||||
</small>
|
||||
</h5>
|
||||
<item-cards-container
|
||||
:container_name="item_container_heading"
|
||||
:items="items"
|
||||
:item_id_fieldname="item_id_fieldname"
|
||||
:on_click="go_to_item_details_page"
|
||||
>
|
||||
</item-cards-container>
|
||||
<a class="pull-right" @click="go_to_seller_items_page(seller_company)">Show all items</a>
|
||||
</div>
|
||||
|
||||
<div v-if="recent_seller_reviews.length">
|
||||
<h5>Customer Reviews</h5>
|
||||
<div class="container" v-for="review in recent_seller_reviews" :key="review.name">
|
||||
<br>
|
||||
<span class="text-muted">
|
||||
<rating :rating="review.rating" :max_rating="5"></rating>
|
||||
</span>
|
||||
<i class="octicon octicon-quote hidden-xs fa-fw"></i>
|
||||
<span class="bold">{{ review.subject }}</span>
|
||||
<i class="octicon octicon-quote hidden-xs fa-fw fa-rotate-180"></i>
|
||||
<div class="container">
|
||||
by {{ review.username }}
|
||||
<a class="text-muted">
|
||||
<span class="text-muted hidden-xs">–</span>
|
||||
<span class="hidden-xs" v-html="comment_when(review.timestamp)"></span>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div v-if="seller_product_view_stats.length">
|
||||
<h5>Stats</h5>
|
||||
<div id="seller_traffic_chart"></div>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import Rating from '../components/Rating.vue';
|
||||
|
||||
|
||||
export default {
|
||||
name: 'seller-page',
|
||||
components: {
|
||||
Rating
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
page_name: frappe.get_route()[1],
|
||||
seller_company: frappe.get_route()[2],
|
||||
hub_seller: null,
|
||||
|
||||
init: true,
|
||||
|
||||
profile: null,
|
||||
items:[],
|
||||
recent_seller_reviews: [],
|
||||
seller_product_view_stats: [],
|
||||
seller_traffic_chart: null,
|
||||
item_id_fieldname: 'name',
|
||||
item_container_heading: 'Items',
|
||||
|
||||
title: null,
|
||||
image: null,
|
||||
@ -60,19 +107,40 @@ export default {
|
||||
this.get_seller_profile_and_items();
|
||||
},
|
||||
computed: {
|
||||
item_container_heading() {
|
||||
return __('Items by ' + this.seller_company);
|
||||
}
|
||||
is_own_company() {
|
||||
let is_own_company = false;
|
||||
if(this.hub_seller) {
|
||||
if(this.hub_seller === hub.settings.hub_seller_name) {
|
||||
is_own_company = true;
|
||||
}
|
||||
}
|
||||
return is_own_company;
|
||||
},
|
||||
},
|
||||
methods: {
|
||||
comment_when(timestamp){
|
||||
return comment_when(timestamp)
|
||||
},
|
||||
is_user_registered(){
|
||||
return hub.is_user_registered()
|
||||
},
|
||||
get_seller_profile_and_items() {
|
||||
if (this.page_name == 'profile'){
|
||||
this.seller_company = null;
|
||||
this.hub_seller = hub.settings.hub_seller_name
|
||||
}
|
||||
hub.call(
|
||||
'get_hub_seller_page_info',
|
||||
{ company: this.seller_company }
|
||||
{ company: this.seller_company,
|
||||
hub_seller: this.hub_seller }
|
||||
).then(data => {
|
||||
this.init = false;
|
||||
this.profile = data.profile;
|
||||
this.items = data.items;
|
||||
this.item_container_heading = data.is_featured_item? "Features Items":"Popular Items";
|
||||
this.hub_seller = this.items[0].hub_seller;
|
||||
this.recent_seller_reviews = data.recent_seller_reviews;
|
||||
this.seller_product_view_stats = data.seller_product_view_stats;
|
||||
|
||||
const profile = this.profile;
|
||||
|
||||
@ -91,11 +159,41 @@ export default {
|
||||
: __('No description')
|
||||
}
|
||||
];
|
||||
|
||||
setTimeout(() => this.init_seller_traffic_chart(), 1);
|
||||
|
||||
});
|
||||
},
|
||||
|
||||
go_to_item_details_page(hub_item_name) {
|
||||
frappe.set_route(`marketplace/item/${hub_item_name}`);
|
||||
},
|
||||
go_to_seller_items_page(hub_seller) {
|
||||
frappe.set_route(`marketplace/seller/${hub_seller}/items`);
|
||||
},
|
||||
init_seller_traffic_chart() {
|
||||
let lables = []
|
||||
let tooltip_lables = {}
|
||||
let datasets = [{name:"Product Views",chartType: 'line',values: []}]
|
||||
this.seller_product_view_stats.map((stat) => {
|
||||
lables.push(stat.date.substring(5));
|
||||
tooltip_lables[stat.date.substring(5)] = new Date(stat.date).toDateString();
|
||||
datasets[0].values.push(stat.view_count);
|
||||
});
|
||||
let data = {labels: lables, datasets:datasets, tooltip_lables:tooltip_lables}
|
||||
this.seller_traffic_chart = new Chart( "#seller_traffic_chart", { // or DOM element
|
||||
data: data,
|
||||
|
||||
title: "Daily Product Views",
|
||||
type: 'axis-mixed', // or 'bar', 'line', 'pie', 'percentage'
|
||||
height: 300,
|
||||
colors: ['purple', '#ffa3ef', 'light-blue'],
|
||||
|
||||
tooltipOptions: {
|
||||
formatTooltipX: d => this.seller_traffic_chart.data.tooltip_lables[d],
|
||||
formatTooltipY: d => d + ' Views',
|
||||
}
|
||||
});
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
57
erpnext/public/js/hub/pages/SellerItems.vue
Normal file
57
erpnext/public/js/hub/pages/SellerItems.vue
Normal file
@ -0,0 +1,57 @@
|
||||
<template>
|
||||
<div
|
||||
class="marketplace-page"
|
||||
:data-page-name="page_name"
|
||||
v-if="init || items.length"
|
||||
>
|
||||
<h5>{{ item_container_heading }}</h5>
|
||||
<item-cards-container
|
||||
:container_name="item_container_heading"
|
||||
:items="items"
|
||||
:item_id_fieldname="item_id_fieldname"
|
||||
:on_click="go_to_item_details_page"
|
||||
>
|
||||
</item-cards-container>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'seller-items-page',
|
||||
data() {
|
||||
return {
|
||||
page_name: frappe.get_route()[1],
|
||||
seller_company: frappe.get_route()[2],
|
||||
|
||||
init: true,
|
||||
items:[],
|
||||
item_id_fieldname: 'name',
|
||||
};
|
||||
},
|
||||
created() {
|
||||
this.get_seller_and_items();
|
||||
},
|
||||
computed: {
|
||||
item_container_heading() {
|
||||
return __('Items by ' + this.seller_company);
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
get_seller_and_items() {
|
||||
hub.call(
|
||||
'get_items',
|
||||
{ company: this.seller_company }
|
||||
).then(data => {
|
||||
this.init = false;
|
||||
this.items = data;
|
||||
});
|
||||
},
|
||||
|
||||
go_to_item_details_page(hub_item_name) {
|
||||
frappe.set_route(`marketplace/item/${hub_item_name}`);
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped></style>
|
||||
Loading…
x
Reference in New Issue
Block a user