Skip to end of metadata
Go to start of metadata

You are viewing an old version of this page. View the current version.

Compare with Current View Page History

« Previous Version 7 Next »

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

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>

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

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>

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

BE documentation and. review of documentation is needed

  • No labels