Backoffice integration

Displays hover buttons to direct user to Studio or the Merchant center

Requirements

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>

How to use

In order to use this functionality, this library is divided into two sections: extensions and frontend

Add dependency

navigate to the backend and frontend directories and add the dependency

yarn add ct-backoffice-integration

Extensions

We expose only one funnction from this section injectPageTypeIntoDynamicPage

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);
         }
       }
     }

Frontend

There are a couple of places that you have to integrate backoffice-integration into the frontend project

1. 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>

2. Tastic wrapper: Replace the parent div that wraps <Tastic> component with FrontendTasticWrapper

   - <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>
   

3. MC Product integration: Wrap the component where it's rendering product(s) with MerchantCenterProductWrapperand pass the product prop into the component.

   Note: product has to have productId property.

   examples:

   1.ProductTile

   1.ProductDetails