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

fix(vue-demo): product listing structure #394

Merged
merged 1 commit into from
Sep 22, 2023
Merged

fix(vue-demo): product listing structure #394

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
5 changes: 5 additions & 0 deletions .changeset/blue-mice-switch.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
---
"vue-demo-store": patch
---

Change product listing structure
220 changes: 82 additions & 138 deletions packages/cms-base/components/SwProductListingFilters.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -176,154 +176,98 @@ const dropdownElement = ref(null);
onClickOutside(dropdownElement, () => (isSortMenuOpen.value = false));
</script>
<template>
<ClientOnly>
<div class="bg-white">
<main class="mx-auto m-0 px-5">
<div
class="relative lg:flex lg:items-baseline lg:justify-between pt-6 pb-6 border-b border-gray-200"
>
<div>
<h1 class="text-4xl font-extrabold tracking-tight text-gray-900">
{{ getTranslatedProperty(category, "name") }}
</h1>
</div>
<div class="bg-white">
<main class="mx-auto m-0 px-5">
<div
class="relative lg:flex lg:items-baseline lg:justify-between pt-6 pb-6 border-b border-gray-200"
>
<div>
<h1 class="text-4xl font-extrabold tracking-tight text-gray-900">
{{ getTranslatedProperty(category, "name") }}
</h1>
</div>

<div class="flex items-center" ref="dropdownElement">
<div class="relative inline-block text-left">
<div>
<div class="flex items-center" ref="dropdownElement">
<div class="relative inline-block text-left">
<div>
<button
type="button"
@click="isSortMenuOpen = !isSortMenuOpen"
class="group inline-flex justify-center bg-transparent text-base font-medium text-gray-700 hover:text-gray-900"
id="menu-button"
aria-expanded="false"
aria-haspopup="true"
>
{{ translations.listing.sort }}
<div
class="i-carbon-chevron-down h-5 w-5 ml-1"
:class="{ hidden: isSortMenuOpen }"
></div>
<div
class="i-carbon-chevron-up h-5 w-5 ml-1"
:class="{ hidden: !isSortMenuOpen }"
></div>
</button>
</div>
<div
:class="[isSortMenuOpen ? 'absolute' : 'hidden']"
class="origin-top-left left-0 lg:origin-top-right lg:right-0 lg:left-auto mt-2 w-40 rounded-md shadow-2xl bg-white ring-1 ring-black ring-opacity-5 focus:outline-none z-1000"
role="menu"
aria-orientation="vertical"
aria-labelledby="menu-button"
tabindex="-1"
>
<div class="py-1" role="none">
<button
type="button"
@click="isSortMenuOpen = !isSortMenuOpen"
class="group inline-flex justify-center bg-transparent text-base font-medium text-gray-700 hover:text-gray-900"
id="menu-button"
aria-expanded="false"
aria-haspopup="true"
v-for="sorting in getSortingOrders"
:key="sorting.key"
@click="
currentSortingOrder = sorting.key;
isSortMenuOpen = false;
"
:class="[
sorting.key === getCurrentSortingOrder
? 'font-medium text-gray-900'
: 'text-gray-500',
]"
class="block px-4 py-2 text-sm"
role="menuitem"
tabindex="-1"
>
{{ translations.listing.sort }}
<div
class="i-carbon-chevron-down h-5 w-5 ml-1"
:class="{ hidden: isSortMenuOpen }"
></div>
<div
class="i-carbon-chevron-up h-5 w-5 ml-1"
:class="{ hidden: !isSortMenuOpen }"
></div>
{{ sorting.label }}
</button>
</div>
<div
:class="[isSortMenuOpen ? 'absolute' : 'hidden']"
class="origin-top-left left-0 lg:origin-top-right lg:right-0 lg:left-auto mt-2 w-40 rounded-md shadow-2xl bg-white ring-1 ring-black ring-opacity-5 focus:outline-none z-1000"
role="menu"
aria-orientation="vertical"
aria-labelledby="menu-button"
tabindex="-1"
>
<div class="py-1" role="none">
<button
v-for="sorting in getSortingOrders"
:key="sorting.key"
@click="
currentSortingOrder = sorting.key;
isSortMenuOpen = false;
"
:class="[
sorting.key === getCurrentSortingOrder
? 'font-medium text-gray-900'
: 'text-gray-500',
]"
class="block px-4 py-2 text-sm"
role="menuitem"
tabindex="-1"
>
{{ sorting.label }}
</button>
</div>
</div>
</div>
</div>
</div>
</div>

<div class="flex flex-wrap" v-if="getInitialFilters.length">
<div
v-for="filter in getInitialFilters"
:key="`${filter?.id || filter?.code}`"
class="mb-2 w-full"
>
<SwProductListingFilter
@selectFilterValue="onOptionSelectToggle"
:selectedFilters="getCurrentFilters"
:filter="filter"
class="relative"
/>
</div>
<div class="mx-auto mt-4 mb-2">
<button
class="w-full justify-center py-2 px-6 border border-transparent shadow-sm text-md font-medium rounded-md text-white bg-black hover:bg-gray-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-gray-500"
@click="invokeCleanFilters"
type="button"
>
{{ translations.listing.resetFilters
}}<span
class="w-6 h-6 i-carbon-close-filled inline-block align-middle ml-2"
></span>
</button>
</div>
<div class="flex flex-wrap" v-if="getInitialFilters.length">
<div
v-for="filter in getInitialFilters"
:key="`${filter?.id || filter?.code}`"
class="mb-2 w-full"
>
<SwProductListingFilter
@selectFilterValue="onOptionSelectToggle"
:selectedFilters="getCurrentFilters"
:filter="filter"
class="relative"
/>
</div>
</main>
</div>
<template #placeholder>
<div class="bg-white">
<main class="mx-auto">
<div
class="relative flex items-baseline justify-between pt-6 pb-6 border-b border-gray-200"
<div class="mx-auto mt-4 mb-2">
<button
class="w-full justify-center py-2 px-6 border border-transparent shadow-sm text-md font-medium rounded-md text-white bg-black hover:bg-gray-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-gray-500"
@click="invokeCleanFilters"
type="button"
>
<div>
<h1 class="text-4xl font-extrabold tracking-tight text-gray-900">
{{ getTranslatedProperty(category, "name") }}
</h1>
</div>

<div class="text-sm font-medium text-gray-700 hover:text-gray-900">
{{ translations.listing.sort }}
</div>
<div class="i-carbon-chevron-down h-5 w-5 ml-1"></div>
</div>
<div class="flex flex-wrap" v-show="!getInitialFilters.length">
<div class="flex pl-2 flex-wrap">
<div class="py-3 mb-2 mr-4 max-w-sm animate-pulse">
<div
class="border-1 bg-gray-200 dark:bg-gray-700px-2 py-3 w-42 h-12 text-gray-400 hover:text-gray-500 rounded"
></div>
</div>
<div class="py-3 max-w-sm animate-pulse">
<div
class="border-1 bg-gray-200 dark:bg-gray-700px-2 py-3 w-25 h-12 text-gray-400 hover:text-gray-500 rounded"
></div>
</div>
<div class="py-3 ml-4 mb-2 max-w-sm animate-pulse">
<div
class="border-1 bg-gray-200 dark:bg-gray-700px-2 py-3 w-25 h-12 text-gray-400 hover:text-gray-500 rounded"
></div>
</div>
<div class="py-3 mb-2 max-w-sm animate-pulse">
<div
class="border-1 bg-gray-200 dark:bg-gray-700px-2 py-3 w-42 h-12 text-gray-400 hover:text-gray-500 rounded"
></div>
</div>
<div class="py-3 mb-2 max-w-sm animate-pulse">
<div
class="border-1 bg-gray-200 dark:bg-gray-700px-2 py-3 w-42 h-12 text-gray-400 hover:text-gray-500 rounded"
></div>
</div>
<div class="py-3 mb-2 max-w-sm animate-pulse">
<div
class="border-1 bg-gray-200 dark:bg-gray-700px-2 py-3 w-42 h-12 text-gray-400 hover:text-gray-500 rounded"
></div>
</div>
</div>
</div>
</main>
{{ translations.listing.resetFilters
}}<span
class="w-6 h-6 i-carbon-close-filled inline-block align-middle ml-2"
></span>
</button>
</div>
</div>
</template>
</ClientOnly>
</main>
</div>
</template>
20 changes: 10 additions & 10 deletions packages/cms-base/components/public/cms/section/CmsSectionSidebar.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -15,10 +15,18 @@ const mobileBehavior = computed(() => props.content.mobileBehavior);
</script>

<template>
<div class="cms-section-sidebar flex flex-col md:block">
<div class="cms-section-sidebar grid grid-cols-12 md:grid">
<div class="col-span-12 md:col-span-9 order-2 md:order-2">
<CmsGenericBlock
v-for="cmsBlock in mainBlocks"
class="overflow-auto"
:key="cmsBlock.id"
:content="cmsBlock"
/>
</div>
<div
:class="{
'inline-block align-top w-12/12 md:w-3/12 order-2 md:order-1':
'align-top col-span-12 md:col-span-3 order-1 md:order-1':
mobileBehavior !== 'hidden',
'hidden md:block': mobileBehavior === 'hidden',
}"
Expand All @@ -30,13 +38,5 @@ const mobileBehavior = computed(() => props.content.mobileBehavior);
:content="cmsBlock"
/>
</div>
<div class="inline-block w-12/12 md:w-9/12 order-1 md:order-2">
<CmsGenericBlock
v-for="cmsBlock in mainBlocks"
class="overflow-auto"
:key="cmsBlock.id"
:content="cmsBlock"
/>
</div>
</div>
</template>