Skip to content

Commit

Permalink
fix(vue-demo): product listing structure (#394)
Browse files Browse the repository at this point in the history
  • Loading branch information
@mdanilowicz
mdanilowicz authored Sep 22, 2023
1 parent 1a75592 commit 209236c
Show file tree
Hide file tree
Showing 3 changed files with 97 additions and 148 deletions.
5 changes: 5 additions & 0 deletions .changeset/blue-mice-switch.md
View file
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
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
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>

2 comments on commit 209236c

@vercel
Copy link

@vercel vercel bot commented on 209236c Sep 22, 2023

Choose a reason for hiding this comment

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

Successfully deployed to the following URLs:

shopware-frontends-docs – ./

shopware-frontends-docs-git-main-shopware-frontends.vercel.app
shopware-frontends-docs.vercel.app
shopware-frontends-docs-shopware-frontends.vercel.app
frontends.shopware.com

@vercel
Copy link

@vercel vercel bot commented on 209236c Sep 22, 2023

Choose a reason for hiding this comment

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

Successfully deployed to the following URLs:

frontends-demo – ./templates/vue-demo-store

frontends-demo-shopware-frontends.vercel.app
frontends-demo-git-main-shopware-frontends.vercel.app
frontends-demo.vercel.app

Please sign in to comment.