PHPackages                             creativestyle/magesuite-content-constructor-admin - PHPackages - PHPackages  [Skip to content](#main-content)[PHPackages](/)[Directory](/)[Categories](/categories)[Trending](/trending)[Leaderboard](/leaderboard)[Changelog](/changelog)[Analyze](/analyze)[Collections](/collections)[Log in](/login)[Sign up](/register)

1. [Directory](/)
2. /
3. [Admin Panels](/categories/admin)
4. /
5. creativestyle/magesuite-content-constructor-admin

ActiveLibrary[Admin Panels](/categories/admin)

creativestyle/magesuite-content-constructor-admin
=================================================

Magento2 Content Constructor package

v4.16.5(3mo ago)069.9k↓15.9%9[1 issues](https://github.com/magesuite/content-constructor-admin/issues)[14 PRs](https://github.com/magesuite/content-constructor-admin/pulls)4OSL-3.0TypeScript

Since Oct 12Pushed 1mo ago3 watchersCompare

[ Source](https://github.com/magesuite/content-constructor-admin)[ Packagist](https://packagist.org/packages/creativestyle/magesuite-content-constructor-admin)[ Docs](https://creativestyle.de)[ RSS](/packages/creativestyle-magesuite-content-constructor-admin/feed)WikiDiscussions 4.x Synced 1mo ago

READMEChangelogDependenciesVersions (192)Used By (4)

MageSuite Content Constructor Admin
-----------------------------------

[](#magesuite-content-constructor-admin)

This module adds a functionallity 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 blocks, etc.

How it works?
-------------

[](#how-it-works)

[![Layout builder](docs/img/cc-workflow.jpeg)](docs/img/cc-workflow.jpeg)

### Definitions:

[](#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 "

        ---

        " Does not have his own filesystem as configurator

### Files structure

[](#files-structure)

All of mentioned components are available in extension files, in 'src' catalog, which is then compiled by gulp and distributed to Magento locations. Paths below are continuation of a base path, that is common for all CC components: *vendor/creativestyle/magesuite-content-constructor-admin/view/adminhtml/src/\*.*

- Content Constructor - ./*content-constructor.ts, ./content-constructor.scss*
- Layout Builder - \_./components/*layout-builder/\**
- Component Picker - \_./components/*component-picker/\**
- Configurator components - *./components/{component\_name}/configurator/\**
- Preview components - *./components/{component\_name}/preview/\**

### How to create component (Frontend part)

[](#how-to-create-component-frontend-part)

> Fair warning This document covers only admin part of a component. Frontend is being built exactly the same way all the Magento template are done. Storefront templates can be found under `vendor/creativestyle/magesuite-content-constructor-frontend/view/frontend/templates/component/{component-name}.phtml`.

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

#### 1. Request a BE part of the component

[](#1-request-a-be-part-of-the-component)

First of all, you'll need a backend developer who will prepare logic for getting configurator inside modal and passing data to it as well as passing its data to the storefront. In this step you'll need to tell him what's the path for your component in the admin panel. Let's say we want to add component which is responsible for adding headline (I know this component already is there, but you can also follow this guide in your editor and check the filesystem on your own). So let's call it simply **headline** and tell BE guy that this component will be reachable under `headline/configurator/headline.phtml`

Also we ask graphic designer for the icon for **component picker** if we don't have it yet.

#### 2. Create base component files

[](#2-create-base-component-files)

Meanwhile you can already prepare the component which can be used in Magento admin. So having all backend things done, we can already create architecture for our component. All the directories/files we need we will create in *vendor/creativestyle/magesuite-content-constructor-admin/view/adminhtml/src/components:*

- *headline/configurator/headline.phtml*
- *headline/configurator/headline.ts*
- *headline/configurator/headline.scss*
- *headline/preview/headline.ts*
- *headline/preview/headline.scss*

*headline/configurator/headline.phtml*

```