Menu
Menu Sheet Overlay
Search
Search Sheet

AMP Bind

    amp-bind

    amp-bind is a built-in component that allows you to add custom stateful interactivity to your AMP pages via data binding and JavaScript-like expressions. For more information about amp-bind, you can read on Google's official AMP document: https://www.ampproject.org/docs/reference/components/amp-bind.

    Limitations

    The official AMP documentation outlines all of AMP's limitations, but below we discuss a few in a bit more detail.

    Debugging #

    Debugging is challenging, because you can't use window.alert, console.log nor document.write, so what's there left to do? There are a few things that you can do to debug your AMP page so that it will work with amp-bind.

    Debugging state

    1. Add #development=1 in the URL to highlight warnings and errors during development and to access special debugging functions.

      AMP bind development

    2. Open console in the Chrome DevTools.

    3. Write AMP in the console, and you will see a list of methods available.

      AMP Chrome DevTools

    4. Write AMP.printState() to access the data that is set in the amp-state.

      AMP Chrome DevTools

    How to include amp-bind to your project?

    Step 1: Add the amp-bind script to your component

    const productDetails = () => (
        <div>
    
    
    
    
        </div>
    )
    
    productDetails.scripts = [
        '<script async custom-element="amp-bind"
         src="https://cdn.ampproject.org/v0/amp-bind-0.1.js"></script>'
    ]
    

    Step 2: Import the State component

    import State from 'mobify-amp-sdk/dist/components/state'
    
    const productDetails = () => (
        <div>
    
    
    
    
        </div>
    )
    
    productDetails.scripts = [
        '<script async custom-element="amp-bind"
         src="https://cdn.ampproject.org/v0/amp-bind-0.1.js"></script>'
    ]
    

    Step 3: Render the State component

    import State from 'mobify-amp-sdk/dist/components/state'
    
    const productDetails = () => (
        <div>
            <State
                namespace="namespaceName"
                data={{'product': {'value': 'name'}}}
            />
        </div>
    )
    
    productDetails.scripts = [
        '<script async custom-element="amp-bind"
         src="https://cdn.ampproject.org/v0/amp-bind-0.1.js"></script>'
    ]
    

    Bindings can’t be arbitrarily added to React components #

    const NewComponent = (props) => {
        return <input {...props} />
    }
    
    <NewComponent [value]="key.value" [type]="button" />
    
    {/* This will not work, you cannot add props with a name formatted as [propName]
    because that format is not supported by React. */}
    

    React makes it difficult to add AMP bindings to components and elements because JSX syntax does not recognize properties wrapped in square brackets. Instead, you can use parseBindings from the Mobify AMP SDK to parse strings of AMP bindings into a format that JSX can use.

    import {parseBindings} from 'mobify-amp-sdk/dist/utils/amp-bind-utils'
    
    const NewComponent = (props) => {
        const boundProps = parseBindings(props.bindings)
        return <input {...boundProps} />
    }
    
    <NewComponent bindings={'[value]="key.value" [type]="button"'} />
    
    {/* That worked! */}
    {/* <input [value]="key.value" [type]="button" />. */}
    

    Live Example

    There is a live example on Merlin's Potions that shows you how to work with amp-bind, https://progressive-web-scaffold.amp-mobify.com/eye-of-newt.html. Make sure to either use a mobile device to view this URL, or simulate a mobile device if you're viewing on a desktop.

    In this example amp-bind is used to organize data in State, product options, select product quantity, and the add to card button.

    1. Organize data in the State component

      AMP state PDP

    2. Product options

      Use the Button component to update the on attribute so when users tap on the button it will set data into the state.

      AMP Button Set State

    3. Select product quantity

      Use the Stepper component, amp-bind is utilized in the Stepper component to update the button and input field.

      AMP Stepper PDP

    4. Add to cart button

      Selecting product options will update the Add to Cart Button's on attribute. When users click the Add to Cart button, it will redirect users to the PWA to fulfill the add to cart action. In the PWA, you will need to add some logic to work with the string in the URL so that it will add the correct product to the cart.

      AMP Add To Cart PDP