Updating Promotion Codes

It is currently not possible to modify promotion codes in the commercebuild Promotions Module. Furthermore, once a promotion code is inactive or deleted from the system, it cannot be used again, not even with a new promotion code.

If changes need to be made to a promotion code that has already been added to a user's cart, your only option is to delete the promo code and/or create a new one.

In some cases, this may be inconvenient, especially if you have sent marketing emails with the code.

The Workaround

The JavaScript snippet below can be used to detect when a user has entered the "old" promotion code, notify the user that it has changed, and automatically update the promotion code with the new one.

<script>
document.addEventListener("DOMContentLoaded", function () {
  // Replace OLDCODE with your current promo code
  var old_promo = "OLDCODE"; 
  
  // Replace NEWCODE with the new promo code you want customers to use
  var new_promo = "NEWCODE";

  // Inject modal HTML
  var modalHTML = `
    <div id="promo-modal" style="display:none; position:fixed; top:0; left:0; width:100%; height:100%;
      background:rgba(0,0,0,0.4); z-index:9999; justify-content:center; align-items:center;">
      <div style="background:#fff; width:320px; border-radius:8px; overflow:hidden; text-align:center;">
        <div style="background:#333; color:#fff; padding:10px; font-weight:bold;">Promo Code Updated</div>
        <div id="promo-modal-body" style="padding:20px; font-size:14px; line-height:1.4;"></div>
        <div style="padding:10px;">
          <button type="button" class="button" id="promo-modal-ok"
            style="background:#333; color:#fff; border:none; padding:8px 16px; border-radius:4px; cursor:pointer;">
            OK
          </button>
        </div>
      </div>
    </div>`;
  document.body.insertAdjacentHTML("beforeend", modalHTML);

  // jQuery listener for promo field
  $('body').on('keyup', '#promo', function() {
    if ($(this).val().toLowerCase() === old_promo.toLowerCase()) {
      $('#promo-modal-body').text("We're sorry! This code has changed. Please use " + new_promo + " instead.");
      $('#promo-modal').css('display', 'flex');
      $(this).val(new_promo);
    }
  });

  // Close modal on OK
  $('body').on('click', '#promo-modal-ok', function() {
    $('#promo-modal').hide();
  });
});
</script>

Installation Instructions

1. Update the JavaScript snippet variables above to ensure old_promo and new_promo reflect your old promotion code and new promotion code, respectively.
2. Go to System > Modules > Custom Tags
3. Click the New button
4. Choose the Footer as the position of the code block
5. Paste the modified JavaScript snippet into the text area
6. Click Save

The JS in action!

Here is how it works when applied correctly:

Be sure to test the functionality on both your Cart and/or your Checkout pages.