ArtsAutosBooksBusinessEducationEntertainmentFamilyFashionFoodGamesGenderHealthHolidaysHomeHubPagesPersonal FinancePetsPoliticsReligionSportsTechnologyTravel

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 

      2 years 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 

      5 years ago

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

    • profile image

      Smoriawar 

      5 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 

      6 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 imageAUTHOR

      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 imageAUTHOR

      Bruce Chamoff 

      7 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 

      7 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 imageAUTHOR

      Bruce Chamoff 

      7 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 imageAUTHOR

      Bruce Chamoff 

      7 years ago from New York

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

    • profile image

      Alexander 

      7 years ago

      I have the same problem! Anybody has any solution?

    • profile image

      kevin 

      7 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 imageAUTHOR

      Bruce Chamoff 

      7 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 

      7 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 imageAUTHOR

      Bruce Chamoff 

      7 years ago from New York

      Thanks hollyhock.

    • hollyhock profile image

      hollyhock 

      7 years ago from HeavenGarden

      voting up but checking throw later ...

    working

    This website uses cookies

    As a user in the EEA, your approval is needed on a few things. To provide a better website experience, hubpages.com uses cookies (and other similar technologies) and may collect, process, and share personal data. Please choose which areas of our service you consent to our doing so.

    For more information on managing or withdrawing consents and how we handle data, visit our Privacy Policy at: https://hubpages.com/privacy-policy#gdpr

    Show Details
    Necessary
    HubPages Device IDThis is used to identify particular browsers or devices when the access the service, and is used for security reasons.
    LoginThis is necessary to sign in to the HubPages Service.
    Google RecaptchaThis is used to prevent bots and spam. (Privacy Policy)
    AkismetThis is used to detect comment spam. (Privacy Policy)
    HubPages Google AnalyticsThis is used to provide data on traffic to our website, all personally identifyable data is anonymized. (Privacy Policy)
    HubPages Traffic PixelThis is used to collect data on traffic to articles and other pages on our site. Unless you are signed in to a HubPages account, all personally identifiable information is anonymized.
    Amazon Web ServicesThis is a cloud services platform that we used to host our service. (Privacy Policy)
    CloudflareThis is a cloud CDN service that we use to efficiently deliver files required for our service to operate such as javascript, cascading style sheets, images, and videos. (Privacy Policy)
    Google Hosted LibrariesJavascript software libraries such as jQuery are loaded at endpoints on the googleapis.com or gstatic.com domains, for performance and efficiency reasons. (Privacy Policy)
    Features
    Google Custom SearchThis is feature allows you to search the site. (Privacy Policy)
    Google MapsSome articles have Google Maps embedded in them. (Privacy Policy)
    Google ChartsThis is used to display charts and graphs on articles and the author center. (Privacy Policy)
    Google AdSense Host APIThis service allows you to sign up for or associate a Google AdSense account with HubPages, so that you can earn money from ads on your articles. No data is shared unless you engage with this feature. (Privacy Policy)
    Google YouTubeSome articles have YouTube videos embedded in them. (Privacy Policy)
    VimeoSome articles have Vimeo videos embedded in them. (Privacy Policy)
    PaypalThis is used for a registered author who enrolls in the HubPages Earnings program and requests to be paid via PayPal. No data is shared with Paypal unless you engage with this feature. (Privacy Policy)
    Facebook LoginYou can use this to streamline signing up for, or signing in to your Hubpages account. No data is shared with Facebook unless you engage with this feature. (Privacy Policy)
    MavenThis supports the Maven widget and search functionality. (Privacy Policy)
    Marketing
    Google AdSenseThis is an ad network. (Privacy Policy)
    Google DoubleClickGoogle provides ad serving technology and runs an ad network. (Privacy Policy)
    Index ExchangeThis is an ad network. (Privacy Policy)
    SovrnThis is an ad network. (Privacy Policy)
    Facebook AdsThis is an ad network. (Privacy Policy)
    Amazon Unified Ad MarketplaceThis is an ad network. (Privacy Policy)
    AppNexusThis is an ad network. (Privacy Policy)
    OpenxThis is an ad network. (Privacy Policy)
    Rubicon ProjectThis is an ad network. (Privacy Policy)
    TripleLiftThis is an ad network. (Privacy Policy)
    Say MediaWe partner with Say Media to deliver ad campaigns on our sites. (Privacy Policy)
    Remarketing PixelsWe may use remarketing pixels from advertising networks such as Google AdWords, Bing Ads, and Facebook in order to advertise the HubPages Service to people that have visited our sites.
    Conversion Tracking PixelsWe may use conversion tracking pixels from advertising networks such as Google AdWords, Bing Ads, and Facebook in order to identify when an advertisement has successfully resulted in the desired action, such as signing up for the HubPages Service or publishing an article on the HubPages Service.
    Statistics
    Author Google AnalyticsThis is used to provide traffic data and reports to the authors of articles on the HubPages Service. (Privacy Policy)
    ComscoreComScore is a media measurement and analytics company providing marketing data and analytics to enterprises, media and advertising agencies, and publishers. Non-consent will result in ComScore only processing obfuscated personal data. (Privacy Policy)
    Amazon Tracking PixelSome articles display amazon products as part of the Amazon Affiliate program, this pixel provides traffic statistics for those products (Privacy Policy)