Menu
Menu Sheet Overlay
Search

Adding a Component

Let's start with a simple exercise: adding a product availability notice to the AMP version of the product details page using the ListTile component from the AMP SDK.

Before you begin #

Complete the Quick Start guide to install all required software and start your development server.

1. Setting up #

Open amp/app/containers/product-details/container.jsx

Import the ListTile and Icon components:

import ListTile from 'mobify-amp-sdk/dist/components/list-tile'
import Icon from 'mobify-amp-sdk/dist/components/icon' // import Icon component to use for startAction prop

2. Updating the page #

Replace the existing ProductDetails component with the following:

const ProductDetails = () => {
    return (
        <div className="t-product-details">
            <ListTile className="u-margin-top u-padding-start-md u-padding-end-md" startAction={
                <Icon name="store" title="Store" />
            }>
                Available in store!
            </ListTile>
            <ProductDetailsHeading />
            <ProductDetailsCarousel />
            <ProductDetailsAddToCart />
            <ProductDetailsDescription />
        </div>
    )
}

Save your files and open http://127.0.0.1:3000/eye-of-newt.html in your browser. Now you'll see your product availability notice at the top of the product details page.

3. Styling the component #

Let's say you want to change the text color in the product availability notice.

Open amp/app/styles/themes/amp-components/_list-tile.scss

Now we can customize the theme styles for the ListTile component:

.a-list-tile__primary {
    font-size: $font-size + 1; // 1
    color: $success-color;
}

Save your files and reload the the product details page. Now you'll see the new text color.

Next steps #

To learn more about the ListTile component, Icon component, or any other components in the AMP SDK, see the AMP Components documentation.

Feedback

Was this page helpful?