diff --git a/app/sections/meta-demo.tsx b/app/sections/meta-demo.tsx new file mode 100644 index 0000000..9736613 --- /dev/null +++ b/app/sections/meta-demo.tsx @@ -0,0 +1,190 @@ +import {defer} from '@remix-run/server-runtime'; +import {Image} from '@shopify/hydrogen'; +import type { + ComponentLoaderArgs, + HydrogenComponentProps, + HydrogenComponentSchema, +} from '@weaverse/hydrogen'; +import clsx from 'clsx'; +import {forwardRef} from 'react'; + +type MetaObjectField = { + key: string; + type: string; + value: any; + reference?: any; +}; + +type MetaobjectData = { + handle: string; + id: string; + type: string; + fields: MetaObjectField[]; +}; + +type MetaDemoProps = HydrogenComponentProps & { + metaDemo: { + id: string; + type: string; + }; + title: string; + itemsPerRow: number; + gap: number; +}; + +let MetaDemo = forwardRef((props, ref) => { + let {loaderData, metaDemo, title, itemsPerRow, gap, className, ...rest} = + props; + if (!metaDemo) { + return ( +
+

Please select a metaobject definition

+
+ ); + } + let items = loaderData?.data?.metaobjects.map( + (metaObject: MetaobjectData, ind: number) => { + let {fields} = metaObject; + let image = fields.find((field) => field.key === 'avatar'); + let imageData = image?.reference?.image; + let name = fields.find((field) => field.key === 'name')?.value; + let title = fields.find((field) => field.key === 'title')?.value; + return ( +
+
+ +
+

{name}

+

{title}

+
+ ); + }, + ); + return ( +
+

{title}

+
+ {items} +
+
+ ); +}); + +export let loader = async (args: ComponentLoaderArgs) => { + let {weaverse, data} = args; + let {storefront} = weaverse; + if (!data?.metaDemo) { + return null; + } + let query = `#graphql + query MetaObjects ($type: String!, $first: Int) + { + metaobjects(type: $type, first: $first) { + nodes { + fields { + key + type + value + reference { + ... on MediaImage { + alt + image { + altText + url + width + height + } + } + } + } + handle + id + type + } + } + } + `; + let {metaobjects} = await storefront.query(query, { + variables: { + type: data.metaDemo.type, + first: 10, + }, + }); + return defer({ + metaobjects: metaobjects.nodes, + }); +}; + +export let schema: HydrogenComponentSchema = { + type: 'meta-demo', + title: 'Metaobject Demo', + toolbar: ['general-settings', ['duplicate', 'delete']], + inspector: [ + { + group: 'Metaobject Demo', + inputs: [ + { + label: 'Select metaobject definition', + type: 'metaobject', + helpText: + 'How to display this demo section', + name: 'metaDemo', + }, + { + label: 'Title', + type: 'text', + name: 'title', + defaultValue: 'Title', + }, + { + label: 'Items per row', + name: 'itemsPerRow', + type: 'range', + configs: { + min: 1, + max: 10, + }, + defaultValue: 3, + }, + { + label: 'Gap between items', + name: 'gap', + type: 'range', + configs: { + min: 0, + step: 2, + max: 100, + }, + defaultValue: 10, + }, + ], + }, + ], +}; + +export default MetaDemo; diff --git a/app/sections/single-product/index.tsx b/app/sections/single-product/index.tsx index 6285795..4d19cf5 100644 --- a/app/sections/single-product/index.tsx +++ b/app/sections/single-product/index.tsx @@ -62,8 +62,8 @@ let SingleProduct = forwardRef( let atcText = selectedVariant?.availableForSale ? 'Add to Cart' : selectedVariant?.quantityAvailable === -1 - ? 'Unavailable' - : 'Sold Out'; + ? 'Unavailable' + : 'Sold Out'; return (
@@ -182,6 +182,7 @@ export let schema: HydrogenComponentSchema = { label: 'Choose product', type: 'product', name: 'product', + shouldRevalidate: true, }, { label: 'Hide unavailable options', diff --git a/app/weaverse/components.ts b/app/weaverse/components.ts index 9dae2a6..638f415 100644 --- a/app/weaverse/components.ts +++ b/app/weaverse/components.ts @@ -12,7 +12,6 @@ import * as CountdownActions from '~/sections/countdown/actions'; import * as CountDownTimer from '~/sections/countdown/timer'; import * as FeaturedCollections from '~/sections/featured-collections'; import * as FeaturedProducts from '~/sections/featured-products'; -import * as Hero from '~/sections/hero'; import * as ImageBanner from '~/sections/image-banner'; import * as ImageGallery from '~/sections/image-gallery'; import * as ImageGalleryItem from '~/sections/image-gallery/image'; @@ -37,14 +36,13 @@ import * as TestimonialItems from '~/sections/testimonials/items'; import * as VideoBanner from '~/sections/video-banner'; import * as VideoEmbed from '~/sections/video-embed'; import * as VideoEmbedItem from '~/sections/video-embed/video'; - +import * as MetaDemo from '~/sections/meta-demo'; export let components: HydrogenComponent[] = [ ...commonComponents, AllProducts, BlogPost, Blogs, CollectionBanner, - Hero, Page, VideoEmbed, VideoEmbedItem, @@ -77,4 +75,5 @@ export let components: HydrogenComponent[] = [ CollectionList, SingleProduct, Judgeme, + MetaDemo ]; diff --git a/package.json b/package.json index 5518629..ffbe7c9 100644 --- a/package.json +++ b/package.json @@ -1,9 +1,9 @@ { - "name": "pilot", - "private": false, + "name": "@weaverse/pilot", + "private": true, "sideEffects": false, "author": "Weaverse", - "version": "2.4.1", + "version": "2.4.2", "scripts": { "dev": "shopify hydrogen dev --worker --codegen --port 3456", "build": "shopify hydrogen build", @@ -26,7 +26,7 @@ "@shopify/cli-hydrogen": "^6.1.0", "@shopify/hydrogen": "~2023.10.3", "@shopify/remix-oxygen": "^2.0.2", - "@weaverse/hydrogen": "2.8.8", + "@weaverse/hydrogen": "2.8.10", "clsx": "2.0.0", "cross-env": "7.0.3", "graphql": "16.8.1", diff --git a/storefrontapi.generated.d.ts b/storefrontapi.generated.d.ts index 1697228..c22622b 100644 --- a/storefrontapi.generated.d.ts +++ b/storefrontapi.generated.d.ts @@ -1696,6 +1696,34 @@ export type SitemapsQuery = { }; }; +export type MetaObjectsQueryVariables = StorefrontAPI.Exact<{ + type: StorefrontAPI.Scalars['String']['input']; + first?: StorefrontAPI.InputMaybe; +}>; + +export type MetaObjectsQuery = { + metaobjects: { + nodes: Array< + Pick & { + fields: Array< + Pick & { + reference?: StorefrontAPI.Maybe< + Pick & { + image?: StorefrontAPI.Maybe< + Pick< + StorefrontAPI.Image, + 'altText' | 'url' | 'width' | 'height' + > + >; + } + >; + } + >; + } + >; + }; +}; + interface GeneratedQueryTypes { '#graphql\n query shopQuery($country: CountryCode, $language: LanguageCode)\n @inContext(country: $country, language: $language) {\n shop {\n name\n description\n }\n }\n': { return: ShopQueryQuery; @@ -1797,6 +1825,10 @@ interface GeneratedQueryTypes { return: SitemapsQuery; variables: SitemapsQueryVariables; }; + '#graphql\n query MetaObjects ($type: String!, $first: Int)\n {\n metaobjects(type: $type, first: $first) {\n nodes {\n fields {\n key\n type\n value\n reference {\n ... on MediaImage {\n alt\n image {\n altText\n url\n width\n height\n }\n }\n }\n }\n handle\n id\n type\n }\n }\n }\n ': { + return: MetaObjectsQuery; + variables: MetaObjectsQueryVariables; + }; } interface GeneratedMutationTypes {