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