Open Cart Module Called Super Message Kit - How To Use It and Examples - Ecommerce with jQuery

This hub is a tutorial and instructions on how to properly use the new extension Super Message Kit, which is dubbed "Open Cart Welcome Module on Steroids".

The original Welcome module is too simple for anyone's needs. It allows the user to specify a message that will greet users when they visit the website, but it does not allow the user to specify a heading. The heading is simply "Welcome to store", whatever your store name is.

I wanted to make something more interactive with the OpenCart admin and give admins more control with these features:

  • Welcome messages have a start date and end date which is great for holiday-sensitive messages as well as expiration dates for coupons. For example, if I have a 20% off coupon that expires on December 31, 2011, I want that message to disappear on January 1, 2012 and I don't want to have to worry about removing the message. I want to set it once and forget about it.
  • jQuery behaviors like fading in.
  • Add HTML IDs that would allow the user to control the message's appearance with CSS or jQuery
  • Inline CSS that allows the user to specify CSS in case they do not want to add an ID.
  • Control the message heading and not be constrained to just "Welcome To My Store".

The Super Message Kit screen looks like this. Click on the image to see it in full size.

The Super Message Screen screen filled out.
The Super Message Screen screen filled out. | Source

The first field: Message Header

Now, you are no longer constrained to the default message "Welcome to my store". You can add whatever heading you would like and add HTML to it as well.

For example, if you want to give your heading an <H2> tag, simply enter it as <H2>Get 20% Off</H2>.

Notice on the left that the tabs now reflect your headings so you no longer need to guess which tag to press to get to a certain message. The previous Welcome module labeled all the tabs as Module 1, Module 2, etc and you did not know which tab had a specific message. Now you no longer have that problem.

jQuery field: How to enter your jQuery behavior

How to enter jQuery
How to enter jQuery | Source

Now, your message can fade in by entering jQuery behavior. Examples of this are:

  • fadeIn('slow')
  • fadeIn(2000)
  • show('fast')
  • slideDown(3500)

This is all you need to enter for jQuery. You do not need to enter the DOM loading code or any $ notations. Super Message Kit will handle all of that for you. You also do not need to enter the jQuery loading script since Open Cart 1.5 comes with it.

2 Very important Notes to make the jQuery work:

  1. If you are using one of the jQuery functions above, you must enter display:none in the Section CSS field so your message is hidden before it fades in. Otherwise, it will just display without the jQuery taking any effect.
  2. You must also enter an ID name into the ID name field. Failure to do so will prevent jQuery from finding your message and cause the jQuery to not work.

Entering Start and End Dates

How to enter dates into Super Message Kit
How to enter dates into Super Message Kit | Source

One of Super Message Kit's best features is its ability to start displaying in the future and end on a specific date.

Entering start and end dates are effective for all of the following benefits:

  • You have merchandise in your store for Mother's Day and you want to let people know about your Mother's Day 2011 sale, but it is too early to display that message because it is December 2010. Simply tell Super Message Kit to display the message starting on April 1, 2011 and end on April 30, 2011.
  • You have a coupon that expires on December 31, 2011 and you want all your online customers to know about it when they enter the website or before they checkout. You can specify an end date only and it will end on December 31, 2011.

How to properly enter start and end dates:

  1. Enter the start and end dates in this format: YYYY-MM-DD.
  2. Use this table for the following scenarios on entering dates:

4 scenarios on entering dates into Super Message Kit

Start Date
End Date
Start a message immediately without ever ending
Leave Blank
Leave Blank
Start a message immediately and end on a certain date
Leave Blank
Enter your end date as YYYY-MM-DD
Enter a message to display in the future to display forever without ever ending
Enter your start date as YYYY-MM-DD
Leave Blank
Enter a message to display in the future and end on a certain date
Enter your start date as YYYY-MM-DD
Enter your end date as YYYY-MM-DD
4 scenarios on entering dates into Super Message Kit

Entering an HTML ID Name and Inline CSS

Finally, you can assign an ID name to your message and reference that message with manual jQuery or through a CSS style sheet.

You also need to enter an ID Name if you plan to use the jQuery effect.

How to properly enter your ID Name:

  1. Follow normal HTML ID naming conventions
  2. The ID name can be anything you want and would normally use in your CSS style sheets.

Enter Section CSS:

Enter Section CSS if you want to add CSS to your entire message. This can include CSS for all of the following:

  • borders
  • background colors
  • text colors
  • background images
  • positioning including absolute and relative
  • floating with your other OpenCart template <DIV> tags

An example on how to enter the CSS is: background:#EEEEEE; border:solid 1px black;color:#00FF00 - Super Message Kit will take care of all the other HTML for you.

That is it for the tutorial on the Super Message Kit Module. If you have questions, please leave them here and I would love your feedback.

More by this Author

Comments 17 comments

hollyhock profile image

hollyhock 5 years ago from HeavenGarden

voting up but checking throw later ...

hotwebideas profile image

hotwebideas 5 years ago from New York Author

Thanks hollyhock.

kevin 5 years ago

getting the following error after installing? any ideas??

Fatal error: Call to a member function link() on a non-object in /home/racernut/public_html/admin/controller/module/super_message_kit.php on line 71

hotwebideas profile image

hotwebideas 5 years ago from New York Author

Hey Kevin, weird. We have seen many people use it without that error. Can you please send me a screenshot of what you entered?

kevin 5 years ago

hi, all I've done is install it and then when I go to "edit" that's the error I get?

Alexander 5 years ago

I have the same problem! Anybody has any solution?

hotwebideas profile image

hotwebideas 5 years ago from New York Author

Alexander and Kevin, what version of Open Cart are you both using?

hotwebideas profile image

hotwebideas 5 years ago from New York Author

Alexander, it works fine for everyone using OpenCart 1.5. If you have 1.4, yes, you will get an error. If you upgrade, that would be the solution you are probably looking for.

Atul Agarwal profile image

Atul Agarwal 5 years ago from Strasbourg, France

Can we use this module to have random messages being displayed to users. For e.g. we make a list of 100 jokes and this module picks up one joke ever time home page comes. Something like this happens on mailchimp and is very engaging. I would like to have that feature if possible.

hotwebideas profile image

hotwebideas 5 years ago from New York Author

Hey, Atul Agarwal, yes, but that is going to be part of Super Messgage Kit Pro. Random messages are part of it.

Carsten 5 years ago

Warning: Invalid argument supplied for foreach() in /share/MD0_DATA/Qweb/miraca/opentest/catalog/controller/common/column_left.php on line 49

Get this when using the mdule!

hotwebideas profile image

hotwebideas 5 years ago from New York Author

Carsten, are you using OpenCart 1.5.0? There is no upgraded version for the SMK, but it works on that version.

Carsten 5 years ago

Oh... OK, No, i'm using I'll wait, is there a maillist so i can get a notice when there is an upgrade?

Rf 4 years ago

does this extension works on version oc1.5.2.1 ?

Smoriawar 3 years ago

We accustomed to find on top of lifestyle yet of late I've truly built up the level of resistance.

Futamarka 3 years ago

Здесь мы хотим предложить вам наилучшие, по опросам пользователей, сайты взрослых знакомств, которые точно помогут вам найти подходящего партнёра для секса. Сразу предупреждаем, что все сайты приведенные здесь содержат эротические элементы и предназначен для просмотра только лицам достигшим восемнадцати лет.

DoveFreexrolo 11 months ago

Woah this blog is magnificent i really like reading your posts. Keep up the good paintings! You realize, many individuals are searching round for this information, you can help them greatly.

    Sign in or sign up and post using a HubPages Network account.

    0 of 8192 characters used
    Post Comment

    No HTML is allowed in comments, but URLs will be hyperlinked. Comments are not for promoting your articles or other sites.

    Click to Rate This Article