From 6952818534941b8e93a9ec889f64a9ec14a3486e Mon Sep 17 00:00:00 2001 From: guitavano Date: Fri, 2 Feb 2024 09:12:14 -0300 Subject: [PATCH 01/21] add show more button --- .env | 4 +- components/product/ProductGallery.tsx | 14 +++++- components/search/SearchResult.tsx | 2 + fresh.gen.ts | 2 + islands/ShowMore.tsx | 62 +++++++++++++++++++++++++++ runtime.ts | 3 +- 6 files changed, 83 insertions(+), 4 deletions(-) create mode 100644 islands/ShowMore.tsx diff --git a/.env b/.env index d79f8893..2dd7b691 100644 --- a/.env +++ b/.env @@ -1,7 +1,7 @@ -DECO_SITE_NAME=storefront-vtex +# DECO_SITE_NAME=storefront-vtex # DECO_SITE_NAME=storefront-linx # DECO_SITE_NAME=storefront-wake # DECO_SITE_NAME=storefront-vnda -# DECO_SITE_NAME=store-shopify +DECO_SITE_NAME=store-shopify # DECO_SITE_NAME=store-nuvemshop TOKEN_NUVEMSHOP=9db8481bf173f124ac2f95f3994d71f3d1ad15e6 diff --git a/components/product/ProductGallery.tsx b/components/product/ProductGallery.tsx index 9c4c41c9..4750851a 100644 --- a/components/product/ProductGallery.tsx +++ b/components/product/ProductGallery.tsx @@ -3,6 +3,7 @@ import ProductCard, { } from "$store/components/product/ProductCard.tsx"; import { usePlatform } from "$store/sdk/usePlatform.tsx"; import { Product } from "apps/commerce/types.ts"; +import ShowMore from "$store/islands/ShowMore.tsx" export interface Columns { mobile?: 1 | 2; @@ -11,6 +12,8 @@ export interface Columns { export interface Props { products: Product[] | null; + nextPage: string; + count: number; offset: number; layout?: { card?: CardLayout; @@ -30,11 +33,13 @@ const DESKTOP_COLUMNS = { 5: "sm:grid-cols-5", }; -function ProductGallery({ products, layout, offset }: Props) { +function ProductGallery({ products, nextPage, count, layout, offset }: Props) { const platform = usePlatform(); const mobile = MOBILE_COLUMNS[layout?.columns?.mobile ?? 2]; const desktop = DESKTOP_COLUMNS[layout?.columns?.desktop ?? 4]; + console.log(platform) + return (
{products?.map((product, index) => ( @@ -46,6 +51,13 @@ function ProductGallery({ products, layout, offset }: Props) { platform={platform} /> ))} + + {/* Shopify and Vtex already have showmore loader */} + {/* feel free to do to other platforms */} + {(platform === "shopify") && ( + + )} +
); } diff --git a/components/search/SearchResult.tsx b/components/search/SearchResult.tsx index 8479ff2d..4bac2c90 100644 --- a/components/search/SearchResult.tsx +++ b/components/search/SearchResult.tsx @@ -73,6 +73,8 @@ function Result({ products={products} offset={offset} layout={{ card: cardLayout, columns: layout?.columns }} + nextPage={pageInfo.nextPage || ""} + count={pageInfo.recordPerPage || 4} /> diff --git a/fresh.gen.ts b/fresh.gen.ts index 3f7d0a3e..e8cf191e 100644 --- a/fresh.gen.ts +++ b/fresh.gen.ts @@ -23,6 +23,7 @@ import * as $OutOfStock from "./islands/OutOfStock.tsx"; import * as $ProductImageZoom from "./islands/ProductImageZoom.tsx"; import * as $SearchControls from "./islands/SearchControls.tsx"; import * as $ShippingSimulation from "./islands/ShippingSimulation.tsx"; +import * as $ShowMore from "./islands/ShowMore.tsx"; import * as $SliderJS from "./islands/SliderJS.tsx"; import * as $WishlistButton_vtex from "./islands/WishlistButton/vtex.tsx"; import * as $WishlistButton_wake from "./islands/WishlistButton/wake.tsx"; @@ -53,6 +54,7 @@ const manifest = { "./islands/ProductImageZoom.tsx": $ProductImageZoom, "./islands/SearchControls.tsx": $SearchControls, "./islands/ShippingSimulation.tsx": $ShippingSimulation, + "./islands/ShowMore.tsx": $ShowMore, "./islands/SliderJS.tsx": $SliderJS, "./islands/WishlistButton/vtex.tsx": $WishlistButton_vtex, "./islands/WishlistButton/wake.tsx": $WishlistButton_wake, diff --git a/islands/ShowMore.tsx b/islands/ShowMore.tsx new file mode 100644 index 00000000..d504ced1 --- /dev/null +++ b/islands/ShowMore.tsx @@ -0,0 +1,62 @@ +import { useSignal } from "@preact/signals"; +import { invoke } from "$store/runtime.ts"; +import { Product } from "apps/commerce/types.ts"; +import ProductCard from "$store/components/product/ProductCard.tsx"; +import {Layout as CardLayout} from "$store/components/product/ProductCard.tsx"; +import {Columns} from "$store/components/product/ProductGallery.tsx"; +import Spinner from "$store/components/ui/Spinner.tsx"; + +export interface Props { + nextPage: string; + count: number; + platform: "shopify" | "vtex"; + layout?: { + card?: CardLayout; + columns?: Columns; + }; +} + +export default function ShowMore({nextPage, count, platform, layout}: Props){ + + const products = useSignal>([]) + const _nextPage = useSignal(nextPage) + const loading = useSignal(false) + + const handleLoadMore = async () => { + loading.value = true + const page = await invoke[platform].actions.showMore.productListingPage({ + count, + nextPage: window.location.origin + window.location.pathname + _nextPage + }) + loading.value = false + console.log(page.nextPage) + + if(page){ + _nextPage.value = page.nextPage + products.value = [...products.value, ...page.products] + } + + } + + return( + <> + {products.value.map((product, index) => { + if(!product) return null + return( + + ) + })} + {_nextPage.value && } + + ) +} \ No newline at end of file diff --git a/runtime.ts b/runtime.ts index 74731b60..0589c06f 100644 --- a/runtime.ts +++ b/runtime.ts @@ -2,5 +2,6 @@ import { proxy } from "deco/clients/withManifest.ts"; import type { Manifest } from "./manifest.gen.ts"; import type { Manifest as ManifestVNDA } from "apps/vnda/manifest.gen.ts"; import type { Manifest as ManifestVTEX } from "apps/vtex/manifest.gen.ts"; +import type { Manifest as ManifestShopify } from "apps/shopify/manifest.gen.ts"; -export const invoke = proxy(); +export const invoke = proxy(); From 76af4e1a2eb13fe7f0a2ae5609f590fd29e1778a Mon Sep 17 00:00:00 2001 From: guitavano Date: Fri, 2 Feb 2024 09:32:50 -0300 Subject: [PATCH 02/21] improve showmore component --- components/product/ProductGallery.tsx | 22 +++--- components/search/SearchResult.tsx | 3 +- islands/ShowMore.tsx | 107 ++++++++++++++------------ runtime.ts | 4 +- 4 files changed, 72 insertions(+), 64 deletions(-) diff --git a/components/product/ProductGallery.tsx b/components/product/ProductGallery.tsx index 4750851a..332ce478 100644 --- a/components/product/ProductGallery.tsx +++ b/components/product/ProductGallery.tsx @@ -2,8 +2,8 @@ import ProductCard, { Layout as CardLayout, } from "$store/components/product/ProductCard.tsx"; import { usePlatform } from "$store/sdk/usePlatform.tsx"; -import { Product } from "apps/commerce/types.ts"; -import ShowMore from "$store/islands/ShowMore.tsx" +import { PageInfo, Product } from "apps/commerce/types.ts"; +import ShowMore from "$store/islands/ShowMore.tsx"; export interface Columns { mobile?: 1 | 2; @@ -12,8 +12,7 @@ export interface Columns { export interface Props { products: Product[] | null; - nextPage: string; - count: number; + pageInfo: PageInfo; offset: number; layout?: { card?: CardLayout; @@ -33,12 +32,12 @@ const DESKTOP_COLUMNS = { 5: "sm:grid-cols-5", }; -function ProductGallery({ products, nextPage, count, layout, offset }: Props) { +function ProductGallery({ products, pageInfo, layout, offset }: Props) { const platform = usePlatform(); const mobile = MOBILE_COLUMNS[layout?.columns?.mobile ?? 2]; const desktop = DESKTOP_COLUMNS[layout?.columns?.desktop ?? 4]; - console.log(platform) + console.log(platform); return (
@@ -52,12 +51,13 @@ function ProductGallery({ products, nextPage, count, layout, offset }: Props) { /> ))} - {/* Shopify and Vtex already have showmore loader */} - {/* feel free to do to other platforms */} - {(platform === "shopify") && ( - + {(pageInfo.showMore) && ( + )} -
); } diff --git a/components/search/SearchResult.tsx b/components/search/SearchResult.tsx index 4bac2c90..6ed8dc19 100644 --- a/components/search/SearchResult.tsx +++ b/components/search/SearchResult.tsx @@ -73,8 +73,7 @@ function Result({ products={products} offset={offset} layout={{ card: cardLayout, columns: layout?.columns }} - nextPage={pageInfo.nextPage || ""} - count={pageInfo.recordPerPage || 4} + pageInfo={pageInfo} /> diff --git a/islands/ShowMore.tsx b/islands/ShowMore.tsx index d504ced1..1301908e 100644 --- a/islands/ShowMore.tsx +++ b/islands/ShowMore.tsx @@ -1,62 +1,69 @@ import { useSignal } from "@preact/signals"; import { invoke } from "$store/runtime.ts"; -import { Product } from "apps/commerce/types.ts"; +import { PageInfo, Product } from "apps/commerce/types.ts"; import ProductCard from "$store/components/product/ProductCard.tsx"; -import {Layout as CardLayout} from "$store/components/product/ProductCard.tsx"; -import {Columns} from "$store/components/product/ProductGallery.tsx"; +import { Layout as CardLayout } from "$store/components/product/ProductCard.tsx"; +import { Columns } from "$store/components/product/ProductGallery.tsx"; import Spinner from "$store/components/ui/Spinner.tsx"; +import { usePlatform } from "$store/sdk/usePlatform.tsx"; export interface Props { - nextPage: string; - count: number; - platform: "shopify" | "vtex"; - layout?: { - card?: CardLayout; - columns?: Columns; - }; + pageInfo: PageInfo; + layout?: { + card?: CardLayout; + columns?: Columns; + }; + platform: ReturnType; } -export default function ShowMore({nextPage, count, platform, layout}: Props){ +export default function ShowMore({ pageInfo, layout, platform }: Props) { + const products = useSignal>([]); + const nextPage = useSignal(pageInfo.nextPage); + const loading = useSignal(false); - const products = useSignal>([]) - const _nextPage = useSignal(nextPage) - const loading = useSignal(false) + const handleLoadMore = async () => { + loading.value = true; + if(!pageInfo.showMore) return; + // Figure out a better way to type this loader + // deno-lint-ignore no-explicit-any + const invokePayload: any = { + key: pageInfo.showMore, + props: { + count: pageInfo.recordPerPage || 12, + nextPage: window.location.origin + window.location.pathname + nextPage.value, + }, + }; + const page = await invoke(invokePayload) as ProductListingPage | null; + loading.value = false; + console.log(page); - const handleLoadMore = async () => { - loading.value = true - const page = await invoke[platform].actions.showMore.productListingPage({ - count, - nextPage: window.location.origin + window.location.pathname + _nextPage - }) - loading.value = false - console.log(page.nextPage) - - if(page){ - _nextPage.value = page.nextPage - products.value = [...products.value, ...page.products] - } - + if (page) { + nextPage.value = page.nextPage; + products.value = [...products.value, ...page.products]; } + }; - return( - <> - {products.value.map((product, index) => { - if(!product) return null - return( - - ) - })} - {_nextPage.value && } - - ) -} \ No newline at end of file + return ( + <> + {products.value.map((product, index) => { + if (!product) return null; + return ( + + ); + })} + {nextPage.value && ( + + )} + + ); +} diff --git a/runtime.ts b/runtime.ts index 0589c06f..9feceeaf 100644 --- a/runtime.ts +++ b/runtime.ts @@ -4,4 +4,6 @@ import type { Manifest as ManifestVNDA } from "apps/vnda/manifest.gen.ts"; import type { Manifest as ManifestVTEX } from "apps/vtex/manifest.gen.ts"; import type { Manifest as ManifestShopify } from "apps/shopify/manifest.gen.ts"; -export const invoke = proxy(); +export const invoke = proxy< + Manifest & ManifestVNDA & ManifestVTEX & ManifestShopify +>(); From 68e882e8939023beab1b6a99307c1accc1805f1c Mon Sep 17 00:00:00 2001 From: guitavano Date: Fri, 2 Feb 2024 09:33:15 -0300 Subject: [PATCH 03/21] fmt --- islands/ShowMore.tsx | 15 ++++++++------- 1 file changed, 8 insertions(+), 7 deletions(-) diff --git a/islands/ShowMore.tsx b/islands/ShowMore.tsx index 1301908e..01d8b7e6 100644 --- a/islands/ShowMore.tsx +++ b/islands/ShowMore.tsx @@ -23,16 +23,17 @@ export default function ShowMore({ pageInfo, layout, platform }: Props) { const handleLoadMore = async () => { loading.value = true; - if(!pageInfo.showMore) return; + if (!pageInfo.showMore) return; // Figure out a better way to type this loader // deno-lint-ignore no-explicit-any const invokePayload: any = { - key: pageInfo.showMore, - props: { - count: pageInfo.recordPerPage || 12, - nextPage: window.location.origin + window.location.pathname + nextPage.value, - }, - }; + key: pageInfo.showMore, + props: { + count: pageInfo.recordPerPage || 12, + nextPage: window.location.origin + window.location.pathname + + nextPage.value, + }, + }; const page = await invoke(invokePayload) as ProductListingPage | null; loading.value = false; console.log(page); From 39262b77b75ca9f2fe19b62a53d687570cf704aa Mon Sep 17 00:00:00 2001 From: guitavano Date: Fri, 2 Feb 2024 10:51:41 -0300 Subject: [PATCH 04/21] remove console log --- components/product/ProductGallery.tsx | 2 -- islands/ShowMore.tsx | 1 - 2 files changed, 3 deletions(-) diff --git a/components/product/ProductGallery.tsx b/components/product/ProductGallery.tsx index 332ce478..d9a90e2b 100644 --- a/components/product/ProductGallery.tsx +++ b/components/product/ProductGallery.tsx @@ -37,8 +37,6 @@ function ProductGallery({ products, pageInfo, layout, offset }: Props) { const mobile = MOBILE_COLUMNS[layout?.columns?.mobile ?? 2]; const desktop = DESKTOP_COLUMNS[layout?.columns?.desktop ?? 4]; - console.log(platform); - return (
{products?.map((product, index) => ( diff --git a/islands/ShowMore.tsx b/islands/ShowMore.tsx index 01d8b7e6..e8d2e29e 100644 --- a/islands/ShowMore.tsx +++ b/islands/ShowMore.tsx @@ -36,7 +36,6 @@ export default function ShowMore({ pageInfo, layout, platform }: Props) { }; const page = await invoke(invokePayload) as ProductListingPage | null; loading.value = false; - console.log(page); if (page) { nextPage.value = page.nextPage; From 75d22183323c5e2c5b565da886e845d12d0287ba Mon Sep 17 00:00:00 2001 From: guitavano Date: Fri, 2 Feb 2024 21:00:24 -0300 Subject: [PATCH 05/21] use pageHref instead --- components/product/ProductGallery.tsx | 28 +++++++--- components/search/SearchResult.tsx | 80 ++++++++++++++++++--------- islands/ShowMore.tsx | 26 +++++---- sections/Product/SearchResult.tsx | 2 +- 4 files changed, 92 insertions(+), 44 deletions(-) diff --git a/components/product/ProductGallery.tsx b/components/product/ProductGallery.tsx index d9a90e2b..794c1efd 100644 --- a/components/product/ProductGallery.tsx +++ b/components/product/ProductGallery.tsx @@ -4,6 +4,8 @@ import ProductCard, { import { usePlatform } from "$store/sdk/usePlatform.tsx"; import { PageInfo, Product } from "apps/commerce/types.ts"; import ShowMore from "$store/islands/ShowMore.tsx"; +import { Head } from "$fresh/runtime.ts"; +import { Format } from "$store/components/search/SearchResult.tsx"; export interface Columns { mobile?: 1 | 2; @@ -13,10 +15,12 @@ export interface Columns { export interface Props { products: Product[] | null; pageInfo: PageInfo; + loaderProps: string; offset: number; layout?: { card?: CardLayout; columns?: Columns; + format?: Format; }; } @@ -32,7 +36,7 @@ const DESKTOP_COLUMNS = { 5: "sm:grid-cols-5", }; -function ProductGallery({ products, pageInfo, layout, offset }: Props) { +function ProductGallery({ products, pageInfo, layout, offset, loaderProps }: Props) { const platform = usePlatform(); const mobile = MOBILE_COLUMNS[layout?.columns?.mobile ?? 2]; const desktop = DESKTOP_COLUMNS[layout?.columns?.desktop ?? 4]; @@ -49,12 +53,22 @@ function ProductGallery({ products, pageInfo, layout, offset }: Props) { /> ))} - {(pageInfo.showMore) && ( - + + {pageInfo.nextPage && } + {pageInfo.previousPage && ( + + )} + + + {(pageInfo.showMore && layout.format === "Show More") && ( + <> + + )}
); diff --git a/components/search/SearchResult.tsx b/components/search/SearchResult.tsx index 6ed8dc19..d102ff36 100644 --- a/components/search/SearchResult.tsx +++ b/components/search/SearchResult.tsx @@ -8,6 +8,9 @@ import { useOffer } from "$store/sdk/useOffer.ts"; import type { ProductListingPage } from "apps/commerce/types.ts"; import { mapProductToAnalyticsItem } from "apps/commerce/utils/productToAnalyticsItem.ts"; import ProductGallery, { Columns } from "../product/ProductGallery.tsx"; +import { Resolved } from "deco/engine/core/resolver.ts"; + +export type Format = "Show More" | "Pagination"; export interface Layout { /** @@ -18,11 +21,15 @@ export interface Layout { * @description Number of products per line on grid */ columns?: Columns; + /** + * @description Format of the pagination + */ + format?: Format; } export interface Props { /** @title Integration */ - page: ProductListingPage | null; + page: Resolved; layout?: Layout; cardLayout?: CardLayout; @@ -43,10 +50,13 @@ function Result({ layout, cardLayout, startingPage = 0, -}: Omit & { page: ProductListingPage }) { + loaderProps +}: Omit & { page: ProductListingPage; layout?: Layout; loaderProps: Resolved}) { const { products, filters, breadcrumb, pageInfo, sortOptions } = page; const perPage = pageInfo.recordPerPage || products.length; + const { format = "Show More" } = layout ?? {}; + const id = useId(); const zeroIndexedOffsetPage = pageInfo.currentPage - startingPage; @@ -72,35 +82,38 @@ function Result({ -
-
- - - Page {zeroIndexedOffsetPage + 1} - - + {(format == "Pagination" || !pageInfo.showMore) && ( +
+
+ + + Page {zeroIndexedOffsetPage + 1} + + +
-
+ )}
) { if (!page) { return ; } @@ -133,4 +146,19 @@ function SearchResult({ page, ...props }: Props) { return ; } +export const loader = async (props: Props, _req: Request, ctx: FnContext) => { + + const page = await ctx.invoke[props.page.__resolveType]({ + ...props.page + }) + + return { + ...props, + page, + loaderProps: { + ...props.page + } + } +} + export default SearchResult; diff --git a/islands/ShowMore.tsx b/islands/ShowMore.tsx index e8d2e29e..2d985dc5 100644 --- a/islands/ShowMore.tsx +++ b/islands/ShowMore.tsx @@ -1,11 +1,12 @@ import { useSignal } from "@preact/signals"; import { invoke } from "$store/runtime.ts"; -import { PageInfo, Product } from "apps/commerce/types.ts"; +import { PageInfo, Product, ProductListingPage } from "apps/commerce/types.ts"; import ProductCard from "$store/components/product/ProductCard.tsx"; import { Layout as CardLayout } from "$store/components/product/ProductCard.tsx"; import { Columns } from "$store/components/product/ProductGallery.tsx"; import Spinner from "$store/components/ui/Spinner.tsx"; import { usePlatform } from "$store/sdk/usePlatform.tsx"; +import { Resolved } from "deco/engine/core/resolver.ts"; export interface Props { pageInfo: PageInfo; @@ -14,9 +15,10 @@ export interface Props { columns?: Columns; }; platform: ReturnType; + loaderProps: Resolved; } -export default function ShowMore({ pageInfo, layout, platform }: Props) { +export default function ShowMore({ pageInfo, layout, platform, loaderProps }: Props) { const products = useSignal>([]); const nextPage = useSignal(pageInfo.nextPage); const loading = useSignal(false); @@ -24,21 +26,25 @@ export default function ShowMore({ pageInfo, layout, platform }: Props) { const handleLoadMore = async () => { loading.value = true; if (!pageInfo.showMore) return; - // Figure out a better way to type this loader - // deno-lint-ignore no-explicit-any + + const url = new URL(window.location.origin + window.location.pathname + nextPage.value) + const invokePayload: any = { - key: pageInfo.showMore, - props: { - count: pageInfo.recordPerPage || 12, - nextPage: window.location.origin + window.location.pathname + - nextPage.value, + key: loaderProps.__resolveType, + props: { + ...loaderProps, + __resolveType: undefined, + pageHref: url.href, }, }; + const page = await invoke(invokePayload) as ProductListingPage | null; + loading.value = false; if (page) { - nextPage.value = page.nextPage; + window.history.pushState({}, "", nextPage.value); + nextPage.value = page.pageInfo.nextPage; products.value = [...products.value, ...page.products]; } }; diff --git a/sections/Product/SearchResult.tsx b/sections/Product/SearchResult.tsx index 9e9bf574..8cb96e84 100644 --- a/sections/Product/SearchResult.tsx +++ b/sections/Product/SearchResult.tsx @@ -1,4 +1,4 @@ -export { default } from "$store/components/search/SearchResult.tsx"; +export { default, loader } from "$store/components/search/SearchResult.tsx"; export function LoadingFallback() { return ( From 6e62cbe29cb2195df907de5fbaec286537b0b995 Mon Sep 17 00:00:00 2001 From: guitavano Date: Fri, 2 Feb 2024 21:02:40 -0300 Subject: [PATCH 06/21] remove showMore --- components/product/ProductGallery.tsx | 6 ++++-- components/search/SearchResult.tsx | 23 +++++++++++++---------- islands/ShowMore.tsx | 11 +++++++---- 3 files changed, 24 insertions(+), 16 deletions(-) diff --git a/components/product/ProductGallery.tsx b/components/product/ProductGallery.tsx index 794c1efd..a813ccc0 100644 --- a/components/product/ProductGallery.tsx +++ b/components/product/ProductGallery.tsx @@ -36,7 +36,9 @@ const DESKTOP_COLUMNS = { 5: "sm:grid-cols-5", }; -function ProductGallery({ products, pageInfo, layout, offset, loaderProps }: Props) { +function ProductGallery( + { products, pageInfo, layout, offset, loaderProps }: Props, +) { const platform = usePlatform(); const mobile = MOBILE_COLUMNS[layout?.columns?.mobile ?? 2]; const desktop = DESKTOP_COLUMNS[layout?.columns?.desktop ?? 4]; @@ -60,7 +62,7 @@ function ProductGallery({ products, pageInfo, layout, offset, loaderProps }: Pro )} - {(pageInfo.showMore && layout.format === "Show More") && ( + {(layout.format === "Show More") && ( <> & { page: ProductListingPage; layout?: Layout; loaderProps: Resolved}) { + loaderProps, +}: Omit & { + page: ProductListingPage; + layout?: Layout; + loaderProps: Resolved; +}) { const { products, filters, breadcrumb, pageInfo, sortOptions } = page; const perPage = pageInfo.recordPerPage || products.length; @@ -89,7 +93,7 @@ function Result({ - {(format == "Pagination" || !pageInfo.showMore) && ( + {format == "Pagination" && (
) { } export const loader = async (props: Props, _req: Request, ctx: FnContext) => { - const page = await ctx.invoke[props.page.__resolveType]({ - ...props.page - }) + ...props.page, + }); return { ...props, page, loaderProps: { - ...props.page - } - } -} + ...props.page, + }, + }; +}; export default SearchResult; diff --git a/islands/ShowMore.tsx b/islands/ShowMore.tsx index 2d985dc5..8eb3360e 100644 --- a/islands/ShowMore.tsx +++ b/islands/ShowMore.tsx @@ -18,20 +18,23 @@ export interface Props { loaderProps: Resolved; } -export default function ShowMore({ pageInfo, layout, platform, loaderProps }: Props) { +export default function ShowMore( + { pageInfo, layout, platform, loaderProps }: Props, +) { const products = useSignal>([]); const nextPage = useSignal(pageInfo.nextPage); const loading = useSignal(false); const handleLoadMore = async () => { loading.value = true; - if (!pageInfo.showMore) return; - const url = new URL(window.location.origin + window.location.pathname + nextPage.value) + const url = new URL( + window.location.origin + window.location.pathname + nextPage.value, + ); const invokePayload: any = { key: loaderProps.__resolveType, - props: { + props: { ...loaderProps, __resolveType: undefined, pageHref: url.href, From f0d33e85251c5e776e756f1918cbf6c95482bdb6 Mon Sep 17 00:00:00 2001 From: guitavano Date: Sun, 4 Feb 2024 23:51:03 -0300 Subject: [PATCH 07/21] fix type errors --- components/product/ProductGallery.tsx | 7 ++++--- components/search/SearchResult.tsx | 14 +++++++++++--- components/wishlist/WishlistGallery.tsx | 24 +++++++++++++++++++++++- islands/ShowMore.tsx | 2 ++ sections/Product/Wishlist.tsx | 5 ++++- 5 files changed, 44 insertions(+), 8 deletions(-) diff --git a/components/product/ProductGallery.tsx b/components/product/ProductGallery.tsx index a813ccc0..cebbe0de 100644 --- a/components/product/ProductGallery.tsx +++ b/components/product/ProductGallery.tsx @@ -2,10 +2,11 @@ import ProductCard, { Layout as CardLayout, } from "$store/components/product/ProductCard.tsx"; import { usePlatform } from "$store/sdk/usePlatform.tsx"; -import { PageInfo, Product } from "apps/commerce/types.ts"; +import { PageInfo, Product, ProductListingPage } from "apps/commerce/types.ts"; import ShowMore from "$store/islands/ShowMore.tsx"; import { Head } from "$fresh/runtime.ts"; import { Format } from "$store/components/search/SearchResult.tsx"; +import { Resolved } from "deco/engine/core/resolver.ts"; export interface Columns { mobile?: 1 | 2; @@ -15,7 +16,7 @@ export interface Columns { export interface Props { products: Product[] | null; pageInfo: PageInfo; - loaderProps: string; + loaderProps: Resolved; offset: number; layout?: { card?: CardLayout; @@ -62,7 +63,7 @@ function ProductGallery( )} - {(layout.format === "Show More") && ( + {(layout && layout?.format === "Show More") && ( <> ) { } export const loader = async (props: Props, _req: Request, ctx: FnContext) => { - const page = await ctx.invoke[props.page.__resolveType]({ - ...props.page, - }); + // Figure out a better way to type this loader + // deno-lint-ignore no-explicit-any + const invokePayload: any = { + key: props.page.__resolveType, + props: { + ...props.page, + }, + }; + + const page = await invoke(invokePayload) as ProductListingPage | null; return { ...props, diff --git a/components/wishlist/WishlistGallery.tsx b/components/wishlist/WishlistGallery.tsx index 8d9ba0b3..49bf8400 100644 --- a/components/wishlist/WishlistGallery.tsx +++ b/components/wishlist/WishlistGallery.tsx @@ -1,10 +1,11 @@ import SearchResult, { Props as SearchResultProps, } from "$store/components/search/SearchResult.tsx"; +import { FnContext } from "deco/mod.ts"; export type Props = SearchResultProps; -function WishlistGallery(props: Props) { +function WishlistGallery(props: ReturnType) { const isEmpty = !props.page || props.page.products.length === 0; if (isEmpty) { @@ -24,4 +25,25 @@ function WishlistGallery(props: Props) { return ; } +export const loader = async (props: Props, _req: Request, ctx: FnContext) => { + // Figure out a better way to type this loader + // deno-lint-ignore no-explicit-any + const invokePayload: any = { + key: props.page.__resolveType, + props: { + ...props.page, + }, + }; + + const page = await invoke(invokePayload) as ProductListingPage | null; + + return { + ...props, + page, + loaderProps: { + ...props.page, + }, + }; +}; + export default WishlistGallery; diff --git a/islands/ShowMore.tsx b/islands/ShowMore.tsx index 8eb3360e..42473dd7 100644 --- a/islands/ShowMore.tsx +++ b/islands/ShowMore.tsx @@ -32,6 +32,8 @@ export default function ShowMore( window.location.origin + window.location.pathname + nextPage.value, ); + // Figure out a better way to type this loader + // deno-lint-ignore no-explicit-any const invokePayload: any = { key: loaderProps.__resolveType, props: { diff --git a/sections/Product/Wishlist.tsx b/sections/Product/Wishlist.tsx index 7bba30bc..da021d2f 100644 --- a/sections/Product/Wishlist.tsx +++ b/sections/Product/Wishlist.tsx @@ -1 +1,4 @@ -export { default } from "$store/components/wishlist/WishlistGallery.tsx"; +export { + default, + loader, +} from "$store/components/wishlist/WishlistGallery.tsx"; From 07d11d96bd484ebdacb7ff83ceeb1b4b90774f00 Mon Sep 17 00:00:00 2001 From: guitavano Date: Sun, 4 Feb 2024 23:57:50 -0300 Subject: [PATCH 08/21] back to use ctx.invoke --- components/search/SearchResult.tsx | 13 +++---------- components/wishlist/WishlistGallery.tsx | 13 +++---------- 2 files changed, 6 insertions(+), 20 deletions(-) diff --git a/components/search/SearchResult.tsx b/components/search/SearchResult.tsx index 8f26f529..b75163e7 100644 --- a/components/search/SearchResult.tsx +++ b/components/search/SearchResult.tsx @@ -152,16 +152,9 @@ function SearchResult({ page, ...props }: ReturnType) { } export const loader = async (props: Props, _req: Request, ctx: FnContext) => { - // Figure out a better way to type this loader - // deno-lint-ignore no-explicit-any - const invokePayload: any = { - key: props.page.__resolveType, - props: { - ...props.page, - }, - }; - - const page = await invoke(invokePayload) as ProductListingPage | null; + const page = await ctx.invoke[props.page.__resolveType]({ + ...props.page, + }) as ProductListingPage | null; return { ...props, diff --git a/components/wishlist/WishlistGallery.tsx b/components/wishlist/WishlistGallery.tsx index 49bf8400..26fa2446 100644 --- a/components/wishlist/WishlistGallery.tsx +++ b/components/wishlist/WishlistGallery.tsx @@ -26,16 +26,9 @@ function WishlistGallery(props: ReturnType) { } export const loader = async (props: Props, _req: Request, ctx: FnContext) => { - // Figure out a better way to type this loader - // deno-lint-ignore no-explicit-any - const invokePayload: any = { - key: props.page.__resolveType, - props: { - ...props.page, - }, - }; - - const page = await invoke(invokePayload) as ProductListingPage | null; + const page = await ctx.invoke[props.page.__resolveType]({ + ...props.page, + }) as ProductListingPage | null; return { ...props, From d56ea5906b942d6c60585e16e4b864d790f9c2a1 Mon Sep 17 00:00:00 2001 From: guitavano Date: Tue, 6 Feb 2024 09:30:14 -0300 Subject: [PATCH 09/21] use app version --- .env | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/.env b/.env index 2dd7b691..d79f8893 100644 --- a/.env +++ b/.env @@ -1,7 +1,7 @@ -# DECO_SITE_NAME=storefront-vtex +DECO_SITE_NAME=storefront-vtex # DECO_SITE_NAME=storefront-linx # DECO_SITE_NAME=storefront-wake # DECO_SITE_NAME=storefront-vnda -DECO_SITE_NAME=store-shopify +# DECO_SITE_NAME=store-shopify # DECO_SITE_NAME=store-nuvemshop TOKEN_NUVEMSHOP=9db8481bf173f124ac2f95f3994d71f3d1ad15e6 From a74b12c6b2eb11bc3fd39673666a7c40ee32d03f Mon Sep 17 00:00:00 2001 From: guitavano Date: Tue, 6 Feb 2024 11:34:54 -0300 Subject: [PATCH 10/21] create better types --- components/search/SearchResult.tsx | 22 ++++++++++++++-------- components/search/Sort.tsx | 2 ++ components/wishlist/WishlistGallery.tsx | 17 +++++++++++------ 3 files changed, 27 insertions(+), 14 deletions(-) diff --git a/components/search/SearchResult.tsx b/components/search/SearchResult.tsx index b75163e7..2fb92f9e 100644 --- a/components/search/SearchResult.tsx +++ b/components/search/SearchResult.tsx @@ -9,7 +9,8 @@ import type { ProductListingPage } from "apps/commerce/types.ts"; import { mapProductToAnalyticsItem } from "apps/commerce/utils/productToAnalyticsItem.ts"; import ProductGallery, { Columns } from "../product/ProductGallery.tsx"; import { Resolved } from "deco/engine/core/resolver.ts"; -import { FnContext } from "deco/mod.ts"; +import { AppContext } from "$store/apps/site.ts"; +import type { SectionProps } from "deco/types.ts"; export type Format = "Show More" | "Pagination"; @@ -58,7 +59,7 @@ function Result({ loaderProps: Resolved; }) { const { products, filters, breadcrumb, pageInfo, sortOptions } = page; - const perPage = pageInfo.recordPerPage || products.length; + const perPage = pageInfo?.recordPerPage || products.length; const { format = "Show More" } = layout ?? {}; @@ -143,18 +144,23 @@ function Result({ ); } -function SearchResult({ page, ...props }: ReturnType) { +function SearchResult( + { page, loaderProps, ...props }: SectionProps, +) { if (!page) { return ; } - return ; + return ; } -export const loader = async (props: Props, _req: Request, ctx: FnContext) => { - const page = await ctx.invoke[props.page.__resolveType]({ - ...props.page, - }) as ProductListingPage | null; +export const loader = async (props: Props, _req: Request, ctx: AppContext) => { + const page = await ctx.invoke( + // deno-lint-ignore no-explicit-any + props.page.__resolveType as any, + // deno-lint-ignore no-explicit-any + props.page as any, + ) as ProductListingPage | null; return { ...props, diff --git a/components/search/Sort.tsx b/components/search/Sort.tsx index d89b1b4d..ba935f7a 100644 --- a/components/search/Sort.tsx +++ b/components/search/Sort.tsx @@ -3,6 +3,7 @@ import { ProductListingPage } from "apps/commerce/types.ts"; import type { JSX } from "preact"; const SORT_QUERY_PARAM = "sort"; +const PAGE_QUERY_PARAM = "page"; const useSort = () => useMemo(() => { @@ -18,6 +19,7 @@ const applySort = (e: JSX.TargetedEvent) => { globalThis.window.location.search, ); + urlSearchParams.delete(PAGE_QUERY_PARAM); urlSearchParams.set(SORT_QUERY_PARAM, e.currentTarget.value); globalThis.window.location.search = urlSearchParams.toString(); }; diff --git a/components/wishlist/WishlistGallery.tsx b/components/wishlist/WishlistGallery.tsx index 26fa2446..130f8645 100644 --- a/components/wishlist/WishlistGallery.tsx +++ b/components/wishlist/WishlistGallery.tsx @@ -1,11 +1,13 @@ import SearchResult, { Props as SearchResultProps, } from "$store/components/search/SearchResult.tsx"; -import { FnContext } from "deco/mod.ts"; +import { ProductListingPage } from "apps/commerce/types.ts"; +import { AppContext } from "$store/apps/site.ts"; +import { SectionProps } from "deco/mod.ts"; export type Props = SearchResultProps; -function WishlistGallery(props: ReturnType) { +function WishlistGallery(props: SectionProps) { const isEmpty = !props.page || props.page.products.length === 0; if (isEmpty) { @@ -25,10 +27,13 @@ function WishlistGallery(props: ReturnType) { return ; } -export const loader = async (props: Props, _req: Request, ctx: FnContext) => { - const page = await ctx.invoke[props.page.__resolveType]({ - ...props.page, - }) as ProductListingPage | null; +export const loader = async (props: Props, _req: Request, ctx: AppContext) => { + const page = await ctx.invoke( + // deno-lint-ignore no-explicit-any + props.page.__resolveType as any, + // deno-lint-ignore no-explicit-any + props.page as any, + ) as ProductListingPage | null; return { ...props, From a70bf755ed6311edd66a0842ecfb375391ff98c7 Mon Sep 17 00:00:00 2001 From: guitavano Date: Tue, 13 Feb 2024 15:31:18 -0300 Subject: [PATCH 11/21] attempt to use fresh append partial --- components/product/ProductGallery.tsx | 34 +++++++++++------ components/search/SearchResult.tsx | 27 ++++--------- routes/_app.tsx | 55 +++++++-------------------- 3 files changed, 44 insertions(+), 72 deletions(-) diff --git a/components/product/ProductGallery.tsx b/components/product/ProductGallery.tsx index cebbe0de..361a92da 100644 --- a/components/product/ProductGallery.tsx +++ b/components/product/ProductGallery.tsx @@ -7,6 +7,8 @@ import ShowMore from "$store/islands/ShowMore.tsx"; import { Head } from "$fresh/runtime.ts"; import { Format } from "$store/components/search/SearchResult.tsx"; import { Resolved } from "deco/engine/core/resolver.ts"; +import { usePartialSection } from "deco/hooks/usePartialSection.ts"; +import { Partial } from "$fresh/runtime.ts"; export interface Columns { mobile?: 1 | 2; @@ -38,23 +40,27 @@ const DESKTOP_COLUMNS = { }; function ProductGallery( - { products, pageInfo, layout, offset, loaderProps }: Props, + { products : p, pageInfo, layout, offset, loaderProps }: Props, ) { const platform = usePlatform(); + const products = p const mobile = MOBILE_COLUMNS[layout?.columns?.mobile ?? 2]; const desktop = DESKTOP_COLUMNS[layout?.columns?.desktop ?? 4]; + const pageInfoString = pageInfo.nextPage + "teste" return ( -
- {products?.map((product, index) => ( - - ))} +
+
+ +
+ {pageInfoString} +
+ +
+ {pageInfo.nextPage && } @@ -71,6 +77,12 @@ function ProductGallery( platform={platform} loaderProps={loaderProps} /> +

{pageInfo.nextPage}

+ + Partial showMore + )}
diff --git a/components/search/SearchResult.tsx b/components/search/SearchResult.tsx index 2fb92f9e..f70c7255 100644 --- a/components/search/SearchResult.tsx +++ b/components/search/SearchResult.tsx @@ -11,6 +11,7 @@ import ProductGallery, { Columns } from "../product/ProductGallery.tsx"; import { Resolved } from "deco/engine/core/resolver.ts"; import { AppContext } from "$store/apps/site.ts"; import type { SectionProps } from "deco/types.ts"; +import { Partial } from "$fresh/runtime.ts"; export type Format = "Show More" | "Pagination"; @@ -31,7 +32,7 @@ export interface Layout { export interface Props { /** @title Integration */ - page: Resolved; + page: ProductListingPage | null; layout?: Layout; cardLayout?: CardLayout; @@ -84,7 +85,7 @@ function Result({ )} -
+
, + { page, ...props }: Props, ) { if (!page) { return ; } - return ; + console.log(page) + + return ; } -export const loader = async (props: Props, _req: Request, ctx: AppContext) => { - const page = await ctx.invoke( - // deno-lint-ignore no-explicit-any - props.page.__resolveType as any, - // deno-lint-ignore no-explicit-any - props.page as any, - ) as ProductListingPage | null; - - return { - ...props, - page, - loaderProps: { - ...props.page, - }, - }; -}; export default SearchResult; diff --git a/routes/_app.tsx b/routes/_app.tsx index 71f2596e..f6fe488d 100644 --- a/routes/_app.tsx +++ b/routes/_app.tsx @@ -1,44 +1,17 @@ -import { asset, Head } from "$fresh/runtime.ts"; -import { defineApp } from "$fresh/server.ts"; -import Theme from "$store/sections/Theme/Theme.tsx"; -import { Context } from "deco/deco.ts"; - -const sw = () => - addEventListener("load", () => - navigator && navigator.serviceWorker && - navigator.serviceWorker.register("/sw.js")); - -export default defineApp(async (_req, ctx) => { - const revision = await Context.active().release?.revision(); +import { PageProps } from "$fresh/server.ts"; +export default function App({ Component }: PageProps) { return ( - <> - {/* Include default fonts and css vars */} - - - {/* Include Icons and manifest */} - - {/* Enable View Transitions API */} - - - {/* Tailwind v3 CSS file */} - - - {/* Web Manifest */} - - - - {/* Rest of Preact tree */} - - - {/* Include service worker */} -