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.

1. Click COMPONENTS and then select Actions.

   

2. Click CREATE ACTION.

   

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

   

4. Navigate to the cart page. For this use case, the cart page has a Check Out button near the bottom of the 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.

   

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

   

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

   

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.

   

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.

   

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.

    

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.

    

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

    

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 Selector — form.cart

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

    

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.

    

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.

    

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

    

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.

   

2. Click CREATE EXPERIENCE.

   

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

   

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

   

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.

   

7. Click Other.

   

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

   

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

   

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.

   

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.

   

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

   

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.