I have just upgraded a site to SS 3.4

I have also chosen to install the dynamic/flexslider module to my HomePage page type to add a slider which can be managed in the admin.

I have done everything required in the installation docs, however it is not working. It adds the content from the admin, puts it in the right place, but from what I can see, doesn't add the the custom script to initialise the flexslider script.

This is my mysite/_config/config.yml

---
Name: mysite
After:
  - 'framework/*'
  - 'cms/*'
---
# YAML configuration for SilverStripe
# See http://doc.silverstripe.org/framework/en/topics/configuration
# Caution: Indentation through two spaces, not tabs
SSViewer:
  theme: 'mytheme'
HomePage:
  extensions:
    - FlexSlider

I found the flexslider jquery was clashing with the Silverstripe jquery, so I removed the script references from the Flexslider include, installed Flexslider from bower into my theme SRC folder. I used those references in my gulp task, added as a SCSS partial for the CSS and compiled it into the compressed script and CSS files. Then in Page.php, I blocked the default jquery reference and added my compiled files ( see below ), now it works perfectly.

** _config.php **
HomePage::add_extension('FlexSlider');
HomePage_Controller::add_extension('FlexSliderExtension');

** gulpfile.js **
// Concatenate & Minify JS
gulp.task('scripts', function() {
gulp.src([
'./bower_components/{placeholder for lots more scripts}',
'./bower_components/flexslider/jquery.flexslider.js',
'./js/app.js'
])
.pipe(concat('scripts.js'))
.pipe(rename({suffix: '.min'}))
.pipe(uglify())
.pipe(gulp.dest(dest + 'js'))
});

** Page.php **
public function init() {
parent::init();
Requirements::block(THIRDPARTY_DIR . '/jquery/jquery.js');
Requirements::css("{$this->ThemeDir()}/css/main.css");
Requirements::javascript("http://ajax.googleapis.com/ajax/libs/jquery/2.2.3/jquery.min.js");
Requirements::javascript("{$this->ThemeDir()}/js/scripts.min.js");
);

Hi benald

Thanks for your reply.

I do not use gulp or scss.

Can you recommend how to achieve the same outcome without compiling or compressing the scripts and files?

Cheers
Grant

Hey Grant,

ignore the gulp section in my response, then open the Flexslider template in the 'flexslider/template/include' location and copy the Flexslider.ss into your theme Include folder. In that file remove the jquery reference.

then check the config settings are correct, In your `mysite/_config/config.yml` add the following :

HomePage:
  extensions:
    - FlexSlider
HomePage_Controller:
  extensions:
    - FlexSliderExtension

Alternatively you could add the following to your `mysite/_config.php` file:

HomePage::add_extension('FlexSlider'); 
HomePage_Controller::add_extension('FlexSliderExtension')

** Page.php **

public function init() {
parent::init();
Requirements::block(THIRDPARTY_DIR . '/jquery/jquery.js'); // Blocks Silverstripes default jquery
Requirements::css("{$this->ThemeDir()}/css/main.css");  // your theme or mysite stylesheet reference
Requirements::javascript("http://ajax.googleapis.com/ajax/libs/jquery/2.2.3/jquery.min.js");  // or whichever jquery version you wish to use
Requirements::javascript("{$this->ThemeDir()}/js/scripts.min.js");  // Your scripts go here, one by one followed by the initialise or compiled as I have
);

that should give you the same result :)

Ben

Hey Ben

This works great!

Really appreciate your help tweaking this :)

Cheers
Grant

your welcome :)