Skip to content

Commit

Permalink
fix: nav
Browse files Browse the repository at this point in the history
  • Loading branch information
@itswadesh
itswadesh committed Nov 3, 2022
1 parent b7ff9b3 commit 518e8ea
Show file tree
Hide file tree
Showing 17 changed files with 297 additions and 286 deletions.
2 changes: 0 additions & 2 deletions package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -31,7 +31,6 @@
"cookie": "^0.5.0",
"cookie-universal": "^2.2.2",
"cssnano": "^5.1.13",
"daisyui": "^2.31.0",
"eslint": "^8.25.0",
"eslint-config-prettier": "^8.5.0",
"eslint-plugin-svelte3": "^4.0.0",
Expand All @@ -42,7 +41,6 @@
"svelte-check": "^2.9.2",
"svelte-confetti": "^1.2.0",
"svelte-preprocess": "^4.10.7",
"svelte-select": "^4.4.7",
"svelte-timeago": "0.1.2",
"svelte-toasts": "^1.1.2",
"tailwind-scrollbar": "2.1.0-preview.0",
Expand Down
8 changes: 6 additions & 2 deletions src/hooks.server.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -94,7 +94,9 @@ export const handle: Handle = async ({ event, resolve }) => {
closed: false,
closeMessage: '',
isFnb: false,
searchbarText
searchbarText,
weightUnit: 'g',
dimentionUnit: 'cm'
}
if (!cookieStore || cookieStore === 'undefined') {
const url = new URL(event.request.url)
Expand Down Expand Up @@ -125,7 +127,9 @@ export const handle: Handle = async ({ event, resolve }) => {
GOOGLE_CLIENT_ID: storeOne.GOOGLE_CLIENT_ID,
GOOGLE_ANALYTICS_ID: storeOne.GOOGLE_ANALYTICS_ID,
isFnb: storeOne.isFnb,
searchbarText: storeOne.searchbarText
searchbarText: storeOne.searchbarText,
weightUnit: storeOne.weightUnit,
dimentionUnit: storeOne.dimentionUnit
}
event.cookies.set('store', JSON.stringify(store), { path: '/' })
} else {
Expand Down
128 changes: 46 additions & 82 deletions src/lib/Nav.svelte
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,33 +5,34 @@
</style>

<script lang="ts">
import { getAPI, post } from '$lib/util/api'
import { createEventDispatcher, getContext, onMount } from 'svelte'
import { cubicOut } from 'svelte/easing'
import { currency, toast } from '$lib/util'
import { fade, fly, slide } from 'svelte/transition'
import { getAPI, post } from '$lib/util/api'
import { goto, invalidateAll } from '$app/navigation'
import { logo } from './config'
import { page } from '$app/stores'
import { fade, fly, slide } from 'svelte/transition'
import { cubicOut } from 'svelte/easing'
import { createEventDispatcher, getContext, onMount } from 'svelte'
import Select from 'svelte-select'
// import 'svelte-select/tailwind.css'
import { settings } from './store'
import Autocomplete from '$lib/components/Autocomplete/Autocomplete.svelte'
import Cookie from 'cookie-universal'
import Item from '$lib/AutocompleteItem.svelte'
import PrimaryButton from './ui/PrimaryButton.svelte'
import LazyImg from './components/Image/LazyImg.svelte'
import MegaMenu from './components/MegaMenu.svelte'
import WhiteButton from './ui/WhiteButton.svelte'
import menu from '$lib/config/menu'
import { settings } from './store'
// import { store.logo } from './config'
import PrimaryButton from './ui/PrimaryButton.svelte'
import WhiteButton from './ui/WhiteButton.svelte'
const dispatch = createEventDispatcher()
const cookies = Cookie()
export let me, cart, data, showCartSidebar, openSidebar, store
export let me, cart, showCartSidebar, openSidebar
let selectTarget = null
let q = ''
let typingTimer
let showDropdownAccount = false
let loadingForDeleteItemFromCart = []
let categories
// if (cart) cart = JSON.parse(cart)
// export const signOut = async () => {
Expand Down Expand Up @@ -93,37 +94,18 @@ function slideFade(node, params) {
}
}
async function onSearch(filterText) {
try {
const res = await getAPI(
`es/autocomplete?q=${filterText}&store=${$page.data.store?.id}`,
$page.data.origin
)
const hits = res?.data?.hits?.hits
let data = []
if (hits) {
data = hits.map((h) => {
return { name: h._source.name, slug: h._source.slug, type: h._source.type }
})
}
return data || []
} catch (e) {
console.log('err....', e)
}
}
function enterPressedOnSearch() {
// console.log('enterPressedOnSearch.................')
}
async function onSearchSubmit({ detail }) {
// console.log('on search submit................')
let u = new URL('/search', $page.data.origin)
let newUrl
if (detail.type === 'category') {
u = new URL(`/${detail.slug}`, $page.data.origin)
const u = new URL(`/${detail.slug}`, $page.data.origin)
newUrl = u.toString()
} else {
const u = new URL('/search', $page.data.origin)
u.searchParams.set('q', detail?.name)
newUrl = u.toString() + '&sort=price'
}
u.searchParams.set('q', detail?.name)
let newUrl = u.toString() + '&sort=price'
goto(newUrl)
dispatch('search', detail)
}
Expand Down Expand Up @@ -168,10 +150,8 @@ const removeItemFromCart = async ({ pid, qty, customizedImg, ix }: any) => {
// $page.data.cart = res
// await refreshCart()
// console.log('zzzzzzzzzzzzzzzzzzzzzzzzzzz', res)
await invalidateAll()
} catch (e) {
// console.log('zzzzzzzzzzzzzzzzzzzzzzzzzzz', e)
} finally {
loadingForDeleteItemFromCart[ix] = false
}
Expand All @@ -184,7 +164,7 @@ const getSelectionLabel = (option) => option.name

<nav
class="minimum-width-rem fixed inset-x-0 top-0 h-14 sm:h-20 w-full flex items-center justify-center border-b bg-white px-3 shadow-md sm:px-10
{showCartSidebar ? 'z-50 ' : 'z-40 delay-500'}">
{showCartSidebar ? 'z-50 ' : 'z-40 delay-500'}">
<div class="flex w-full items-center justify-between gap-4 lg:gap-8">
<div class="flex items-center gap-4">
<!-- Back button -->
Expand All @@ -210,8 +190,8 @@ const getSelectionLabel = (option) => option.name
{/if}
<!-- Logo -->
<a class="block flex-shrink-0" href="/" aria-label="Click to route home">
<LazyImg
src="{$page.data.store?.logo}"
<img
src="{logo}"
alt=" "
class="h-auto max-h-10 sm:max-h-16 w-32 object-contain object-center" />
</a>
Expand All @@ -225,39 +205,11 @@ const getSelectionLabel = (option) => option.name

<!-- Search box -->

<form
class="form-control relative z-50 hidden w-full min-w-min max-w-4xl flex-1 lg:block"
on:submit|preventDefault="{enterPressedOnSearch}"
bind:this="{selectTarget}">
<!-- <button
type="submit"
aria-label="Click here to search input data"
class="absolute inset-y-0 left-0 z-[60] hidden h-full w-10 flex-shrink-0 cursor-default items-center justify-center focus:outline-none sm:flex">
<svg
xmlns="http://www.w3.org/2000/svg"
class="h-5 w-5 text-gray-500"
viewBox="0 0 20 20"
fill="currentColor">
<path
fill-rule="evenodd"
d="M8 4a4 4 0 100 8 4 4 0 000-8zM2 8a6 6 0 1110.89 3.476l4.817 4.817a1 1 0 01-1.414 1.414l-4.816-4.816A6 6 0 012 8z"
clip-rule="evenodd"></path>
</svg>
</button> -->
<Select
appendListTarget="{selectTarget}"
loadOptions="{onSearch}"
optionIdentifier="{optionIdentifier}"
getSelectionLabel="{getSelectionLabel}"
getOptionLabel="{getOptionLabel}"
Item="{Item}"
hideEmptyState
<div class="hidden w-full min-w-min max-w-4xl flex-1 lg:block">
<Autocomplete
placeholder="{$page?.data?.store?.searchbarText || 'Search...'}"
inputStyles="cursor: text"
on:select="{onSearchSubmit}" />

<!-- padding-left: 40px; -->
</form>
on:search="{onSearchSubmit}" />
</div>

<div class="flex items-center gap-4 lg:gap-8">
<!-- Search -->
Expand Down Expand Up @@ -366,10 +318,22 @@ const getSelectionLabel = (option) => option.name
</a>

<div class="flex flex-1 flex-col gap-1">
<a
href="/product/{item.slug}"
class="text-sm leading-4"
on:click="{() => (showCartSidebar = false)}">{item.name}</a>
<div class="flex gap-2 justify-between">
<a
href="/product/{item.slug}"
class="flex-1 text-sm leading-4"
on:click="{() => (showCartSidebar = false)}">{item.name}</a>

{#if $page?.data?.store?.isFnb && item.foodType}
<div>
{#if item.foodType === 'veg'}
<img src="/product/veg.png" alt="veg" class="h-5 w-5" />
{:else if item.foodType === 'nonveg'}
<img src="/product/non-veg.png" alt="non veg" class="h-5 w-5" />
{/if}
</div>
{/if}
</div>

<div class="flex flex-wrap items-center gap-1">
<span>
Expand Down
26 changes: 17 additions & 9 deletions src/lib/ProductCard.svelte
View file
Original file line number Diff line number Diff line change
Expand Up @@ -108,7 +108,7 @@ async function toggleWishlist(id) {

<div class="h-auto w-full">
<LazyImg
src="{product.img}"
src="{product.imgCdn || product.img}"
alt="{product.name}"
width="192"
class="h-full w-full object-contain object-bottom text-xs" />
Expand Down Expand Up @@ -144,13 +144,21 @@ async function toggleWishlist(id) {
href="/product/{product.slug}"
aria-label="Click to view the product details"
data-sveltekit-prefetch>
<h2 class="text-sm line-clamp-2 group-hover:underline">
{#if product.name}
{product.name}
{:else}
_
<div class="flex gap-2 justify-between">
<h2 class="flex-1 text-sm line-clamp-2 group-hover:underline">
{product.name || '_'}
</h2>

{#if $page?.data?.store?.isFnb && product.foodType}
<div>
{#if product.foodType === 'veg'}
<img src="/product/veg.png" alt="veg" class="h-5 w-5" />
{:else if product.foodType === 'nonveg'}
<img src="/product/non-veg.png" alt="non veg" class="h-5 w-5" />
{/if}
</div>
{/if}
</h2>
</div>
</a>
</div>

Expand All @@ -159,7 +167,7 @@ async function toggleWishlist(id) {
aria-label="Click to view the product details"
data-sveltekit-prefetch>
<div class="mt-2.5 flex flex-wrap items-baseline justify-start leading-4 text-xs gap-1.5">
<span class="font-semibold sm:text-sm whitespace-nowrap">
<span class="font-bold text-sm sm:text-base whitespace-nowrap">
{product.formattedPrice}
</span>

Expand Down Expand Up @@ -234,7 +242,7 @@ async function toggleWishlist(id) {

<div class="h-auto w-full">
<LazyImg
src="{relatedProduct.img}"
src="{relatedProduct.imgCdn}"
alt="{relatedProduct.name}"
width="192"
class="h-full w-full object-contain object-bottom" />
Expand Down
10 changes: 7 additions & 3 deletions src/lib/components/AnimatedCartItem.svelte
View file
Original file line number Diff line number Diff line change
Expand Up @@ -10,9 +10,13 @@ export let img = ''
<span
in:fly="{{ y: -200, delay: 0, duration: 1500, easing: elasticInOut }}"
out:fade="{{ delay: 0, duration: 500 }}"
class="flex w-56 items-center justify-start rounded bg-gray-800 px-4 py-3 text-center text-sm text-white shadow">
<LazyImg src="{img}" alt="" width="32" height="32" class="mr-1 h-8 w-8 rounded object-cover" />
class="flex max-w-max items-center ounded bg-gray-800 px-4 py-3 text-center text-sm text-white rounded-md shadow-md">
<LazyImg
src="{img}"
alt=""
height="56"
class="h-14 w-auto rounded-md object-contain object-center" />

<div class="w-full">Added to bag</div>
<div class="flex-1 px-5">Added to Bag</div>
</span>
</div>
2 changes: 1 addition & 1 deletion src/lib/components/Breadcrumb.svelte
View file
Original file line number Diff line number Diff line change
Expand Up @@ -39,7 +39,7 @@ export { clazz as class }
{#each categoryPool as d}
<li class="flex items-center">
<a
href="/{d.slug}&sort=-createdAt"
href="/{d.slug}?sort=-createdAt"
aria-label="Click to go inside this page"
class="first-letter:uppercase hover:text-primary-500 hover:underline">
{d.name}
Expand Down
10 changes: 5 additions & 5 deletions src/lib/home/CategoriesMobile.svelte
View file
Original file line number Diff line number Diff line change
Expand Up @@ -24,7 +24,7 @@ let categoryColors = [

<div class="{clazz} max-w-screen">
{#if loading}
<div class="overflow-x-auto p-3 py-5 scrollbar-none sm:px-10">
<div class="overflow-x-auto p-3 py-5 scrollbar-none sm:px-10 w-screen">
<div class="container mx-auto flex items-start justify-start gap-4">
{#each { length: 8 } as _}
<div class="flex flex-col items-center">
Expand All @@ -36,19 +36,19 @@ let categoryColors = [
</div>
</div>
{:else if categories && categories.length}
<div class="overflow-x-auto py-5 scrollbar-none sm:px-10">
<div class="overflow-x-auto py-5 scrollbar-none sm:px-10 w-screen">
<div class="flex items-center pl-3">
{#each categories as category}
{#if category.imgCdn}
{#if category.imgCdn || category.img}
<div class="pr-3">
<a
href="/{category.slug}"
href="/{category.link || category.slug}"
aria-label="Click to view related products of this category"
class="group flex w-16 flex-col items-center justify-center">
<div
class="mb-1 h-16 w-16 flex-shrink-0 overflow-hidden rounded-full shadow-md group-hover:border-primary-500 group-hover:shadow-xl sm:mb-4">
<LazyImg
src="{category.imgCdn}"
src="{category.imgCdn || category.img}"
alt="{category.name}"
width="64"
height="64"
Expand Down
Loading

0 comments on commit 518e8ea

Please sign in to comment.