Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Search adjusted to EE #5709

Merged
merged 6 commits into from Apr 9, 2021
Merged

Search adjusted to EE #5709

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
eefd177
search adjusted to EE
justyna-13 Mar 25, 2021
b3ebe7d
Merge branch 'next' into search-adjust-to-ee
justyna-13 Mar 25, 2021
b584cd7
cr fix
justyna-13 Mar 26, 2021
745d7ad
set term removed
justyna-13 Mar 30, 2021
0deb717
search results mocked
justyna-13 Apr 6, 2021
927974e
conflict resolved
justyna-13 Apr 6, 2021
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
8 changes: 4 additions & 4 deletions packages/commercetools/theme/composables/useUiHelpers/index.ts
View file
Open in desktop
Expand Up @@ -2,7 +2,7 @@ import { getCurrentInstance } from '@vue/composition-api';
import { Category } from '@vue-storefront/commercetools-api';
import { AgnosticFacet } from '@vue-storefront/core';

const nonFilters = ['page', 'sort', 'term', 'itemsPerPage'];
const nonFilters = ['page', 'sort', 'phrase', 'itemsPerPage'];

const getInstance = () => {
const vm = getCurrentInstance();
Expand Down Expand Up @@ -40,7 +40,7 @@ const useUiHelpers = () => {
sort: query.sort || 'latest',
filters: getFiltersDataFromUrl(instance, true),
itemsPerPage: parseInt(query.itemsPerPage, 10) || 20,
term: query.term
phrase: query.phrase
};
};

Expand All @@ -56,7 +56,7 @@ const useUiHelpers = () => {
sort: query.sort || 'latest',
filters: getFiltersDataFromUrl(instance, true),
itemsPerPage: parseInt(query.itemsPerPage, 10) || 20,
term: query.term
phrase: query.phrase
};
};

Expand Down Expand Up @@ -91,7 +91,7 @@ const useUiHelpers = () => {
instance.$router.push({
query: {
...getFiltersDataFromUrl(instance, false),
term: term || undefined
phrase: term || undefined
}
});
};
Expand Down
23 changes: 14 additions & 9 deletions packages/core/nuxt-theme-module/theme/components/AppHeader.vue
View file
Open in desktop
Expand Up @@ -88,15 +88,15 @@
</SfSearchBar>
</template>
</SfHeader>
<SearchResults :visible="isSearchOpen" :result="result" @close="closeSearch" />
<SearchResults :visible="isSearchOpen" :result="result" @close="closeSearch" @removeSearchResults="removeSearchResults" />
<SfOverlay :visible="isSearchOpen" />
</div>
</template>

<script>
import { SfHeader, SfImage, SfIcon, SfButton, SfBadge, SfSearchBar, SfOverlay } from '@storefront-ui/vue';
import { useUiState } from '~/composables';
import { useCart, useWishlist, useUser, cartGetters, useFacet } from '<%= options.generate.replace.composables %>';
import { useCart, useWishlist, useUser, cartGetters } from '<%= options.generate.replace.composables %>';
import { computed, ref, onBeforeUnmount, watch } from '@vue/composition-api';
import { onSSR } from '@vue-storefront/core';
import { useUiHelpers } from '~/composables';
Expand All @@ -108,6 +108,7 @@ import {
unMapMobileObserver
} from '@storefront-ui/vue/src/utilities/mobile-observer.js';
import debounce from 'lodash.debounce';
import mockedSearchProducts from '../mockedSearchProducts.json';

export default {
components: {
Expand All @@ -124,14 +125,14 @@ export default {
directives: { clickOutside },
setup(props, { root }) {
const { toggleCartSidebar, toggleWishlistSidebar, toggleLoginModal } = useUiState();
const { setTermForUrl, getFacetsFromURL, getSearchTermFromUrl} = useUiHelpers();
const { result, search } = useFacet();
const { setTermForUrl, getFacetsFromURL } = useUiHelpers();
const { isAuthenticated, load: loadUser } = useUser();
const { cart, load: loadCart } = useCart();
const { load: loadWishlist } = useWishlist();
const term = ref(getFacetsFromURL().term);
const term = ref(getFacetsFromURL().phrase);
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

you can't assume it, it's a platform--specific field

const isSearchOpen = ref(false);
const searchBarRef = ref(null);
const result = ref(null);

const cartTotalItems = computed(() => {
const count = cartGetters.getTotalItems(cart.value);
Expand Down Expand Up @@ -160,7 +161,6 @@ export default {

term.value = '';
isSearchOpen.value = false;
setTermForUrl(term.value);
};

const handleSearch = debounce(async (paramValue) => {
Expand All @@ -169,8 +169,8 @@ export default {
} else {
term.value = paramValue.target.value;
}
setTermForUrl(term.value);
await search(getSearchTermFromUrl(term.value));
result.value = mockedSearchProducts;

}, 1000);

const isMobile = computed(() => mapMobileObserver().isMobile.get());
Expand All @@ -191,6 +191,10 @@ export default {
}
});

const removeSearchResults = () => {
result.value = null;
};

onBeforeUnmount(() => {
unMapMobileObserver();
});
Expand All @@ -209,7 +213,8 @@ export default {
result,
closeOrFocusSearchBar,
searchBarRef,
isMobile
isMobile,
removeSearchResults
};
}
};
Expand Down
71 changes: 29 additions & 42 deletions packages/core/nuxt-theme-module/theme/components/SearchResults.vue
View file
Open in desktop
Expand Up @@ -2,15 +2,15 @@
<div>
<SfMegaMenu
:visible="isSearchOpen"
title="$t('Search results')"
:title="$t('Search results')"
class="search"
>
<transition name="sf-fade" mode="out-in">
<div v-if="products.length > 0" class="search__wrapper-results" key="results">
<div v-if="products && products.length > 0" class="search__wrapper-results" key="results">
<SfMegaMenuColumn :title="$t('Categories')" class="sf-mega-menu-column--pined-content-on-mobile search__categories">
<SfList>
<SfListItem v-for="(category, key) in categories.items" :key="key">
<SfMenuItem :label="category.label" :link="`/c/women/${category.slug}`"/>
<SfListItem v-for="(category, key) in categories" :key="key">
<SfMenuItem :label="category.label" :link="`/c/${category.slug}`"/>
</SfListItem>
</SfList>
</SfMegaMenuColumn>
Expand Down Expand Up @@ -38,34 +38,21 @@
</div>
</SfScrollable>
<div class="results--mobile smartphone-only">
<SfProductCard
v-for="(product, index) in products"
:key="index"
:regular-price="$n(productGetters.getPrice(product).regular, 'currency')"
:score-rating="productGetters.getAverageRating(product)"
:reviews-count="7"
:image="productGetters.getCoverImage(product)"
:alt="productGetters.getName(product)"
:title="productGetters.getName(product)"
:link="`/p/${productGetters.getId(product)}/${productGetters.getSlug(product)}`"
/>
</div>
<SfButton
v-if="categories.items && categories.items.length"
:link="`/c/${categories.slug}/${categories.items[0].slug}`"
class="sf-button--text see-all desktop-only"
>
{{ $t('See all results') }}
</SfButton>
<SfProductCard
v-for="(product, index) in products"
:key="index"
class="result-card"
:regular-price="$n(productGetters.getPrice(product).regular, 'currency')"
:score-rating="productGetters.getAverageRating(product)"
:reviews-count="7"
:image="productGetters.getCoverImage(product)"
:alt="productGetters.getName(product)"
:title="productGetters.getName(product)"
:link="`/p/${productGetters.getId(product)}/${productGetters.getSlug(product)}`"
/>
</div>
</SfMegaMenuColumn>
<div class="action-buttons smartphone-only">
<SfButton
v-if="categories.items && categories.items.length"
class="action-buttons__button color-secondary"
:link="`/c/${categories.slug}/${categories.items[0].slug}`"
>
{{ $t('See all results') }}
</SfButton>
<SfButton class="action-buttons__button color-light" @click="$emit('close')">{{ $t('Cancel') }}</SfButton>
</div>
</div>
Expand All @@ -91,7 +78,7 @@ import {
SfImage
} from '@storefront-ui/vue';
import { ref, watch, computed } from '@vue/composition-api';
import { productGetters, facetGetters } from '<%= options.generate.replace.composables %>';
import { productGetters } from '<%= options.generate.replace.composables %>';

export default {
name: 'SearchResults',
Expand All @@ -114,19 +101,18 @@ export default {
type: Object
}
},
setup(props) {
setup(props, { emit }) {
const isSearchOpen = ref(props.visible);
const searchResult = ref(props.result);
const products = computed(() => facetGetters.getProducts(searchResult.value));
const categories = computed(() => facetGetters.getCategoryTree(searchResult.value));
const products = computed(() => props.result?.products);
const categories = computed(() => props.result?.categories);

watch(() => props.visible, (newVal) => {
isSearchOpen.value = newVal;
if (isSearchOpen.value) {
document.body.classList.add('no-scroll');
} else {
document.body.classList.remove('no-scroll');
searchResult.value.data = [];
emit('removeSearchResults');
}
});

Expand Down Expand Up @@ -202,9 +188,6 @@ export default {
width: 100%;
&__button {
width: calc(100% - 32px);
&:first-child {
margin-bottom: var(--spacer-sm);
}
}
}
.results-listing {
Expand All @@ -213,7 +196,10 @@ export default {
margin-left: var(--spacer-2xs);
}
.result-card {
margin: var(--spacer-2xs) 0;
margin: var(--spacer-sm) 0;
@include for-desktop {
margin: var(--spacer-2xs) 0;
}
}

.before-results {
Expand All @@ -222,13 +208,14 @@ export default {
width: 100%;
text-align: center;
@include for-desktop {
padding-bottom: var(--spacer-xl);
padding: 0;
}
&__picture {
--image-width: 230px;
margin-top: var(--spacer-2xl);
@include for-desktop {
--image-width: 21.875rem;
--image-width: 18.75rem;
margin-top: var(--spacer-base);
}
}
&__paragraph {
Expand Down
2 changes: 1 addition & 1 deletion packages/core/nuxt-theme-module/theme/composables/useUiHelpers/index.ts
View file
Open in desktop
Expand Up @@ -53,7 +53,7 @@ const useUiHelpers = () => {
};

const getSearchTermFromUrl = () => {
console.warn('[VSF] please implement useUiHelpers.isFacetCheckbox.');
console.warn('[VSF] please implement useUiHelpers.getSearchTermFromUrl.');
};

return {
Expand Down