Ad

Modify Settings Per Slideshow In Brooklyn Theme For Shopify

- 1 answer

I'm using the Brooklyn Shopify theme, which comes with the Slick slideshow plugin. I've got multiple slideshows set up via sections, but am having difficulty applying different settings to each slideshow (i.e. dot position indicators on one, arrows on another). Each slideshow is being initialized in one function call in the theme.js.liquid file, and I know I need to break this apart somehow to target individual slideshows, but the way the theme has it written has me stumped. There are two chunks of code in the javascript file that affect the slideshows:

Starting at line 1527:

var slickTheme = (function(module, $) {
'use strict';

// Public functions
var init, onInit, beforeChange, afterChange;

// Private variables
var settings, $slider, $allSlides, $activeSlide, $slickDots, windowHeight, scrolled, $heroText, $heroImage;
var currentActiveSlide = 0;

// Private functions
var cacheObjects, checkFirstOnIndex, setFullScreen, sizeFullScreen, setParallax, calculateParallax, slickColors, fixIE8; 
cacheObjects = function () {
slickTheme.cache = {
  $html      : $('html'),
  $window    : $(window),
  $hero      : $('#Hero'),
  $heroImage : $('.hero__image'),
  $headerWrapper: $('.header-wrapper')
};

slickTheme.vars = {
  slideClass      : 'slick-slide',
  activeClass     : 'slick-active',
  hiddenClass     : 'hero__slide--hidden',
  heroHeaderClass : 'hero__header'
};
};
init = function (options) {
cacheObjects();

// Default settings
settings = {
  // User options
  $element       : null,
  fullscreen     : false,
  parallax       : false,

  // Private settings
  isTouch        : Modernizr.touch ? true : false,

  // Slack options
  arrows         : false,
  dots           : true,
  adaptiveHeight : true
};
// Override defaults with arguments
$.extend(settings, options);

// Check if this hero is the first one on the home page
settings.isFirstOnIndex = checkFirstOnIndex();

// Absolutely position header over hero as soon as possible
if (settings.isFirstOnIndex) {
  slickTheme.cache.$headerWrapper.addClass(slickTheme.vars.heroHeaderClass);
}
/*
 * Init slick slider
 *   - Add any additional option changes here
 *   - https://github.com/kenwheeler/slick/#options
 */
settings.$element.slick({
  arrows         : settings.arrows,
  dots           : settings.dots,
  adaptiveHeight : settings.fullscreen ? false : settings.adaptiveHeight,
  draggable      : false,
  fade           : true,
  //autoplay       : theme.strings.slickAuto,
  //autoplaySpeed  : theme.strings.slickAutoSpeed,
  autoplay       : slickTheme.cache.$hero.data('autoplay'),
  autoplaySpeed  : slickTheme.cache.$hero.data('autoplayspeed'),
  onInit         : this.onInit,
  onBeforeChange : this.beforeChange,
  onAfterChange  : this.afterChange
});
};


  module = {
init: init,
onInit: onInit,
beforeChange: beforeChange,
afterChange: afterChange
  };

  return module;

}(slickTheme || {}, jQuery));

Then starting on 2294:

theme.SlideshowSection = (function() {

  function SlideshowSection(container) {

theme.initCache();

var $container = this.$container = $(container);
var sectionId = $container.attr('data-section-id');
var slideshow = this.slideshow = '#Hero';
//var autoplay = $(this.slideshow).attr('data-autoplay');
//var autoplay = $(this.slideshow).attr('data-autoplayspeed');

slickTheme.init({
  $element     : $(slideshow),
  fullscreen   : $(slideshow).data('fullscreen'),
  parallax     : $(slideshow).data('parallax'),
  autoplay       : $(slideshow).data('autoplay'),
  autoplaySpeed  : $(slideshow).data('autoplayspeed')
});

// remove header absolute display if slideshow is empty
if (!$(this.slideshow).hasClass('hero')) {
  $('.header-wrapper').removeClass('hero__header is-light is-dark');
}
}

  return SlideshowSection;
})();

Any point in the right direction would be great appreciated.

Ad

Answer

The slick slider section in brooklyn seems to be fixed in homepage and I am not seeing that we are able to add it again,

So i created another section in the theme. named it as custom-slider. Codes are below.

{% comment %}
  Set hero as enabled so JS is loaded at end of index.liquid.
  Also set variables to control JS settings and appearance.

  hero_full_height variable is also available in Header section.
{% endcomment %}
{% assign hero_full_height = false %}
{% assign hero_parallax = false %}

{% comment %}
  If hero is first section on homepage, add class that sets
  negative top-margin for alignment and force full height.
{% endcomment %}

<div data-section-id="{{ section.id }}" data-section-type="slideshow-section">
  {% if section.blocks.size > 0 %}
    <div class="hero-{{ section.id }} hero{% if hero_full_height %} hero--full-height{% endif %} hero--first" id="Hero-{{ section.id }}"{% if hero_full_height %} data-fullscreen="true"{% endif %}{% if hero_parallax %}data-parallax="true"{% endif %} data-autoplay="{{ section.settings.hero_home_auto }}" data-autoplayspeed="{{ section.settings.home_hero_auto_speed }}">
      {% for block in section.blocks %}

          <div class="hero__slide {{ block.settings.slide_text_color }} slide--{{ block.id }}{% if block.settings.image == blank %} slide--placeholder{% endif %}" data-color="{{ block.settings.slide_text_color }}" {{ block.shopify_attributes }}>
            {% if hero_full_height %}
              {% if block.settings.image == blank %}
                <div class="placeholder-background">
                  {% capture current %}{% cycle 1, 2 %}{% endcapture %}
                  {{ 'lifestyle-' | append: current | placeholder_svg_tag: 'placeholder-svg' }}
                </div>
              {% else %}
                <noscript>
                  {% if forloop.first == true %}
                    <div class="hero__image-no-js"{% if block.settings.image %} style="background-image: url('{{ block.settings.image | img_url: '2048x' }}');"{% endif %}></div>
                  {% endif %}
                </noscript>
                {% assign img_url = block.settings.image | img_url: '1x1' | replace: '_1x1.', '_{width}x.' %}
                <img class="hero__image hero__image--{{ block.id }} lazyload fade-in{% unless forloop.first == true %} lazypreload{% endunless %}"
                  {% if forloop.first == true %}
                    src="{{ block.settings.image | img_url: '300x' }}"
                  {% endif %}
                  data-src="{{ img_url }}"
                  data-widths="[540, 720, 900, 1080, 1296, 1512, 1728, 1944, 2048, 4472]"
                  data-aspectratio="{{ block.settings.image.aspect_ratio }}"
                  data-sizes="auto"
                  data-parent-fit="cover"
                  alt="{{ block.settings.image.alt | escape }}">
              {% endif %}
            {% else %}
              {% if block.settings.image != blank %}
                <noscript>
                  {% if forloop.first == true %}
                    <div class="hero__image-no-js"{% if block.settings.image %} style="background-image: url('{{ block.settings.image | img_url: '2048x' }}');"{% endif %}></div>
                  {% endif %}
                </noscript>
                <div class="hero__image">
                  {% assign img_url = block.settings.image | img_url: '1x1' | replace: '_1x1.', '_{width}x.' %}
                  <img class="hero__image lazyload fade-in"
                    src="{{ block.settings.image | img_url: '300x' }}"
                    data-src="{{ img_url }}"
                    data-widths="[540, 720, 900, 1080, 1296, 1512, 1728, 1944, 2048]"
                    data-aspectratio="{{ block.settings.image.aspect_ratio }}"
                    data-sizes="auto"
                    data-parent-fit="contain"
                    alt="{{ block.settings.image.alt | escape }}">
                </div>
              {% else %}
                <div class="hero__image">
                  {% capture current %}{% cycle 1, 2 %}{% endcapture %}
                  {{ 'lifestyle-' | append: current | placeholder_svg_tag: 'placeholder-svg' }}
                </div>
              {% endif %}
            {% endif %}
            <div class="hero__text-wrap">
              <div class="hero__text-align">
                <div class="hero__text-content">
                  {% unless block.settings.slide_subheading == blank %}
                    <p class="hero__subtitle">
                      {{ block.settings.slide_subheading | escape }}
                    </p>
                  {% endunless %}
                  {% unless block.settings.slide_heading == blank %}
                    <h2 class="h1 hero__title">
                      {{ block.settings.slide_heading | escape }}
                    </h2>
                  {% endunless %}
                  {% unless block.settings.slide_cta == blank %}
                    <a target="_blank" rel="nofollow noreferrer" target="_blank" rel="nofollow noreferrer" href="{{ block.settings.slide_link }}" class="btn hero__cta">
                      {{ block.settings.slide_cta | escape }} <span class="icon icon-arrow-right" aria-hidden="true"></span>
                    </a>
                  {% endunless %}
                </div>
              </div>
            </div>
          </div>

      {% endfor %}
    </div>
  {% endif %}
</div>

 <script type="text/javascript">
    jQuery(document).ready(function(){
      jQuery('#Hero-{{ section.id }}').slick({
             autoplay: {{ section.settings.hero_home_auto }},
             autoplaySpeed : {{ section.settings.home_hero_auto_speed }},
             dots : {{ section.settings.hero_dots }},
             arrows : {{ section.settings.hero_arrows }}
      });
    });
  </script>

{% schema %}
  {
    "name": "Custom Slider",
    "max_blocks": 6,
    "settings": [
      {
        "type": "checkbox",
        "id": "hero_arrows",
        "label": "Show Prev / Next arrows",
        "default": true
      },
      {
        "type": "checkbox",
        "id": "hero_dots",
        "label": "Show Dots",
        "default": true
      },
      {
        "type": "checkbox",
        "id": "hero_home_auto",
        "label": "Auto rotate between slides",
        "default": true
      },
      {
        "type": "select",
        "id": "home_hero_auto_speed",
        "label": "Slide changes every",
        "options": [
            {
            "value": "1000",
            "label": "1 seconds"
          },
          {
            "value": "5000",
            "label": "5 seconds"
          },
          {
            "value": "7000",
            "label": "7 seconds"
          },
          {
            "value": "10000",
            "label": "10 seconds"
          }
        ]
      }
    ],
    "blocks" : [
      {
        "type": "slide",
        "name": "Slide",
        "settings": [
          {
            "type": "image_picker",
            "id": "image",
            "label": "Image"
          },
          {
            "type": "select",
            "id": "slide_text_color",
            "label": "Text color",
            "default": "is-dark",
            "options": [
              {
                "value": "is-light",
                "label": "Light"
              },
              {
                "value": "is-dark",
                "label": "Dark"
              }
            ]
          },
          {
            "type": "text",
            "id": "slide_subheading",
            "label": "Subheading text",
            "default": "An introductory"
          },
          {
            "type": "text",
            "id": "slide_heading",
            "label": "Heading text",
            "default": "Hero Banner"
          },
          {
            "type": "text",
            "id": "slide_cta",
            "label": "Button text",
            "default": "Shop now"
          },
          {
            "type": "url",
            "id": "slide_link",
            "label": "Slide link"
          }
        ]
      }
    ],
    "presets": [
      {
        "name": "Custom Slider",
        "category": "Image"
      }
    ]
  }
{% endschema %}

This slick slideshow runs by its own code so it listens to its own settings only.

You can check slick sliders settings to add more settings for you.

enter image description here

If you need to control more settings for each slider. You need to create some more settings in schema just like these.

Feel free to contact me if you need any help.

enter image description here

Ad
source: stackoverflow.com
Ad