Cookies plugin

eCommerce Cookies plugin

Cookies plugin dedicated to building eCommerce projects. This plugin is used to save in the browser data that we want to have access at the next user visit. For example how many times or when last time user visit our page

Basic example





Set storage

You can use the Cookie plugin to save some information to your browser's local memory. After clicking the set button you can set the current date in a local storage. When you refresh this page, the date will still be available. After clicking the reset button the date will disappear.


          const key = "date";
          const value = new Date();
          Cookies.setStorage(key, value);
        

Set expiration time

You can set the expiration time (in minutes) of saved data in local storage. Click set, wait 5 seconds and click refresh (or reload this page). Data will be automatically deleted.


          const key = "date";
          const value = new Date();
          const expiry = '0.05'
          Cookies.setStorage(key, value, expiry);
        

Get data from Storage


          Cookies.getStorage('date');
        

Delete data from Storage


          Cookies.removeStorage('date');
        

Periodic checking of data expiration

You can set a task to check if the data has expired and delete it. Set time in minutes and true to start or false to stop task.


          Cookies.periodicCheck(1, true);
        

Advanced example


Different content from new user

You can use local storage to save info about user, and show different content. If you see `Welcome back!` text click reset button to clear storage, refresh this page and back here.


          <span id="dynamic-content-result"></span>
        

          $(document).ready(function () {
            const key = "nextVisit";
            const value = true;
            const firstTimeText = "Welcome!"
            const nextTimeText = "Welcome back!"

            const isNextVisit = Cookies.getStorage(key);
            if ( isNextVisit ) {
              $('#dynamic-content-result').html(nextTimeText)
            } else {
              $('#dynamic-content-result').html(firstTimeText)
              Cookies.setStorage(key, true);
            }
          })
        

Open Modal for new users

Using the showModalNewUser function you can display the modal for new users. Click start button and refresh this page to start simulate this behavior. After next visit modal don't show any more until you again click start.


          <div class="modal fade" id="example-modal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
            <div class="modal-dialog" role="document">
              <div class="modal-content">
                <div class="modal-header">
                  <h5 class="modal-title mx-auto">This is modal for new user</h5>
                </div>
                <div class="modal-body">
                  <p>This model will not appear again until you press the start button and refresh the page</p>
                </div>
                <div class="modal-footer d-flex justify-content-center">
                </div>
              </div>
            </div>
          </div>
        

          Cookies.showModalNewUser('#example-modal');
        

Open Modal after next visit

If you want to display the modal to the person who will visit the page again, you can use the showModalScoring function. enter as a parameter the information after how many visits to the website the modal should appear. Click start button to test this feature and refresh page 3 times.



          <div class="modal fade" id="example-scoring-modal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
            <div class="modal-dialog" role="document">
              <div class="modal-content">
                <div class="modal-header">
                  <h5 class="modal-title mx-auto">This model shows up after the third visit to the page.
                  </h5>
                </div>
                <div class="modal-body">
                  <p>This model will not appear again until you press the start button and refresh the pages 3 times</p>
                </div>
                <div class="modal-footer d-flex justify-content-center">
                </div>
              </div>
            </div>
          </div>

        

          Cookies.showModalScoring('#example-scoring-modal', 3);