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

Update react editor

Browse Source
This commit is contained in:
Rami Bitar
2026-06-04 11:49:01 -04:00
parent 7f86072636
commit 8a558d3217
18 changed files with 140 additions and 262 deletions
Download Patch File Download Diff File Expand all files Collapse all files

15
app/[[...slug]]/page.tsx Normal file
View File

@@ -0,0 +1,15 @@
"use client";
import { useParams } from "next/navigation";
import { Render } from "@reacteditor/core";
import { appConfig } from "@/editor.config";
import resolveRoute from "@/lib/resolve-route";
import schema from "@/app.schema.json";
export default function Page() {
const params = useParams();
const slug = Array.isArray(params?.slug) ? (params.slug as string[]) : [];
const { key } = resolveRoute(slug);
const pageData = (schema as any)[key];
return <Render config={appConfig as any} data={pageData} />;
}

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

@@ -1,55 +0,0 @@
"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>
);
}

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

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

28
app/products/[handle]/editor/page.tsx → app/editor/[[...slug]]/page.tsx
View File

@@ -4,22 +4,22 @@ 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 { createShopifyPlugin } from "@reacteditor/plugin-shopify";
import { appConfig } from "@/editor.config";
import resolveRoute from "@/lib/resolve-route";
import schema from "@/app.schema.json";
const currentRoute = "/products/:handle";
export default function ProductEditorPage() {
export default function EditorPage() {
const params = useParams();
const handle = typeof params?.handle === "string" ? params.handle : "";
const data = (schema as any)["/products/:handle"];
const slug = Array.isArray(params?.slug) ? (params.slug as string[]) : [];
const { key, path, params: routeParams } = resolveRoute(slug);
const data = (schema as any)[key];
const plugins = useMemo(
() => [
createTailwindCdnPlugin(),
createShopifyPlugin({
storeDomain:
process.env.NEXT_PUBLIC_SHOPIFY_DOMAIN ?? "mock.shop",
storeDomain: process.env.NEXT_PUBLIC_SHOPIFY_DOMAIN ?? "mock.shop",
publicAccessToken:
process.env.NEXT_PUBLIC_SHOPIFY_STOREFRONT_ACCESS_TOKEN,
}),
@@ -28,7 +28,7 @@ export default function ProductEditorPage() {
);
const handlePublish = async (nextData: any, route?: any) => {
const resolved = route ?? { key: currentRoute };
const resolved = route ?? { key };
if (typeof window !== "undefined" && window.parent !== window) {
window.parent.postMessage(
{ type: "PUBLISH", data: { data: nextData, route: resolved } },
@@ -41,12 +41,10 @@ export default function ProductEditorPage() {
return (
<div className="h-screen w-screen">
<Editor
config={productConfig as any}
data={data}
currentRoute={currentRoute}
route={{ key: currentRoute, path: `/products/${handle}`, params: { handle } }}
config={appConfig as any}
data={data}
route={{ key, path, params: routeParams }}
plugins={plugins}
iframe={{ enabled: true }}
ui={{ leftSideBarVisible: false }}
onPublish={handlePublish}
/>

10
app/page.tsx
View File

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

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

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

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

@@ -1,52 +0,0 @@
"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>
);
}

10
app/search/page.tsx
View File

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