GitHub - magesuite/content-constructor-frontend

Content Constructor Frontend provides templates, models, helpers, and other backend functionalities for displaying components on the frontend.

CC abbreviation stands for Content Constructor.

Installation

Installation if metapackage is not used:

User Guide

2.1. Creating CMS pages using CC components

2.2. Working with existing CC Components

2.16. Video Teasers

Admin settings

Admin settings for Content Constructor are placed in:

Stores -> Configuration -> MageSuite -> Content Constructor

Open

Settings:

Configuration

Instagram Data Feed Component Configuration

Provide a token and user ID in order to display images from the Instagram account

CMS Preload Image

Backend

Frontend

Structure of frontend files (magesuite-content-constructor-frontend/view/frontend )

• layout/

  • catalog_category_view.xml

  • cms_index_index.xml

  • cms_page_view.xml

  • contentconstructor_components_index.xml

• templates

  • cms

  • component

  • product

  • widget

Layouts

Category page (catalog_category_view.xml)

This layout contains 2 containers for CC CMS components:

In this file also teasers template for the Magento products grid is inserted:

The template can be configured in XML, and the option that is more frequently used is:

The other options should most probably stay unchanged as they provide HTML classes and ViewModels compatible with theme-creativeshop

CMS page

cms_index_index.xml and cms_page_view.xml add a block for preloading and image from the first CC component. This feature must be enabled in the admin panel.

List test page

Include a block that lists CC component for testing purposes.

Templates

The template folder contains phtml files for CC components. Almost every component has some configurable option. Default values are defined in theme-creativeshop/src/etc/view.xml These options can be overridden in the child theme under:

<vars module="MageSuite_ContentConstructorFrontend">

Accordion

Allows creating collapsible sections. Handy for FAQ and not only.

Open

Brand Carousel

If the brand extension is enabled an admin editor can put this component to show brand logos as a carousel.

Button

It displays the button element with defined text and the target link with this component.

Category Links

It shows the category label and under it a list of linked subcategories that an editor has chosen. Next to the links "Show all" section can be shown which redirects to the parent category page.

CMS teaser

This component lists CMS pages by tag. The parent component is the image teaser.

See User Guide: 2.6. CMS Page Image Teaser

Custom HTML

This component displays any custom HTML without formatting.

Daily Deal teaser

This component for promoting products with Daily Deal status. It adds a counter that counts the time remaining until the end of a deal.

See: DailyDeal

Headline

Simply places the headline and optional subheadline.

Hero carousel

Adds Hero component which is always 1 slide per view but an editor can choose also a mobile display scenario: remove carousel functionality and display banners one under another or keep slider functionality. The parent component is the image teaser.

Icon

This component allows you to add a teaser with 5-8 images per row, with or without text under the image.

Image teaser

This is a slider with powerful configuration possibilities. It allows an editor to choose how many slides per view to display, whether should it be a slider, full-width or content width, and much more. This is a parent component for all slider-based components.

Demo:

https://demo.magesuite.io/contentconstructor/components/index/page/itbrowserwidth/

https://demo.magesuite.io/contentconstructor/components/index/page/itcontentwidth/

https://demo.magesuite.io/contentconstructor/components/index/page/itbrowserwidthslider/

https://demo.magesuite.io/contentconstructor/components/index/page/itcontentwidthslider/

https://demo.magesuite.io/contentconstructor/components/index/page/contrastoptimizers/

Image teaser slides are composed of smaller pieces -templates that are placed in: magesuite-content-constructor-frontend/view/frontend/templates/component/image_teaser/slide_elements

When there is a need to change a template only a small part of the native code can be overwritten.

Additionally in magesuite-content-constructor-frontend/view/frontend/templates/component/image_teaser/elements/hotspots and magesuite-content-constructor-frontend/view/frontend/templates/component/image_teaser/slide_elements/hotspots hotspots template are provided, that can be used in child projects in order to add additional elements.

Video teaser

Instead of image video can be added as image teaser content. Video teaser has its own configuration entry:

See User guide: 2.16. Video Teasers

Instagram Feed

Displays images from the configured Instagram account.

Mosaic

With the help of the Mosaic CMS component, there is a new and easy way to add asymmetric image teasers to a storefront.

Paragraph

Provides a simple version of WYSIWYG Editor and after saving it creates CMS static block in Magento's system using REST API.

Product Carousel

Displays slider with products from chosen category (or multiple categories), sort it, and an editor can decide how many products to show in the carousel.

Product finder

Allows for the creation of a click-through wizard leading the user to filtered category pages.

Product Grid

This component will display products grid from a specific category. Optionally teasers can be added to the grid.

Part of product grid CSS (CSS grid configuration, teasers aspect-ratio, showing/displaying teasers in the proper places) is generated in phtml template: magesuite-content-constructor-frontend/view/frontend/templates/teasers-css.phtml This file is a style generator for all the teasers of a given instance (either POP or Single PG component).

Product Teaser

This component allows adding full-width product teaser to your page. Technically product teaser is a product tile with type teaser. Most of its elements are common with standard product tile and it keep all product tile functionalities and customizations.

Additionally, in the admin panel, a user can define:

• headline

• subheadline

• background color

• show border around teaser

• show shadow around teaser

Also, a custom description can be added: If a custom description is not present short description or description will be displayed (depending on the project tile design). Custom description takes precedence before other descriptions.

XML

Screens:

Separator

This horizontal line is used to visualize the separation of two components. It can also be used without a line, just as a space.

Static Block

Choose this component to include an existing static block to your CMS page.

Teaser and text

This component allows to add teaser (image) and text and choose their order.

Components list test page

When Enable components list test page is enabled in the admin panel a page with a list of components is available under the route \contentconstructor/components/index.html

It contains links to subpages with CC components configured with dummy data:

Additionally: product carousel, button, category-links, and brand-carousel components are displayed directly on the page.

Example: https://demo.magesuite.io/contentconstructor/components/index

Styling

Scss files for styles for every CC component are located in theme-creativeshop/src/components The naming convention is components/component/component.scss f.e. components/accordion/accordion.scss In every component scss file there is a bunch of useful scss variable, f.e.

In the child theme, part of styling can be done by changing variable values. Other rules should be included below the import of the theme-creativeshop scss file. Below is an example of accordion component styling in a child theme:

Styles for components are not included in the CSS bundles. they are included, separately, once - before the first occurrence of the given component type in HTML.