Adding a Cancel Button to Modals

Suggest Edits

Out of the box pop-up modals in the Subscription Manager 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 Advanced Editor

We'll be using the advanced editor to modify the Subscription Manager. You can access it through your Ordergroove Admin:

  1. Log in to Ordergroove.
  2. Go to Subscriptions on the top toolbar, and select Subscriptions Manager
  3. Toggle Advanced on the top left.

🚧

Support

Some aspects of this article require technical expertise with coding languages. This is self-serve and outside of the normal support policy.

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 class="og-dialog-footer">

Within this

, below or above the 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.

Updated 5 months ago