Download the PHP package creativestyle/magesuite-content-constructor-admin without Composer

On this page you can find all versions of the php package creativestyle/magesuite-content-constructor-admin. It is possible to download/install these versions without Composer. Possible dependencies are resolved automatically.

FAQ

After the download, you have to make one include require_once('vendor/autoload.php');. After that you have to import the classes with use statements.

Example:
If you use only one package a project is not needed. But if you use more then one package, without a project it is not possible to import the classes with use statements.

In general, it is recommended to use always a project to download your libraries. In an application normally there is more than one library needed.
Some PHP packages are not free to download and because of that hosted in private repositories. In this case some credentials are needed to access such packages. Please use the auth.json textarea to insert credentials, if a package is coming from a private repository. You can look here for more information.

  • Some hosting areas are not accessible by a terminal or SSH. Then it is not possible to use Composer.
  • To use Composer is sometimes complicated. Especially for beginners.
  • Composer needs much resources. Sometimes they are not available on a simple webspace.
  • If you are using private repositories you don't need to share your credentials. You can set up everything on our site and then you provide a simple download link to your team member.
  • Simplify your Composer build process. Use our own command line tool to download the vendor folder as binary. This makes your build process faster and you don't need to expose your credentials for private repositories.
Please rate this library. Is it a good library?

Example code of creativestyle/magesuite-content-constructor-admin

Informations about the package 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?

Definitions:

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/*.

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: http://vuejs.org/

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

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

This file defines usage of a Vue component with :configuration prop that will keep our data we provided. It's important when we edit component, because when editing we want all data that are currently there to be already pre-defined. Please pay attention to the tag. It should always contain component name and a -configurator suffix. Next thing is css class of our component, we are prefixing it with cc- to avoid potential conflicts with Magento or 3rd party

headline/configurator/headline.ts

First we import componentConfigurator which contains all logic needed for setup component. It's useful to write an interface of all out properties (all things that can be provided by user). This will make maintenance easier and make component more readable. Then we define new Vue component in a const called headlineConfigurator (notice a relation between file name and name of this const) and mix in componentConfigurator into it using native Vue's mixins property. Next step if to setup template with v-model arguments pointing to our props. Then we define our configuration prop (the one we set in phtml as a :configuration argument), define its type and set all default values. In case of headline we want all inputs to be empty when creating new component so we define empty values for our names keys. Those will become replaced with the content of :configuration when component will be created once and we will only want to edit something. At the very end we have to export our const so that it can be imported by content-constructor.

headline/configurator/headline.scss

Filling is optional, if you're fine with the styles that are already provided (in case of this component we are fine because inputs are already styled) you can leave this file empty. In case you need to style something, remember to import this sass in vendor/creativestyle/magesuite-content-constructor-admin/view/adminhtml/src/content-constructor.scss to applied your styling

3. Confirm that configurator works

Now we have to make sure our configurator works , so let's "plug it" in a few steps:

Import your headlineConfigurator to the vendor/creativestyle/magesuite-content-constructor-admin/view/adminhtml/src/content-constructor.ts

Map if to the components property so that Vue could gather all information to run subcomponent of CC. For this find components property of contentConstructor and simply map it. Remember to use the same names you defined in your phtml and ts files:

Save it => build using gulp/yarn Clear all the caches, pub/static/* and browser cache, check if configurator displays for you after you chose your component from the picker. It should. If not, please check what does your console return for this component. If it's not a JS error but rather 500 response from the server (it's loaded with AJAX request with GET method) simply check the response content and it should give you the error report number that you can read in your filesystem.

4. Prepare a layout builder

Now when our configurator is ready and it's working as we wanted, it's time to make a preview for layout builder.

Let's prepare .ts file with the template and style it a bit if needed:

./headline/preview/headline.ts

As you probably noticed we are using similar interface as we already prepared for configurator. It's because we will use those keys to display data provided by the user, means component's configuration which is essence of CC. Also pay attention to the CSS class of this preview component - it should follow the pattern of: cc-{component-name}-preview.

./_layout-builder/layout-builder.ts. Let's now setup layout builder for our new preview component. For this we have to import our ts first and then map it again just like we did with configurator:

map it in components object of layout builder component:

./headline/preview/headline.scss This file contains styles for the headline preview.

./_layout-builder/layout-builder.scss To make it work we need to import this scss into our layout-builder component:

Build assets, clear caches and check if preview is displayed properly

6 Add icon to the component picker

The very last thing left is to add the icon of our brand new component to the Category Picker. As in case of reading previews by layout builder, the icon should be also read automatically, but only in one condition: the name of icon file, there's a pattern for it.

Let's call our icon _iconcomponent-{component-name}.svg (_iconcomponent-headline.svg) and put it into our sprites directory which is loaded under ./images/sprites/

Rebuild and test.

If you want to make the description of this component a bit more descriptive for the user in picker, you can edit it in vendor/creativestyle/magesuite-content-constructor/src/Components/Picker/PickerAdmin.php.

7. We're done now! Test it deeply (remember about edit, duplicate functionalities etc).

Custom Fields

Custom fields is a mechanism, that allows adding custom configuration fields to the existing content constructor components configurators, without overwiging whole content constructor admin extension. Complete description about this feature can be found here.

Custom CC Components

The above guide serves as a point of reference for development of MageSuite core, however, recent release ^4.1.0 introduced a support for Custom Content Contructor Components that can be defined in other - custom modules.

Complete description about this feature can be found here.

Screenshots

Layout builder - Dashboard with some components

Component Picker

Headline Configurator

Headline preview in Layout Builder's Dashboard

All versions of magesuite-content-constructor-admin with dependencies

PHP Build Version
Package Version
No informations.
Composer command for our command line client (download client) This client runs in each environment. You don't need a specific PHP version etc. The first 20 API calls are free. Standard composer command

The package creativestyle/magesuite-content-constructor-admin contains the following files

Loading the files please wait ...