Customizing Online Shop Alert Message Strings

Updated on 20-October-2016 at 10:16 AM

Business Catalyst End of life announcement - find out more details.

Introduction

If you're building a multi-lingual site or simply want to change the wording of your online shop alert messages, you can do so using just a few lines of JavaScript.

In this how-to guide, we'll show you how to customize alert messages, (eg. "1 item(s) added to your cart") in just 4 easy steps!

Step 1. Create the JavaScript file

Open any plain-text editor (ie. Notepad on Windows or TextEdit on Mac), then copy and paste the following code into the file:

window.addEventListener('load', function(){

	Oshoplang = {   
	  
		RemoveError: 'Your custom string goes here (Message displayed when product is removed from the shopping cart)',   
		  
		Added: 'Your custom string goes here (Message displayed when product is added to the shopping cart. NOTE: The system will display the number of items added to the cart followed by your message)',  
		  
		OutOfStock: 'Your custom string goes here (Message displayed when product added is out of stock)',  

		PreOrder: ' Your custom string goes here (Message displayed when pre-ordered product is added to the shopping cart. NOTE: The system will display the number of items added to the cart followed by your message)',  
		  
		InvalidQuantity: 'Your custom string goes here (Message displayed when invalid quantity is added the shopping cart)',  
		  
		CartEmpty: 'Your custom string goes here (Message displayed when the shopping cart is empty)',  
		  
		CartUpdateSuccess: 'Your custom string goes here (Message displayed when the shopping cart is successfully updated)',  
		  
		InvalidShip: 'Your custom string goes here (Message displayed when customer tries to check out without selecting a shipping option)',  
		  
		ChooseState: 'Your custom string goes here (Message displayed when customer tries to check out without selecting a destination state)',  
		  
		EnterZip: 'Your custom string goes here (Message displayed when customer tries to check out without entering a zip code)',  
		  
		ChooseShip: 'Your custom string goes here (Message displayed when customer tries to check out without selecting a radio button shipping option)',  
		  
		IncorrectGForm: 'Your custom string goes here (Message displayed when the gift voucher form in Admin -> More Customization Options -> Online Shop Layouts -> gift Voucher layout is broken)',  
		  
		EnterGName: 'Your custom string goes here (Message displayed when customer tries to submit the Gift Voucher form without entering the recipients name)',  

		InvalidGEmail: 'Your custom string goes here (Message displayed when customer tries to submit the Gift Voucher form without entering a proper email address)',  
		  
		EnterGMessage: 'Your custom string goes here (Message displayed when customer tries to submit the Gift Voucher form without entering a message for the recipient)'   
	  
	};

});

Step 2. Insert Your Customized Alert Messages

Replace the strings within single quotes above (i.e. CartUpdateSuccess: 'Your custom string goes here') with your custom strings, then save the file as "online-shop.js". Note: You must save the file with a .js extension. Note - make sure the file does not get saved as "online-shop.js.txt"

Step 3. Upload The File

Upload the online-shop.js file using either FTP or the File Manager in your Admin Console.

/kb_resources/onlinejs.png

For this example, we'll upload it to our "/js" directory.

Step 4. Reference The Script In Your Site Wide Template

So that your custom alert messages are rendered on every page of your Online Shop, we'll reference hte JavaScript file in our Site Wide template.

To do this, switch to the HTML mode of the online editor then copy and paste the following code immediately before the </head> tag:

<script type="text/javascript" src="/js/online-shop.js"></script>

Save and Publish the template. When your online shop is now loaded, the default strings will be overwritten with your custom strings. Your custom messages will be then displayed in the alert window every time one of the actions in the list is performed.