Style AEM CIF Core Components style-aem-cif-core-components

Run the following git command so you can clone the project:

$ git clone git@github.com:adobe/aem-cif-guides-venia.git

Build and deploy the project to a local instance of AEM:

$ cd aem-cif-guides-venia/
$ mvn clean install -PautoInstallPackage,cloud

Add the necessary OSGi configurations so you can connect your AEM instance to an Adobe Commerce instance or add the configurations to the created project.

At this point, you should have a working version of a storefront that is connected to an Adobe Commerce instance. Navigate to the US > Home page at: http://localhost:4502/editor.html/content/venia/us/en.html.

You should see that the storefront currently is using the Venia theme. Expanding the Main Menu of the storefront, you should see various categories, indicating that the connection to Adobe Commerce is working.

Navigate and expand the ui.frontend module and expand the folder hierarchy to: ui.frontend/src/main/styles/commerce:

Notice that there are multiple Sass (.scss) files beneath the folder. These files are the Commerce-specific styles for each of the Commerce components.

Open the file _productteaser.scss.

Update the .item__image rule and modify the border rule:

.item__image {
    border: #ea00ff 8px solid; /* <-- modify this rule */
    display: block;
    grid-area: main;
    height: auto;
    opacity: 1;
    transition-duration: 512ms;
    transition-property: opacity, visibility;
    transition-timing-function: ease-out;
    visibility: visible;
    width: 100%;
}

The above rule should add a bold pink border to the Product Teaser Component.

Open a new terminal window and navigate to the ui.frontend folder:

$ cd <project-location>/aem-cif-guides-venia/ui.frontend

Run the following Maven command:

$ mvn clean install
...
[INFO] ------------------------------------------------------------------------
[INFO] BUILD SUCCESS
[INFO] ------------------------------------------------------------------------
[INFO] Total time:  29.497 s
[INFO] Finished at: 2020-08-25T14:30:44-07:00
[INFO] ------------------------------------------------------------------------

Inspect the terminal output. Notice that the Maven command ran several NPM scripts including npm run build. The npm run build command is defined in the package.json file and compiles the webpack project and triggers the client library generation.

Inspect the file ui.frontend/dist/clientlib-site/site.css:

The file is the compiled and minified version of all the Sass files in the project.

Inspect the file ui.frontend/clientlib.config.js.

/* clientlib.config.js*/
...
// Config for `aem-clientlib-generator`
module.exports = {
    context: BUILD_DIR,
    clientLibRoot: CLIENTLIB_DIR,
    libs: [
        {
            ...libsBaseConfig,
            name: 'clientlib-site',
            categories: ['venia.site'],
            dependencies: ['venia.dependencies', 'aem-core-cif-react-components'],
            assets: {
...

This configuration file is for aem-clientlib-generator and determines where and how the compiled CSS and JavaScript are transformed into an AEM client library.

In the ui.apps module, inspect the file: ui.apps/src/main/content/jcr_root/apps/venia/clientlibs/clientlib-site/css/site.css:

This file is site.css copied into the ui.apps project. It is now part of a client library named clientlib-site with a category of venia.site. Once the file is part of the ui.apps module it can be deployed to AEM.

Next inspect the other client libraries generated by the project:

These client libraries are not managed by the ui.frontend module. Instead these client libraries include CSS and JavaScript dependencies provided by Adobe. The definition for these client libraries is in the .content.xml file beneath each folder.

clientlib-base - An empty client library that simply embeds the necessary dependencies from AEM Core Components. The category is venia.base.

clientlib-cif - An empty client library that simply embeds the necessary dependencies from AEM CIF Core Components. The category is venia.cif.

clientlib-grid - Includes the CSS to enable AEM’s Responsive Grid feature. Using the AEM grid enables Layout Mode in the AEM Editor and gives content authors the ability to resize components. The category is venia.grid and is embedded in the venia.base library.

Inspect the files customheaderlibs.html and customfooterlibs.html beneath ui.apps/src/main/content/jcr_root/apps/venia/components/page:

These scripts include venia.base and venia.cif libraries as a part of all pages.

From the terminal, build and deploy the entire project to a local instance of AEM:

$ cd aem-cif-guides-venia/
$ mvn clean install -PautoInstallPackage,cloud

Open a new browser tab and navigate to the Home Page of the site: http://localhost:4502/editor.html/content/venia/us/en.html.

Expand the Asset finder (the side rail) in Edit mode. Switch the Asset filter to Products.

Drag and drop a new Product onto the home page in the main Layout Container:

You should see that the Product Teaser now has a bright pink border based on the CSS rule change created earlier.

Navigate to the Home Page of the site: http://localhost:4502/editor.html/content/venia/us/en.html.

Select the Page Information menu and click View as Published:

This page opens without any of the AEM author JavaScript loaded, as it would appear on the published site. Notice that the url has the query parameter ?wcmmode=disabled appended. When developing CSS and JavaScript, it is a good practice to use this parameter to simplify the page without anything from AEM author.

View the page source and you should be able to identify several client libraries are included:

<!DOCTYPE html>
<html lang="en-US">
<head>
    ...
    <link rel="stylesheet" href="/etc.clientlibs/venia/clientlibs/clientlib-base.min.css" type="text/css">
    <link rel="stylesheet" href="/etc.clientlibs/venia/clientlibs/clientlib-site.min.css" type="text/css">
</head>
...
    <script type="text/javascript" src="/etc.clientlibs/venia/clientlibs/clientlib-site.min.js"></script>
    <script type="text/javascript" src="/etc.clientlibs/core/wcm/components/commons/site/clientlibs/container.min.js"></script>
    <script type="text/javascript" src="/etc.clientlibs/venia/clientlibs/clientlib-base.min.js"></script>
<script type="text/javascript" src="/etc.clientlibs/core/cif/clientlibs/common.min.js"></script>
<script type="text/javascript" src="/etc.clientlibs/venia/clientlibs/clientlib-cif.min.js"></script>
</body>
</html>

Client libraries when delivered to the page are prefixed with /etc.clientlibs and are served via a proxy to avoid exposing anything sensitive in /apps or /libs.

Notice venia/clientlibs/clientlib-site.min.css and venia/clientlibs/clientlib-site.min.js. These files are the compiled CSS and JavaScript files derived from the ui.frontend module.

Navigate to the Home Page of the site within the AEM Editor: http://localhost:4502/editor.html/content/venia/us/en.html.

Select the Page Information menu and click Edit Template:

The Landing Page template is opened that the Home page is based on.

In the upper left-hand corner, select the Page Information icon and click Page Policy.

The Page Policy is opened for the Landing Page template:

On the right-hand side, you can see a listing of Client Libraries categories that are included on all pages that use this template.

• venia.dependencies - Provides any vendor libraries that venia.site depends on.
• venia.site - The category for clientlib-site that the ui.frontend module generates.

Notice that other templates use the same policy, Content Page, Landing Page, and so on. By reusing the same policy, it ensures that the same client libraries are included on all pages.

The advantage of using Templates and Page policies to manage the inclusion of client libraries is that you can change the policy per template. For example, perhaps you are managing two different brands within the same AEM instance. Each brand has its own unique style or theme but the base libraries and code are the same. Another example, if you had a larger client library that you only wanted to appear on certain pages, you could make a unique page policy just for that template.

In the browser navigate to the Home page and View as Published: http://localhost:4502/content/venia/us/en.html?wcmmode=disabled.

View the source of the page and the copy the raw HTML of the page.

Return to the IDE of your choice beneath the ui.frontend module open the file: ui.frontend/src/main/static/index.html

Overwrite the contents of index.html and paste the HTML copied in the previous step.

Find the “includes” for clientlib-site.min.css, clientlib-site.min.js, and remove them.

<head>
    <!-- remove this link -->
    <link rel="stylesheet" href="/etc.clientlibs/venia/clientlibs/clientlib-base.min.css" type="text/css">
    ...
</head>
<body>
    ...
     <!-- remove this link -->
    <script type="text/javascript" src="/etc.clientlibs/venia/clientlibs/clientlib-site.min.js"></script>
</body>

These “includes” are removed because they represent the compiled version of the CSS and JavaScript generated by the ui.frontend module. Leave the other client libraries as they are going to be proxied from the running AEM instance.

Open a new terminal window and navigate into the ui.frontend folder. Run the command npm start:

$ cd ui.frontend
$ npm start

This command starts the webpack-dev-server on http://localhost:8080/

Navigate to the http://localhost:8080/ in a new tab with the same browser as a logged in instance of AEM. You should see the Venia home page via the webpack-dev-server:

Leave the webpack-dev-server running. It is used in the next exercise.

In the ui.frontend module, reopen the file _productteaser.scss at ui.frontend/src/main/styles/commerce/_productteaser.scss.

Make the following changes to the Product Teaser border:

    .item__image {
-       border: #ea00ff 8px solid;
+       border-bottom: 1px solid #c0c0c0;
        display: block;
        grid-area: main;
        height: auto;
        opacity: 1;
        transition-duration: 512ms;
        transition-property: opacity, visibility;
        transition-timing-function: ease-out;
        visibility: visible;
        width: 100%;
    }

Save the changes and the webpack-dev-server should automatically refresh with the new styles.

Add a drop-shadow and include rounded corners to the Product Teaser.

 .item__root {
     position: relative;
     box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);
     transition: 0.3s;
     border-radius: 5px;
     float: left;
     margin-left: 12px;
     margin-right: 12px;
}

.item__root:hover {
   box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2);
}

Update the Product’s name to appear at the bottom of the teaser and modify the text color.

.item__name {
    color: #000;
    display: block;
    float: left;
    font-size: 22px;
    font-weight: 900;
    line-height: 1em;
    padding: 0.75em;
    text-transform: uppercase;
    width: 75%;
}

Update the Product’s price to also appear in the bottom of the teaser and modify the text color.

.price {
    color: #000;
    display: block;
    float: left;
    font-size: 18px;
    font-weight: 900;
    padding: 0.75em;
    padding-bottom: 2em;
    width: 25%;

    ...

Update the media query at the bottom, so you can stack the name and price in screens smaller than 992px.

@media (max-width: 992px) {
    .productteaser .item__name {
        font-size: 18px;
        width: 100%;
    }
    .productteaser .item__price {
        font-size: 14px;
        width: 100%;
    }
}

You should now see the card-style reflected in the webpack-dev-server:

However, the changes have not been deployed to AEM yet. You can download the solution file here.

Deploy the updates to AEM using your Maven skills, from a command-line terminal:

$ cd aem-cif-guides-venia/
$ mvn clean install -PautoInstallPackage,cloud

Return to your browser and refresh the Home page: http://localhost:4502/editor.html/content/venia/us/en.html. You should see the updated product teaser styles applied.

Experiment by adding additional Product teasers. Use Layout Mode to change the width and offset of the components to display multiple teasers in a row.