Skip to content

Instantly share code, notes, and snippets.

@izshreyansh

izshreyansh/algolia-search.js

Created October 10, 2020 06:34
Show Gist options
  • Save izshreyansh/2d6dd32ccbf5c3823375915cf6dff512 to your computer and use it in GitHub Desktop.
Save izshreyansh/2d6dd32ccbf5c3823375915cf6dff512 to your computer and use it in GitHub Desktop.
Download ZIP
Search
Raw
algolia-search.js
let algoliasearch = require('algoliasearch');
let client = algoliasearch(process.env.MIX_ALGOLIA_APP_ID, process.env.MIX_ALGOLIA_SECRET);
let products = client.initIndex('products');
let ebay_orders = client.initIndex('ebay_orders');
let ebay_products = client.initIndex('ebay_products');
let amazon_orders = client.initIndex('amazon_orders');
let amazon_products = client.initIndex('amazon_products');
$('#magicSearch').autocomplete(
{ hint: true }, [
{
source: $.fn.autocomplete.sources.hits(products, { hitsPerPage: 2 }),
displayKey: 'name',
templates: {
header: '<h5 class="m-3 text-muted text-uppercase">Products</h5>',
suggestion: function(suggestion) {
return '<a href="'+window.location.origin+'/products/'+suggestion.id+'/edit">' + suggestion.name + '</a>';
},
/* footer: function() {
return "<br/><div class='text-right mb-2 mr-2'><img src='/images/algolia.png' class='img'></div>";
},*/
/*empty: function(query, isEmpty) {
return '<div class="m-4"><span> No Results Found</span></div>';
}*/
}
},
{
source: $.fn.autocomplete.sources.hits(ebay_orders, { hitsPerPage: 2 }),
displayKey: 'salesRecordNumber',
templates: {
header: '<h5 class="m-3 text-muted text-uppercase">Ebay Order</h5>',
suggestion: function(suggestion) {
return '<a href="'+window.location.origin+'/ebay/orders/'+suggestion.orderId+'/edit">' +
'<label>' + suggestion.salesRecordNumber + '</lable>' +
'<p><small class="small-5">Payment Status: ' + suggestion.orderPaymentStatus + ' | Type: '+
suggestion.fulfillmentType
+'</small></p>' +
'</a>';
}
}
},
{
source: $.fn.autocomplete.sources.hits(ebay_products, { hitsPerPage: 2 }),
displayKey: 'name',
templates: {
header: '<h5 class="m-3 text-muted text-uppercase">Ebay Product</h5>',
suggestion: function(suggestion) {
return '<a class="small-3" href="'+window.location.origin+'/ebay/items/'+suggestion.ItemID+'">' +
'<label>' + suggestion.Title + '</lable>' +
'<p><small class="small-5">Item ID: ' + suggestion.ItemID +'</small></p>' +
'</a>';
}
}
},
{
source: $.fn.autocomplete.sources.hits(amazon_orders, { hitsPerPage: 2 }),
displayKey: 'name',
templates: {
header: '<h5 class="m-3 text-muted text-uppercase">Amazon Order</h5>',
suggestion: function(suggestion) {
return '<a class="small-3" href="'+window.location.origin+'/amazon/orders/'+suggestion.orderId+'/edit">' +
'<label>' + suggestion.orderId + '</lable>' +
'<p><small class="small-5">Item ID: ' + suggestion.buyerName +'</small></p>' +
'</a>';
}
}
},
{
source: $.fn.autocomplete.sources.hits(amazon_products, { hitsPerPage: 2 }),
displayKey: 'name',
templates: {
header: '<h5 class="m-3 text-muted text-uppercase">Amazon Products</h5>',
suggestion: function(suggestion) {
return '<a class="small-3" href="'+window.location.origin+'/amazon/products/'+suggestion.asin+'">' +
'<label>' + suggestion.asin + '</lable>' +
'<p><small class="small-5">' + suggestion.item_name +'</small></p>' +
'</a>';
}
}
},
])
/*.on('autocomplete:selected', function(event, suggestion, dataset) {
window.location.href = window.location.origin+'/products/'+suggestion.id+'/edit';
});*/
/*
$('#ebay-search-input').autocomplete(
{ hint: true }, [
]).on('autocomplete:selected', function(event, suggestion, dataset) {
window.location.href = window.location.origin+'/ebay/orders/'+suggestion.id+'/edit';
});
$('#ebay-items-search-input').autocomplete(
{ hint: true }, [
,
]).on('autocomplete:selected', function(event, suggestion, dataset) {
window.location.href = window.location.origin+'/ebay/items/'+suggestion.ItemID;
});
*/
Raw
bootstrap.js
window.Vue = require('vue');
new Vue({
el: '#TntSearch',
data: function() {
return {
result: [],
searchTerm:null,
searchResource: 'Product'
}
},
methods: {
search: function () {
var vm = this;
axios.post('/search',{searchTerm: this.searchTerm, searchResource: this.searchResource})
.then(function(response) {
vm.result = response.data;
});
},
removeSearch: function () {
setTimeout(() => {
this.result = [];
}, 500);
}
}
});
Raw
navbar.blade.php
<nav class="navbar default-layout col-lg-12 col-12 p-0 fixed-top d-flex flex-row">
<div class="text-center d-flex align-items-top justify-content-center">
<button class="navbar-toggler navbar-toggler-right d-lg-none align-self-center" id="sidebar-offcanvas" type="button" data-toggle="module-offcanvas">
<span class="mdi mdi-menu text-white"></span>
</button>
</div>
<div class="navbar-menu-wrapper d-flex align-items-center">
<ul class="nav nav-navbar dropdown-white navmenu navbar-nav header-navmenu-offcanvas header-links d-none d-md-flex">
@yield('navmenu')
</ul>
<ul class="navbar-nav navbar-nav-right dropdown-white">
<li class="nav-item d-none d-sm-block">
<div class="input-group" id="TntSearch">
<div class="input-group-prepend" style="background: none;">
<select
class="custom-select"
v-model="searchResource"
style="border-radius: 0px; border-right: none"
>
<option value="Product">Product</option>
<option value="AmazonOrder">AmazonOrder</option>
<option value="AmazonProduct">AmazonProduct</option>
<option value="EbayOrder">EbayOrder</option>
<option value="EbayProduct">EbayProduct</option>
<option value="SupportTicket">SupportTicket</option>
</select>
</div>
<input
@blur="removeSearch"
v-model="searchTerm"
v-on:input="search"
placeholder="Search"
class="form-control"
type="text"
autofocus
tabindex="1" style="border-left:none; border-radius: 0px;">
<span v-if="this.result.length > 0" class="p-2 text-center magicSearchResult">
<div v-for="listing in result" class="pb-2 pt-2">
<span class="text-white" v-html="listing.editlink"></span>
</div>
</span>
</div>
</li>
@yield('config')
<li class="nav-item dropdown">
<a class="nav-link count-indicator dropdown-toggle message-count-{{ Auth::ID() }}" id="messageDropdown" href="#" data-toggle="dropdown" aria-expanded="false">
<i class="mdi mdi-email"></i>
<div class="unread-count">
@if($unreadCount !== 0)
<span class="count">
{{ $unreadCount }}
</span>
@endif
</div>
</a>
<div class="dropdown-menu dropdown-menu-right navbar-dropdown preview-list pb-0" aria-labelledby="messageDropdown">
<div class="message-data-{{ Auth::id() }}">
@foreach($conversations as $conversation)
@if($conversation->last_message['body'] !== null)
@foreach($conversation->users as $conversation_user)
@if($conversation_user->id !== Auth::id())
<a href="{{ route('messages.show', str_slug($conversation_user->name, '-')) }}" class="dropdown-item preview-item user-{{ $conversation_user->id }}">
<div class="preview-thumbnail">
<img src="{{ global_asset($conversation_user->photo) }}" alt="image" class="img-sm profile-pic"> </div>
<div class="preview-item-content flex-grow py-2">
<p class="preview-subject ellipsis font-weight-medium text-dark">
{{ $conversation_user->name }}
</p>
<p class="font-weight-light small-text text-dark"> {{ $conversation->last_message['body'] }} </p>
</div>
</a>
@endif
@endforeach
@endif
@endforeach
@if($conversations->count() == 0)
<div class="dropdown-divider"></div>
<div class="dropdown-item py-3 empty-message">
No Messages
</div>
<div class="dropdown-divider"></div>
<div class="text-center p-3 empty-message">
<a href="#" data-toggle="modal" data-target="#newMessage">New Message</a>
</div>
@else
{{--<div class="dropdown-divider"></div>
<div class="text-center p-3">
<a href="{{ route('messages.show', $conversations->first()->last_message['user_id']) }} " >View all</a>
</div>--}}
@endif
</div>
</div>
</li>
<li class="nav-item dropdown notification_main">
<a class="nav-link count-indicator dropdown-toggle notification-btn-{{ Auth::ID() }}" id="notificationDropdown" href="#" data-toggle="dropdown" aria-expanded="false">
<i class="mdi mdi-bell"></i>
<div class="unread-count">
@if(Auth::user()->unreadNotifications->count() !== 0)
<span class="count">
{{ Auth::user()->unreadNotifications->count() }}
</span>
@endif
</div>
</a>
<div class="dropdown-menu dropdown-menu-right navbar-dropdown preview-list pt-2 pb-0" aria-labelledby="notificationDropdown">
<div class="notification-data scrollit">
@forelse(Auth::user()->notifications()->paginate(10) as $notification)
<a href="{{ route('notification.read', $notification->id) }}" class="dropdown-item preview-item @if($notification->read_at === null) unread-message @endif">
<div class="preview-thumbnail">
<div class="preview-icon bg-warning">
<i class="mdi mdi-comment-text-outline mx-0"></i>
</div>
</div>
<div class="preview-item-content">
<h6 class="preview-subject font-weight-medium @if($notification->read_at !== null) text-dark @endif">Product Comment</h6>
<p class="font-weight-light ellipsis small-text @if($notification->read_at !== null) text-dark @endif">
{{ $notification->data['message'] }}
</p>
</div>
</a>
@empty
<a class="dropdown-item preview-item empty-notification">
<div class="preview-item-content">
<p class="font-weight-light ellipsis small-text">
No Notification
</p>
</div>
</a>
@endforelse
</div>
<div class="dropdown-divider"></div>
<div class="text-center p-2">
<a href="{{ route('notification.readAll') }}" >View all</a>
</div>
</div>
</li>
<li class="nav-item dropdown d-none d-xl-inline-block">
<a class="nav-link dropdown-toggle" id="UserDropdown" href="#" data-toggle="dropdown" aria-expanded="false">
<img class="rounded-circle img-xs" src="{{ global_asset(Auth::user()->Photo) }}" alt="profile image">
<span class="profile-text text-capitalize">
{{ Auth::user()->name }}
</span>
</a>
<div class="dropdown-menu dropdown-menu-right navbar-dropdown pt-3" aria-labelledby="UserDropdown">
<a href="{{ route('users.edit', Auth::ID()) }}" class="dropdown-item">
<i class="mdi mdi-account-outline fs-15"></i>
Profile
</a>
<div class="dropdown-divider my-2"></div>
<a href="{{ route('logout') }}"
class="dropdown-item"
onclick="event.preventDefault();document.getElementById('logout-form').submit();"
>
<i class="mdi mdi-logout text-danger fs-15"></i>
Logout
</a>
<form id="logout-form" action="{{ route('logout') }}" method="POST" style="display: none;">
@csrf
</form>
</div>
</li>
</ul>
<button class="navbar-toggler navbar-toggler-right d-lg-none align-self-center" id="navmenu-offcanvas" type="button" data-toggle="navmenu-offcanvas">
<span class="bx bx-menu-alt-left"></span>
</button>
</div>
</nav>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment