3

Hi we're using iScroll for a BannerSlider on a customer site and everything works fine on my local copy but we're seeing IScroll is not defined(…) when trying to call new IScroll xxx on our magento 2 site. I know its something to do with the Require.js not allowing the IScroll to be defined globally and so I was wondering if there was a solution to this?

Below is the code I've used:

<?php if($_slideShow = $block->getSlideshowData()): ?>
<?php 
$_slideshowHelper = $this->helper('vendor\Slideshow\Helper\Data');
$_helperImage = $this->helper('vendor\Slideshow\Helper\Image');
$_images = $_slideshowHelper->decodeJson($_slideShow['content']);
$_parameters = $_slideshowHelper->decodeJson($_slideShow['parameters']);
$classid = md5(json_encode($block->getData()));
$width = $_parameters['width'] ? $_parameters['width'] : 1280;
$height = $_parameters['height'] ? $_parameters['height'] : 720;
?>
<?php if($_images): ?>
<?php $_firstImage = current($_images); ?>
<div id="wrapper" class="content-wrapper">
    <div id="inner-wrapper" class="inner-wrapper" >
            <div class="std">
                    <div class="wide left parallax">
                <div class="column-1 white" data-title="#" data-text="SHOP NOW" data-color="" data-target="_self" >
                    <div id="image" class="image" data-url="#"> 
                        <a href="#" id="bg" title="" target="_self"><img draggable="false" src="https://example.co.uk/pub/media/vendor/slideshow/cache/1280x720/1/_/1.jpg" alt="#"></a>
                    </div>
                </div>        
                <div id="image-name" class="image-name">
                    <a id="wrap-link" class="wrap-link" href="#" target="_self">
                        <div class="wrap-text iscroll">
                            <div class="image-subtitle">The Definitive 2018 Collection</div>
                        </div>
                    </a>
                </div>
            </div>
            <div class="wide left parallax">
                <div class="column-1 white" data-title="#" data-text="SHOP NOW" data-color="" data-target="_self" >
                    <div id="image" class="image" data-url="#"> 
                        <a href="#" id="bg" title="" target="_self"><img draggable="false" src="https://example.co.uk/pub/media/vendor/slideshow/cache/1280x720/2/_/2_1.jpg" alt="#"></a>
                    </div>
                </div>        
                <div id="image-name" class="image-name">
                    <a id="wrap-link" class="wrap-link" href="#" target="_self">
                        <div class="wrap-text iscroll">
                            <div class="image-subtitle">Fan Club? Join our exclusive list.</div>
                        </div>
                    </a>
                </div>
            </div>
            <div class="wide left parallax">
                <div class="column-1 white" data-title="#" data-text="SHOP NOW" data-color="" data-target="_self" >
                    <div id="image" class="image" data-url="#"> 
                        <a href="#" title="" target="_self"><img draggable="false" src="https://example.co.uk/pub/media/vendor/slideshow/cache/1280x720/3/_/3_1.jpg" alt="#"></a>
                    </div>
                </div>        
                <div id="image-name" class="image-name">
                    <a id="wrap-link" class="wrap-link" href="#" target="_self">
                        <div class="wrap-text iscroll">
                            <div id="position" class="image-subtitle">EUROPE'S LARGEST</div>
                        </div>
                    </a>
                </div>
            </div>
            <div class="wide left parallax">
                <div class="column-1 white" data-title="#" data-text="SHOP NOW" data-color="" data-target="_self" >
                    <div id="image" class="image" data-url="#"> 
                        <a href="#" id="bg" title="" target="_self"><img draggable="false" src="https://example.co.uk/pub/media/vendor/slideshow/cache/1280x720/4/_/4.jpg" alt="#"></a>
                    </div>
                </div>        
                <div id="image-name" class="image-name">
                    <a id="wrap-link" class="wrap-link" href="#" target="_self">
                        <div class="wrap-text iscroll">
                            <div id="position" class="image-subtitle">example' Signature Showrooms</div>
                        </div>
                    </a>
                </div>
            </div>
        </div>
    </div>
                    <!-- END REVOLUTION SLIDER -->


    <script type="text/javascript">
    require(['jquery','iscroll','iscrollprobe','domReady!'],function($){ 

        var myScroll;

        var globalScrollTop = 0;

        var labels = $('.image-name');

        var winHeight = $(window).height();

        var baseLabelPosition = (winHeight - labels.eq(0).outerHeight()) / 2;

        var scrollTop = $(document).scrollTop();

        var container = ".content-wrapper";

         function updatePosition () {
            position.innerHTML = this.y>>0;
        }

        var initLabelPositionsAndVars = function () {

            $('.inner-wrapper > .image-name, .std > .image-name').remove();

            $('.wide.left').each(function(){
                if ( $(this).find('.image-name').length > 0 ) {

                    $('.image-name').css('font-weight', 'bold');
                    console.log('image-name');
                }
            });

            if (typeof myScroll !== 'undefined') {
                globalScrollTop = myScroll.y;
            }

            if ((typeof collectionLoader === 'undefined')&& (!$("body").hasClass("catalogsearch-result-index"))) {
                labels.each(function () {

                    var parent = $(this).parent().hasClass('new-campaign') || $(this).parent().hasClass('page-show') ? $(this).parent() : $(this).parents('.wide.left').eq(0);
                    var baseTop = baseLabelPosition - (parent.offset().top - globalScrollTop);

                    $(this)
                        .data('base-top', baseTop)
                        .css({
                            'top': baseTop
                        });
                });
            }

        }

        var updateLabelPositions = function (scrollTop) {
            if (typeof scrollTop === 'undefined' && typeof myScroll !== 'undefined') {
                scrollTop = myScroll.y;
            }

            if ($('.image-name').length) {
                if (($('body').attr("class").indexOf('cms-home') !== false || $('body').hasClass('cms-show') || $('body').hasClass('cms-boutiques')) && $(window).width() < 768) {
                    labels.attr('style', '');

                    labels.each(function () {
                        var ref = $(this).parent().find('img').first();
                        var top = (ref.height() - $(this).outerHeight()) / 2;

                        $(this).css({
                            'top': top,
                            'margin-top': 0
                        });
                    });
                } else {
                    labels.each(function () {
                        $(this).show().css('top', $(this).data('base-top') - scrollTop);
                    });
                }
            }
        }


        var initCustomScrollbar = function () {

            if (typeof IScroll === 'undefined') {
            return;
        }
            // if user has already scrolled the page, keep offset.
            var cachedOffset = $(document).scrollTop();
            $(container).css('overflow', 'hidden');
            $('.content-wrapper').css('overflow', 'hidden');

            myScroll = new IScroll(container, {
                    probeType: 3,
                    preventDefault: true,
                    preventDefaultException: {
                        tagName: /^(INPUT|TEXTAREA|BUTTON|SELECT|A|IMG|FORM)$/
                    },
                    //mouseWheel: (Modernizr.touch) ? false : true,
                    mouseWheel: true,
                    bounce: false,
                    fadeScrollbar: true,
                    scrollbars: true,
                    interactiveScrollbars: true,
                    deceleration: 0.006,
                    click: true,
                    tap: true,
                    useTransition: true
                });

            myScroll.on("scroll", updateLabelPositions);

            if (cachedOffset > 0) {
                myScroll.scrollTo(0, - cachedOffset);
            }

            $('.std').resize(function () {
                myScroll.refresh();
            });

        }

        initCustomScrollbar();
        initLabelPositionsAndVars();
        updateLabelPositions(0);

    });

    </script>
    <?php endif; ?>
<?php endif; ?>

Thats the full code on the file and as for the require-config:

var config = {
  map: {
        "*": {
            "atq_slider": "js/owlcarousel/owlslider",
            "modal" : "Magento_Ui/js/modal/modal",
            "atq_menu": "js/menu/atq_menu",
            "atq_ajax_product":"vendor_ProductFilter/js/ajaxload",
            "atqZoom": "Magento_Catalog/js/atqZoom",
            "owlSlider": "js/owlcarousel/owl.carousel.min",
            "owlslider" : "js/owlcarousel/owl.carousel.min",
            "owl_slider": "js/owlcarousel/owl.carousel.min",
            "dropdownDialog": "js/abd-dropdown",
            "fotorama/fotorama": "js/fotorama"
        }
    },
    paths:  {
        "owlslider" : "js/owlcarousel/owl.carousel.min",    
        "jquerymousewheel" : "js/jquery.mousewheel",    
        "lodash" : "js/lodash.min",
        "iscroll": "js/iscroll",
        "iscrollprobe": "js/iscroll-probe"
    },
    "shim": {
        "js/owlcarousel/owl.carousel.min": ["jquery"],
        "jquerymousewheel": ["jquery"],
        "iscroll": "js/iscroll",
        "iscrollprobe": "js/iscroll-probe"
    },
    deps: [
        "Magento_Theme/js/example",
    ]

};
4
  • Can you post the whole code you are using? like code in requirejs-config.js – Sukumar Gorai Jul 10 '18 at 9:41
  • Thats all the code on the page and the require-config, hope thats helpful for you. – happy coder Jul 10 '18 at 9:51
  • If it is working on local or other lower environments you may be in developer mode but not on production. Be sure to regenerate assets & clear cache. Also check for minification – B00MER Jul 10 '18 at 10:09
  • Can you update your shim by this code: shim: { "js/owlcarousel/owl.carousel.min": { deps: ["jquery"] }, "jquerymousewheel": { deps: ["jquery"] }, "iscroll": "js/iscroll", "iscrollprobe": "js/iscroll-probe" }, – Sukumar Gorai Jul 10 '18 at 10:57
0

Thanks for the help turned out it was a real simple fix, just needed to add IScroll within the require function enabling IScroll to be at the global level and therefore allowing iscroll to function properly.

Example below along with the link to the answer here:

define(["jquery","scrolloverflow","fullpage"], function($, IScroll) {
example = new IScroll({
...
});
    });

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.