https://github.com/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

This module is a part of MageSuite metapackage

Installation if metapackage is not used:

composer require "creativestyle/magesuite-content-constructor-frontend" ^

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

Settings:

Configuration

Name	Value
Enable components list test page	Yes / No
Sort Subcategories Alphabetically	Yes / No

Instagram Data Feed Component Configuration

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

Name	Value	Comment
Access Token
Enable Access Token Auto Refresh	default value: No
User ID
Media Api Url	default value: https://graph.instagram.com/%d/media?fields=media_type,media_url,permalink,timestamp&access_token=%s&limit=50
User ID Api Url	default value: https://graph.instagram.com/me?fields=id&access_token=%s

CMS Preload Image

Name	Value	Comment
Enabled	Yes / No	When enabled, it preloads first image from Image Teaser, Hero or Mosaic component on CMS page - Read more

Backend

Backend documentation should be added here

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:

<container name="cc-top" htmlTag="div" htmlClass="cs-page-category__cc-top"/>
<container name="cc-bottom" htmlTag="div" htmlClass="cs-page-category__cc-bottom"/>

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

<block class="Magento\Framework\View\Element\Template" name="category.teasers" template="MageSuite_ContentConstructorFrontend::product/list/category-teasers.phtml">

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

<argument name="show_teasers_only_on_first_page" xsi:type="boolean">false</argument>

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.

<block class="Magento\Framework\View\Element\Template" name="cms.head.preload.image" template="MageSuite_ContentConstructorFrontend::cms/preload_image.phtml">

For Product Page CC container is added in theme-creativeshop. See: theme-creativeshop/src/Magento_Catalog/layout/catalog_product_view.xml

<block name="product.info.content-constructor" as="content-constructor" template="Magento_Catalog::product/view/content-constructor.phtml" group="detailed_info">
    <arguments>
        <argument name="title" translate="true" xsi:type="string">Product Showcase</argument>
        <argument name="sort_order" xsi:type="string">30</argument>
        <argument name="contain_content" xsi:type="boolean">false</argument>
        <argument name="is_collapsible" xsi:type="boolean">false</argument>
        <argument name="in_nav" xsi:type="boolean">false</argument>
    </arguments>
    <container name="cc-content" htmlTag="div" htmlClass="cs-product-details__content-constructor" />
</block>

List test page

Include a block that lists CC component for testing purposes.

<block class="MageSuite\ContentConstructorFrontend\Block\ComponentsList" name="components_list_index" template="MageSuite_ContentConstructorFrontend::creative_components.phtml"/>

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

Do not change HTML classes unless new styling is provided in the child theme.

Accordion

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

<var name="accordion">
    <var name="arrow_icon"></var>
    <var name="headline_tag">div</var>
</var>

Brand Carousel

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

<var name="brand_carousel">
    <var name="additional_css_classes"></var>
    <var name="link_brands">true</var>
    <var name="pagination">
        <var name="additional_css_classes"></var>
    </var>
    <var name="navigation">
        <var name="show">true</var>
        <var name="arrows">
            <var name="prev">
                <var name="additional_css_classes"></var>
                <var name="path">images/icons/icon_arrow-left.svg</var>
            </var>
            <var name="next">
                <var name="additional_css_classes"></var>
                <var name="path">images/icons/icon_arrow-right.svg</var>
            </var>
        </var>
    </var>
    <var name="js">
        <var name="slidesWrapperSelector">.cs-brand-carousel__slides</var>
        <var name="slideSelector">.cs-brand-carousel__slide</var>
        <var name="usePagination">true</var>
        <var name="paginationOptions">
            <var name="fractionBreakpoint">10</var>
            <var name="fractionPattern">%currentSlide / %allSlides</var>
        </var>
        <var name="useAutorotation">false</var>
        <var name="columnsConfig">
            <var name="phone">2</var>
            <var name="phoneLg">3</var>
            <var name="tablet">5</var>
            <var name="laptop">8</var>
            <var name="laptopLg">8</var>
            <var name="desktop">8</var>
            <var name="tv">8</var>
        </var>
    </var>
</var>

Button

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

<var name="additional_css_classes"></var>
    <var name="icon_path">images/icons/arrow_next.svg</var>
</var>

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.

<var name="category_links">
    <var name="additional_css_classes"></var>
    <var name="show_title">true</var>
    <var name="hide_links_breakpoints">
        <var name="tablet">
            <var name="additional_css_classes">cs-category-links__list-item--hide-tablet</var>
            <var name="hide_from">5</var>
        </var>
        <var name="laptop">
            <var name="additional_css_classes">cs-category-links__list-item--hide-laptop</var>
            <var name="hide_from">7</var>
        </var>
        <var name="laptopLg">
            <var name="additional_css_classes">cs-category-links__list-item--hide-laptopLg</var>
            <var name="hide_from">8</var>
        </var>
        <var name="desktop">
            <var name="additional_css_classes">cs-category-links__list-item--hide-desktop</var>
            <var name="hide_from">10</var>
        </var>
    </var>
    <var name="all_products">
        <var name="label">All Products</var>
        <var name="icon">images/icons/icon_arrow-right.svg</var>
    </var>
</var>

CMS teaser

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

<var name="cms_teaser">
    <var name="additional_css_classes"></var>
    <var name="content_placement">over</var>
    <var name="pagination">
        <var name="additional_css_classes"></var>
    </var>
    <var name="navigation">
        <var name="show">true</var>
        <var name="arrows">
            <var name="prev">
                <var name="additional_css_classes"></var>
                <var name="path">images/icons/icon_arrow-left.svg</var>
            </var>
            <var name="next">
                <var name="additional_css_classes"></var>
                <var name="path">images/icons/icon_arrow-right.svg</var>
            </var>
        </var>
    </var>
    <var name="items_options">
        <var name="image">
            <var name="aspect_ratio">640:539</var>
        </var>
        <var name="optimizers">
            <var name="color_scheme">dark</var>
            <var name="mirror_image">0</var>
            <var name="scenarios">
                <var name="none">
                    <var name="enabled">1</var>
                </var>
                <var name="overlay">
                    <var name="enabled">0</var>
                    <var name="intensity">50</var>
                </var>
                <var name="gradient">
                    <var name="enabled">0</var>
                    <var name="intensity">50</var>
                    <var name="direction">
                        <var name="x">1</var>
                        <var name="y">1</var>
                    </var>
                </var>
                <var name="container">
                    <var name="enabled">0</var>
                    <var name="intensity">50</var>
                </var>
                <var name="text_shadow">
                    <var name="enabled">0</var>
                    <var name="intensity">50</var>
                </var>
            </var>
        </var>
    </var>
    <var name="cta_button_icon_path">images/icons/arrow_next.svg</var>
</var>

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

<var name="daily_deal_teaser">
    <var name="additional_css_classes"></var>
    <var name="lazyload_image">true</var>
    <var name="show_brand">false</var>
    <var name="show_rating">true</var>
    <var name="show_available_amount_section">true</var>
    <var name="addtocart_button">
        <var name="show">true</var>
        <var name="icon_path">images/icons/arrow_next.svg</var>
    </var>
    <var name="discount_badge">
        <var name="show">true</var>
        <var name="show_sale_label">false</var>
        <var name="show_percentage">true</var>
        <var name="prefix">-</var>
        <var name="suffix">%</var>
    </var>
    <var name="expired_notice">
        <var name="show">false</var>
        <var name="content"></var>
    </var>
    <var name="js"></var>
</var>

Headline

Simply places the headline and optional subheadline.

<var name="headline">
    <var name="additional_css_classes"></var>
</var>

Headline tag can be configured for each headlinee component in the admin panel.

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.

<var name="hero_carousel">
    <var name="additional_css_classes">cs-hero--centered</var>
    <var name="teaser_width">container-slider</var><!-- container-slider or window-slider -->
    <var name="content_placement">over</var>
    <var name="cta_button_icon_path">images/icons/hero/arrow_next.svg</var>
    <var name="sizes">(max-width: 48em) 100vw, (max-width: 1200px) 80vw, 960px</var>
    <var name="use_whole_screen">false</var> <!-- applies to container-width slider (desktop)-->
    <var name="navigation">
        <var name="show">true</var>
        <var name="arrows">
            <var name="prev">
                <var name="additional_css_classes"></var>
                <var name="path">images/icons/icon_arrow-left.svg</var>
            </var>
            <var name="next">
                <var name="additional_css_classes"></var>
                <var name="path">images/icons/icon_arrow-right.svg</var>
            </var>
        </var>
    </var>
    <var name="pagination">
        <var name="additional_css_classes"></var>
    </var>
    <var name="js">
        <var name="usePagination">true</var>
        <var name="useAutorotation">true</var>
    </var>
</var>

Icon

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

<var name="icon">
    <var name="navigation">
        <var name="show">true</var>
        <var name="arrows">
            <var name="prev">
                <var name="additional_css_classes"></var>
                <var name="path">images/icons/icon_arrow-left.svg</var>
            </var>
            <var name="next">
                <var name="additional_css_classes"></var>
                <var name="path">images/icons/icon_arrow-right.svg</var>
            </var>
        </var>
    </var>
    <var name="js">
        <var name="usePagination">true</var>
        <var name="paginationOptions">
            <var name="fractionBreakpoint">9</var>
            <var name="fractionPattern">%currentSlide / %allSlides</var>
        </var>
        <!-- Make sure you won't affect CC settings (for icon component they define columnsConfig for laptop+ resolutions) -->
        <var name="columnsConfig">
            <var name="0px">2</var>
            <var name="phone">2</var>
            <var name="phoneLg">3</var>
            <var name="tablet">5</var>
        </var>
    </var>
</var>

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.

<var name="image_teaser">
    <var name="additional_css_classes"></var>
    <var name="cta_button_icon_path">images/icons/arrow_next.svg</var>
    <var name="use_whole_screen">false</var> <!-- applies to container-width slider (desktop)-->
    <var name="navigation">
        <var name="show">true</var>
        <var name="arrows">
            <var name="prev">
                <var name="additional_css_classes"></var>
                <var name="path">images/icons/icon_arrow-left.svg</var>
            </var>
            <var name="next">
                <var name="additional_css_classes"></var>
                <var name="path">images/icons/icon_arrow-right.svg</var>
            </var>
        </var>
    </var>
    <var name="pagination">
        <var name="additional_css_classes"></var>
    </var>
    <var name="js">
        <var name="usePagination">true</var>
        <var name="paginationOptions">
            <var name="fractionBreakpoint">9</var>
            <var name="fractionPattern">%currentSlide / %allSlides</var>
        </var>
        <var name="useAutorotation">true</var>
        <var name="autorotationOptions">
            <var name="useAutorotationAlsoForTouchScreens">true</var>
            <var name="delay">5000</var>
        </var>
    </var>
</var>

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:

<var name="video_teaser">
    <var name="youtube">
        <var name="loop">1</var> <!-- Play the video again when it reaches the end - not available as player_vars for single YouTube videos -->
        <var name="width">100%</var>
        <var name="height">100%</var>
        <var name="player_vars"> <!-- https://developers.google.com/youtube/player_parameters -->
            <var name="playsinline">1</var> <!-- Play video inline on mobile devices -->
            <var name="autoplay">1</var> <!-- Automatically start playback of the video -->
            <var name="mute">1</var> <!-- Mute video on load -->
            <var name="controls">0</var> <!-- Show all elements in player -->
            <var name="disablekb">1</var> <!-- Disable keyboard control -->
            <var name="rel">0</var> <!-- Show related videos -->
            <var name="modestbranding">1</var> <!-- Hide YouTube branding -->
        </var>
    </var>
    <var name="vimeo">
        <var name="width">100%</var>
        <var name="height">100%</var>
        <var name="player_vars"> <!-- https://developer.vimeo.com/player/sdk/embed -->
            <var name="playsinline">1</var> <!-- Play video inline on mobile devices -->
            <var name="autoplay">1</var> <!-- Automatically start playback of the video -->
            <var name="muted">1</var> <!-- Mute video on load -->
            <var name="controls">0</var> <!-- Show all elements in player -->
            <var name="loop">1</var> <!-- Play the video again when it reaches the end -->
            <var name="responsive">1</var> <!-- Resize according to the parent element -->
        </var>
    </var>
    <var name="facebook">
        <var name="app_id"></var> <!-- Facebook developers application ID -->
        <var name="app_version"></var> <!-- Facebook developers application version, example: v3.2 -->
        <var name="width">auto</var> <!-- Facebook does not accept % values -->
        <var name="player_vars"> <!-- https://developers.facebook.com/docs/plugins/embedded-video-player#settings -->
            <var name="autoplay">1</var> <!-- Automatically start playback of the video -->
            <var name="mute">1</var> <!-- Mute video on load -->
            <var name="controls">0</var> <!-- Show all elements in player -->
            <var name="loop">1</var> <!-- Play the video again when it reaches the end -->
        </var>
    </var>
    <var name="file">
        <var name="width">100%</var>
        <var name="height">auto</var>
        <var name="player_vars">
            <var name="playsinline">1</var> <!-- Play video inline on mobile devices -->
            <var name="autoplay">1</var> <!-- Automatically start playback of the video -->
            <var name="controls">0</var> <!-- Show all elements in player -->
            <var name="muted">1</var> <!-- Mute video on load -->
            <var name="loop">1</var> <!-- Play the video again when it reaches the end -->
        </var>
    </var>
</var>

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.

<var name="paragraph">
    <var name="additional_css_classes"></var>
</var>

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.

<var name="product_carousel">
    <var name="additional_css_classes"></var>
    <var name="use_whole_screen">false</var>
    <var name="navigation">
        <var name="show">true</var>
        <var name="arrows">
            <var name="prev">
                <var name="additional_css_classes"></var>
                <var name="path">images/icons/icon_arrow-left.svg</var>
            </var>
            <var name="next">
                <var name="additional_css_classes"></var>
                <var name="path">images/icons/icon_arrow-right.svg</var>
            </var>
        </var>
    </var>
    <var name="pagination">
        <var name="additional_css_classes"></var>
    </var>
    <var name="scrollbar">
        <var name="additional_css_classes"></var>
        <var name="show">false</var>
    </var>
    <var name="js">
        <var name="slidesWrapperSelector">.cs-products-carousel__slides</var>
        <var name="slideSelector">.cs-products-carousel__slide</var>
        <var name="usePagination">true</var>
        <var name="paginationOptions">
            <var name="fractionBreakpoint">10</var>
            <var name="fractionPattern">%currentSlide / %allSlides</var>
        </var>
        <var name="useAutorotation">false</var>
    </var>
</var>

Product finder

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

<var name="product_finder">
    <var name="additional_css_classes"></var>
    <var name="button_icon_path">images/icons/arrow_prev.svg</var>
    <var name="js"></var>
</var>

Product Grid

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

<var name="product_grid">
    <var name="additional_css_classes"></var>
    <var name="lazyload_heros_images">true</var>
    <var name="cta_button_icon_path">images/icons/arrow_next.svg</var>
</var>

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.

<var name="product_teaser">
    <var name="additional_css_classes"></var>
    <var name="show_swatches">true</var>
    <var name="show_sku">true</var>
    <var name="show_rating">true</var>
    <var name="show_price">true</var>
    <var name="show_addtocart">true</var>
    <var name="description">
        <var name="show">true</var>
        <!-- attribute type has to be "text field/text area/text editor" and its "Used in Product Listing" setting has to be set to TRUE -->
        <var name="attribute_code">short_description</var>
    </var>
</var>

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.

<var name="separator">
    <var name="additional_css_classes"></var>
    <var name="show_line">true</var>
</var>

Static Block

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

<var name="static_block">
    <var name="additional_css_classes"></var>
</var>

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:

Hero Carousel Large teaser mobile scenario
Hero Carousel Slider mobile scenario
Image Teaser Browser width
Image Teaser Content width
Image Teaser Browser width slider
Image Teaser Content width slider
Contrast Optimizers
Teaser & Text Browser width
Teaser & Text Content width
Icon
Product grid without image teaser
Product grid with image teaser on the left

Product grid with image teaser on the right
Product grid with image teaser in the middle
Mosaic - Content width 2/3 Teaser on Left
Mosaic - Content width 2/3 Teaser on Right
Mosaic - Browser width 2/3 Teaser on Left
Mosaic - Browser width 2/3 Teaser on Right
Accordion - Container Width
Accordion - Optimal Reading Width
Headline
Paragraph
Product Finder
Instagram

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.

$accordion_group-margin: 0 0 3rem !default;

$accordion_group-headline-margin: 0 0 0.5rem !default;
$accordion_group-headline-font-size: $font-size_headline-3 !default;

$accordion_item-separator: 1px solid $color_border-500 !default;
$accordion_item-font-weight: inherit !default;
$accordion_item-padding: 1rem 0 !default;

$accordion_item-headline-icon-use-pseudoicon-instead-svg: true !default;
$accordion_item-headline-icon-position: left !default;
$accordion_item-headline-icon-spacing-from-text: 1rem !default;
$accordion_item-headline-icon-width: 1rem !default;
$accordion_item-headline-icon-height: 0.2rem !default;
$accordion_item-headline-icon-fill: $color_primary-500 !default;
$accordion_item-headline-icon-fill--hover: $accordion_item-headline-icon-fill !default;
$accordion_item--active-headline-icon-fill: $accordion_item-headline-icon-fill !default;
$accordion_item--active-headline-icon-rotate: true !default;
$accordion_item--active-content-display: block !default;

// Below navigation_icon settings are usable only if you use pseudoicon
$accordion_item-headline-icon-type: 'arrow' !default;
$accordion_item-headline-icon-default--opened: 'up' !default;
$accordion_item-headline-icon-default--closed: 'down' !default;

$accordion_item-headline-icon-position-side-offset: 1.5rem !default;
$accordion_item-headline-icon-arrow-left-offset: $accordion_item-headline-icon-position-side-offset +
    0.6rem !default;

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:

@import 'config/variables';

$accordion_item-padding: 1.5rem 0;
$accordion_item-headline-icon-position: right;
$accordion_item-headline-icon-spacing-from-text: 0.5rem;
$accordion_item-headline-icon-height: 1px;
$accordion_item-headline-icon-fill: $color_text-500;

@import '~Creativeshop/components/accordion/accordion';

.#{$ns}accordion {
    &__item {
        @include media('>=tablet') {
            padding: 2.4rem 0;
        }

        &-headline {
            font-weight: 700;
        }

        &-content {
            @include media('>=tablet') {
                margin-top: 2rem;
            }
        }
    }

    &--mode-optimal {
        max-width: 110rem;
    }
}

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.

BE documentation and review of documentation is needed