Home Forums Porto Template counters (pre requisites)

This topic contains 3 replies, has 2 voices, and was last updated by  Support2 1 month, 2 weeks ago. This post has been viewed 125 times

Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
    Posts
  • #10018223

    ostrica
    Participant

    I bought admin and responsive html and I want to know how to use counters on admin template. I’m having hard time which of the vendors should I load.


    #10018227

    Support2
    Keymaster

    Hello,

    the only way to import this feature to Porto Admin is manually.
    The counter plugin of Porto HTML it’s a thirdy party librarie.

    My suggestion to you is manually install and configure that library in Porto Admin:
    https://github.com/mhuggins/jquery-countTo

    1) You need to download the plugin on link above, put him in assets/javascripts/ folder and reference in HTML before theme.custom.js. Like this code below:

    ...
    ..
    .
    <!-- Theme Custom -->
    <script src="assets/javascripts/jquery.countTo.js"></script>
    <script src="assets/javascripts/theme.custom.js"></script>
    ...
    ..
    .

    2) Create a counter element in HTML where you want like this:

    <span class="counter" data-from="25" data-to="75"></span>

    3) In theme.custom.js add this code:

    <script type="text/javascript">
      $('.counter').countTo();
    </script>

    Please try that and let me know if you need further assistance.

    Kind Regards,

    Rodrigo.


    #10018233

    ostrica
    Participant

    It works!! Just a follow up question, how do you apply the culture language for the numbers? I’m currently using dutch culture this means the decimal symbol is “,” instead of “.”

    using different decimal symbol gives me “NaN” at the end of countdown.


    #10018235

    Support2
    Keymaster

    Hello,

    great that worked :)

    For decimal with “,” change $('.counter').countTo(); in theme.custom.js to this code below:

    $('.counter').countTo({
      	formatter: function (value, options) {
        	    value = value.toFixed(options.decimals);
        	    value = value.replace(/\B(?=(\d{3})+(?!\d))/g, ',');
        	    return value;
      	}
    });

    And in HTML don’t insert “,”, test with some like this:

    <span class="counter" data-from="1000" data-to="10000"></span>

    Please try that and let me know if you need further assistance.

    Kind Regards,

    Rodrigo.


    • This reply was modified 1 month, 2 weeks ago by  Support2.
    • This reply was modified 1 month, 2 weeks ago by  Support2.
Viewing 4 posts - 1 through 4 (of 4 total)