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.

Table of Contents

Installation

Info
This module is a part of MageSuite metapackage

Installation if metapackage is not used:

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

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:

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

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

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

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

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

Code Block

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

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

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

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

Code Block

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

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

Code Block

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

Code Block

<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

Code Block

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

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

Code Block

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

Code Block

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

Code Block

<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">false</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.

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.

Image Removed

Paragraph

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

Code Block<var name="paragraph">

Video teaser

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

Code Block

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

Image Added

Paragraph

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

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

Image Added

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.

Code Block

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

Image Removed

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.

Code Block


    </var>
    <var name="scrollbar">
        <var name="additional_css_classes"></var>
        <var name="show">false</var>
    </var>
    <var name="product_carouseljs">
        <var name="additional_css_classes"><"slidesWrapperSelector">.cs-products-carousel__slides</var>
        <var name="use_whole_screen">false</var>"slideSelector">.cs-products-carousel__slide</var>
        <var name="usePagination">true</var>
        <var name="navigation">paginationOptions">
            <var name="showfractionBreakpoint">true<>10</var>
            <var name="arrows">fractionPattern">%currentSlide / %allSlides</var>
        </var>
        <var name="prevuseAutorotation">>false</var>
    </var>
    </var>

Image Added

Product finder

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

Code Block

<var name="product_finder">
      <var name="additional_css_classes"></var>
           "></var>
    <var name="button_icon_path">images/icons/iconarrow_arrow-leftprev.svg</var>
            </var>
            <var name="next">
           <var name="js"></var>
</var>

Image Added

Product Grid

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

Code Block

<var name="product_grid">
    <var name="additional_css_classes"></var>
           
    <var name="path">images/icons/icon_arrow-right.svg</lazyload_heros_images">true</var>
            </var>
        </var>
    </var>
    <var name="pagination">
        <var name="additional_css_classes"></var>
    </var>
    cta_button_icon_path">images/icons/arrow_next.svg</var>
</var>

Image AddedImage Added

Product Teaser

This component allows adding full-width product teaser to your page.

Code Block

<var name="scrollbarproduct_teaser">
  
     <var name="additional_css_classes"></var>
   
    <var name="show_swatches">false<>true</var>
 
  </var>     <var name="js">
   show_sku">true</var>
    <var name="slidesWrapperSelector">.cs-products-carousel__slides</var>
   show_rating">true</var>
    <var name="slideSelector">.cs-products-carousel__slide<show_price">true</var>

       <var name="usePaginationshow_addtocart">true</var>
   
    <var name="paginationOptionsdescription">
            <var name="fractionBreakpointshow">10<>true</var>
        <!-- attribute type has to <varbe name="fractionPattern">%currentSlidetext field/text %allSlides</var>
        </var>area/text editor" and its "Used in Product Listing" setting has to be set to TRUE -->
        <var name="useAutorotation">false<attribute_code">short_description</var>
    </var>
</var>

Image Removed

Product finder

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

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.

Code Block
<var name="product_finderseparator"> <var name="additional_css_classes"></var> <var name="button_icon_path">images/icons/arrow_prev.svg</var>show_line">true</var> </var>

Static Block

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

Code Block
<var name="static_block"> <var name="jsadditional_css_classes"></var> </var>

Image Removed

Product Grid

Product Teaser

Separator - Another component which is not a real component. It simply puts "<hr>" Does not have his own filesystem as configurator

Static Block - this just puts CMS Static block, but the content of it cannot be edited directly inside the configurator

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

Note
BE documentation and. review of documentation is needed

Page Comparison

Versions Compared

Old Version 6

New Version 7

Key

Installation

User Guide

Admin settings

Configuration

Instagram Data Feed Component Configuration

CMS Preload Image

Backend

Frontend

Layouts

Category page (catalog_category_view.xml)

CMS page

List test page

Templates

Accordion

Brand Carousel

Button

Category Links

CMS teaser

Custom HTML

Daily Deal teaser

Headline

Hero carousel

Icon

Image teaser

Instagram Feed

Mosaic

Paragraph

Video teaser

Instagram Feed

Mosaic

Paragraph

Product Carousel

Product Carousel

Product finder

Product Grid

Product Teaser

Product finder

Separator

Static Block

Teaser and text

Components list test page