0

Im trying to add a counter to my magento homepage that only starts counting when its visible on screen. I have got the counter to work with jquery.appear.js and now want to implement it on my magento 2.1.7 site. I will place all of this code in a custom block and add it to the homepage.

<div id="counters">
    <div class="container-fluid text-center">
        <div class="row">
            <div class="col-xs-12">
                [SMILEY IMG]<br><span class="counter" data-count="100"></span><span>%</span><br>Satisfaction
            </div>
        </div>
    </div>
</div>

<script src="jquery-3.2.1.min.js"></script> 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> 
<script src="jquery.appear.js"></script>

<script>
    jQuery(document).ready(function( $ ) {
        $('#counters').appear(function() {
            $('.counter').each(function() {
              var $this = $(this),
              countTo = $this.attr('data-count');
              $({ countNum: $this.text()}).animate({
                countNum: countTo
            },
        {
            duration: 5000,
            easing:'linear',
            step: function() {
                $this.text(Math.floor(this.countNum));
            },
            complete: function() {
            $this.text(this.countNum);
        }
      });  
    });
});

});

How do i include the jquery.appear.js into my current theme where it will only be included on the home page and none of the other pages? I figure that it should be added after jquery.

The other solutions i have come across here all include it on all pages across the site. I want to limit it just to the homepage.

I hope the solution is as easy as modifying a local.xml file in one of my app/design/frontend/[package]/[theme]/ folders to add this new js file.

<layout>
<default>
    <reference name="head">
        <action method="addItem"><type>skin_js</type><name>js/jquery.appear-min.js</name></action>
    </reference>
</default>
</layout>

Thanks in advance.

[UPDATE]

As per @Sohel Rana, I have added the jquery.appear.js into /Vendor_ThemeName/view/frontend/web/js/ and I will add the following code into a custom block.

<script>
    require(['jquery', 'Smartwave_porto_child/js/jquery.appear', 'domReady!'], function($, jqueryAppear){

        jQuery(document).ready(function( $ ) {
            $('#counters').appear(function() {

                $('.counter').each(function() {
                  var $this = $(this),
                      countTo = $this.attr('data-count');

                  $({ countNum: $this.text()}).animate({
                    countNum: countTo
                  },
                  {
                    duration: 5000,
                    easing:'linear',
                    step: function() {
                      $this.text(Math.floor(this.countNum));
                    },
                    complete: function() {
                      $this.text(this.countNum);
                    }

                  });  
                });
            });
        });     
    });
</script>

Is this correct?

I want it to only be included on the homepage but it seems like this will make it available site wide.

I read in another post that they also had to include it in their requirejs-config.js file, does this not need that step?

2

Try to use cms_index_index.xml.

VendorName/ModuleName/view/frontend/layout/cms_index_index.xml


<?xml version="1.0"?>
<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
    <body>
        <referenceContainer name="content">
            <block class="Magento\Framework\View\Element\Template" name="testForm" template="VendorName_ModuleName::form.phtml" cacheable="false">
            </block>
        </referenceContainer>
    </body>
</page>

Now create form.phtml under templates directory and added your code here.

[Update]

You can add JS following way. But always avoid to add js directly, try to use requirejs for loading js.

VendorName/ModuleName/view/frontend/layout/cms_index_index.xml


<?xml version="1.0"?>
<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
    <head>
        <script src="VendorName_ModuleName::jquery.appear.js"/>
    </head>
</page>

Recommend: In your case add js file under VendorName/ModuleName/view/frontend/web/js, then added following sample code into phtml


<script>
    require(
        [
            'jquery',
            'VendorName_ModuleName/js/jquery.appear-min'
        ],
        function(
            $,
            jqueryAppear
        ) {
            // custom code here
        });
</script>
  • The code to run the counter will be included as a block on the homepage. I will edit my post to explain that. I just want include the jquery.appear.js on the homepage. Will this work for that? – Blitzo Sep 4 '17 at 12:14
  • yes agreed wont directly include the js file. however, wont your update of using VendorName/ModuleName/view/frontend/web/js include the js on every page or how can i just limit it to the homepage? – Blitzo Sep 4 '17 at 13:07
  • VendorName/ModuleName/view/frontend/layout/cms_index_index.xml - load only homepage – Sohel Rana Sep 4 '17 at 15:58
  • ok thanks let me try it out. Can I just add it to the custom block that I am adding to my homepage?. – Blitzo Sep 5 '17 at 11:25
  • Yes, try first one that's add a simple block. – Sohel Rana Sep 5 '17 at 11:32

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.