Files
react-editor-shopify/editor.config.tsx
2026-06-03 22:38:26 -04:00

109 lines
3.7 KiB
TypeScript

import {
createFieldShopifyProduct,
createFieldShopifyCollection,
} from "@reacteditor/field-shopify";
import { navigationEditor } from "@/components/navigation/navigation.editor";
import { footerEditor } from "@/components/footer/footer.editor";
import { heroEditor } from "@/components/hero/hero.editor";
import { bannerEditor } from "@/components/landing/banner.editor";
import { createFeaturedProductEditor } from "@/components/commerce/featured-product.editor";
import { createProductsGridEditor } from "@/components/commerce/products-grid.editor";
import { createProductsCarouselEditor } from "@/components/commerce/products-carousel.editor";
import { collectionGridEditor } from "@/components/commerce/collection-grid.editor";
import { createCollectionEditor } from "@/components/commerce/collection.editor";
import { createProductDetailsEditor } from "@/components/commerce/product-details.editor";
import { createRecommendedProductsEditor } from "@/components/commerce/recommended-products.editor";
import { searchProductsEditor } from "@/components/commerce/search-products.editor";
import { featuresEditor } from "@/components/features/features.editor";
import { testimonialsEditor } from "@/components/testimonials/testimonials.editor";
import { imageGalleryEditor } from "@/components/landing/image-gallery.editor";
import { newsletterCtaEditor } from "@/components/landing/newsletter-cta.editor";
import { logosEditor } from "@/components/logos/logos.editor";
import { ctaEditor } from "@/components/cta/cta.editor";
import { faqEditor } from "@/components/faq/faq.editor";
import Root from "@/config/root";
import type { UserConfig } from "@/config/types";
const SHOPIFY_DOMAIN =
process.env.NEXT_PUBLIC_SHOPIFY_DOMAIN ?? "mock.shop";
const STOREFRONT_TOKEN =
process.env.NEXT_PUBLIC_SHOPIFY_STOREFRONT_ACCESS_TOKEN ?? "";
const productField = createFieldShopifyProduct({
storeDomain: SHOPIFY_DOMAIN,
storefrontAccessToken: STOREFRONT_TOKEN || undefined,
}) as any;
const collectionField = createFieldShopifyCollection({
storeDomain: SHOPIFY_DOMAIN,
storefrontAccessToken: STOREFRONT_TOKEN || undefined,
}) as any;
const categories = {
navigation: { title: "Navigation" },
hero: { title: "Hero & Banners" },
commerce: { title: "Commerce" },
content: { title: "Content" },
footer: { title: "Footer" },
};
const sharedComponents = {
navigation: navigationEditor,
footer: footerEditor,
};
export const homeConfig: UserConfig = {
root: Root,
categories,
components: {
...sharedComponents,
hero: heroEditor,
banner: bannerEditor,
"featured-product": createFeaturedProductEditor({ productField }),
"products-grid": createProductsGridEditor({ collectionField }),
"products-carousel": createProductsCarouselEditor({ collectionField }),
"collection-grid": collectionGridEditor,
features: featuresEditor,
testimonials: testimonialsEditor,
"image-gallery": imageGalleryEditor,
"newsletter-cta": newsletterCtaEditor,
logos: logosEditor,
cta: ctaEditor,
faq: faqEditor,
} as any,
};
export const productConfig: UserConfig = {
root: Root,
categories,
components: {
...sharedComponents,
"product-details": createProductDetailsEditor({ productField }),
"recommended-products": createRecommendedProductsEditor({ productField }),
"products-carousel": createProductsCarouselEditor({ collectionField }),
} as any,
};
export const collectionsConfig: UserConfig = {
root: Root,
categories,
components: {
...sharedComponents,
collection: createCollectionEditor({ collectionField }),
} as any,
};
export const searchConfig: UserConfig = {
root: Root,
categories,
components: {
...sharedComponents,
"search-products": searchProductsEditor,
} as any,
};