Displays hover buttons to direct user to Studio or the Merchant center
Add to your frontend .env file
NEXT_PUBLIC_INTEGRATION_FRONTASTIC_CUSTOMER=<frontastic customer name>
NEXT_PUBLIC_INTEGRATION_FRONTASTIC_PROJECT=<frontastic project>
NEXT_PUBLIC_INTEGRATION_MC_REGION=<us-central1.gcp>
NEXT_PUBLIC_INTEGRATION_MC_PROJECT=<project-key>
In order to use this functionality, this library is divided into two sections: extensions
and frontend
navigate to the backend
and frontend
directories and add the dependency
yarn add ct-backoffice-integration
We expose only one funnction from this section injectPageTypeIntoDynamicPage
is use to inject the type of Dynamic Page into dataSourcePayload
part of the dynamic page.
Refactor backend/index.ts
according to the below snippet
+import { injectPageTypeIntoDynamicPage } from 'ct-backoffice-integration/dist/extensions';
const extensionsToMerge = [
contentfulExtensions,
@@ -51,8 +52,8 @@ const mergeDynamicPageHandlers = (extensions: Array<ExtensionRegistry>): Dynamic
if (extension['dynamic-page-handler']) {
const result: DynamicPageHandlerResponse = await extension['dynamic-page-handler'](request, dynamicPageContext);
- if (result !== null) {
- return result;
+ if (result) {
+ return injectPageTypeIntoDynamicPage(result);
}
}
}
There are a couple of places that you have to integrate backoffice-integration into the frontend project
-
Frontastic renderer: wrap or replace the top wrapper in rendere with
FrontendIntegrationProvider
+ <frontend.FrontendIntegrationProvider pageData={pageData} isDisplayed={true}> <div className="flex min-h-screen flex-col items-stretch justify-start"> {sections.filter(Boolean).map((section) => ( <Grid key={section.sectionId} @@ -61,7 +63,7 @@ const Renderer = ({ ))} </Grid> ))} </div> </frontend.FrontendIntegrationProvider>
-
Tastic wrapper: Replace the parent
div
that wraps<Tastic>
component withFrontendTasticWrapper
- <div className={`${highlight(isHighlighted)} ${deviceVisibility(data.configuration)}`}> + <backofficeIntegration.FrontendTasticWrapper + className={`${highlight(isHighlighted)} ${deviceVisibility(data.configuration)}`} + data={{ + ...data, + configuration: resolvedTasticData, + }} + > <Tastic data={resolvedTasticData} params={params} searchParams={searchParams} categories={categories} /> + </backofficeIntegration.FrontendTasticWrapper>
Wrap everything with
MerchantCenterIntegrationProvider
- <div className={`${highlight(isHighlighted)} ${deviceVisibility(data.configuration)}`}> + <backofficeIntegration.MerchantCenterIntegrationProvider> + <backofficeIntegration.FrontendTasticWrapper + className={`${highlight(isHighlighted)} ${deviceVisibility(data.configuration)}`} + data={{ + ...data, + configuration: resolvedTasticData, + }} + > <Tastic data={resolvedTasticData} params={params} searchParams={searchParams} categories={categories} /> + </backofficeIntegration.FrontendTasticWrapper> + </backofficeIntegration.MerchantCenterIntegrationProvider>
-
MC Product integration: Wrap the component where it's rendering product(s) with
MerchantCenterProductWrapper
and pass theproduct
prop into the component.Note:
product
has to haveproductId
property.examples:
1.ProductTile
1.ProductDetails