### Maven Build Output Example

Source: https://github.com/adobedocs/commerce-cif-documentation/blob/master/getting-started/02-new-cif-project.md

This is an example of the output generated after running the Maven build command. It shows the status of each sub-module build, indicating success or failure, and the total build time.

```text
...
Package installed in 6388ms.
[INFO] ------------------------------------------------------------------------
[INFO] Reactor Summary:
[INFO]
[INFO] acme-store ......................................... SUCCESS [  0.306 s]
[INFO] Acme Store - Core .................................. SUCCESS [  7.399 s]
[INFO] Acme Store - UI apps ............................... SUCCESS [  3.211 s]
[INFO] Acme Store - UI content ............................ SUCCESS [  1.069 s]
[INFO] Acme Store - Sample Content ........................ SUCCESS [  2.257 s]
[INFO] Acme Store - All-in-one package .................... SUCCESS [  8.572 s]
[INFO] ------------------------------------------------------------------------
[INFO] BUILD SUCCESS
[INFO] ------------------------------------------------------------------------
[INFO] Total time: 24.882 s
[INFO] Finished at: 201X-XX-XX
[INFO] Final Memory: 46M/167M
[INFO] ------------------------------------------------------------------------
```

--------------------------------

### Verify Maven Installation

Source: https://github.com/adobedocs/commerce-cif-documentation/blob/master/getting-started/02-new-cif-project.md

Checks if Apache Maven is installed and accessible from the command line. Displays the Maven version, home directory, and Java version used.

```shell
mvn -version
  Apache Maven 3.3.9
  Maven home: /Library/apache-maven-3.3.9
  Java version: 11.0.2, vendor: Oracle Corporation
  Java home: /Library/Java/JavaVirtualMachines/jdk-11.0.2.jdk/Contents/Home
```

--------------------------------

### Build and Deploy Venia Project with Maven

Source: https://github.com/adobedocs/commerce-cif-documentation/blob/master/tutorials/04-style-cif-component.md

Builds and deploys the Venia project to a local AEM instance using Maven. This command compiles the project and installs the necessary packages.

```shell
cd aem-cif-guides-venia/
mvn clean install -PautoInstallPackage,classic
```

--------------------------------

### Start Webpack Development Server

Source: https://github.com/adobedocs/commerce-cif-documentation/blob/master/tutorials/04-style-cif-component.md

This command initiates the webpack development server from the `ui.frontend` directory. This server allows for rapid front-end development by proxying assets from AEM and enabling live reloading for style and JavaScript changes. Ensure you are in the `ui.frontend` directory before running this command.

```shell
cd ui.frontend
npm start
```

--------------------------------

### Build and Deploy CIF Project with Maven

Source: https://context7.com/adobedocs/commerce-cif-documentation/llms.txt

This section outlines Maven commands for building and deploying the CIF project. It includes cloning the repository, deploying to AEM 6.x on-premise using specific profiles, building the `ui.frontend` module independently, and starting the webpack dev server for rapid front-end development. Verification steps for AEM instances are also provided.

```shell
# Clone the Venia reference project
git clone git@github.com:adobe/aem-cif-guides-venia.git
cd aem-cif-guides-venia/

# Build and deploy to AEM 6.x on-premise
mvn clean install -PautoInstallPackage,classic

# Build only the ui.frontend module
cd ui.frontend
mvn clean install

# Start webpack dev server for rapid front-end development
npm start
# Server runs at http://localhost:8080/

# Verify deployment in AEM
# Package Manager: http://localhost:4502/crx/packmgr/index.jsp
# OSGi Config: http://localhost:4502/system/console/configMgr
# CIF Console: http://localhost:4502/libs/commerce/gui/content/configuration.html/conf
# Products Console: http://localhost:4502/aem/products.html/var/commerce/products
```

--------------------------------

### Build Frontend and Generate Client Libraries (Maven)

Source: https://github.com/adobedocs/commerce-cif-documentation/blob/master/tutorials/04-style-cif-component.md

Executes a Maven command to clean and install the `ui.frontend` module. This process compiles webpack projects, triggers NPM scripts like `npm run build`, and generates AEM client libraries.

```shell
mvn clean install
```

--------------------------------

### Deploying AEM Package (Shell)

Source: https://github.com/adobedocs/commerce-cif-documentation/blob/master/tutorials/05-customize-cif-components.md

This shell command deploys the AEM package to a local AEM instance using Maven. It cleans the project, installs the package, and targets both auto-installation and classic modes.

```shell
$ cd aem-cif-guides-venia/
$ mvn clean install -PautoInstallPackage,classic
```

--------------------------------

### Verify Client Library Inclusion in HTML

Source: https://github.com/adobedocs/commerce-cif-documentation/blob/master/tutorials/04-style-cif-component.md

Example HTML structure showing the inclusion of various client libraries (CSS and JavaScript) for AEM CIF. These libraries are served via '/etc.clientlibs' to abstract the source location.

```html
<!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>
```

--------------------------------

### Generate New CIF Project with Maven Archetype

Source: https://context7.com/adobedocs/commerce-cif-documentation/llms.txt

This snippet demonstrates how to generate a new AEM CIF project using the Maven archetype. It includes verifying Maven installation, interactively generating the project with specified parameters, and building/deploying it to a local AEM instance. The output shows the successful build of various project modules.

```shell
# Verify Maven installation
mvn -version

# Generate new CIF project interactively
mvn archetype:generate \
  -DarchetypeGroupId=com.adobe.commerce.cif \
  -DarchetypeArtifactId=cif-project-archetype \
  -DoptionEmbedConnector=y \
  -DarchetypeVersion=0.11.0

# Example parameter values during generation:
# groupId: com.acme.cif
# appsFolderName: acme
# artifactId: acme-store
# version: 0.0.1-SNAPSHOT
# package: com.acme.cif
# artifactName: Acme Store
# componentGroupName: Acme.Content
# confFolderName: acme
# contentFolderName: acme
# optionAemVersion: 6.5.0
# optionIncludeExamples: y
# packageGroup: acme
# siteName: Acme Store

# Build and deploy to local AEM instance
cd acme-store/ \
mvn clean install -PautoInstallAll

# Expected output:
# [INFO] Reactor Summary:
# [INFO] acme-store ......................................... SUCCESS
# [INFO] Acme Store - Core .................................. SUCCESS
# [INFO] Acme Store - UI apps ............................... SUCCESS
# [INFO] Acme Store - UI content ............................ SUCCESS
# [INFO] Acme Store - Sample Content ........................ SUCCESS
# [INFO] Acme Store - All-in-one package .................... SUCCESS
# [INFO] BUILD SUCCESS
```

--------------------------------

### Configure CIF Cloud Service in XML

Source: https://context7.com/adobedocs/commerce-cif-documentation/llms.txt

This XML configuration binds AEM content to a specific Magento store and root category. It is placed in the ui.content module and references the GraphQL client identifier. This setup is essential for integrating AEM with Adobe Commerce.

```xml
<!-- File: ui.content/src/main/content/jcr_root/conf/acme/settings/cloudconfigs/commerce/.content.xml -->

<?xml version="1.0" encoding="UTF-8"?>
<jcr:root xmlns:sling="http://sling.apache.org/jcr/sling/1.0"
          xmlns:cq="http://www.day.com/jcr/cq/1.0"
          xmlns:jcr="http://www.jcp.org/jcr/1.0"
    jcr:primaryType="cq:Page">
    <jcr:content
        cq:catalogDataResourceProviderFactory="magento-graphql"
        cq:catalogIdentifier="default"
        cq:graphqlClient="default"
        cq:template="/libs/commerce/gui/components/configuration/page/template"
        jcr:language="en_us"
        jcr:primaryType="cq:PageContent"
        jcr:title="Commerce"
        sling:configPropertyInherit="true"
        sling:resourceType="commerce/gui/components/configuration/page"
        magentoRootCategoryId="2"
        magentoStore="default"
        magentoGraphqlEndpoint="/magento/graphql"/>
</jcr:root>
```

--------------------------------

### Build and Deploy Project with Maven

Source: https://github.com/adobedocs/commerce-cif-documentation/blob/master/getting-started/02-new-cif-project.md

This command demonstrates how to build and deploy the entire Adobe Commerce Integration Framework project to a local AEM instance using Maven. It cleans existing artifacts, recompiles, and packages all modules into a deployable AEM package.

```shell
$ cd acme-store/
$ mvn clean install -PautoInstallAll
```

--------------------------------

### Clone Venia Project using Git

Source: https://github.com/adobedocs/commerce-cif-documentation/blob/master/tutorials/04-style-cif-component.md

Clones the Adobe CIF Venia reference project from GitHub. This is the starting point for customizing CIF Core Component styles.

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

--------------------------------

### Navigate to Project Directory

Source: https://github.com/adobedocs/commerce-cif-documentation/blob/master/getting-started/02-new-cif-project.md

Changes the current directory to the specified location where the new project will be generated. This is a standard shell command.

```shell
cd ~/src
```

--------------------------------

### Configure URL Provider for SEO-Friendly URLs

Source: https://context7.com/adobedocs/commerce-cif-documentation/llms.txt

Configures the URL Provider Service for SEO-optimized product and category page URLs. This OSGi configuration defines the URL formats using placeholders for page and URL key/path. It supports Sling Mapping for advanced URL rewriting.

```properties
# File: ui.apps/src/main/content/jcr_root/apps/acme/config/com.adobe.cq.commerce.core.components.internal.services.UrlProviderImpl.config

productPageUrlFormat="{{page}}.html/{{url_key}}.html"
categoryPageUrlFormat="{{page}}.html/{{url_path}}.html"
```

--------------------------------

### Navigate to ui.frontend Folder (Shell)

Source: https://github.com/adobedocs/commerce-cif-documentation/blob/master/tutorials/04-style-cif-component.md

Command to change the current directory to the `ui.frontend` folder within the project. This is a prerequisite for running frontend build commands.

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

--------------------------------

### Product Teaser HTL Script Initialization (HTML)

Source: https://github.com/adobedocs/commerce-cif-documentation/blob/master/tutorials/05-customize-cif-components.md

This HTL script snippet initializes the Product Teaser component. It uses Sling Models (`com.venia.core.models.commerce.MyProductTeaser`) and includes references to common templates for rendering the component's content and actions.

```html
<!--/* productteaser.html */-->
<sly data-sly-use.product="com.venia.core.models.commerce.MyProductTeaser"
    data-sly-use.templates="core/wcm/components/commons/v1/templates.html"
    data-sly-use.actionsTpl="actions.html"
    data-sly-test.isConfigured="${properties.selection}"
    data-sly-test.hasProduct="${product.url}">
```

--------------------------------

### Configure GraphQL Client OSGi Service

Source: https://context7.com/adobedocs/commerce-cif-documentation/llms.txt

This configuration snippet sets up the GraphQL client OSGi service to connect AEM with a Magento GraphQL endpoint. It is provided as a properties file for the ui.apps module and supports multiple store configurations using factory patterns. Key parameters include request timeouts, HTTP method, headers, and certificate acceptance.

```properties
# File: ui.apps/src/main/content/jcr_root/apps/acme/config/com.adobe.cq.commerce.graphql.client.impl.GraphqlClientImpl-acmestore.config

requestPoolTimeout=I"2000"
url="https://your-magento-host.com/graphql"
httpMethod="POST"
httpHeaders=[""]
socketTimeout=I"5000"
acceptSelfSignedCertificates=B"false"
identifier="default"
maxHttpConnections=I"20"
connectionTimeout=I"5000"
```

--------------------------------

### Style Product Teaser Component with Sass

Source: https://context7.com/adobedocs/commerce-cif-documentation/llms.txt

This Sass file defines the styling for the Product Teaser component. It uses CSS classes to control the layout, appearance, and responsiveness of the component, including badges, images, names, and prices. Styles are organized within the `ui.frontend` module.

```scss
/* File: ui.frontend/src/main/styles/commerce/_productteaser.scss */

.productteaser {
    .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);
    }

    .item__image {
        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%;
    }

    .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%;
    }

    .item__eco {
        width: 60px;
        height: 60px;
        left: 0px;
        overflow: hidden;
        position: absolute;
        padding: 5px;

        span {
            display: block;
            position: absolute;
            width: 45px;
            height: 45px;
            text-indent: -9999px;
            background: no-repeat center center url('../resources/images/eco_friendly.svg');
        }
    }

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

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

--------------------------------

### Generate CIF Project using Maven Archetype

Source: https://github.com/adobedocs/commerce-cif-documentation/blob/master/getting-started/02-new-cif-project.md

Initiates the creation of a new CIF project using the `cif-project-archetype`. Requires specifying the archetype version and optionally embedding the CIF connector.

```shell
mvn archetype:generate \
-DarchetypeGroupId=com.adobe.commerce.cif \
-DarchetypeArtifactId=cif-project-archetype \
-DoptionEmbedConnector=y \
-DarchetypeVersion=x.y.z
```

--------------------------------

### Extend Product Teaser Sling Model with Custom Attributes (Java)

Source: https://context7.com/adobedocs/commerce-cif-documentation/llms.txt

This Java code demonstrates extending the Product Teaser Sling Model to include a custom 'eco-friendly' attribute. It defines an interface and an implementation that modifies the product query to fetch the custom attribute and provides a method to check its value. Dependencies include Adobe CQ Commerce Core Components and Sling Models.

```java
// File: core/src/main/java/com/venia/core/models/commerce/MyProductTeaser.java
package com.venia.core.models.commerce;

import com.adobe.cq.commerce.core.components.models.productteaser.ProductTeaser;
import org.osgi.annotation.versioning.ProviderType;

@ProviderType
public interface MyProductTeaser extends ProductTeaser {
    public Boolean isShowBadge();
    public Boolean isEcoFriendly();
}

// File: core/src/main/java/com/venia/core/models/commerce/MyProductTeaserImpl.java
package com.venia.core.models.commerce;

import com.adobe.cq.commerce.core.components.models.productteaser.ProductTeaser;
import com.adobe.cq.commerce.core.components.models.retriever.AbstractProductRetriever;
import com.adobe.cq.commerce.magento.graphql.gson.Error.SchemaViolationError;
import org.apache.sling.api.SlingHttpServletRequest;
import org.apache.sling.models.annotations.Model;
import org.apache.sling.models.annotations.Via;
import org.apache.sling.models.annotations.injectorspecific.Self;
import org.apache.sling.models.annotations.via.ResourceSuperType;
import org.slf4j.Logger;
import org.slf4j.LoggerFactory;
import javax.annotation.PostConstruct;

@Model(adaptables = SlingHttpServletRequest.class,
       adapters = MyProductTeaser.class,
       resourceType = MyProductTeaserImpl.RESOURCE_TYPE)
public class MyProductTeaserImpl implements MyProductTeaser {

    protected static final String RESOURCE_TYPE = "venia/components/commerce/productteaser";
    private static final String ECO_FRIENDLY_ATTRIBUTE = "eco_friendly";
    private static final Logger LOGGER = LoggerFactory.getLogger(MyProductTeaserImpl.class);

    @Self
    @Via(type = ResourceSuperType.class)
    private ProductTeaser productTeaser;

    private AbstractProductRetriever productRetriever;

    @PostConstruct
    public void initModel() {
        productRetriever = productTeaser.getProductRetriever();
        if (productRetriever != null) {
            productRetriever.extendProductQueryWith(p -> p
                .createdAt()
                .addCustomSimpleField(ECO_FRIENDLY_ATTRIBUTE)
            );
        }
    }

    @Override
    public Boolean isEcoFriendly() {
        Integer ecoFriendlyValue;
        try {
            ecoFriendlyValue = productRetriever.fetchProduct().getAsInteger(ECO_FRIENDLY_ATTRIBUTE);
            if (ecoFriendlyValue != null && ecoFriendlyValue.equals(Integer.valueOf(1))) {
                LOGGER.info("*** Product is Eco Friendly**");
                return true;
            }
        } catch (SchemaViolationError e) {
            LOGGER.error("Error retrieving eco friendly attribute");
        }
        return false;
    }

    @Override
    public String getImage() {
        return productTeaser.getImage();
    }

    @Override
    public Boolean isShowBadge() {
        return productTeaser.isShowBadge();
    }

    // Delegate other methods to productTeaser...
}

```

--------------------------------

### Responsive Adjustments for Product Teaser Name and Price (CSS)

Source: https://github.com/adobedocs/commerce-cif-documentation/blob/master/tutorials/04-style-cif-component.md

Adjusts the font size and width of the product name and price within the teaser for screens smaller than 992px. This ensures that the name and price stack vertically on smaller viewports for better readability.

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

--------------------------------

### Update Product Price Styles for Teaser (CSS)

Source: https://github.com/adobedocs/commerce-cif-documentation/blob/master/tutorials/04-style-cif-component.md

Styles the product price within the teaser, positioning it at the bottom and setting its text color to black. It defines font size, weight, and width properties, ensuring it aligns correctly with the product name.

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

    ...
}
```

--------------------------------

### Create Third-Party Commerce Integration Layer with Adobe I/O Runtime

Source: https://context7.com/adobedocs/commerce-cif-documentation/llms.txt

Implements an Adobe I/O Runtime action to integrate non-Magento commerce backends. This JavaScript code fetches product data from a third-party API and maps it to the Adobe Commerce GraphQL schema, enabling reuse of CIF Core Components.

```javascript
// Adobe I/O Runtime action for third-party product query
// File: actions/products.js

const { Core } = require('@adobe/aio-sdk');
const fetch = require('node-fetch');

async function main(params) {
    const logger = Core.Logger('products', { level: params.LOG_LEVEL || 'info' });

    try {
        // Fetch from third-party commerce API
        const response = await fetch(`${params.COMMERCE_API_URL}/products/${params.sku}`, {
            headers: {
                'Authorization': `Bearer ${params.COMMERCE_API_KEY}`,
                'Content-Type': 'application/json'
            }
        });

        const thirdPartyProduct = await response.json();

        // Map to Magento GraphQL schema format
        const magentoProduct = {
            data: {
                products: {
                    items: [{
                        sku: thirdPartyProduct.id,
                        name: thirdPartyProduct.title,
                        url_key: thirdPartyProduct.slug,
                        price_range: {
                            minimum_price: {
                                regular_price: {
                                    value: thirdPartyProduct.price,
                                    currency: 'USD'
                                }
                            }
                        },
                        image: {
                            url: thirdPartyProduct.imageUrl
                        },
                        description: {
                            html: thirdPartyProduct.description
                        }
                    }]
                }
            }
        };

        return {
            statusCode: 200,
            body: magentoProduct
        };
    } catch (error) {
        logger.error(error);
        return {
            statusCode: 500,
            body: { error: error.message }
        };
    }
}

exports.main = main;
```

--------------------------------

### Query Product Attributes using GraphQL

Source: https://github.com/adobedocs/commerce-cif-documentation/blob/master/tutorials/05-customize-cif-components.md

This GraphQL query retrieves product details including name, SKU, and the 'eco_friendly' attribute. It filters products by SKU. The response format is JSON.

```graphql
{
  products(
    filter: { sku: { eq: "YOUR_SKU" } }
  ) {
    items {
      name
      sku
      eco_friendly
    }
  }
}
```

--------------------------------

### Product Teaser Component Definition (XML)

Source: https://github.com/adobedocs/commerce-cif-documentation/blob/master/tutorials/05-customize-cif-components.md

This XML snippet shows the component definition for the Product Teaser in the Venia project. It utilizes `sling:resourceSuperType` to inherit functionality from the AEM CIF Core Components Product Teaser, demonstrating the proxy component pattern.

```xml
<?xml version="1.0" encoding="UTF-8"?>
<jcr:root xmlns:sling="http://sling.apache.org/jcr/sling/1.0" xmlns:cq="http://www.day.com/jcr/cq/1.0" xmlns:jcr="http://www.jcp.org/jcr/1.0"
    jcr:description="Product Teaser Component"
    jcr:primaryType="cq:Component"
    jcr:title="Product Teaser"
    sling:resourceSuperType="core/cif/components/commerce/productteaser/v1/productteaser"
    componentGroup="Venia - Commerce"/>
```

--------------------------------

### Update Product Name Styles for Teaser (CSS)

Source: https://github.com/adobedocs/commerce-cif-documentation/blob/master/tutorials/04-style-cif-component.md

Styles the product name within the teaser, positioning it at the bottom and setting its text color to black. It also defines font size, weight, and width properties for the name element.

```css
.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%;
}
```

--------------------------------

### Configure GraphQL Data Service for Caching

Source: https://context7.com/adobedocs/commerce-cif-documentation/llms.txt

This snippet configures the GraphQL Data Service for caching product and catalog data from Magento, crucial for storefront performance. It's defined as a properties file within the ui.apps module. Parameters control caching times, sizes, and scheduler enablement for both product and catalog data.

```properties
# File: ui.apps/src/main/content/jcr_root/apps/acme/config/com.adobe.cq.commerce.graphql.magento.GraphqlDataServiceImpl-acmestore.config

productCachingTimeMinutes=I"5"
catalogCachingTimeMinutes=I"60"
identifier="default"
categoryCachingSize=I"100"
catalogCachingSchedulerEnabled=B"true"
productCachingSize=I"1000"
catalogCachingEnabled=B"true"
productCachingEnabled=B"true"
```

--------------------------------

### GraphQL Response for Product Query

Source: https://github.com/adobedocs/commerce-cif-documentation/blob/master/tutorials/05-customize-cif-components.md

This is a sample JSON response from a GraphQL query for product details. It shows the 'eco_friendly' attribute with an integer value of 1, indicating 'Yes'.

```json
{
  "data": {
    "products": {
      "items": [
        {
          "name": "Valeria Two-Layer Tank",
          "sku": "VT11",
          "eco_friendly": 1
        }
      ]
    }
  }
}
```