{"type":"doc","content":[{"type":"paragraph","content":[{"type":"inlineCard","attrs":{"url":"https://github.com/magesuite/content-constructor-admin"}}]},{"type":"paragraph","content":[{"text":"This module adds a functionality of Content Constructor CMS, a powerful tool, for building a content of pages that replaces Magento Page Builder.","type":"text"},{"type":"hardBreak"},{"text":"Admin module stands for the whole configurator of components, used in product edit pages, category pages, CMS blocks, etc.","type":"text"}]},{"type":"paragraph"},{"type":"extension","attrs":{"layout":"default","extensionType":"com.atlassian.confluence.macro.core","extensionKey":"toc","parameters":{"macroParams":{"minLevel":{"value":"1"},"maxLevel":{"value":"7"}},"macroMetadata":{"macroId":{"value":"f794d6ec-1c7c-479d-8be7-a9b825722322"},"schemaVersion":{"value":"1"},"title":"Table of Contents"}},"localId":"02b0cd42-45bd-4a6d-89f1-5fcb35f4bb18"}},{"type":"heading","attrs":{"level":1},"content":[{"text":"Installation","type":"text"}]},{"type":"panel","attrs":{"panelType":"info"},"content":[{"type":"paragraph","content":[{"text":"This module is a part of MageSuite metapackage","type":"text"}]}]},{"type":"codeBlock","content":[{"text":"composer require \"creativestyle/magesuite-content-constructor-admin\" ^5.0.0","type":"text"}]},{"type":"heading","attrs":{"level":1},"content":[{"text":"User guide","type":"text"}]},{"type":"paragraph","content":[{"text":"This documents covers developer documentation, for the user guide refer to: ","type":"text"},{"type":"inlineCard","attrs":{"url":"https://creativestyle.atlassian.net/wiki/spaces/MGS/pages/1990819844"}}]},{"type":"heading","attrs":{"level":1},"content":[{"text":"Development","type":"text"}]},{"type":"extension","attrs":{"layout":"default","extensionType":"com.atlassian.confluence.macro.core","extensionKey":"toc","parameters":{"macroParams":{"minLevel":{"value":"1"},"maxLevel":{"value":"7"}},"macroMetadata":{"macroId":{"value":"5b30e015-db6c-4a40-95fd-818b0cc64a03"},"schemaVersion":{"value":"1"},"title":"Table of Contents"}},"localId":"081a375f-72ef-4e74-a01b-65987c8effbf"}},{"type":"heading","attrs":{"level":2},"content":[{"text":"Definitions:","type":"text"}]},{"type":"bulletList","content":[{"type":"listItem","content":[{"type":"paragraph","content":[{"text":"Content Constructor (CC)","type":"text","marks":[{"type":"strong"}]},{"text":" - a mother (root) component that in fact controls whole CC functionality ","type":"text"},{"text":"(vendor/creativestyle/magesuite-content-constructor-admin/view/adminhtml/templates/constructor.phtml, vendor/creativestyle/magesuite-content-constructor-admin/view/adminhtml/src/content-constructor.ts);","type":"text","marks":[{"type":"em"}]}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"text":"Layout Builder","type":"text","marks":[{"type":"strong"}]},{"text":" - component responsible for displaying CC dashboard and management tools for each component _(vendor/creativestyle/magesuite-content-constructor-admin/view/adminhtml/src/components/","type":"text"},{"text":"layout-builder/*);","type":"text","marks":[{"type":"em"}]}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"text":"Management tools","type":"text","marks":[{"type":"strong"}]},{"text":" - tools that allows to modify component's data or its position. Currently available: ","type":"text"},{"text":"add new component","type":"text","marks":[{"type":"em"}]},{"text":", ","type":"text"},{"text":"move up, move down, edit, delete, duplicate.","type":"text","marks":[{"type":"em"}]},{"text":" Tools are part of ","type":"text"},{"text":"cc-layout-builder","type":"text","marks":[{"type":"em"}]},{"text":" component","type":"text"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"text":"Component Picker -","type":"text","marks":[{"type":"strong"}]},{"text":" when you want to add new component, a modal appears with the ","type":"text"},{"text":"Component Picker","type":"text","marks":[{"type":"em"}]},{"text":" as content. We used here Magento's modal system, but the picker is our solution. The ","type":"text"},{"text":"Component Picker","type":"text","marks":[{"type":"em"}]},{"text":" is a list of available component types you can choose from. _(vendor/creativestyle/magesuite-content-constructor-admin/view/adminhtml/src/components/","type":"text"},{"text":"component-picker/*)","type":"text","marks":[{"type":"em"}]}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"text":"Component Preview","type":"text","marks":[{"type":"strong"}]},{"text":" - 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 ","type":"text"},{"text":"Layout Builder","type":"text","marks":[{"type":"strong"}]}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"text":"Configurator -","type":"text","marks":[{"type":"strong"}]},{"text":" 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:","type":"text"}]},{"type":"bulletList","content":[{"type":"listItem","content":[{"type":"paragraph","content":[{"text":"Headline","type":"text","marks":[{"type":"strong"}]},{"text":" - Simply places headline and optional subheadline","type":"text"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"text":"Button","type":"text","marks":[{"type":"strong"}]},{"text":"-","type":"text","marks":[{"type":"em"}]},{"text":" As name says, it puts the button element. You can set label and target where it should redirect you","type":"text"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"text":"Paragraph","type":"text","marks":[{"type":"strong"}]},{"text":"- 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.","type":"text"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"text":"Static Block","type":"text","marks":[{"type":"strong"}]},{"text":" - this just puts CMS Static block, but content of it cannot be edited directly inside configurator","type":"text"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"text":"Hero carousel","type":"text","marks":[{"type":"strong"}]},{"text":" - 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","type":"text"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"text":"Image Teaser","type":"text","marks":[{"type":"strong"}]},{"text":" - 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.","type":"text"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"text":"Product Carousel","type":"text","marks":[{"type":"strong"}]},{"text":" - display slider with products from choosen category (or multiple categories), sort it, decide how many products you want to show there.","type":"text"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"text":"Brand Carousel","type":"text","marks":[{"type":"strong"}]},{"text":" - 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 ","type":"text"},{"text":"Content Constructor","type":"text","marks":[{"type":"strong"}]},{"text":" and does not have his own filesystem as configurator","type":"text"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"text":"Category links","type":"text","marks":[{"type":"strong"}]},{"text":" - 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","type":"text"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"text":"Separator","type":"text","marks":[{"type":"strong"}]},{"text":" - Another component which is not a real component. It simply puts \"

\" Does not have his own filesystem as configurator","type":"text"}]}]}]}]}]},{"type":"heading","attrs":{"level":3},"content":[{"text":"Files structure","type":"text"}]},{"type":"paragraph","content":[{"text":"All of mentioned components are available in extension files, in 'src' catalog, which is then compiled by gulp and distributed to Magento locations.","type":"text"},{"type":"hardBreak"},{"text":"Paths below are continuation of a base path, that is common for all CC components: ","type":"text"},{"text":"vendor/creativestyle/magesuite-content-constructor-admin/view/adminhtml/src/*.","type":"text","marks":[{"type":"em"}]}]},{"type":"bulletList","content":[{"type":"listItem","content":[{"type":"paragraph","content":[{"text":"Content Constructor - ./","type":"text"},{"text":"content-constructor.ts, ./content-constructor.scss","type":"text","marks":[{"type":"em"}]}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"text":"Layout Builder - _./components/","type":"text"},{"text":"layout-builder/*","type":"text","marks":[{"type":"em"}]}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"text":"Component Picker - _./components/","type":"text"},{"text":"component-picker/*","type":"text","marks":[{"type":"em"}]}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"text":"Configurator components - ","type":"text"},{"text":"./components/{component_name}/configurator/*","type":"text","marks":[{"type":"em"}]}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"text":"Preview components - ","type":"text"},{"text":"./components/{component_name}/preview/*","type":"text","marks":[{"type":"em"}]}]}]}]},{"type":"heading","attrs":{"level":3},"content":[{"text":"How to create component (Frontend part)","type":"text"}]},{"type":"blockquote","content":[{"type":"paragraph","content":[{"text":"Fair warning","type":"text"},{"type":"hardBreak"},{"text":"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 ","type":"text"},{"text":"vendor/creativestyle/magesuite-content-constructor-frontend/view/frontend/templates/component/{component-name}.phtml","type":"text","marks":[{"type":"code"}]},{"text":".","type":"text"}]}]},{"type":"paragraph","content":[{"text":"Content Constructor is fully based on Vue.js so if you're not familiar please read some about it first: ","type":"text"},{"type":"inlineCard","attrs":{"url":"http://vuejs.org/"}},{"text":" ","type":"text"},{"type":"hardBreak"}]},{"type":"panel","attrs":{"panelType":"info"},"content":[{"type":"paragraph","content":[{"text":"Note:","type":"text","marks":[{"type":"strong"}]},{"text":" 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.","type":"text"},{"type":"hardBreak"}]},{"type":"paragraph","content":[{"text":"To locally build module:","type":"text"},{"type":"hardBreak"},{"text":"1. enter module directory and then run ","type":"text"},{"text":"yarn install","type":"text","marks":[{"type":"code"}]},{"type":"hardBreak"},{"text":"2. after all dependencies are properly installed, run file watcher by command ","type":"text"},{"text":"yarn start","type":"text","marks":[{"type":"code"}]}]}]},{"type":"paragraph"},{"type":"heading","attrs":{"level":4},"content":[{"text":"1. Request a BE part of the component","type":"text"}]},{"type":"paragraph","content":[{"text":"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 ","type":"text"},{"text":"headline","type":"text","marks":[{"type":"strong"}]},{"text":" and tell BE guy that this component will be reachable under ","type":"text"},{"text":"headline/configurator/headline.phtml","type":"text","marks":[{"type":"code"}]}]},{"type":"paragraph","content":[{"text":"Also we ask graphic designer for the icon for ","type":"text"},{"text":"component picker","type":"text","marks":[{"type":"strong"}]},{"text":" if we don't have it yet.","type":"text"}]},{"type":"heading","attrs":{"level":4},"content":[{"text":"2. Create base component files","type":"text"}]},{"type":"paragraph","content":[{"text":"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 ","type":"text"},{"text":"vendor/creativestyle/magesuite-content-constructor-admin/view/adminhtml/src/components:","type":"text","marks":[{"type":"em"}]}]},{"type":"bulletList","content":[{"type":"listItem","content":[{"type":"paragraph","content":[{"text":"headline/configurator/headline.phtml","type":"text","marks":[{"type":"em"}]}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"text":"headline/configurator/headline.ts","type":"text","marks":[{"type":"em"}]}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"text":"headline/configurator/headline.scss","type":"text","marks":[{"type":"em"}]}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"text":"headline/preview/headline.ts","type":"text","marks":[{"type":"em"}]}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"text":"headline/preview/headline.scss","type":"text","marks":[{"type":"em"}]}]}]}]},{"type":"paragraph","content":[{"text":"headline/configurator/headline.phtml","type":"text","marks":[{"type":"em"}]}]},{"type":"codeBlock","content":[{"text":"\ngetClasses()?>\" :configuration=\"initialComponentConfiguration\" :cc-config=\"ccConfig\">","type":"text"}]},{"type":"paragraph","content":[{"text":"This file defines usage of a Vue component with ","type":"text"},{"text":":configuration","type":"text","marks":[{"type":"strong"}]},{"text":" prop that will keep our data we provided.","type":"text"},{"type":"hardBreak"},{"text":"It's important when we edit component, because when editing we want all data that are currently there to be already pre-defined.","type":"text"},{"type":"hardBreak"},{"text":"Please pay attention to the tag. It should always contain component name and a ","type":"text"},{"text":"-configurator","type":"text","marks":[{"type":"strong"}]},{"text":" suffix.","type":"text"},{"type":"hardBreak"},{"text":"Next thing is css class of our component, we are prefixing it with ","type":"text"},{"text":"cc-","type":"text","marks":[{"type":"strong"}]},{"text":" to avoid potential conflicts with Magento or 3rd party","type":"text"}]},{"type":"paragraph","content":[{"text":"headline/configurator/headline.ts","type":"text","marks":[{"type":"em"}]}]},{"type":"paragraph","content":[{"text":"First we import ","type":"text"},{"text":"componentConfigurator","type":"text","marks":[{"type":"strong"}]},{"text":" which contains all logic needed for setup component.","type":"text"},{"type":"hardBreak"},{"text":"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.","type":"text"},{"type":"hardBreak"},{"text":"Then we define new Vue component in a ","type":"text"},{"text":"const","type":"text","marks":[{"type":"strong"}]},{"text":" called ","type":"text"},{"text":"headlineConfigurator","type":"text","marks":[{"type":"strong"}]},{"text":" (notice a relation between file name and name of this const) and mix in ","type":"text"},{"text":"componentConfigurator","type":"text","marks":[{"type":"strong"}]},{"text":" into it using native Vue's ","type":"text"},{"text":"mixins","type":"text","marks":[{"type":"strong"}]},{"text":" property.","type":"text"},{"type":"hardBreak"},{"text":"Next step if to setup template with ","type":"text"},{"text":"v-model","type":"text","marks":[{"type":"strong"}]},{"text":" arguments pointing to our props.","type":"text"},{"type":"hardBreak"},{"text":"Then we define our ","type":"text"},{"text":"configuration","type":"text","marks":[{"type":"strong"}]},{"text":" prop (the one we set in phtml as a ","type":"text"},{"text":":configuration","type":"text","marks":[{"type":"strong"}]},{"text":" 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.","type":"text"},{"type":"hardBreak"},{"text":"At the very end we have to export our const so that it can be imported by ","type":"text"},{"text":"content-constructor","type":"text","marks":[{"type":"strong"}]},{"text":".","type":"text"}]},{"type":"paragraph","content":[{"text":"headline/configurator/headline.scss","type":"text","marks":[{"type":"em"}]}]},{"type":"paragraph","content":[{"text":"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 ","type":"text"},{"text":"vendor/creativestyle/magesuite-content-constructor-admin/view/adminhtml/src/content-constructor.scss","type":"text","marks":[{"type":"em"}]},{"text":" to applied your styling","type":"text"}]},{"type":"heading","attrs":{"level":4},"content":[{"text":"3. Confirm that configurator works","type":"text"}]},{"type":"paragraph","content":[{"text":"Now we have to make sure our configurator works , so let's \"plug it\" in a few steps:","type":"text"}]},{"type":"paragraph","content":[{"text":"Import your ","type":"text"},{"text":"headlineConfigurator","type":"text","marks":[{"type":"strong"}]},{"text":" to the ","type":"text"},{"text":"vendor/creativestyle/magesuite-content-constructor-admin/view/adminhtml/src/content-constructor.ts","type":"text","marks":[{"type":"em"}]}]},{"type":"codeBlock","content":[{"text":"...\nimport headlineConfigurator from './components/headline/configurator/headline';\n...","type":"text"}]},{"type":"paragraph","content":[{"text":"Map if to the ","type":"text"},{"text":"components","type":"text","marks":[{"type":"strong"}]},{"text":" property so that Vue could gather all information to run subcomponent of CC. For this find ","type":"text"},{"text":"components","type":"text","marks":[{"type":"strong"}]},{"text":" property of ","type":"text"},{"text":"contentConstructor","type":"text","marks":[{"type":"strong"}]},{"text":" and simply map it.","type":"text"},{"type":"hardBreak"},{"text":"Remember to use the same names you defined in your phtml and ts files:","type":"text"}]},{"type":"codeBlock","content":[{"text":"...\n'headline-configurator': headlineConfigurator\n...","type":"text"}]},{"type":"paragraph","content":[{"text":"Save it => build using gulp/yarn","type":"text"},{"type":"hardBreak"},{"text":"Clear all the caches, pub/static/* and browser cache, check if configurator displays for you after you chose your component from the picker.","type":"text"},{"type":"hardBreak"},{"text":"It should. If not, please check what does your console return for this component.","type":"text"},{"type":"hardBreak"},{"text":"If it's not a JS error but rather ","type":"text"},{"text":"500","type":"text","marks":[{"type":"strong"}]},{"text":" response from the server (it's loaded with AJAX request with GET method) simply check the response content","type":"text"},{"type":"hardBreak"},{"text":"and it should give you the error report number that you can read in your filesystem.","type":"text"}]},{"type":"heading","attrs":{"level":4},"content":[{"text":"4. Prepare a layout builder","type":"text"}]},{"type":"paragraph","content":[{"text":"Now when our configurator is ready and it's working as we wanted, it's time to make a preview for ","type":"text"},{"text":"layout builder","type":"text","marks":[{"type":"strong"}]},{"text":".","type":"text"}]},{"type":"paragraph","content":[{"text":"Let's prepare .ts file with the template and style it a bit if needed:","type":"text"}]},{"type":"paragraph","content":[{"text":"./headline/preview/headline.ts","type":"text","marks":[{"type":"em"}]}]},{"type":"paragraph","content":[{"text":"As you probably noticed we are using similar interface as we already prepared for configurator.","type":"text"},{"type":"hardBreak"},{"text":"It's because we will use those keys to display data provided by the user, means ","type":"text"},{"text":"component's configuration","type":"text","marks":[{"type":"strong"}]},{"text":" which is essence of CC.","type":"text"},{"type":"hardBreak"},{"text":"Also pay attention to the CSS class of this preview component - it should follow the pattern of: ","type":"text"},{"text":"cc-{component-name}-preview.","type":"text","marks":[{"type":"em"}]}]},{"type":"paragraph","content":[{"text":"./_layout-builder/layout-builder.ts.","type":"text","marks":[{"type":"em"}]},{"type":"hardBreak"},{"text":"Let's now setup layout builder for our new preview component.","type":"text"},{"type":"hardBreak"},{"text":"For this we have to import our ts first and then map it again just like we did with configurator:","type":"text"}]},{"type":"codeBlock","content":[{"text":"import headlinePreview from '../headline/preview/headline';","type":"text"}]},{"type":"paragraph","content":[{"text":"map it in components object of ","type":"text"},{"text":"layout builder","type":"text","marks":[{"type":"strong"}]},{"text":" component:","type":"text"}]},{"type":"codeBlock","content":[{"text":"'headline-preview': headlinePreview","type":"text"}]},{"type":"paragraph","content":[{"text":"./headline/preview/headline.scss","type":"text","marks":[{"type":"em"}]},{"type":"hardBreak"},{"text":"This file contains styles for the headline preview.","type":"text"}]},{"type":"paragraph","content":[{"text":"./_layout-builder/layout-builder.scss","type":"text","marks":[{"type":"em"}]},{"type":"hardBreak"},{"text":"To make it work we need to import this scss into our ","type":"text"},{"text":"layout-builder","type":"text","marks":[{"type":"strong"}]},{"text":" component:","type":"text"}]},{"type":"codeBlock","content":[{"text":"@import '../headline/preview/headline';","type":"text"}]},{"type":"paragraph","content":[{"text":"Build assets, clear caches and check if preview is displayed properly","type":"text"}]},{"type":"heading","attrs":{"level":4},"content":[{"text":"6 Add icon to the component picker","type":"text"}]},{"type":"paragraph","content":[{"text":"The very last thing left is to add the icon of our brand new component to the ","type":"text"},{"text":"Category Picker","type":"text","marks":[{"type":"strong"}]},{"text":". As in case of reading previews by layout builder,","type":"text"},{"type":"hardBreak"},{"text":"the icon should be also read automatically, but only in one condition: the name of icon file, there's a pattern for it.","type":"text"}]},{"type":"paragraph","content":[{"text":"Let's call our icon ","type":"text"},{"text":"icon_component-{component-name}.svg","type":"text","marks":[{"type":"em"}]},{"text":" (","type":"text"},{"text":"icon_component-headline.svg","type":"text","marks":[{"type":"em"}]},{"text":") and put it into our sprites directory which is loaded under ","type":"text"},{"text":"./images/sprites/","type":"text","marks":[{"type":"em"}]}]},{"type":"paragraph","content":[{"text":"Rebuild and test.","type":"text"}]},{"type":"paragraph","content":[{"text":"If you want to make the description of this component a bit more descriptive for the user in picker, you can edit it in ","type":"text"},{"text":"vendor/creativestyle/magesuite-content-constructor/src/Components/Picker/PickerAdmin.php.","type":"text","marks":[{"type":"em"}]}]},{"type":"heading","attrs":{"level":4},"content":[{"text":"7. We're done now! Test it deeply (remember about edit, duplicate functionalities etc).","type":"text"}]},{"type":"heading","attrs":{"level":1},"content":[{"text":"Custom Fields","type":"text"}]},{"type":"paragraph","content":[{"text":"Custom fields is a mechanism, that allows adding custom configuration fields to the existing content constructor components configurators, without overwriting whole content constructor admin extension.","type":"text"},{"type":"hardBreak"},{"text":"Complete description about this feature can be found here.","type":"text"}]},{"type":"heading","attrs":{"level":1},"content":[{"text":"Custom CC Components","type":"text"}]},{"type":"paragraph","content":[{"text":"The above guide serves as a point of reference for development of MageSuite core, however, recent release ^4.1.0 introduced a support","type":"text"},{"type":"hardBreak"},{"text":"for Custom Content Contructor Components that can be defined in other - custom modules.","type":"text"}]},{"type":"paragraph","content":[{"text":"Complete description about this feature can be found here.","type":"text"}]},{"type":"heading","attrs":{"level":1},"content":[{"text":"Screenshots","type":"text"}]},{"type":"heading","attrs":{"level":3},"content":[{"text":"Layout builder - Dashboard with some components","type":"text"}]},{"type":"mediaSingle","attrs":{"layout":"center"},"content":[{"type":"media","attrs":{"width":974,"id":"5c2206b2-23b4-4f57-bf72-65eeb96c8c00","collection":"contentId-2249031686","type":"file","height":782}}]},{"type":"paragraph"},{"type":"heading","attrs":{"level":3},"content":[{"text":"Component Picker","type":"text"}]},{"type":"mediaSingle","attrs":{"layout":"center"},"content":[{"type":"media","attrs":{"width":1153,"id":"cc413edc-8f05-4a6a-97a0-f5e147da2eb9","collection":"contentId-2249031686","type":"file","height":923}}]},{"type":"heading","attrs":{"level":3},"content":[{"text":"Headline Configurator","type":"text"}]},{"type":"mediaSingle","attrs":{"layout":"center"},"content":[{"type":"media","attrs":{"width":1154,"id":"9b462748-0fa6-4384-8e5e-17d9653907cc","collection":"contentId-2249031686","type":"file","height":392}}]},{"type":"heading","attrs":{"level":3},"content":[{"text":"Headline preview in Layout Builder's Dashboard","type":"text"}]},{"type":"mediaSingle","attrs":{"layout":"center"},"content":[{"type":"media","attrs":{"width":1154,"id":"4e608a91-37b6-4e60-b1f7-3fb33659cc3c","collection":"contentId-2249031686","type":"file","height":178}}]},{"type":"paragraph"},{"type":"heading","attrs":{"level":1},"content":[{"text":"How to…","type":"text"}]},{"type":"heading","attrs":{"level":2},"content":[{"text":"Enable wysiwyg editor in admin panel for slogan and/or description of image-teaser based components","type":"text"}]},{"type":"mediaSingle","attrs":{"layout":"center"},"content":[{"type":"media","attrs":{"width":1660,"id":"b930f128-b98e-4fcb-98de-dda2a8a6c5bd","collection":"contentId-2249031686","type":"file","height":974}}]},{"type":"paragraph","content":[{"text":"In order to enable the editor in CC configurator edit ","type":"text"},{"text":"etc/view.xml","type":"text","marks":[{"type":"code"}]},{"text":" file of a child theme:","type":"text"}]},{"type":"codeBlock","content":[{"text":"\n \n true\n true\n \n","type":"text"}]},{"type":"paragraph","content":[{"text":"It is also necessary to overwrite slogan and description templates:","type":"text"}]},{"type":"paragraph","content":[{"text":"MageSuite_ContentConstructorFrontend/templates/component/image_teaser/slide_elements/description","type":"text","marks":[{"type":"code"}]}]},{"type":"paragraph","content":[{"text":"MageSuite_ContentConstructorFrontend/templates/component/image_teaser/slide_elements/slogan","type":"text","marks":[{"type":"code"}]}]},{"type":"paragraph","content":[{"text":"and change ","type":"text"},{"text":"

","type":"text","marks":[{"type":"code"}]},{"text":" tag into ","type":"text"},{"text":"div","type":"text","marks":[{"type":"code"}]}]},{"type":"paragraph","content":[{"text":"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:","type":"text"}]},{"type":"codeBlock","content":[{"text":"&__slogan {\n // Headlines, paragraphs and list that can be added via editor should keep slogan styles\n // When styled in editor elements will receive inline styles that will take precedence\n h1,\n h2,\n h3,\n h4,\n h5,\n h6,\n p,\n li {\n font-family: inherit;\n font-size: inherit;\n line-height: inherit;\n font-weight: inherit;\n font-style: inherit;\n }\n}","type":"text"}]},{"type":"panel","attrs":{"panelType":"warning"},"content":[{"type":"paragraph","content":[{"text":"When links are added to description/slogan do not link the whole slide. Use ","type":"text"},{"text":"Link only CTA button","type":"text","marks":[{"type":"code"}]},{"text":" setting in Advanced tab.","type":"text"}]}]},{"type":"mediaSingle","attrs":{"layout":"align-start","width":50.0},"content":[{"type":"media","attrs":{"width":692,"id":"ef8cfa84-6465-4a6e-a09f-bb1cf7b3d9a3","collection":"contentId-2249031686","type":"file","height":653}}]},{"type":"paragraph"},{"type":"heading","attrs":{"level":2},"content":[{"text":"Add static block content as description/slogan content for image-teaser","type":"text"}]},{"type":"paragraph","content":[{"text":"Static block HTML can be inserted as description content by using a directive with block ID:","type":"text"}]},{"type":"codeBlock","content":[{"text":"{{block id=\"teaser_content\"}}","type":"text"}]},{"type":"mediaSingle","attrs":{"layout":"align-start"},"content":[{"type":"media","attrs":{"width":226,"id":"ba7b2499-1ec2-4bd2-9e7d-2e96f70c390c","collection":"contentId-2249031686","type":"file","height":156}}]},{"type":"panel","attrs":{"panelType":"warning"},"content":[{"type":"paragraph","content":[{"text":"When links are added to description/slogan do not link the whole slide. Use ","type":"text"},{"text":"Link only CTA button","type":"text","marks":[{"type":"code"}]},{"text":" setting in Advanced tab.","type":"text"}]}]},{"type":"paragraph"}],"version":1}

Browser not supported