...

https://github.com/magesuite/content-constructor-admin

...

This module

...

Description:

This module adds a functionallity functionality of Content Constructor CMS, a powerful tool, for building a content of pages that replaces Magento Page Builder.
Admin module stands for the whole configurator of components, used in product edit pages, category pages, cms CMS blocks, etc.

Installation

composer require "creativestyle/magesuite-content-constructor-admin" ^5.0.0

User guide

This documents covers developer documentation, for the user guide refer to: 2. Content Management

Development

Definitions:

• Content Constructor (CC) - a mother (root) component that in fact controls whole CC functionality (vendor/creativestyle/magesuite-content-constructor-admin/view/adminhtml/templates/constructor.phtml, vendor/creativestyle/magesuite-content-constructor-admin/view/adminhtml/src/content-constructor.ts);

• Layout Builder - component responsible for displaying CC dashboard and management tools for each component _(vendor/creativestyle/magesuite-content-constructor-admin/view/adminhtml/src/components/layout-builder/*);

• Management tools - tools that allows to modify component's data or its position. Currently available: add new component, move up, move down, edit, delete, duplicate. Tools are part of cc-layout-builder component

• Component Picker - when you want to add new component, a modal appears with the Component Picker as content. We used here Magento's modal system, but the picker is our solution. The Component Picker is a list of available component types you can choose from. _(vendor/creativestyle/magesuite-content-constructor-admin/view/adminhtml/src/components/component-picker/*)

• Component Preview - this component is responsible for displaying preview of configured component. This means that when you create configurator component you have to create preview component for this configurator as well. It is displayed in the dashboard of Layout Builder

• Configurator - this is in fact already a component you have chosen. It's loaded to the separate modal as a form and it's responsible for collecting information and content of what should be displayed on the storefront. Currently there are following component types:

  • Headline - Simply places headline and optional subheadline

  • Button- As name says, it puts the button element. You can set label and target where it should redirect you

  • Paragraph- This one is quite powerfull, because it not only creates text input but provides simple version of WYSIWYG Editor and after save it creates CMS static block in Magento's system using REST API.

  • Static Block - this just puts CMS Static block, but content of it cannot be edited directly inside configurator

  • Hero carousel - adds Hero component which is always 1 slide per view but you can choose also mobile display scenario: remove carousel funcitonality and display banners one under another OR keep slider funcitonality

  • Image Teaser - similar to hero carousel but more powerfull. It allows you to choose how many slides per view you want to display, Should it be slider, full-width or content width and much more.

  • Product Carousel - display slider with products from choosen category (or multiple categories), sort it, decide how many products you want to show there.

  • Brand Carousel - if brands extension is enabled you can put this component to show brands of your shop. This component is unique because it doesn't provide any configuration options. In fact this component is not a real component. It's controlled by Content Constructor and does not have his own filesystem as configurator

  • Category links - Choose category and then subcategories you want to display on your page. It shows category label and under it a list of linked subcategories you have chosen. Next to component label there's "Show all" which redirects you to the category page

  • Separator - Another component which is not a real component. It simply puts "<hr>" Does not have his own filesystem as configurator

...

Content Constructor is fully based on Vue.js so if you're not familiar please read some about it first: http://vuejs.org/

1. Request a BE part of the component

...

Headline preview in Layout Builder's Dashboard

...

How to…

Enable wysiwyg editor in admin panel for slogan and/or description of image-teaser based components

...

In order to enable the editor in CC configurator edit etc/view.xml file of a child theme:

<vars module="MageSuite_ContentConstructor">
  <var name="teaser">
    <var name="allow_slogan_editor">true</var>
    <var name="allow_description_editor">true</var>
  </var>
</vars>

It is also necessary to overwrite slogan and description templates:

MageSuite_ContentConstructorFrontend/templates/component/image_teaser/slide_elements/description

MageSuite_ContentConstructorFrontend/templates/component/image_teaser/slide_elements/slogan

and change <p> tag into div

After changes are applied also styles for nested elements in slogan/description should be checked and adjusted, f.e. headlines, paragraphs, lists can fon related styles from slogan/description:

&__slogan {
    // Headlines, paragraphs and list that can be added via editor should keep slogan styles
    // When styled in editor elements will receive inline styles that will take precedence
    h1,
    h2,
    h3,
    h4,
    h5,
    h6,
    p,
    li {
        font-family: inherit;
        font-size: inherit;
        line-height: inherit;
        font-weight: inherit;
        font-style: inherit;
    }
}

...

Add static block content as description/slogan content for image-teaser

Static block HTML can be inserted as description content by using a directive with block ID:

{{block id="teaser_content"}}

...