[TomatoCart] – An elegant notification bar for your store

In this article, I will introduce an elegant notification bar for your store. You could pass any success, error, warning and general message to notification bar within your program. Then, the message will be shown at the top or bottom notification bar with an elegant animation. Please have a video demonstration:

As you can see, i create four buttons to trigger the notification bar for each kind of message. The notification bar support four kind of events:

  • tc.nofitybar.success
  • tc.nofitybar.error
  • tc.nofitybar.warning
  • tc.nofitybar.info

So, i just use following code to pass the message to it via above four events:

jQuery(function($) {
        $(document.body).on('click', '.success-notify', function() {
            $.publish('tc.nofitybar.success', 'Notification: clicking the notification button for successful message!');
        });

        $(document.body).on('click', '.error-notify', function() {
            $.publish('tc.nofitybar.error', 'Notification: clicking the notification button for error message!');
        });

        $(document.body).on('click', '.warning-notify', function() {
            $.publish('tc.nofitybar.warning', 'Notification: clicking the notification button for warning message!');
        });

        $(document.body).on('click', '.info-notify', function() {
            $.publish('tc.nofitybar.info', 'Notification: clicking the notification button for info message!');
        });
    });

Yes. It’s very easy. You just need to call $.publish method to trigger the event and pass a message for the event. It means you can publish the message in any javascript code within your system.

How to apply this notification for your store?

Step 1. Create a notifybar.js under templates > bootstrap > javascript fold with following content:

/*
 * jQuery Tiny Pub/Sub
 * https://github.com/cowboy/jquery-tiny-pubsub
 *
 * Copyright (c) 2013 "Cowboy" Ben Alman
 * Licensed under the MIT license.
 */
+(function($) {

  var o = $({});

  $.subscribe = function() {
    o.on.apply(o, arguments);
  };

  $.unsubscribe = function() {
    o.off.apply(o, arguments);
  };

  $.publish = function() {
    o.trigger.apply(o, arguments);
  };
}(jQuery));

/**
 *
 * A notification bar plugin for tomatocart
 *
 * Author jack.yin
 * jack.yin@tomatocart.com
 *
 */
+function($, window, document) {
    var NotifyBar = function(element, options) {
        this.$element = $(element);
        this.$body = $(document.body);
        this.options = options;

        this.initialize();
    };

    NotifyBar.DEFAULTS = {
        position: 'bottom',
        duration: 3000
    };

    $.extend(NotifyBar.prototype, {
        initialize: function() {
            this.initElement();

            this.position();

            this.bindSubscribe();
        },

        initElement: function() {
            this.$elHeader = this.$element.find('.header');
            this.$elMessage = this.$element.find('.message');
        },

        position: function() {
            this.$element.addClass(this.options.position);
        },

        bindSubscribe: function() {
            $.subscribe('tc.nofitybar.error', $.proxy(function(event, message) {
                this.notify(message, 'error');
            }, this));

            $.subscribe('tc.nofitybar.warning', $.proxy(function(event, message) {
                this.notify(message, 'warning');
            }, this));

            $.subscribe('tc.nofitybar.info', $.proxy(function(event, message) {
                this.notify(message, 'info');
            }, this));

            $.subscribe('tc.nofitybar.success', $.proxy(function(event, message) {
                this.notify(message, 'success');
            }, this));
        },

        notify: function(message, type) {
            this.setHeader(type);
            this.setMessage(message);
            this.mark(type);

            this.show();

            setTimeout($.proxy(this.hide, this), this.options.duration);
        },

        setHeader: function(type) {
            switch (type) {
                case 'error':
                    this.$elHeader.empty().html('Error:');
                    break;
                case 'warning':
                    this.$elHeader.empty().html('Warning:');
                    break;
                case 'info':
                    this.$elHeader.empty().html('Info:');
                    break;
                case 'success':
                    this.$elHeader.empty().html('Success:');
                    break;
            }
        },

        setMessage: function(message) {
            this.$elMessage.empty().html(message);
        },

        mark: function(type) {
            switch (type) {
                case 'error':
                    this.$element.removeClass('positive info warning').addClass('negative');
                    break;
                case 'warning':
                    this.$element.removeClass('positive info negative').addClass('warning');
                    break;
                case 'info':
                    this.$element.removeClass('positive warning negative').addClass('info');
                    break;
                case 'success':
                    this.$element.removeClass('info warning negative').addClass('positive');
                    break;
            }
        },

        show: function() {
            this.$element.removeClass('hide');

            if (this.options.position == 'bottom') {
                this.$element.addClass('animated slideInUp');
            }

            if (this.options.position == 'top') {
                this.$element.addClass('animated slideInDown');
            }
        },

        hide: function() {
            if (this.options.position == 'bottom') {
                this.$element.removeClass('slideInUp').addClass('slideOutDown');

                setTimeout($.proxy(function() {
                    this.$element.removeClass('animated slideOutDown').addClass('hide');

                }, this), 500);
            }

            if (this.options.position == 'top') {
                this.$element.removeClass('slideInDown').addClass('slideOutUp');

                setTimeout($.proxy(function() {
                    this.$element.removeClass('animated slideOutUp').addClass('hide');

                }, this), 500);
            }
        }
    });

    function Plugin(option) {
        var $this   = $(this),
            data    = $this.data('tc.NotifyBar'),
            options = $.extend({}, NotifyBar.DEFAULTS, typeof option == 'object' && option);

        if ( ! data) {
            $this.data('tc.NotifyBar', (data = new NotifyBar(this, options)));
        }

        if (typeof option == 'string') {
            data[option]();
        }
    }

    $.fn.NotifyBar = Plugin;

    $.fn.NotifyBar.Constructor = NotifyBar;

    $(function() {
        $('[data-ui="NotifyBar"]').each(function() {
            var $target = $(this);

            Plugin.call($target, $target.data());
        });
    });
}(jQuery, window, document);

Step 2. Create a notifybar.css under templates > bootstrap > css fold with following content:

/*******************************
            Message
*******************************/

.ui.message {
  position: relative;
  min-height: 1em;
  margin: 1em 0em;
  background: #F8F8F9;
  padding: 1em 1.5em;
  line-height: 1.4285em;
  color: rgba(0, 0, 0, 0.87);
  -webkit-transition: opacity 0.1s ease, color 0.1s ease, background 0.1s ease, box-shadow 0.1s ease;
          transition: opacity 0.1s ease, color 0.1s ease, background 0.1s ease, box-shadow 0.1s ease;
  border-radius: 0.28571429rem;
  box-shadow: 0px 0px 0px 1px rgba(34, 36, 38, 0.22) inset, 0px 0px 0px 0px rgba(0, 0, 0, 0);
}
.ui.message:first-child {
  margin-top: 0em;
}
.ui.message:last-child {
  margin-bottom: 0em;
}

/*--------------
     Content
---------------*/


/* Header */
.ui.message .header {
  display: block;
  font-family: 'Lato', 'Helvetica Neue', Arial, Helvetica, sans-serif;
  font-weight: bold;
  margin: -0.14285em 0em 0rem 0em;
}

/* Default font size */
.ui.message .header:not(.ui) {
  font-size: 1.14285714em;
}

/* Paragraph */
.ui.message p {
  opacity: 0.85;
  margin: 0.75em 0em;
}
.ui.message p:first-child {
  margin-top: 0em;
}
.ui.message p:last-child {
  margin-bottom: 0em;
}
.ui.message .header + p {
  margin-top: 0.25em;
}

/* List */
.ui.message .list:not(.ui) {
  text-align: left;
  padding: 0em;
  opacity: 0.85;
  list-style-position: inside;
  margin: 0.5em 0em 0em;
}
.ui.message .list:not(.ui):first-child {
  margin-top: 0em;
}
.ui.message .list:not(.ui):last-child {
  margin-bottom: 0em;
}
.ui.message .list:not(.ui) li {
  position: relative;
  list-style-type: none;
  margin: 0em 0em 0.3em 1em;
  padding: 0em;
}
.ui.message .list:not(.ui) li:before {
  position: absolute;
  content: '•';
  left: -1em;
  height: 100%;
  vertical-align: baseline;
}
.ui.message .list:not(.ui) li:last-child {
  margin-bottom: 0em;
}

/* Icon */
.ui.message > .icon {
  margin-right: 0.6em;
}

/* Close Icon */
.ui.message > .close.icon {
  cursor: pointer;
  position: absolute;
  margin: 0em;
  top: 0.78575em;
  right: 0.5em;
  opacity: 0.7;
  -webkit-transition: opacity 0.1s ease;
          transition: opacity 0.1s ease;
}
.ui.message > .close.icon:hover {
  opacity: 1;
}

/* First / Last Element */
.ui.message > :first-child {
  margin-top: 0em;
}
.ui.message > :last-child {
  margin-bottom: 0em;
}


/*******************************
            Coupling
*******************************/

.ui.dropdown .menu > .message {
  margin: 0px -1px;
}


/*******************************
            States
*******************************/


/*--------------
    Visible
---------------*/

.ui.visible.visible.visible.visible.message {
  display: block;
}
.ui.icon.visible.visible.visible.visible.message {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
}

/*--------------
     Hidden
---------------*/

.ui.hidden.hidden.hidden.hidden.message {
  display: none;
}


/*******************************
            Variations
*******************************/


/*--------------
    Compact
---------------*/

.ui.compact.message {
  display: inline-block;
}

/*--------------
    Attached
---------------*/

.ui.attached.message {
  margin-bottom: -1px;
  border-radius: 0.28571429rem 0.28571429rem 0em 0em;
  box-shadow: 0em 0em 0em 1px rgba(34, 36, 38, 0.15) inset;
  margin-left: -1px;
  margin-right: -1px;
}
.ui.attached + .ui.attached.message:not(.top):not(.bottom) {
  margin-top: -1px;
  border-radius: 0em;
}
.ui.bottom.attached.message {
  margin-top: -1px;
  border-radius: 0em 0em 0.28571429rem 0.28571429rem;
  box-shadow: 0em 0em 0em 1px rgba(34, 36, 38, 0.15) inset, 0px 1px 2px 0 rgba(34, 36, 38, 0.15);
}
.ui.bottom.attached.message:not(:last-child) {
  margin-bottom: 1em;
}
.ui.attached.icon.message {
  width: auto;
}

/*--------------
      Icon
---------------*/

.ui.icon.message {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  width: 100%;
  -webkit-box-align: center;
  -webkit-align-items: center;
      -ms-flex-align: center;
          align-items: center;
}
.ui.icon.message > .icon:not(.close) {
  display: block;
  -webkit-box-flex: 0;
  -webkit-flex: 0 0 auto;
      -ms-flex: 0 0 auto;
          flex: 0 0 auto;
  width: auto;
  line-height: 1;
  vertical-align: middle;
  font-size: 3em;
  opacity: 0.8;
}
.ui.icon.message > .content {
  display: block;
  -webkit-box-flex: 1;
  -webkit-flex: 1 1 auto;
      -ms-flex: 1 1 auto;
          flex: 1 1 auto;
  vertical-align: middle;
}
.ui.icon.message .icon:not(.close) + .content {
  padding-left: 0rem;
}
.ui.icon.message .circular.icon {
  width: 1em;
}

/*--------------
    Floating
---------------*/

.ui.floating.message {
  box-shadow: 0px 0px 0px 1px rgba(34, 36, 38, 0.22) inset, 0px 2px 4px 0px rgba(34, 36, 38, 0.12), 0px 2px 10px 0px rgba(34, 36, 38, 0.08);
}

/*--------------
     Colors
---------------*/

.ui.black.message {
  background-color: #1B1C1D;
  color: rgba(255, 255, 255, 0.9);
}

/*--------------
     Types
---------------*/


/* Positive */
.ui.positive.message {
  background-color: #FCFFF5;
  color: #2C662D;
}
.ui.positive.message,
.ui.attached.positive.message {
  box-shadow: 0px 0px 0px 1px #A3C293 inset, 0px 0px 0px 0px rgba(0, 0, 0, 0);
}
.ui.positive.message .header {
  color: #1A531B;
}

/* Negative */
.ui.negative.message {
  background-color: #FFF6F6;
  color: #9F3A38;
}
.ui.negative.message,
.ui.attached.negative.message {
  box-shadow: 0px 0px 0px 1px #E0B4B4 inset, 0px 0px 0px 0px rgba(0, 0, 0, 0);
}
.ui.negative.message .header {
  color: #912D2B;
}

/* Info */
.ui.info.message {
  background-color: #F8FFFF;
  color: #276F86;
}
.ui.info.message,
.ui.attached.info.message {
  box-shadow: 0px 0px 0px 1px #A9D5DE inset, 0px 0px 0px 0px rgba(0, 0, 0, 0);
}
.ui.info.message .header {
  color: #0E566C;
}

/* Warning */
.ui.warning.message {
  background-color: #FFFAF3;
  color: #573A08;
}
.ui.warning.message,
.ui.attached.warning.message {
  box-shadow: 0px 0px 0px 1px #C9BA9B inset, 0px 0px 0px 0px rgba(0, 0, 0, 0);
}
.ui.warning.message .header {
  color: #794B02;
}

/* Error */
.ui.error.message {
  background-color: #FFF6F6;
  color: #9F3A38;
}
.ui.error.message,
.ui.attached.error.message {
  box-shadow: 0px 0px 0px 1px #E0B4B4 inset, 0px 0px 0px 0px rgba(0, 0, 0, 0);
}
.ui.error.message .header {
  color: #912D2B;
}

/* Success */
.ui.success.message {
  background-color: #FCFFF5;
  color: #2C662D;
}
.ui.success.message,
.ui.attached.success.message {
  box-shadow: 0px 0px 0px 1px #A3C293 inset, 0px 0px 0px 0px rgba(0, 0, 0, 0);
}
.ui.success.message .header {
  color: #1A531B;
}

/* Colors */
.ui.inverted.message,
.ui.black.message {
  background-color: #1B1C1D;
  color: rgba(255, 255, 255, 0.9);
}
.ui.red.message {
  background-color: #FFE8E6;
  color: #DB2828;
}
.ui.red.message .header {
  color: #c82121;
}
.ui.orange.message {
  background-color: #FFEDDE;
  color: #F2711C;
}
.ui.orange.message .header {
  color: #e7640d;
}
.ui.yellow.message {
  background-color: #FFF8DB;
  color: #B58105;
}
.ui.yellow.message .header {
  color: #9c6f04;
}
.ui.olive.message {
  background-color: #FBFDEF;
  color: #8ABC1E;
}
.ui.olive.message .header {
  color: #7aa61a;
}
.ui.green.message {
  background-color: #E5F9E7;
  color: #1EBC30;
}
.ui.green.message .header {
  color: #1aa62a;
}
.ui.teal.message {
  background-color: #E1F7F7;
  color: #10A3A3;
}
.ui.teal.message .header {
  color: #0e8c8c;
}
.ui.blue.message {
  background-color: #DFF0FF;
  color: #2185D0;
}
.ui.blue.message .header {
  color: #1e77ba;
}
.ui.violet.message {
  background-color: #EAE7FF;
  color: #6435C9;
}
.ui.violet.message .header {
  color: #5a30b5;
}
.ui.purple.message {
  background-color: #F6E7FF;
  color: #A333C8;
}
.ui.purple.message .header {
  color: #922eb4;
}
.ui.pink.message {
  background-color: #FFE3FB;
  color: #E03997;
}
.ui.pink.message .header {
  color: #dd238b;
}
.ui.brown.message {
  background-color: #F1E2D3;
  color: #A5673F;
}
.ui.brown.message .header {
  color: #935b38;
}

/*--------------
     Sizes
---------------*/

.ui.small.message {
  font-size: 0.92857143em;
}
.ui.message {
  font-size: 1em;
}
.ui.large.message {
  font-size: 1.14285714em;
}
.ui.huge.message {
  font-size: 1.42857143em;
}
.ui.massive.message {
  font-size: 1.71428571em;
}

/*******************************
        animated
*******************************/

@charset "UTF-8";

/*! inject-banner */

.animated {
  animation-duration: 0.5s;
  animation-fill-mode: both;
}

.animated.infinite {
  animation-iteration-count: infinite;
}

.animated.hinge {
  animation-duration: 1s;
}

.animated.flipOutX,
.animated.flipOutY,
.animated.bounceIn,
.animated.bounceOut{
  animation-duration: .75s;
}

@keyframes slideInUp {
  from {
    transform: translate3d(0, 100%, 0);
    visibility: visible;
  }

  to {
    transform: translate3d(0, 0, 0);
  }
}

.slideInUp {
  animation-name: slideInUp;
}

@keyframes slideInDown {
  from {
    transform: translate3d(0, -100%, 0);
    visibility: visible;
  }

  to {
    transform: translate3d(0, 0, 0);
  }
}

.slideInDown {
  animation-name: slideInDown;
}


@keyframes slideOutDown {
  from {
    transform: translate3d(0, 0, 0);
  }

  to {
    visibility: hidden;
    transform: translate3d(0, 100%, 0);
  }
}

.slideOutDown {
  animation-name: slideOutDown;
}

@keyframes slideOutUp {
  from {
    transform: translate3d(0, 0, 0);
  }

  to {
    visibility: hidden;
    transform: translate3d(0, -100%, 0);
  }
}

.slideOutUp {
  animation-name: slideOutUp;
}


/*******************************
            notifybar
*******************************/
[data-ui="NotifyBar"] {
    position:fixed !important;
    width: 900px !important;
    z-index:9999;
    margin-left: -470px !important;
    margin-right:0;
}

[data-ui="NotifyBar"].top {
    left: 50% !important;
    top: 0;
    margin-top: 0 !important;
}

[data-ui="NotifyBar"].bottom {
    left: 50% !important;
    bottom: 0;

    margin-bottom: 10px !important;
    margin-top: 10px !important;
}

[data-ui="NotifyBar"].hide {
    display:none !important;
}

Step 3. Go to templates > bootstrap > index.php.

— Find following code snippet:

<script type="text/javascript">
  jQuery.noConflict();
</script>

— Add following line after it:

<script type="text/javascript" src="templates/<?php echo $osC_Template->getCode(); ?>/javascript/notifyBar.js"></script>

— Add following code before </body> tag:

<!-- Notify bar -->
<div data-ui="NotifyBar" class="ui message hide" data-position="top">
    <div class="content">
        <div class="header"></div>

        <div class="message"></div>
    </div>
</div>

That’s it. Now, you could call following code in any js file to trigger the notification bar:

  • jQuery.publish(‘tc.nofitybar.success’, successMessage)
  • jQuery.publish(‘tc.notifybar.error’, errorMessage)
  • jQuery.publish(‘tc.notifybar.warning’, warningMessage)
  • jQuery.publish(‘tc.notifybar.info’, infoMessage)

If you need to show the notification bar at the bottom, just change the data-position=”top” to data-position=”bottom”. After that, the notification bar will be shown at the bottom.

Done. It’s an effective notification bar plugin for you who are implement plugin for TomatoCart. You could show the message to your user easily with it.

Looking for quality TomatoCart hosting? Check out Arvixe Web Hosting

Tags: | Posted under TomatoCart | RSS 2.0

Author Spotlight

Jack Yin

TomatoCart Developer & Co Founder - Arvixe Web Hosting / TomatoCart Community Liaison

Leave a Reply

Your email address will not be published. Required fields are marked *