This repository has been archived by the owner on Apr 11, 2024. It is now read-only.
-
Notifications
You must be signed in to change notification settings - Fork 1
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
Showing
10 changed files
with
749 additions
and
20 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,6 +1,11 @@ | ||
| SESSION_SECRET="super-secret" | ||
| PUBLIC_STORE_DOMAIN="mock.shop" | ||
| #PUBLIC_STOREFRONT_API_TOKEN="your-public-storefront-api-token" | ||
| #WEAVERSE_PROJECT_ID="your-weaverse-project-id" | ||
| #WEAVERSE_API_KEY="your-weaverse-api-key" | ||
| SESSION_SECRET="foobar" | ||
| PUBLIC_STOREFRONT_API_TOKEN=14cdb1b48742401da3963517bb5a1700 | ||
| PUBLIC_STORE_DOMAIN=hydrogen-preview.myshopify.com | ||
| PUBLIC_CUSTOMER_ACCOUNT_API_CLIENT_ID=shp_7318c7c5-46d4-4090-a9aa-a08424aafd00 | ||
| PUBLIC_CUSTOMER_ACCOUNT_API_URL=https://shopify.com/55145660472 | ||
| #PRIVATE_STOREFRONT_API_TOKEN="your-private-storefront-api-token" | ||
|
|
||
| WEAVERSE_PROJECT_ID="clptu3l4p001sxfsn1u9jzqnm" | ||
| #WEAVERSE_API_KEY="your-weaverse-api-key" | ||
| #WEAVERSE_HOST="https://studio.weaverse.io" | ||
|
|
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,136 @@ | ||
| import type { | ||
| HydrogenComponentProps, | ||
| HydrogenComponentSchema, | ||
| WeaverseImage, | ||
| } from '@weaverse/hydrogen'; | ||
| import { forwardRef, CSSProperties } from 'react'; | ||
| import {Image} from '@shopify/hydrogen'; | ||
| import {IconImageBlank} from '~/components'; | ||
| import clsx from 'clsx'; | ||
|
|
||
| interface CountDownProps extends HydrogenComponentProps { | ||
| backgroundImage: WeaverseImage; | ||
| overlayColor: string; | ||
| overlayOpacity: number; | ||
| contentPosition: string; | ||
| } | ||
|
|
||
| let SlideShowItem = forwardRef<HTMLDivElement, CountDownProps>((props, ref) => { | ||
| let { | ||
| backgroundImage, | ||
| overlayColor, | ||
| overlayOpacity, | ||
| contentPosition, | ||
| children, | ||
| ...rest | ||
| } = props; | ||
|
|
||
| let positionClass: {[key: string]: string} = { | ||
| 'top left': 'items-start justify-start', | ||
| 'top right': 'items-start justify-end', | ||
| 'top center': 'items-start justify-center', | ||
| 'center left': 'items-center justify-start', | ||
| 'center center': 'items-center justify-center', | ||
| 'center right': 'items-center justify-end', | ||
| 'bottom left': 'items-end justify-start', | ||
| 'bottom center': 'items-end justify-center', | ||
| 'bottom right': 'items-end justify-end', | ||
| }; | ||
|
|
||
| let slideStyle: CSSProperties = { | ||
| '--overlay-color': overlayColor, | ||
| '--overlay-opacity': `${overlayOpacity}%`, | ||
| } as CSSProperties; | ||
|
|
||
| return ( | ||
| <div ref={ref} {...rest} className={clsx('flex relative h-full px-10 py-16 w-full sm-max:px-4', positionClass[contentPosition])} style={slideStyle}> | ||
| <div className="absolute inset-0"> | ||
| {backgroundImage ? ( | ||
| <Image | ||
| data={backgroundImage} | ||
| sizes="auto" | ||
| className="w-full h-full object-cover" | ||
| /> | ||
| ) : ( | ||
| <div className="w-full h-full flex justify-center items-center bg-gray-200"> | ||
| <IconImageBlank | ||
| className="!w-24 !h-24 opacity-30" | ||
| viewBox="0 0 100 100" | ||
| /> | ||
| </div> | ||
| )} | ||
| {backgroundImage && ( | ||
| <div className="absolute inset-0 bg-[var(--overlay-color)] opacity-[var(--overlay-opacity)]"></div> | ||
| )} | ||
| </div> | ||
| <div className="flex flex-col gap-3 items-center w-5/6 sm-max:w-full z-10"> | ||
| {children} | ||
| </div> | ||
| </div> | ||
|
|
||
| ); | ||
| }); | ||
|
|
||
| export default SlideShowItem; | ||
|
|
||
| export let schema: HydrogenComponentSchema = { | ||
| type: 'slide-show--item', | ||
| title: 'Slide', | ||
| toolbar: ['general-settings', ['duplicate', 'delete']], | ||
| inspector: [ | ||
| { | ||
| group: 'Slide', | ||
| inputs: [ | ||
| { | ||
| type: 'image', | ||
| name: 'backgroundImage', | ||
| label: 'Background image', | ||
| }, | ||
| { | ||
| type: 'position', | ||
| name: 'contentPosition', | ||
| label: 'Content position', | ||
| defaultValue: 'center center', | ||
| }, | ||
| { | ||
| type: 'color', | ||
| name: 'overlayColor', | ||
| label: 'Overlay color', | ||
| }, | ||
| { | ||
| type: 'range', | ||
| name: 'overlayOpacity', | ||
| label: 'Overlay opacity', | ||
| defaultValue: 50, | ||
| configs: { | ||
| min: 10, | ||
| max: 100, | ||
| step: 10, | ||
| unit: '%', | ||
| }, | ||
| }, | ||
| ], | ||
| }, | ||
| ], | ||
| childTypes: ['subheading', 'heading', 'description', 'button'], | ||
| presets: { | ||
| children: [ | ||
| { | ||
| type: 'subheading', | ||
| content: 'Subheading', | ||
| }, | ||
| { | ||
| type: 'heading', | ||
| content: 'Slide Heading' | ||
| }, | ||
| { | ||
| type: 'description', | ||
| content: "Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown." | ||
| }, | ||
| { | ||
| type: 'button', | ||
| content: 'Button section', | ||
| }, | ||
| ], | ||
| }, | ||
| }; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,122 @@ | ||
| import type { | ||
| HydrogenComponentProps, | ||
| HydrogenComponentSchema, | ||
| } from '@weaverse/hydrogen'; | ||
| import { forwardRef, CSSProperties, useState, useCallback, useEffect } from 'react'; | ||
| import { useKeenSlider } from 'keen-slider/react'; | ||
| import clsx from 'clsx'; | ||
|
|
||
| interface SlideShowProps extends HydrogenComponentProps { | ||
| sectionHeight: number; | ||
| } | ||
|
|
||
| let SlideShow = forwardRef<HTMLElement, SlideShowProps>((props, ref) => { | ||
| let { | ||
| sectionHeight, | ||
| children, | ||
| ...rest | ||
| } = props; | ||
| const [activeIndex, setActiveIndex] = useState(0); | ||
| const [sliderRef, instanceRef] = useKeenSlider({ | ||
| loop: true, | ||
| slideChanged(slider) { | ||
| let pos = slider.track.details.rel; | ||
| setActiveIndex(pos); | ||
| }, | ||
| }); | ||
|
|
||
| let moveToIdx = useCallback( | ||
| (idx: number) => { | ||
| setActiveIndex(idx); | ||
| if (instanceRef.current) { | ||
| instanceRef.current.moveToIdx(idx); | ||
| } | ||
| }, | ||
| [instanceRef], | ||
| ); | ||
|
|
||
| let handleClickNavigation = (idx: number) => { | ||
| moveToIdx(idx); | ||
| }; | ||
|
|
||
| let renderNavigation = () => { | ||
| if (children && children?.length > 1) { | ||
| return children?.map((child, index) => ( | ||
| <span | ||
| key={index} | ||
| className={clsx('h-1 w-full cursor-pointer rounded-sm', index === activeIndex ? 'bg-gray-700' : 'bg-gray-300')} | ||
| onClick={() => handleClickNavigation(index)} | ||
| ></span> | ||
| )); | ||
| } | ||
| return null; | ||
| }; | ||
|
|
||
| useEffect(() => { | ||
| if (instanceRef) { | ||
| instanceRef.current?.update(); | ||
| } | ||
| }, [children, instanceRef]); | ||
|
|
||
| let sectionStyle: CSSProperties = { | ||
| '--section-height': `${sectionHeight}px`, | ||
| } as CSSProperties; | ||
|
|
||
| return ( | ||
| <section | ||
| ref={ref} | ||
| {...rest} | ||
| className="h-[var(--section-height)] relative" | ||
| style={sectionStyle} | ||
| > | ||
| <div ref={sliderRef} className='keen-slider h-full'> | ||
| {children?.map((child, index) => ( | ||
| <div | ||
| key={index} | ||
| className={clsx('keen-slider__slide')} | ||
| > | ||
| {child} | ||
| </div> | ||
| ))} | ||
| </div> | ||
| <div className='absolute bottom-7 left-1/2 w-1/3 transform -translate-x-1/2 flex gap-1'> | ||
| {renderNavigation()} | ||
| </div> | ||
| </section> | ||
| ); | ||
| }); | ||
|
|
||
| export default SlideShow; | ||
|
|
||
| export let schema: HydrogenComponentSchema = { | ||
| type: 'slide-show', | ||
| title: 'Slide show', | ||
| toolbar: ['general-settings', ['duplicate', 'delete']], | ||
| inspector: [ | ||
| { | ||
| group: 'SLideshow', | ||
| inputs: [ | ||
| { | ||
| type: 'range', | ||
| name: 'sectionHeight', | ||
| label: 'Section height', | ||
| defaultValue: 500, | ||
| configs: { | ||
| min: 400, | ||
| max: 700, | ||
| step: 10, | ||
| unit: 'px', | ||
| }, | ||
| }, | ||
| ], | ||
| }, | ||
| ], | ||
| childTypes: ['slide-show--item'], | ||
| presets: { | ||
| children: [ | ||
| { | ||
| type: 'slide-show--item', | ||
| }, | ||
| ], | ||
| }, | ||
| }; |
Oops, something went wrong.