ArtsAutosBooksBusinessEducationEntertainmentFamilyFashionFoodGamesGenderHealthHolidaysHomeHubPagesPersonal FinancePetsPoliticsReligionSportsTechnologyTravel
  • »
  • Business and Employment»
  • E-Commerce & How to Make Money Online

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

Updated on July 10, 2011

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

Scenario
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.

Comments

    0 of 8192 characters used
    Post Comment

    • profile image

      DoveFreexrolo 21 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.

    • profile image

      Futamarka 4 years ago

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

    • profile image

      Smoriawar 4 years ago

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

    • profile image

      Rf 5 years ago

      does this extension works on version oc1.5.2.1 ?

    • profile image

      Carsten 6 years ago

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

    • hotwebideas profile image
      Author

      Bruce Chamoff 6 years ago from New York

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

    • profile image

      Carsten 6 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
      Author

      Bruce Chamoff 6 years ago from New York

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

    • Atul Agarwal profile image

      Atul Agarwal 6 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
      Author

      Bruce Chamoff 6 years ago from New York

      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.

    • hotwebideas profile image
      Author

      Bruce Chamoff 6 years ago from New York

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

    • profile image

      Alexander 6 years ago

      I have the same problem! Anybody has any solution?

    • profile image

      kevin 6 years ago

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

    • hotwebideas profile image
      Author

      Bruce Chamoff 6 years ago from New York

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

    • profile image

      kevin 6 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
      Author

      Bruce Chamoff 6 years ago from New York

      Thanks hollyhock.

    • hollyhock profile image

      hollyhock 6 years ago from HeavenGarden

      voting up but checking throw later ...