2

I am using .slick command on the javascript for my page carousels. When I try to edit items in Sitecore Experience Editor(Sitecore 9 with SXA) my Save button is disabled and I am unable to add any new or delete existing fields or components on my page.

I guess there was some existing issue with .slick command in Sitecore 8.1. Do anyone have any update on this or any resolution to make the experience editor work? I know SXA have the default carousel but I need my custom carousel with the script to work.

Note: Below is the sample of the .js file and there is no issue with the script.

$('.promo .carousel').slick({
  speed: 400,
  slidesToShow:
  accessibility: false,
  responsive: [
    {
      breakpoint: 640,
      settings: {
        slidesToShow: 1,
        slidesToScroll: 1,
        centerMode: true
      }
    }
  ]
});
Improve this question
3
  • Any errors in the browser console? Generally speaking, I avoid running this kind of JS in the Experience Editor and either give the users a different view or make sure the controls render nicely without the JS.
    – jammykam
    Commented Jan 5, 2018 at 14:56
  • Like @jammykam wrote - for 100% you have some errors in the browser console.
    – Dawid Rutkowski
    Commented Jan 5, 2018 at 15:56
  • The console error I see on this is:- "Uncaught TypeError: Cannot read property 'substr' of undefined". When I remove the class referring to the .slick method on my cshtml the experience editor starts working. I need to have the class with the .slick functionality as this defines my custom carousel property.
    – Amitabh
    Commented Jan 7, 2018 at 13:54

2 Answers 2

Reset to default
2

I know this is old but I faced a similar issue with slick and experience editor. Slick by default will assume that all direct children of the carousel div should be slides and since EE injects its own code tags that cause issues. There is an option you can set to limit the children of the carousel with a selector called 'slide'.

Try to set it and test again.

Improve this answer
1

I was experiencing the same issue like while, inserting new view rendering on the page, error was same as mentioned above of Uncaught TypeError: Cannot read the property 'substr' of undefined.

I found one solution and it worked totally for me and that is while you are on edit mode, change your slick property of 'infinite' to false(as by default the value is set to true) and boom there we go with normal flow as before.

Hope it works for you too :)

Improve this answer

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.