Skip to main content
Version: 2.x

WYSIWYG Platform

In this guide, you will learn the different WYSIWYG implementations available on Front-Commerce and how to customize them.

If you want to learn how the core WYSIWYG component works instead, please refer to Display WYSIWYG content.

Each platform has a specific type of WYSIWYG. This allows to render your content differently depending of its origin. For instance a content from WordPress might have some specific media shortcodes while Magento will have some widgets to display a category name. In the following section you will learn about the one implemented in Front-Commerce:

Definitions:

  • a shortcode is a specific string structure that is meant to be transformed into actual content
  • a transform is function that replaces an HTML tag with a React Component

DefaultWysiwyg​

The goal of this Wysiwyg type is to remain as simple as possible. It is not meant to fetch data from additional services.

No shortcodes

Default transforms

  • <a> tags are transformed into theme/components/atoms/Typography/Link components when the href attribute does not contain a domain.

MagentoWysiwyg​

The MagentoWyswiyg's goal is to support all the default features in Magento 1 & 2. If you notice that some features are missing, please contact us and we'll look into implementing it.

Supported shortcodes

  • {% raw %}{{media url="*"}}{% endraw %}
  • {% raw %}{{store url="*"}}{% endraw %}
  • {% raw %}{{widget type="*" attribute="value"}}{% endraw %}

Default transforms

  • <a> tags are transformed into theme/components/atoms/Typography/Link components when the href attribute does not contain a domain.
  • <widget> tags are transformed into theme/modules/WysiwygV2/MagentoWysiwyg/Widget/Widget.js components. However, you shouldn't write a <widget> tag manually. It comes from the {% raw %}{{widget}}{% endraw %} shortcode.
  • <style> tags are transformed to support Magento's Page Builder format. The #html-body selector is replaced with the <WysiwygV2> root selector. See WYSIWYG dynamic styles for details.

Add a custom Magento Widget​

Custom widgets will be automatically parsed. However, you will still need to map the widget's type to custom React Components. If you don't, they will be ignored and nothing will be rendered in the final page.

To do so, please override theme/modules/WysiwygV2/MagentoWysiwyg/Widget/getWidgetComponent.js in your own theme.

Now, within your newly created getWidgetComponent.js file, you will be able to add your own behavior. For instance, if you've created a widget in Magento that uses the type acme/product-preview, you will need to update the Widget.js file likewise:

my-module/modules/WysiwygV2/MagentoWysiwyg/Widget/getWidgetComponent.js
import React from "react";
import Spinner from "theme/components/atoms/Spinner";
import loadable from "@loadable/component";

const defaultWidgetsMap = {
  "acme/product-preview": loadable(
    () => import("./path/to/ProductPreview.js"),
    {
      fallback: <Spinner />,
    }
  ),
};

// ... rest of the file is intact

If you restart your application, you will notice that the new widget component is displayed. Hurray!

However, in most cases, you will need to fetch data to display all the needed information in your widget. For instance, if the widget is {% raw %}{{ widget type="acme/product-preview" sku="VSK12" }}{% endraw %} you will want to fetch the product associated with the given SKU.

Register your widget type at the GraphQL level​

  1. First make sure that your dependencies are up to date in your GraphQL module

    my-module/server/modules/wysiwyg/index.js
    export default {
    namespace: "Magento1/Cms",
    dependencies: [
      "Magento2/Wysiwyg", // ensure that Widget related features are available
      "Magento2/Catalog/Product" // ensure that you can fetch a product in your Wysiwyg data
    ],

  2. Then you need to register a new WidgetData type in your schema

    my-module/server/modules/wysiwyg/schema.gql
    type WidgetProductPreviewData implements WidgetData {
      dataId: ID
      product: Product
    }

  3. After that you can setup the resolvers to tell GraphQL how to fetch the product field

    my-module/server/modules/wysiwyg/resolvers.js
    export default {
      WidgetProductPreviewData: {
        product: ({ node }, _, { loaders }) => {
          const productSkuAttribute = node.attrs.find(
            ({ name }) => name === "sku"
          );
          if (!productSkuAttribute) {
            return null;
          }
          return loaders.Product.load(productSkuAttribute.value);
        },
      },
    };

  4. Finally register the widget type from Magento and associate it with the GraphQL type

    my-module/server/modules/wysiwyg/index.js
    export default {
      // ...
      contextEnhancer: ({ loaders }) => {
        loaders.MagentoWidget.registerWidgetType(
          // the tag name in your HTML
          "acme/product-preview",
          // The associated GraphQL type name
          "WidgetProductPreviewData"
        );
      },
    };

Get the data in your component​

  1. Override the theme/modules/WysiwygV2/MagentoWysiwyg/MagentoWysiwygFragment.gql to fetch the new data needed for your widget
    my-module/modules/WysiwygV2/MagentoWysiwyg/MagentoWysiwygFragment.gql
    fragment MagentoWysiwygFragment on MagentoWysiwyg {
      childNodes
      data {
        dataId
        ... on WysiwygWidgetData {
          data {
            ... on WidgetInvalidData {
              dataId
            }
            ... on WidgetProductPreviewData {
              product {
                sku
                name
              }
            }
          }
        }
      }
    }
  2. Use the fetched data in the data props in your final widget component (the ./path/to/ProductPreview.js mentioned above)

PrismicWysiwyg​

The PrismicWysiwyg allows you to display Rich Text content from Prismic in your front-end, it handles addition fields like Embed fields and media links. To learn more of the PrismicWysiwyg usage, please refer to the Configure the PrismicWysiwyg installation guide.