<template> <div class="marketplace-page" :data-page-name="page_name" > <search-input :placeholder="search_placeholder" :on_search="set_route_and_get_items" v-model="search_value" > </search-input> <h5>{{ page_title }}</h5> <item-cards-container container_name="Search" :items="items" :item_id_fieldname="item_id_fieldname" :on_click="go_to_item_details_page" :empty_state_message="empty_state_message" > </item-cards-container> </div> </template> <script> export default { data() { return { page_name: frappe.get_route()[1], items: [], category: frappe.get_route()[2], search_value: frappe.get_route()[3], item_id_fieldname: 'name', filters: {}, // Constants search_placeholder: __('Search for anything ...'), empty_state_message: __('') }; }, computed: { page_title() { return this.items.length ? __(`Results for "${this.search_value}" ${this.category !== 'All'? `in category ${this.category}` : ''}`) : __('No Items found.'); } }, created() { this.get_items(); }, methods: { get_items() { if (this.category !== 'All') { this.filters['hub_category'] = this.category; } hub.call('get_items', { keyword: this.search_value, filters: this.filters }) .then((items) => { this.items = items; }) }, set_route_and_get_items() { frappe.set_route('marketplace', 'search', this.category, this.search_value); this.get_items(); }, go_to_item_details_page(hub_item_name) { frappe.set_route(`marketplace/item/${hub_item_name}`); } } } </script> <style scoped></style>