diff --git a/@/components/button.tsx b/@/components/button.tsx index 52eb6b8..6dd5586 100644 --- a/@/components/button.tsx +++ b/@/components/button.tsx @@ -26,7 +26,7 @@ const buttonVariants = cva( }, shape: { default: 'rounded', - round: 'rounded-md' + round: 'rounded-md', } }, defaultVariants: { @@ -43,6 +43,7 @@ export interface ButtonProps asChild?: boolean; as?: React.ElementType; to?: string; + target?: string; } const Button = React.forwardRef( @@ -70,6 +71,7 @@ const Button = React.forwardRef( )} ref={ref} {...props} + target={props.to ? props?.target || '_self' : undefined} > {loading && (
diff --git a/app/components/DrawerFilter.tsx b/app/components/DrawerFilter.tsx index 5b4e319..5e29325 100644 --- a/app/components/DrawerFilter.tsx +++ b/app/components/DrawerFilter.tsx @@ -313,7 +313,7 @@ export default function SortMenu({ items.find((item) => item.key === params.get('sort')) || items[0]; return ( - + Sort by diff --git a/app/components/ProductSwimlane.tsx b/app/components/ProductSwimlane.tsx index a1f5baf..0517d87 100644 --- a/app/components/ProductSwimlane.tsx +++ b/app/components/ProductSwimlane.tsx @@ -1,21 +1,21 @@ -import type {HomepageFeaturedProductsQuery} from 'storefrontapi.generated'; +import type {FeaturedItemsQuery} from 'storefrontapi.generated'; import { Section} from '~/components/Text'; import {ProductCard} from '~/components/ProductCard'; import { IconArrowScrollLeft, IconArrowScrollRight } from './Icon'; -import React, { useRef } from 'react'; +import { useRef } from 'react'; const mockProducts = { nodes: new Array(12).fill(''), }; -type ProductSwimlaneProps = HomepageFeaturedProductsQuery & { +type ProductSwimlaneProps = Pick & { title?: string; count?: number; }; export function ProductSwimlane({ title = 'Featured Products', - products = mockProducts, + featuredProducts = mockProducts, count = 12, ...props }: ProductSwimlaneProps) { @@ -35,7 +35,7 @@ export function ProductSwimlane({ return (
- {products.nodes.slice(0, count).map((product) => ( + {featuredProducts.nodes.slice(0, count).map((product) => ( -
+
diff --git a/app/sections/collection-filters/index.tsx b/app/sections/collection-filters/index.tsx index 409667b..eda65de 100644 --- a/app/sections/collection-filters/index.tsx +++ b/app/sections/collection-filters/index.tsx @@ -44,7 +44,7 @@ let CollectionFilters = forwardRef( appliedFilters={appliedFilters} collections={collections} /> -
+
{({ nodes, diff --git a/app/sections/collection-list/collection-list.tsx b/app/sections/collection-list/collection-list.tsx new file mode 100644 index 0000000..55b859d --- /dev/null +++ b/app/sections/collection-list/collection-list.tsx @@ -0,0 +1,94 @@ +import {Button} from '@/components/button'; +import {useLoaderData} from '@remix-run/react'; +import {Pagination} from '@shopify/hydrogen'; +import type { + HydrogenComponentProps, + HydrogenComponentSchema, +} from '@weaverse/hydrogen'; +import { forwardRef} from 'react'; +import {useInView} from 'react-intersection-observer'; +import type {StoreCollectionsQuery} from 'storefrontapi.generated'; +import {CollectionsLoadedOnScroll} from './collection-loader-on-scroll'; + +interface CollectionListProps extends HydrogenComponentProps { + collectionsPerRow: number; + lazyLoadImage: boolean; +} + +let CollectionListItem = forwardRef( + (props, sectionRef) => { + let {ref, inView} = useInView(); + let {collections} = useLoaderData(); + let {collectionsPerRow, lazyLoadImage, children, ...rest} = props; + return ( +
+ + {({ + nodes, + isLoading, + PreviousLink, + NextLink, + nextPageUrl, + hasNextPage, + state, + }) => ( + <> +
+ +
+ +
+ +
+ + )} + +
+ ); + }, +); + +export default CollectionListItem; + +export let schema: HydrogenComponentSchema = { + type: 'collection-list--item', + title: 'Collection list', + limit: 1, + toolbar: ['general-settings'], + inspector: [ + { + group: 'Collection list', + inputs: [ + { + type: 'range', + name: 'collectionsPerRow', + label: 'Collections per row', + defaultValue: 3, + configs: { + min: 1, + max: 4, + step: 1, + }, + }, + { + type: 'switch', + name: 'lazyLoadImage', + label: 'Lazy load image', + defaultValue: true, + }, + ], + }, + ], +}; diff --git a/app/sections/collection-list/index.tsx b/app/sections/collection-list/index.tsx index 3ef9dd8..1348e6e 100644 --- a/app/sections/collection-list/index.tsx +++ b/app/sections/collection-list/index.tsx @@ -1,84 +1,16 @@ -import { useLoaderData } from '@remix-run/react'; -import { Pagination } from '@shopify/hydrogen'; -import type { - HydrogenComponentProps, - HydrogenComponentSchema, -} from '@weaverse/hydrogen'; -import { forwardRef, CSSProperties, Children } from 'react'; -import type { StoreCollectionsQuery } from 'storefrontapi.generated'; -import { Section } from '~/components/Text'; -import { Button } from '@/components/button'; -import { CollectionsLoadedOnScroll } from './collection-loader-on-scroll'; -import { useInView } from 'react-intersection-observer'; -import clsx from 'clsx'; +import type {HydrogenComponentSchema} from '@weaverse/hydrogen'; +import {forwardRef} from 'react'; +import {layoutInputs, Section, SectionProps} from '../atoms/Section'; -type Alignment = 'left' | 'center' | 'right'; -interface CollectionListProps extends HydrogenComponentProps { - textColor: string; - contentAlignment: Alignment; - collectionsPerRow: number; - topPadding: number; - bottomPadding: number; - lazyLoadImage: boolean; -} - -let alignmentClasses: Record = { - left: 'text-left', - center: 'text-center', - right: 'text-right', -}; +type CollectionListProps = SectionProps; let CollectionList = forwardRef( - (props, sectionRef) => { - let {ref, inView} = useInView(); - let { collections } = useLoaderData(); - let { textColor, contentAlignment, collectionsPerRow, topPadding, bottomPadding, lazyLoadImage, children, ...rest } = - props; - let contentStyle: CSSProperties = { - '--top-padding': `${topPadding}px`, - '--bottom-padding': `${bottomPadding}px`, - color: textColor, - } as CSSProperties; + (props, ref) => { + let {children, ...rest} = props; return ( -
-
- {!!Children.count(children) && ( -
- {children} -
- )} -
- - {({ nodes, isLoading, PreviousLink, NextLink, nextPageUrl, hasNextPage, state, }) => ( - <> -
- -
- -
- -
- - )} - -
-
-
+
+ {children} +
); }, ); @@ -95,75 +27,20 @@ export let schema: HydrogenComponentSchema = { toolbar: ['general-settings'], inspector: [ { - group: 'Collection list', - inputs: [ - { - type: 'color', - name: 'textColor', - label: 'Text color', - }, - { - type: 'toggle-group', - label: 'Content alignment', - name: 'contentAlignment', - configs: { - options: [ - { label: 'Left', value: 'left' }, - { label: 'Center', value: 'center' }, - { label: 'Right', value: 'right' }, - ], - }, - defaultValue: 'left', - }, - { - type: 'range', - name: 'collectionsPerRow', - label: 'Collections per row', - defaultValue: 3, - configs: { - min: 1, - max: 4, - step: 1, - }, - }, - { - type: 'range', - name: 'topPadding', - label: 'Top padding', - defaultValue: 0, - configs: { - min: 0, - max: 100, - step: 1, - }, - }, - { - type: 'range', - name: 'bottomPadding', - label: 'Bottom padding', - defaultValue: 0, - configs: { - min: 0, - max: 100, - step: 1, - }, - }, - { - type: 'switch', - name: 'lazyLoadImage', - label: 'Lazy load image', - defaultValue: true, - }, - ], + group: 'Layout', + inputs: layoutInputs.filter(({ name }) => name !== 'divider' && name !== 'borderRadius'), }, ], - childTypes: ['heading'], + childTypes: ['heading', 'collection-list--item'], presets: { - children: [ - { - type: 'heading', - content: "Collections", - }, - ], + children: [ + { + type: 'heading', + content: 'Collections', + }, + { + type: 'collection-list--item', + }, + ], }, }; diff --git a/app/sections/feature-product/index.tsx b/app/sections/feature-product/index.tsx index 622e3db..6ff1e0e 100644 --- a/app/sections/feature-product/index.tsx +++ b/app/sections/feature-product/index.tsx @@ -1,272 +1,48 @@ import type { - HydrogenComponentProps, - HydrogenComponentSchema, - ComponentLoaderArgs, - WeaverseCollection, + HydrogenComponentSchema, } from '@weaverse/hydrogen'; -import { forwardRef, CSSProperties } from 'react'; -import { FEATURED_PRODUCTS_QUERY } from '~/data/queries'; -import { IconImageBlank } from '~/components/Icon'; -import { Swiper, SwiperSlide } from 'swiper/react'; -import 'swiper/swiper-bundle.css'; -import 'swiper/css/pagination'; -import { Pagination } from 'swiper/modules'; -import clsx from 'clsx'; -import { Button } from '@/components/button'; -import { ProductCard } from '~/components/ProductCard'; -import { getImageLoadingPriority } from '~/lib/const'; - -type FeaturedProductsData = { - products: WeaverseCollection; - textColor: string; - backgroundColor: string; - totalProduct: number; - productsPerRow: number; - showViewAllLink: boolean; - topPadding: number; - bottomPadding: number; - lazyLoadImage: boolean; -}; - -type FeaturedProductsProps = HydrogenComponentProps>> & FeaturedProductsData; - -let productPerRowClasses: { [item: number]: string } = { - 1: 'sm:grid-cols-1', - 2: 'sm:grid-cols-2', - 3: 'sm:grid-cols-3', - 4: 'sm:grid-cols-4', -}; - -const FeaturedProducts = forwardRef( - (props, ref) => { - let { products, textColor, backgroundColor, totalProduct, productsPerRow, showViewAllLink, topPadding, bottomPadding, lazyLoadImage, loaderData, children, ...rest } = props; - - let sectionStyle: CSSProperties = { - color: textColor, - '--background-color': backgroundColor, - '--top-padding-desktop': `${topPadding}px`, - '--bottom-padding-desktop': `${bottomPadding}px`, - '--top-padding-mobile': `${topPadding > 20 ? topPadding - 20 : topPadding}px`, - '--bottom-padding-mobile': `${bottomPadding > 20 ? bottomPadding - 20 : bottomPadding}px`, - '--swiper-theme-color': '#3D490B', - } as CSSProperties; - let res = loaderData?.collection?.products?.nodes; - let displayedProducts = res?.slice(0, totalProduct); - const productItemBlank = () => { - return ( -
-
- -
-
-

By vendor

-

Product title

-

Price

-
-
- ); - } - return ( -
-
- {children} - {loaderData === undefined || null ? ( - <> - - {Array.from({ length: 4 }).map((idx, i) => { - return ( - -
- {productItemBlank()} -
-
- - ); - })} - - - - ) : ( - <> - - {displayedProducts?.map((index: any, i: any) => { - return ( - - -
- - ); - })} - - - )} - {showViewAllLink && loaderData && loaderData.collection && ( -
- -
- )} -
-
- ); - }, +import {forwardRef} from 'react'; +import { Section, sectionInspector, SectionProps } from '../atoms/Section'; + +type FeaturedProductsData = SectionProps; + + +const FeaturedProducts = forwardRef( + (props, ref) => { + let { + children, + ...rest + } = props; + + return ( +
+ {children} +
+ ); + }, ); export default FeaturedProducts; -export let loader = async (args: ComponentLoaderArgs) => { - let { weaverse, data } = args; - let { language, country } = weaverse.storefront.i18n; - if (data.products) { - return await weaverse.storefront.query( - FEATURED_PRODUCTS_QUERY, - { - variables: { - handle: data.products.handle, - country, - language, - }, - }, - ); - } - return null; -}; export let schema: HydrogenComponentSchema = { - type: 'featured-products', - title: 'Featured products', - inspector: [ - { - group: 'Featured products', - inputs: [ - { - type: 'collection', - name: 'products', - label: 'Products', - }, - { - type: 'color', - name: 'textColor', - label: 'Text color', - }, - { - type: 'color', - name: 'backgroundColor', - label: 'Background color', - defaultValue: '#F8F8F0', - }, - { - type: 'range', - name: 'totalProduct', - label: 'Total products', - defaultValue: 4, - configs: { - min: 1, - max: 24, - step: 1, - }, - }, - { - type: 'range', - name: 'productsPerRow', - label: 'Products per row', - defaultValue: 4, - configs: { - min: 1, - max: 4, - step: 1, - }, - }, - { - type: 'switch', - name: 'showViewAllLink', - label: 'Show “View All” link', - defaultValue: true, - }, - { - type: 'range', - name: 'topPadding', - label: 'Top padding', - defaultValue: 40, - configs: { - min: 10, - max: 100, - step: 1, - }, - }, - { - type: 'range', - name: 'bottomPadding', - label: 'Bottom padding', - defaultValue: 40, - configs: { - min: 10, - max: 100, - step: 1, - }, - }, - { - type: 'switch', - name: 'lazyLoadImage', - label: 'Lazy load image', - defaultValue: true, - }, - ], - }, + type: 'featured-products', + title: 'Featured products', + inspector: sectionInspector, + toolbar: ['general-settings', ['duplicate', 'delete']], + childTypes: ['heading', 'featured-products--list'], + presets: { + children: [ + { + type: 'heading', + content: 'Best Sellers', + }, + { + type: 'featured-products--list', + } ], - toolbar: ['general-settings', ['duplicate', 'delete']], - childTypes: ['heading'], - presets: { - children: [ - { - type: 'heading', - content: 'Best Sellers', - } - ], - }, -}; \ No newline at end of file + }, +}; diff --git a/app/sections/feature-product/list-products.tsx b/app/sections/feature-product/list-products.tsx new file mode 100644 index 0000000..6cefe3c --- /dev/null +++ b/app/sections/feature-product/list-products.tsx @@ -0,0 +1,224 @@ +import type { + ComponentLoaderArgs, + HydrogenComponentProps, + HydrogenComponentSchema, + WeaverseCollection, +} from '@weaverse/hydrogen'; +import {IconImageBlank} from '~/components/Icon'; +import {FEATURED_PRODUCTS_QUERY} from '~/data/queries'; +import {CSSProperties, forwardRef} from 'react'; +import {Swiper, SwiperSlide} from 'swiper/react'; +import 'swiper/swiper-bundle.css'; +import 'swiper/css/pagination'; +import {Button} from '@/components/button'; +import {ProductCard} from '~/components/ProductCard'; +import {getImageLoadingPriority} from '~/lib/const'; +import clsx from 'clsx'; +import {Pagination} from 'swiper/modules'; + +type FeaturedProductsData = { + products: WeaverseCollection; + textColor: string; + totalProduct: number; + productsPerRow: number; + showViewAllLink: boolean; + lazyLoadImage: boolean; +}; + +type FeaturedProductsProps = HydrogenComponentProps< + Awaited> +> & + FeaturedProductsData; + +let productPerRowClasses: {[item: number]: string} = { + 1: 'sm:grid-cols-1', + 2: 'sm:grid-cols-2', + 3: 'sm:grid-cols-3', + 4: 'sm:grid-cols-4', +}; + +const ListProducts = forwardRef( + (props, ref) => { + let { + products, + textColor, + totalProduct, + productsPerRow, + showViewAllLink, + lazyLoadImage, + loaderData, + ...rest + } = props; + + let sectionStyle: CSSProperties = { + color: textColor, + '--swiper-theme-color': '#3D490B', + } as CSSProperties; + let res = loaderData?.collection?.products?.nodes; + let displayedProducts = res?.slice(0, totalProduct); + const productItemBlank = () => { + return ( +
+
+ +
+
+

By vendor

+

Product title

+

Price

+
+
+ ); + }; + const renderProducts = () => { + if (!loaderData || !displayedProducts) { + return Array.from({length: 4}).map((_, i) => ( +
+ {productItemBlank()} +
+ )); + } else { + return displayedProducts.map((product, i) => ( + + )); + } + }; + return ( +
+
+ <> +
+ + {renderProducts().map((product, i) => ( + + {product} +
+ + ))} + +
+
+ {renderProducts()} +
+ + {showViewAllLink && loaderData && loaderData.collection && ( +
+ +
+ )} +
+
+ ); + }, +); + +export default ListProducts; + +export let loader = async (args: ComponentLoaderArgs) => { + let {weaverse, data} = args; + let {language, country} = weaverse.storefront.i18n; + if (data.products) { + return await weaverse.storefront.query(FEATURED_PRODUCTS_QUERY, { + variables: { + handle: data.products.handle, + country, + language, + }, + }); + } + return null; +}; + +export let schema: HydrogenComponentSchema = { + type: 'featured-products--list', + title: 'Featured products list', + limit: 1, + inspector: [ + { + group: 'Featured products', + inputs: [ + { + type: 'collection', + name: 'products', + label: 'Products', + }, + { + type: 'color', + name: 'textColor', + label: 'Text color', + }, + { + type: 'range', + name: 'totalProduct', + label: 'Total products', + defaultValue: 4, + configs: { + min: 1, + max: 24, + step: 1, + }, + }, + { + type: 'range', + name: 'productsPerRow', + label: 'Products per row', + defaultValue: 4, + configs: { + min: 1, + max: 4, + step: 1, + }, + }, + { + type: 'switch', + name: 'showViewAllLink', + label: 'Show “View All” link', + defaultValue: true, + }, + { + type: 'switch', + name: 'lazyLoadImage', + label: 'Lazy load image', + defaultValue: true, + }, + ], + }, + ], + toolbar: ['general-settings', ['duplicate', 'delete']], +}; diff --git a/app/sections/instagram/index.tsx b/app/sections/instagram/index.tsx index e02060c..85ddcb1 100644 --- a/app/sections/instagram/index.tsx +++ b/app/sections/instagram/index.tsx @@ -15,6 +15,7 @@ import {Pagination} from 'swiper/modules'; type InstagramData = { instagramToken: string; backgroundColor: string; + width: string; imagesPerRow: number; speed: number; visibleOnMobile: boolean; @@ -27,6 +28,11 @@ type InstagramData = { }; }; +let widthClasses: {[item: string]: string} = { + full: '', + fixed: 'container', +}; + type InstagramProps = HydrogenComponentProps< Awaited> > & @@ -36,6 +42,7 @@ const Instagram = forwardRef((props, ref) => { let { instagramToken, backgroundColor, + width, imagesPerRow, speed, visibleOnMobile, @@ -60,54 +67,18 @@ const Instagram = forwardRef((props, ref) => { ); }; - let res = loaderData?.data; - if (!res) { - return ( -
-
-
{children}
- - {Array.from({length: 3}).map((idx, i) => { - return ( - -
- {imageItemBlank()} -
-
- - ); - })} - -
- {Array.from({length: 3}).map((idx, i) => ( -
- {imageItemBlank()} -
- ))} -
-
-
- ); - } + const defaultInstagramData = Array.from({length: 3}).map((_, i) => ({ + id: i, + media_url: null, + username: null, + })); + + let res = loaderData?.data ?? defaultInstagramData; let displayedImages = res?.slice(0, imagesPerRow); const imageItemRender = () => { return (
{displayedImages.map((item, index) => { @@ -116,25 +87,33 @@ const Instagram = forwardRef((props, ref) => { className="group relative aspect-square min-w-80 cursor-pointer" key={index} > - - -
+ {item.media_url ? ( + + ) : ( + imageItemBlank() + )} + {item.username && ( + <> + +
+ + )}
); })} @@ -149,15 +128,16 @@ const Instagram = forwardRef((props, ref) => { className={clsx('h-full w-full', !visibleOnMobile && 'hidden sm:block')} style={sectionStyle} > -
+
{children}
- {res.length === 0 ? ( -
-

Not found post

-
- ) : ( - <> + <> +
((props, ref) => { clickable: true, }} modules={[Pagination]} - className="w-full sm:hidden" + className="w-full" > {displayedImages.map((item, index) => { return (
- - -
+ {item.media_url ? ( + + ) : ( + imageItemBlank() + )} + {item.username && ( + <> + +
+ + )}
-
+
); })} - {Array.from({length: 11}).map((idx, i) => ( -
{imageItemRender()}
- ))} - - )} +
+ {Array.from({length: 11}).map((idx, i) => ( +
{imageItemRender()}
+ ))} +
@@ -235,8 +224,6 @@ export const schema: HydrogenComponentSchema = { type: 'text', name: 'instagramToken', label: 'Instagram api token', - defaultValue: - 'IGQWRPX3Eyc1RHd3padDVwRXZANdkp4ZAkE1bkxjRlNtd3V4WnBXZAXUxWWlvVjlTc2h3SU45NmZAVOHptcEswalkyTHYtckh6cnlUNTUtaHpDUjYxTE04X0RwVG5qRnJ0cDhxcnlBVjRib3BoYUxGa2xCTlFZAZAC1PMmMZD', placeholder: '@instagram', helpText: 'Learn more about how to get API token for Instagram section.', @@ -247,6 +234,18 @@ export const schema: HydrogenComponentSchema = { name: 'backgroundColor', defaultValue: '#F8F8F0', }, + { + type: 'select', + name: 'width', + label: 'Content width', + configs: { + options: [ + {value: 'full', label: 'Full page'}, + {value: 'fixed', label: 'Fixed'}, + ], + }, + defaultValue: 'fixed', + }, { type: 'range', name: 'imagesPerRow', diff --git a/app/sections/product-information/index.tsx b/app/sections/product-information/index.tsx index 3b95f97..a2183a2 100644 --- a/app/sections/product-information/index.tsx +++ b/app/sections/product-information/index.tsx @@ -188,7 +188,7 @@ let ProductInformation = forwardRef( /> )}

((props, ref) => { - let { - productsPerRow, - thumbnailRatio, - itemsSpacing, - children, - ...rest - } = props; + let {productsPerRow, thumbnailRatio, itemsSpacing, children, ...rest} = props; let contentStyle: CSSProperties = { '--item-thumbs-ratio': thumbnailRatio, '--items-spacing': `${itemsSpacing}px`, @@ -36,12 +30,7 @@ const ProductPlacementItems = forwardRef< '--swiper-pagination-bullet-border-radius': '2px', } as CSSProperties; return ( -

+
{children} - - {children?.map((child, i) => ( - - {child} -
- - ))} - +
+ + {children?.map((child, i) => ( + + {child} +
+ + ))} + +
); diff --git a/app/sections/related-products/related-products.tsx b/app/sections/related-products/related-products.tsx index 6e4af66..afcab95 100644 --- a/app/sections/related-products/related-products.tsx +++ b/app/sections/related-products/related-products.tsx @@ -31,7 +31,7 @@ let RelatedProducts = forwardRef( )} diff --git a/app/sections/scrolling-text/index.tsx b/app/sections/scrolling-text/index.tsx index 003f81e..53808d3 100644 --- a/app/sections/scrolling-text/index.tsx +++ b/app/sections/scrolling-text/index.tsx @@ -46,17 +46,17 @@ const ScrollingText = forwardRef((props, ref) => { !visibleOnMobile && 'hidden sm:block', )}>
-

{` ${content} `.repeat(15)}

-

{` ${content} `.repeat(15)}

-

{` ${content} `.repeat(15)} diff --git a/app/sections/slides/index.tsx b/app/sections/slides/index.tsx index 8614f02..51869c9 100644 --- a/app/sections/slides/index.tsx +++ b/app/sections/slides/index.tsx @@ -1,81 +1,102 @@ import type { - HydrogenComponentProps, - HydrogenComponentSchema, + HydrogenComponentProps, + HydrogenComponentSchema, } from '@weaverse/hydrogen'; -import { forwardRef, CSSProperties } from 'react'; -import { Swiper, SwiperSlide } from 'swiper/react'; -import { EffectFade } from 'swiper/modules'; +import {CSSProperties, forwardRef} from 'react'; +import {EffectFade} from 'swiper/modules'; +import {Swiper, SwiperSlide} from 'swiper/react'; import 'swiper/css'; import 'swiper/css/effect-fade'; +import clsx from 'clsx'; interface SlidesProps extends HydrogenComponentProps { - sectionHeight: number; + sectionHeight: number; + width: string; } +let widthClasses: {[item: string]: string} = { + full: '', + fixed: 'container', +}; + const Slides = forwardRef((props, ref) => { - let { - sectionHeight, - children, - ...rest - } = props; + let {sectionHeight, width, children, ...rest} = props; - let sectionStyle: CSSProperties = { - '--section-height': `${sectionHeight}px`, - } as CSSProperties; + let sectionStyle: CSSProperties = { + '--section-height': `${sectionHeight}px`, + } as CSSProperties; - return ( -
- - {children?.map((child, index) => ( - - {child} - - ))} - -
- ); + return ( +
+ + {children?.map((child, index) => ( + {child} + ))} + +
+ ); }); export default Slides; export let schema: HydrogenComponentSchema = { - type: 'slides-index', - title: 'Slides', - toolbar: ['general-settings', ['duplicate', 'delete']], - inspector: [ + type: 'slides-index', + title: 'Slides', + toolbar: ['general-settings', ['duplicate', 'delete']], + inspector: [ + { + group: 'Slides', + inputs: [ + { + type: 'range', + name: 'sectionHeight', + label: 'Section height', + defaultValue: 450, + configs: { + min: 400, + max: 700, + step: 10, + unit: 'px', + }, + }, { - group: 'Slides', - inputs: [ - { - type: 'range', - name: 'sectionHeight', - label: 'Section height', - defaultValue: 450, - configs: { - min: 400, - max: 700, - step: 10, - unit: 'px', - }, - }, + type: 'select', + name: 'width', + label: 'Content width', + configs: { + options: [ + {value: 'full', label: 'Full page'}, + {value: 'fixed', label: 'Fixed'}, ], + }, + defaultValue: 'fixed', }, - ], - childTypes: ['slides-item'], - presets: { - children: [ - { - type: 'slides-item', - } - ], + ], }, -}; \ No newline at end of file + ], + childTypes: ['slides-item'], + presets: { + children: [ + { + type: 'slides-item', + }, + ], + }, +}; diff --git a/app/styles/tailwind.css b/app/styles/tailwind.css index 985177f..43c2221 100644 --- a/app/styles/tailwind.css +++ b/app/styles/tailwind.css @@ -100,7 +100,7 @@ } .container { - max-width: var(--page-width, 1280px); + max-width: var(--page-width, 1440px); } .custom-scroll::-webkit-scrollbar { diff --git a/app/weaverse/components.ts b/app/weaverse/components.ts index 22c6d6d..0240333 100644 --- a/app/weaverse/components.ts +++ b/app/weaverse/components.ts @@ -19,7 +19,9 @@ import * as Instagram from '~/sections/instagram'; import * as BeforeAndAfter from '~/sections/before-and-after/index'; import * as BeforeAndAfterSlide from '~/sections/before-and-after/slider'; import * as FeaturedProducts from '~/sections/feature-product/index'; +import * as FeaturedProductsList from '~/sections/feature-product/list-products'; import * as CollectionList from '~/sections/collection-list/index'; +import * as CollectionListItem from '~/sections/collection-list/collection-list'; import * as AllProducts from '~/sections/all-products/index'; import * as ProductInformation from '~/sections/product-information/index'; import * as HeaderImage from '~/sections/image-banner/index'; @@ -63,7 +65,9 @@ export const components: HydrogenComponent[] = [ BeforeAndAfter, BeforeAndAfterSlide, FeaturedProducts, + FeaturedProductsList, CollectionList, + CollectionListItem, AllProducts, ProductInformation, HeaderImage, diff --git a/app/weaverse/schema.ts b/app/weaverse/schema.ts index f9395f4..efd669e 100644 --- a/app/weaverse/schema.ts +++ b/app/weaverse/schema.ts @@ -296,7 +296,7 @@ export const themeSchema: HydrogenThemeSchema = { step: 10, unit: "px", }, - defaultValue: 1280, + defaultValue: 1440, }, { type: 'range', diff --git a/package.json b/package.json index 7b16b7b..5832471 100644 --- a/package.json +++ b/package.json @@ -2,7 +2,7 @@ "name": "naturelle", "private": true, "sideEffects": false, - "version": "2.0.2", + "version": "2.0.3", "scripts": { "build": "shopify hydrogen build --codegen", "dev": "shopify hydrogen dev --port 3456 --codegen", diff --git a/tailwind.config.js b/tailwind.config.js index ce24f7e..4e21db4 100644 --- a/tailwind.config.js +++ b/tailwind.config.js @@ -74,11 +74,7 @@ module.exports = { from: {height: 'var(--radix-accordion-content-height)'}, to: {height: '0'}, }, - 'scrollText':{ - '0%': { transform: 'translateX(0)' }, - '100%': { transform: 'translateX(-100%)' }, - }, - 'scrollImage':{ + 'scrollContent':{ from: { transform: 'translateX(0)' }, to: { transform: 'translateX(-100%)' }, }, @@ -86,8 +82,7 @@ module.exports = { animation: { 'accordion-down': 'accordion-down 0.2s ease-out', 'accordion-up': 'accordion-up 0.2s ease-out', - 'scrollText': 'scrollText linear infinite', - 'scrollImage': 'scrollImage linear infinite', + 'scrollContent': 'scrollContent linear infinite', }, }, },