Fake Recent Sales Notification Popup

fake-recent-sales-notification-popup.markdown

Fake Recent Sales Notification Popup

Around 85% of visitors leave an online store without buying an item. Among many reasons, lack of trust, engagement, and authenticity prevents new visitors from placing an order. Built from the concept of Social Proof, Sales Pop plugin helps you combat the 85% rate of site abandonment with recent sales notifications.

A Pen by Ahmed El Sheikh on CodePen.

License.

index.html

 <section class="custom-social-proof">
    <div class="custom-notification">
      <div class="custom-notification-container">
        <div class="custom-notification-image-wrapper">
          <img src="https://tidings.today/wp-content/uploads/2018/08/tidings-today-logo-fav.png">
        </div>
        <div class="custom-notification-content-wrapper">
          <p class="custom-notification-content">
            Mr.Nagarajan - Banglore<br>Purchased <b>4</b> Product Name   
            <small>1 hour ago</small>
          </p>
        </div>
      </div>
      <div class="custom-close"></div>
    </div>
  </section>

script.js

     setInterval(function(){ $(".custom-social-proof").stop().slideToggle('slow'); }, 8000);
      $(".custom-close").click(function() {
        $(".custom-social-proof").stop().slideToggle('slow');
      });

scripts

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

style.scss

@import url('https://fonts.googleapis.com/css?family=Open+Sans:400,600');
.custom-social-proof {
    position: fixed;
    bottom: 20px;
    left: 20px;
    z-index: 9999999999999 !important;
  font-family: 'Open Sans', sans-serif;
    //display: none;  /* Uncoment This Line to Hide Initially*/
    .custom-notification {
        width: 320px;
        border: 0;
        text-align: left;
        z-index: 99999;
        box-sizing: border-box;
        font-weight: 400;
        border-radius: 6px;
        box-shadow: 2px 2px 10px 2px hsla(0, 4%, 4%, 0.2);
        background-color: #fff;
        position: relative;
        cursor: pointer;
        .custom-notification-container {
            display: flex !important;
            align-items: center;
            height: 80px;
            .custom-notification-image-wrapper {
                img {
                    max-height: 75px;
                    width: 90px;
                    overflow: hidden;
                    border-radius: 6px 0 0 6px;
                    object-fit: cover;
                }
            }
            .custom-notification-content-wrapper {
                margin: 0;
                height: 100%;
                color: gray;
                padding-left: 20px;
                padding-right: 20px;
                border-radius: 0 6px 6px 0;
                flex: 1;
                display: flex !important;
                flex-direction: column;
                justify-content: center;
                .custom-notification-content {
                    font-family: inherit !important;
                    margin: 0 !important;
                    padding: 0 !important;
                    font-size: 14px;
                    line-height: 16px;
                    small {
                        margin-top: 3px !important;
                        display: block !important;
                        font-size: 12px !important;
                        opacity: .8;
                    }
                }
            }
        }
        .custom-close {
            position: absolute;
            top: 8px;
            right: 8px;
            height: 12px;
            width: 12px;
            cursor: pointer;
            transition: .2s ease-in-out;
            transform: rotate(45deg);
            opacity: 0;
            &::before {
                content: "";
                display: block;
                width: 100%;
                height: 2px;
                background-color: gray;
                position: absolute;
                left: 0;
                top: 5px;
            }
            &::after {
                content: "";
                display: block;
                height: 100%;
                width: 2px;
                background-color: gray;
                position: absolute;
                left: 5px;
                top: 0;
            }
        }
        &:hover {
            .custom-close {
                opacity: 1;
            }
        }
    }
}

If we want to show multi purchasing data like the one purchased 29 minutes ago and another one will be purchased 1 hour before and so on.
Random notification changes according to set interval.

Hi, how can I make more than one and repeat them in sequence?

If we want to show multi purchasing data like the one purchased 29 minutes ago and another one will be purchased 1 hour before and so on.
Random notification changes according to set interval.

How to adjust the duration of appearance and duration of disappearance?