SmartEdit

/* app/[locale]/(cms)/[[...slug]]/page.tsx */

return (
  <>
    {/* Default slots */}
    <RenderCmsContent item={componentsAboveFold} />
    <RenderCmsContent item={componentsBelowFold} />
    {/* Native slots */}
    <RenderCmsContent item={customPageSlot} />
  </>
);

import SimpleBanner from '@/sf-modules/cms-smartedit/components/native/se-simple-banner';

const { data } = await sdk.smartedit.getComponentsByIdsAndUser({
  componentIds: ['MyCustomSimpleBannerComponent', ...],
});

return <SimpleBanner ...data.components[0] />;

[
  {
    uid: <component_uid>,
    uuid: <component_uuid>,
    typeCode: 'CMSFlexComponent',
    modifiedtime: <component_modified_time>,
    name: 'Product Specification Tab',
    container: false,
    flexType: 'ProductSpecsTabComponent',
    synchronizationBlocked: false
  }
]

function DefaultProductDetailsTabComponent(_props: FlexComponentProps) {
  return (
    <div className="p-4">
      <h3 className="text-lg font-semibold mb-3">Product Details</h3>
      <div className="space-y-2">
        <p>Detailed product information goes here</p>
        <p>This will be shown by default on all pages</p>
      </div>
    </div>
  );
}

const defaultFlexState: FlexComponentState = {
  ProductDetailsTabComponent: {
    Component: DefaultProductDetailsTabComponent,
    title: 'Product Details',
  },
  // ... other flex types
};

'use client';

import { PropsWithChildren } from 'react';
import { FlexComponentsContext } from '@/sf-modules/cms-smartedit/components/native/se-flex';

export default function ProductDetailsFlexProvider({ children }: PropsWithChildren) {
  return (
    <FlexComponentsContext.Provider
      value={{
        // Customize flex components specifically for product detail pages
        ProductDetailsTabComponent: {
          Component: ProductPageDetailsComponent,
          title: 'Product Information',
        },
        ProductSpecsTabComponent: {
          Component: ProductPageSpecsComponent,
          title: 'Technical Specifications',
        },
      }}
    >
      {children}
    </FlexComponentsContext.Provider>
  );
}

function ProductPageDetailsComponent() {
  // You can fetch the product details using `useSdk`
  return (
    <div className="p-6 bg-gradient-to-r from-blue-50 to-indigo-50">
      <h3 className="text-xl font-bold mb-4 text-indigo-900">
        Enhanced Product Details
      </h3>
      <div className="grid grid-cols-2 gap-4">
        <div>
          <h4 className="font-semibold text-indigo-700">Key Features</h4>
          <ul className="list-disc list-inside text-sm">
            <li>Premium quality materials</li>
            <li>Sustainable manufacturing</li>
            <li>30-day return policy</li>
          </ul>
        </div>
        <div>
          <h4 className="font-semibold text-indigo-700">Benefits</h4>
          <p className="text-sm">Why this product is perfect for you</p>
        </div>
      </div>
    </div>
  );
}

'use client';

import { PropsWithChildren } from 'react';
import { FlexComponentsContext } from '@/sf-modules/cms-smartedit/components/native/se-flex';

export default function LandingPageFlexProvider({ children }: PropsWithChildren) {
  return (
    <FlexComponentsContext.Provider
      value={{
        // Customize flex components specifically for landing pages
        ProductDetailsTabComponent: {
          Component: LandingPagePromotionalComponent,
          title: 'Why Choose Us',
        },
      }}
    >
      {children}
    </FlexComponentsContext.Provider>
  );
}

function LandingPagePromotionalComponent() {
  return (
    <div className="p-8 bg-gradient-to-r from-green-50 to-emerald-50 text-center">
      <h3 className="text-2xl font-bold mb-4 text-emerald-900">
        Why Choose Our Products?
      </h3>
      <div className="grid grid-cols-3 gap-6">
        <div>
          <div className="text-3xl mb-2">🌱</div>
          <h4 className="font-semibold">Eco-Friendly</h4>
          <p className="text-sm">Sustainably sourced materials</p>
        </div>
        <div>
          <div className="text-3xl mb-2">⚡</div>
          <h4 className="font-semibold">Fast Delivery</h4>
          <p className="text-sm">Free shipping in 2-3 days</p>
        </div>
        <div>
          <div className="text-3xl mb-2">💝</div>
          <h4 className="font-semibold">Premium Quality</h4>
          <p className="text-sm">Crafted with attention to detail</p>
        </div>
      </div>
    </div>
  );
}

import RenderCmsContent from '@/sf-modules/cms-smartedit/components/render-cms-content';
import { createPageTemplate } from '@/sf-modules/cms-smartedit/components/templates/create-page-template';
import ProductDetailsFlexProvider from '@/sf-modules/cms-smartedit/components/templates/product-details-flex-provider';

export default createPageTemplate(['UpSelling', 'Tabs'], ({ slots }) => {
  return (
    <ProductDetailsFlexProvider>
      {/* Existing content */}
    </ProductDetailsFlexProvider>
  );
});

import RenderCmsContent from '@/sf-modules/cms-smartedit/components/render-cms-content';
import { createPageTemplate } from '@/sf-modules/cms-smartedit/components/templates/create-page-template';
import LandingPageFlexProvider from '@/sf-modules/cms-smartedit/components/templates/landing-page-flex-provider';

export default createPageTemplate(['Section1', 'Section2'], ({ slots }) => {
  return (
    <LandingPageFlexProvider>
      <RenderCmsContent item={slots.Section1} />
      <RenderCmsContent item={slots.Section2} />
    </LandingPageFlexProvider>
  );
});