Home Page Slider In SCA

Jira Code: OTG-20

BX Slider can be implemented in the SCA Home page. Images can be add in the NetSuite website configuration. We need to extend home. View and configuration in the development code to implement Bx slider.

//Home.View.Extended

define(
    'Home.View.Extended', [
        'Home.View', 'SC.Configuration', 'underscore', 'Utils', 'jQuery'
    ],
    function HomeViewExtended(
        HomeView, Configuration, _, Utils, jQuery
    ) {
        'use strict';

        var context = HomeView.prototype.getContext.apply(this, _.toArray(arguments));

        return _.extend(HomeView.prototype, {
            initialize: function() {
                    var self = this;

                    this.windowWidth = jQuery(window).width();
                    this.on('afterViewRender', function() {
                        _.initBxSlider(self.$('[data-slider]'), {
                            controls: true,
                            autoHover: true,
                            auto: true,
                            pause: 2000,
                            nextText: '<a class="home-gallery-next-icon"></a>',
                            prevText: '<a class="home-gallery-prev-icon"></a>'
                        });


                        setTimeout(function() {
                            if ($('.home-image-slider-li-component').length) {
                                $('.home-image-slider-li-component').css("width", jQuery(window).width());
                                _.initBxSlider(self.$('[data-slider]'), {
                                    controls: true,
                                    autoHover: true,
                                    auto: true,
                                    pause: 2000,
                                    nextText: '<a class="home-gallery-next-icon"></a>',
                                    prevText: '<a class="home-gallery-prev-icon"></a>'
                                });
                            }

                        }, 2000);

                    });


                    var windowResizeHandler = _.throttle(function() {
                        if (_.getDeviceType(this.windowWidth) === _.getDeviceType(jQuery(window).width())) {

                            return;
                        }
                        this.showContent();

                        _.resetViewportWidth();

                        this.windowWidth = jQuery(window).width();

                    }, 1000);

                    this._windowResizeHandler = _.bind(windowResizeHandler, this);

                    this._windowResizeHandler();

                    jQuery(window).on('resize', this._windowResizeHandler);
                }

                ,
            getContext: function getContext() {
                var images = jQuery.extend(true, {}, Configuration.get('home.carouselImages'));

                /*  for (var i = 0; i < images.length; i++) {
                      carouselImages.url = images[i].url;
                  }*/

                var carouselImages = _.map((images || []), function map(image) {
                    image.url = Utils.getAbsoluteUrlOfNonManagedResources(image.url);
                    image.hasHref = !!image.href && image.href;
                    return image;
                });


                return {
                    carouselImages: carouselImages
                };
            }
        });
    });

//CONFIGURATION
{
	"type": "object"
,	"subtab": {
        "id": "home",
        "title": "Home",
        "description": "Home",
        "group": "layout"
    }
,	"properties": {
		"home.carouselImages": {
			"group": "layout",
            "type": "array",
            "title": "Carousel images",
            "docRef": "bridgehead_4666978268",
            "description": "Carousel images Urls",
			"items": {
				"type": "object",
				"properties": {
					"url" : {
						"type": "string",
						"title": "Url",
						"description": ""
					},
					"text": {
						"type": "string",
						"title": "Text",
						"description": ""
					},
					"href": {
						"type": "string",
						"title": "Link",
						"description": ""
					},
					"dataTouchpoint": {
						"type": "string",
						"title": "Touchpoint",
						"description": ""
					},
					"dataHashtag": {
						"type": "string",
						"title": "Hashtag",
						"description": ""
					}
				}
			},
            "default": []
		}
	,	"home.bottomBannerImages": {
			"group": "layout",
			"type": "array",
			"title": "Bottom banners images",
			"docRef": "bridgehead_4393296407",
			"description": "Bottom banners images Urls",
			"items": {
				"type": "string",
				"title": "Url"
			},
			"default": [
				"img/banner-bottom-home-1.jpg"
			,	"img/banner-bottom-home-2.jpg"
			,	"img/banner-bottom-home-3.jpg"
			]
		}
	}
}

// Home.tpl

<div class="home-slider-container" style="margin: 0px;">
    <div class="home-image-slider" style="padding: 0px;background-color: black;">
        <ul data-slider class="home-image-slider-list">
            {{#each carouselImages}}
            <li class="home-image-slider-li-component">
                <div class="home-slide-main-container">
                    {{#if hasHref}}
                    <a href="{{ href }}" data-touchpoint="{{ dataTouchpoint }}" data-hashtag="{{ dataHashtag }}">
                        <img class="home-slide-main-container-immage" src="{{ url }}" alt="{{ text }}" />
                    </a>
                    {{else}}
                    <img class="home-slide-main-container-immage" src="{{ url }}" alt="{{ text }}" />
                    {{/if}}
                </div>
            </li>
            {{/each}}
        </ul>
    </div>
</div>