Menu
Menu Sheet Overlay
Search
Search Sheet

Fetching Data for a Page

    Because Mobify's AMP solution uses the Integration Manager from your Mobify Progressive Web App (PWA), we can use it to get the data we need for our AMP pages.

    In this guide, we'll show you how to customize the initProductDetailsPage command from the Integration Manager and create a new selector to display a product rating on the product details page.

    Before you begin #

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

    1. Switching connectors #

    To help you develop custom connectors for the Integration Manager, we've created the stub connector. We call it the stub connector because it includes stub implementations for all the required Integration Manager commands.

    By default, your project will be configured to use the Merlin's connector. Here's how to disable the Merlin's connector and enable the stub connector:

    Open amp/app/data-integration/connectedStore.js and look for the section where we import the initConnector function from ./connectors/init-merlins-connector. Comment that line out and uncomment the line importing the initConnector function from ./connectors/init-stub-connector. Your import statements should end up looking like this:

    // import initConnector from './connectors/init-merlins-connector'
    // import initConnector from './connectors/init-sfcc-connector'
    import initConnector from './connectors/init-stub-connector'
    

    Preview your development server and open a product details page at http://127.0.0.1:3000/eye-of-newt.html.

    Now the page contains placeholder data that we can easily customize.

    Product Details page with placeholder data

    2. Fetching new content #

    One of the benefits of using the Integration Manager is that it separates our UI logic from our backend logic. We can take this further with AMP and reuse selectors from the PWA as well.

    Normally, we would not have to add new selectors because the AMP page data will often be a subset of the PWA data. We would just find the appropriate selectors in the PWA and reuse them in our AMP pages. But for the purposes of this tutorial, let's customize the example data returned by the initProductDetailsPage command and create a new selector to get that data out of the Redux store.

    Open web/app/connectors/stub-connector/products/index.js. Inside the initProductDetailsPage function, edit the exampleData object so that it includes a rating field, like this:

    const exampleData = {
            [id]: {
                price: '$10.00',
                available: true,
                href: url,
                thumbnail: image,
                title: 'Product 1',
                images: [image, image],
                id: '1',
                description: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit.',
                rating: '4',
                pageMeta: {
                    title: 'Product 1',
                    description: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit.',
                    keywords: 'Product 1'
                }
            }
        }
    

    Next, open the product details selectors file at web/app/containers/product-details/selectors and update the imports from progressive-web-sdk/dist/store/products/selectors to look like this:

    import {getCurrentProduct, getCurrentProductId} from 'progressive-web-sdk/dist/store/products/selectors'
    

    At the bottom of the file, create a new selector to get the rating data we added.

    export const getRating = createGetSelector(getCurrentProduct, 'rating')
    

    3. Update the AMP page to use the new selector #

    For most AMP pages, you'll start with adding existing PWA data to AMP via PWA selectors.

    In amp/app/containers/product-details/partials/product-details-heading.jsx, add rating as a new PropType. First, find the ProductDetailsHeading.propTypes object and add rating: PropTypes.string to it. Next, find the createPropsSelector call and add rating: selectors.getRating to the input object.

    Add rating to the list of props used by the ProductDetailsHeading component, like this:

    const ProductDetailsHeading = ({available, breadcrumbs, rating, title, price})
    

    Then add the following JSX after the block that displays the product's price:

        {rating &&
            <span className="u-text-weight-regular u-text-family-header u-text-size-small u-text-letter-spacing-small">{rating}/5</span>
        }
    

    Congratulations! #

    Now when you save and refresh the product details page at http://127.0.0.1:3000/eye-of-newt.html, you'll see the product's rating.

    Product Details page with rating data