Versions Compared

Key

  • This line was added.
  • This line was removed.
  • Formatting was changed.

...

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

User guide

Link to MageSuite User Guide (if exists) This documents covers developer documentation, for the user guide refer to: 2. Content Management

Development

...

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

Info

Note: scripts within module needs to be builded first (gulp pipeline from theme module doesn’t track mentioned changes), to get your changes visible for you.

To locally build module:
1. enter module directory and then run yarn install
2. after all dependencies are properly installed, run file watcher by command yarn start

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:

Code Block
<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:

Code Block
&__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;
    }
}
Note

When links <a> are added to description/slogan do not link the whole slide. Use Link only CTA button setting in Advanced tab.

...

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:

Code Block
{{block id="teaser_content"}}

...

Note

When links <a> are added to description/slogan do not link the whole slide. Use Link only CTA button setting in Advanced tab.