Create an Experience Duplicating a Checkout Button on a Cart Page

To increase chances of conversion on your site's cart page, you may want to increase the visibility of the checkout button by duplicating it elsewhere on the page. You can accomplish this goal by creating a custom Duplicate Element action that also retains its bindings to the cart form submit. This use case demonstrates exactly how to accomplish this goal with a custom action added to an experience.

Creating the Duplicate Element Action

Follow these steps to create the custom Duplicate Element action.

To increase the visibility of the checkout button and potentially increase the number of customers reaching the conversion (checkout) page, the action for this use case duplicates that Check Out button below the site's "Shopping Cart" page heading.

  1. Click COMPONENTS and then select Actions.

    Callout of the Actions option in the COMPONENTS menu

  2. Click CREATE ACTION.

    Callout of the CREATE ACTION button

  3. After Action Builder loads on your site, navigate to any product on the site and add it to the cart.

    View of a product detail page with a callout of the Add to Cart button

  4. Navigate to the cart page. For this use case, the cart page has a Check Out button near the bottom of the page.

    Callout of the Check Out button on the cart page

  5. Use Chrome's Developer tools to look at the site's code, specifically the code for the checkout button.

    In this use case, the Check Out button to be duplicated is part of a form. That form contains all the product, price, and quantity data that must be submitted to complete the checkout process.

    The form action is executed when the form submit event fires, sending the form data to the form handler. The action attribute on the form denotes the URI of the form handler, which in this case is a server-side script at /cart. Since the submit event is triggered by the form and not the button, the submit button must be duplicated within the form element.

    To ensure the button remains functional, it must remain within the context of this form element, therefore it can't be duplicated to any area outside of the <form> element if it is to function as the submit for that form.

    View of button element in Developer tools

  6. To retain the element's native functionality, select Duplicate Element on the Insert Content tab of Action Builder.

    Callout of the Duplicate Element option on the Insert Content tab of Action Builder

  7. Find the selector for the Check Out button, and then click the forward arrow.

    View of the Select an Element to Clone panel in Action Builder, with a callout of the Check Out button to be cloned

  8. Identify a rough selector for where the cloned button should appear, understanding that you can refine the element selector on the Details tab to ensure it falls within the form parent. For this use case, the "Shopping Cart" page heading is the selector. Click the forward arrow.

    View of the Relative Element Selector with a callout of the 'Shopping Cart' heading and a callout of the forward arrow

  9. Ensure Enable Preview is set to ON, and then test the cloned element from the Details tab. In this use case, the cloned Check Out button appears, but clicking it doesn't load the checkout page as expected.

    View of the Details tab in Action Builder loaded on top of the client's site, with the cloned Check Out button placed but nonfunctional

  10. If the action preview doesn't work as intended, check your browser's Developer tools. In this use case, Developer tools reveals that the code for the cloned button is above the <form> element when the cloned code needs to be within it.

    Callout of the HTML code for the cloned button and the form element

  11. Correct any coding errors that you find. In this use case, the selector for the <form> element is the correct one to use in Relative Element Selector in Action Builder.

    Callout of the 'Copy selector' option in a contextual menu in the Developer Tools

  12. Test the cloned button again. In this use case, the second test reveals that clicking it loads the checkout page as expected.

    The checkout page of an online retailer's site that loads after a user clicks the cloned button

  13. With Relative Element Selector set, use the information from Element Selectors to simplify the selectors a little bit. For this use case, the simplified selectors are as follows:
    • Element To Clone.cart__buttons button.btn
    • Relative Element Selectorform.cart

    Simplifying the selectors may not be necessary, but keeping selectors as simple as possible is a best practice.

    View of the Details tab in Action Builder, with the simplified Element To Clone selector and simplified Relative Element Selector

  14. Click the Styles tab to add the following CSS to ensure that the cloned button matches the original one:

    <CLONE_SELECTOR> {float: right;}

    <CLONE_SELECTOR> is dynamically generated when the experience is executed to add styles specifically to the unique element duplicated.

    View of the Styles tab in Action Builder, with the CSS required for the cloned button

  15. Add an action condition to ensure the action only fires on the cart page. Click the Conditions tab, click ADD CONDITION, expand Page type, and then select Page type =. Input the value to identify the page type. After that, click the forward arrow.

    View of the Conditions tab in Action Builder, with the 'Page type' category expanded and the 'Page type equals' option highlighted

  16. Give the action a title, a description, and a subcategory, and then click CREATE & EXIT.

    View of Action Builder with the Action Title, Description, and Subcategory fields displayed

Now that you've created the Duplicate Element action, add it to an experience to deploy it to your site.

Creating the Experience

Follow these steps to create the experience that uses the custom Duplicate Element action.

  1. Click EXPERIENCES in the top navigation bar, and then select Web.

    Callout of the Web option in the EXPERIENCES menu of the top navigation bar

  2. Click CREATE EXPERIENCE.

    Callout of the CREATE EXPERIENCE button

  3. Click WHY, select To serve everyone the same experience, and then click NEXT.

    Callout of the WHY settings, the 100% EXPERIENCE option, and the NEXT button

  4. Select a goal metric, adjust the secondary metrics as necessary, and then confirm that you've configured the WHY settings as you need.

    Callout of the SAVE button

  5. Configure the WHO settings as necessary. For this use case, the experience should target all site visitors, so there's no need to change the WHO settings.
  6. Add the Duplicate Element action to the experience. Click WHAT and then click ADD ACTION.

    Callout of the WHAT settings and the ADD ACTION button

  7. Click Other.

    Callout of the Other option on the Action Type panel

  8. Click the Duplicate Element action that you created for this experience.

    Callout of the Clone Button action template on the Other panel

  9. Because the action was so specifically configured in Action Builder, no experience-level changes are required. Click CREATE.

    Callout of the CREATE button

Ensure you test the experience before activating it.

Testing the Experience

Before scheduling when the experience runs by configuring the WHEN settings, you should perform a quality assurance check to ensure the action works as expected.

  1. Click PREVIEW.

    Callout of the PREVIEW button

  2. Add a product to the cart on your site, and then navigate to the cart page. The cloned button should appear just below the level of the "Shopping Cart" page heading.

    Callout of the cloned button that appears immediately below the 'Shopping Cart' heading

  3. Click the cloned button to verify that doing so loads the checkout page.

    The checkout page on an online retailer's site that loads after a user clicks the cloned button

After you confirm that the action and experience fired as expected, return to the Experience Editor page in the Monetate platform to configure the experience's WHEN settings as necessary and then click ACTIVATE.