Adding a Cancel Button to Modals

Updated July 12, 2023 16:38

Out of the box pop-up modals in the Subscriber Dashboard contain a confirm action button and a standard 'X' close button that customers can use to close the modal. Sometimes, to keep website continuity, an additional 'Cancel' action button is need. This article takes you though adding a dedicated 'Cancel' button to the modals.

Applicable Files

The following files contain popup modals you can add a cancel button to:

change-date.liquid
change-shipment-address.liquid
delete-item.liquid
pause-subscription.liquid
reactivate-subscription.liquid
send-now.liquid
skip.liquid

Accessing the Code Editor

We'll be using the Code Editor to modify the Subscriber Dashboard. You can access it through your Ordergroove Admin:

Log in to Ordergroove.
Go to Subscriptions on the top toolbar, and select Management Interface.
Toggle Code Editor on the top left.

Note: Some aspects of this article require technical expertise with coding languages. This is self-serve and outside of the normal support policy. If you do not currently have someone on staff that can provide that level of technical assistance, Ordergroove suggests seeking out that level of support before attempting to add or alter any working code relating to your subscriptions or storefront.

Adding the Cancel Button

Open one of the files mentioned above. You can add a cancel button to the popup modal, look for the following <div>

<div class="og-dialog-footer">

Within this <div>, below or above the <button> that exists, add the following code:

<button class="og-cancel-button" type="reset" aria-label="{{'modal_close_cancel' | t }}">
{{ 'modal_close_cancel' | t }}
</button>

The end result should look similar to this:

<div class="og-dialog-footer">
<button class="og-button" type="submit" name="change_shipment_date">
{{ 'modal_change_date_save' | t }}
</button>
<button class="og-cancel-button" type="reset" aria-label="{{ 'modal_close_cancel' | t }}">
{{ 'modal_close_cancel' | t }}
</button>
</div>{# /og-dialog-footer #}

In en-US.json file after:

"modal_close": "x",

Add the following:

"modal_close_cancel": "Cancel",

This will also need to be added to the other language files. In fr-CA.json add:

"modal_close_cancel": "Annuler",

In es-ES.json add:

"modal_close_cancel": "Cancelar",

In the buttons.less file, add the following:

.og-cancel-button {
border: @button-border;
border-radius: @button-border-radius;
padding: @button-padding;
cursor: pointer;
background: @button-background;
font-size: @button-font-size;
font-family: @button-font-family;
color: inherit;
margin: 0px 5px;
}

NOTE: Default styling is shown in the code example above.