Magento 2.1.7 - how to include js on just the homepage

magento.stackexchange https://magento.stackexchange.com/questions/191838

Question

I'm trying to add a counter to my Magento homepage that only starts counting when it's visible on the 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 sitewide.

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

Was it helpful?

Solution

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>
Licensed under: CC-BY-SA with attribution
Not affiliated with magento.stackexchange
scroll top