frontend/react-editor-shopify
Template
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

update shopify storefront

Browse Source
This commit is contained in:
Rami Bitar
2026-06-03 22:38:26 -04:00
parent 47b773444e
commit 52424c9ba3
20 changed files with 293 additions and 430 deletions
Download Patch File Download Diff File Expand all files Collapse all files

44
app/_components/editor-shell.tsx
View File

@@ -1,44 +0,0 @@
"use client";
import { useMemo } from "react";
import { Editor } from "@reacteditor/core";
import createTailwindCdnPlugin from "@reacteditor/plugin-tailwind-cdn";
import type { UserConfig } from "@/config/types";
export type EditorShellProps = {
config: UserConfig;
data: any;
routeKey?: string;
};
export function EditorShell({ config, data, routeKey }: EditorShellProps) {
const plugins = useMemo(() => [createTailwindCdnPlugin()], []);
const handlePublish = async (nextData: any, route?: any) => {
const resolved = route ?? (routeKey ? { key: routeKey } : undefined);
console.log({
type: "PUBLISH",
data: { data: nextData, route: JSON.stringify(resolved) },
});
if (typeof window !== "undefined" && window.parent !== window) {
window.parent.postMessage(
{ type: "PUBLISH", data: { data: nextData, route: resolved } },
"*",
);
}
await new Promise((resolve) => setTimeout(resolve, 1000));
};
return (
<div className="h-screen w-screen">
<Editor
config={config as any}
data={data}
plugins={plugins}
iframe={{ enabled: true }}
ui={{ leftSideBarVisible: false }}
onPublish={handlePublish}
/>
</div>
);
}

55
app/collections/[handle]/editor/page.tsx Normal file
View File

@@ -0,0 +1,55 @@
"use client";
import { useMemo } from "react";
import { useParams } from "next/navigation";
import { Editor } from "@reacteditor/core";
import createTailwindCdnPlugin from "@reacteditor/plugin-tailwind-cdn";
import createShopifyPlugin from "@reacteditor/plugin-shopify";
import { collectionsConfig } from "@/editor.config";
import schema from "@/app.schema.json";
const currentRoute = "/collections/:handle";
export default function CollectionEditorPage() {
const params = useParams();
const handle = typeof params?.handle === "string" ? params.handle : "";
const data = (schema as any)["/collections/:handle"];
const plugins = useMemo(
() => [
createTailwindCdnPlugin(),
createShopifyPlugin({
storeDomain:
process.env.NEXT_PUBLIC_SHOPIFY_DOMAIN ?? "mock.shop",
publicAccessToken:
process.env.NEXT_PUBLIC_SHOPIFY_STOREFRONT_ACCESS_TOKEN,
}),
],
[],
);
const handlePublish = async (nextData: any, route?: any) => {
const resolved = route ?? { key: currentRoute };
if (typeof window !== "undefined" && window.parent !== window) {
window.parent.postMessage(
{ type: "PUBLISH", data: { data: nextData, route: resolved } },
"*",
);
}
await new Promise((resolve) => setTimeout(resolve, 1000));
};
return (
<div className="h-screen w-screen">
<Editor
config={collectionsConfig as any}
data={data}
currentRoute={currentRoute}
route={{ key: currentRoute, path: `/collections/${handle}`, params: { handle } }}
plugins={plugins}
iframe={{ enabled: true }}
ui={{ leftSideBarVisible: false }}
onPublish={handlePublish}
/>
</div>
);
}

6
app/collections/[handle]/page.tsx
View File

@@ -1,10 +1,10 @@
"use client";
import { Render } from "@reacteditor/core";
import { collectionsConfig } from "@/config/configs";
import { collectionsConfig } from "@/editor.config";
import schema from "@/app.schema.json";
export default function CollectionPage() {
const data = (schema as any)["/collections/:handle"];
return <Render config={collectionsConfig as any} data={data} />;
const pageData = (schema as any)["/collections/:handle"];
return <Render config={collectionsConfig as any} data={pageData} />;
}

16
app/editor/collections/[handle]/page.tsx
View File

@@ -1,16 +0,0 @@
"use client";
import { EditorShell } from "@/app/_components/editor-shell";
import { collectionsConfig } from "@/config/configs";
import schema from "@/app.schema.json";
export default function CollectionEditorPage() {
const data = (schema as any)["/collections/:handle"];
return (
<EditorShell
config={collectionsConfig}
data={data}
routeKey="/collections/:handle"
/>
);
}

10
app/editor/page.tsx
View File

@@ -1,10 +0,0 @@
"use client";
import { EditorShell } from "@/app/_components/editor-shell";
import { homeConfig } from "@/config/configs";
import schema from "@/app.schema.json";
export default function HomeEditorPage() {
const data = (schema as any)["/"];
return <EditorShell config={homeConfig} data={data} routeKey="/" />;
}

16
app/editor/products/[handle]/page.tsx
View File

@@ -1,16 +0,0 @@
"use client";
import { EditorShell } from "@/app/_components/editor-shell";
import { productConfig } from "@/config/configs";
import schema from "@/app.schema.json";
export default function ProductEditorPage() {
const data = (schema as any)["/products/:handle"];
return (
<EditorShell
config={productConfig}
data={data}
routeKey="/products/:handle"
/>
);
}

10
app/editor/search/page.tsx
View File

@@ -1,10 +0,0 @@
"use client";
import { EditorShell } from "@/app/_components/editor-shell";
import { searchConfig } from "@/config/configs";
import schema from "@/app.schema.json";
export default function SearchEditorPage() {
const data = (schema as any)["/search"];
return <EditorShell config={searchConfig} data={data} routeKey="/search" />;
}

6
app/page.tsx
View File

@@ -1,10 +1,10 @@
"use client";
import { Render } from "@reacteditor/core";
import { homeConfig } from "@/config/configs";
import { homeConfig } from "@/editor.config";
import schema from "@/app.schema.json";
export default function HomePage() {
const data = (schema as any)["/"];
return <Render config={homeConfig as any} data={data} />;
const pageData = (schema as any)["/"];
return <Render config={homeConfig as any} data={pageData} />;
}

55
app/products/[handle]/editor/page.tsx Normal file
View File

@@ -0,0 +1,55 @@
"use client";
import { useMemo } from "react";
import { useParams } from "next/navigation";
import { Editor } from "@reacteditor/core";
import createTailwindCdnPlugin from "@reacteditor/plugin-tailwind-cdn";
import createShopifyPlugin from "@reacteditor/plugin-shopify";
import { productConfig } from "@/editor.config";
import schema from "@/app.schema.json";
const currentRoute = "/products/:handle";
export default function ProductEditorPage() {
const params = useParams();
const handle = typeof params?.handle === "string" ? params.handle : "";
const data = (schema as any)["/products/:handle"];
const plugins = useMemo(
() => [
createTailwindCdnPlugin(),
createShopifyPlugin({
storeDomain:
process.env.NEXT_PUBLIC_SHOPIFY_DOMAIN ?? "mock.shop",
publicAccessToken:
process.env.NEXT_PUBLIC_SHOPIFY_STOREFRONT_ACCESS_TOKEN,
}),
],
[],
);
const handlePublish = async (nextData: any, route?: any) => {
const resolved = route ?? { key: currentRoute };
if (typeof window !== "undefined" && window.parent !== window) {
window.parent.postMessage(
{ type: "PUBLISH", data: { data: nextData, route: resolved } },
"*",
);
}
await new Promise((resolve) => setTimeout(resolve, 1000));
};
return (
<div className="h-screen w-screen">
<Editor
config={productConfig as any}
data={data}
currentRoute={currentRoute}
route={{ key: currentRoute, path: `/products/${handle}`, params: { handle } }}
plugins={plugins}
iframe={{ enabled: true }}
ui={{ leftSideBarVisible: false }}
onPublish={handlePublish}
/>
</div>
);
}

6
app/products/[handle]/page.tsx
View File

@@ -1,10 +1,10 @@
"use client";
import { Render } from "@reacteditor/core";
import { productConfig } from "@/config/configs";
import { productConfig } from "@/editor.config";
import schema from "@/app.schema.json";
export default function ProductPage() {
const data = (schema as any)["/products/:handle"];
return <Render config={productConfig as any} data={data} />;
const pageData = (schema as any)["/products/:handle"];
return <Render config={productConfig as any} data={pageData} />;
}

52
app/search/editor/page.tsx Normal file
View File

@@ -0,0 +1,52 @@
"use client";
import { useMemo } from "react";
import { Editor } from "@reacteditor/core";
import createTailwindCdnPlugin from "@reacteditor/plugin-tailwind-cdn";
import createShopifyPlugin from "@reacteditor/plugin-shopify";
import { searchConfig } from "@/editor.config";
import schema from "@/app.schema.json";
const currentRoute = "/search";
export default function SearchEditorPage() {
const data = (schema as any)["/search"];
const plugins = useMemo(
() => [
createTailwindCdnPlugin(),
createShopifyPlugin({
storeDomain:
process.env.NEXT_PUBLIC_SHOPIFY_DOMAIN ?? "mock.shop",
publicAccessToken:
process.env.NEXT_PUBLIC_SHOPIFY_STOREFRONT_ACCESS_TOKEN,
}),
],
[],
);
const handlePublish = async (nextData: any, route?: any) => {
const resolved = route ?? { key: currentRoute };
if (typeof window !== "undefined" && window.parent !== window) {
window.parent.postMessage(
{ type: "PUBLISH", data: { data: nextData, route: resolved } },
"*",
);
}
await new Promise((resolve) => setTimeout(resolve, 1000));
};
return (
<div className="h-screen w-screen">
<Editor
config={searchConfig as any}
data={data}
currentRoute={currentRoute}
route={{ key: currentRoute, path: currentRoute, params: {} }}
plugins={plugins}
iframe={{ enabled: true }}
ui={{ leftSideBarVisible: false }}
onPublish={handlePublish}
/>
</div>
);
}

6
app/search/page.tsx
View File

@@ -1,10 +1,10 @@
"use client";
import { Render } from "@reacteditor/core";
import { searchConfig } from "@/config/configs";
import { searchConfig } from "@/editor.config";
import schema from "@/app.schema.json";
export default function SearchPage() {
const data = (schema as any)["/search"];
return <Render config={searchConfig as any} data={data} />;
const pageData = (schema as any)["/search"];
return <Render config={searchConfig as any} data={pageData} />;
}