6 Replies Latest reply on Oct 11, 2017 4:23 PM by Liam Dilley

    Sharing Script for Bootstrap 3 Menu

    _Ivan_

      Hello,

       

      I just wanted to share a script that I wrote that should some people get Bootstrap 3 Menu up and running through BC's Meny system. It should also make it easier for clients that don't have lack skills of handling codes.

       

      What the script does is simply go through your html code generated by BC Menu and add the correct attribute for each element.

       

      The cons with this script is that you cant add custom attributes to the code unless you download the soruce code and edit it by yourself.

      If you want to edit it, you will need some typescript knowledge. You can edit with just ES6 to but you will need to edit webpack configs re-compile index.ts to es6 through typescript.

       

      One last thing.. the script is written in pure javascript so you don't need jQuery or any other Javascript library to run it.

       

       

      Link to the script GitHub - Ballpin/BCFrameworkMenu

        • 1. Re: Sharing Script for Bootstrap 3 Menu
          Liam Dilley Adobe Community Professional & MVP

          This is based off the old tags. All you need to do is use the menu module and liquid markup.

          As soon as you do this in an include for example:
          {module_menu menuId="MENUIDHERE" collection="mainMenu" template=""}

          <script>console.log({{mainMenu|json}});</script>

           

          You will have everything you need to form any menu html in full as you wish. Then you can apply CSS and Javascript on top of that but you DO NOT need to do scripting to manipulate the html

          • 2. Re: Sharing Script for Bootstrap 3 Menu
            James | RT Level 2

            Further to Liam's Post - BC actually have a KB on this very thing with some sample code. You will need to review and adjust to plugin Bootstraps classes etc. But this should help.

             

            Pro Tip: Place all the code in an include and place the include within your template. Dont dump the code on the page and expose it to the client

             

            Liquid powered menu

            • 3. Re: Sharing Script for Bootstrap 3 Menu
              _Ivan_ Level 1

              If i remember right, you were not able to use "Edit" feature if there was some liquid code on the page. This was a huge disadvantage for many because that was kinda "the crown jewel" for many clients.

               

              This was the reason why i chose use the old code because with the old code you keep ICE editor. Unless there is something i have missed with the Liquid Engine. I never understood why BC team never chose to make ICE work with Liquid Code. If they did it would have been a huge improvement because you can hide code like you guys say.

              • 4. Re: Sharing Script for Bootstrap 3 Menu
                James | RT Level 2

                I'm gussing BC "haven't put much time into it" because most clientel either have management OR edit pages using the page module. Hence my pro tip. Place the liquid in the template and configure your template and setup your page styles, so they can edit page content through the page module or even through web apps

                 

                As far as liquid with ICE,  i think there are ways, like placing the liquid in a CH, however then you will definitely have scope issues. So my advice is don't go that route.

                 

                In the end do what your comfortable with for sure , however don't write off liquid. Its extremely powerful, and  well worth the trade off of loosing ICE 100%.

                 

                Good Luck.

                • 5. Re: Sharing Script for Bootstrap 3 Menu
                  _Ivan_ Level 1

                  Thanks for your answer James. About the management, I guess you are right. I found that both bad and good though. Good because they extend their api more. But bad because it requires extra work from developers while other providers gives better management out of the box.

                   

                  Believe me i wont leave Liquid out . I'm planning to do something with it later on. I only released this a "Lite" version in case new ones have issues to get their menus up and running.

                   

                  I remember i tried using CH but it wouldn't help either. I guess its because BC don't have SSR? I can imagine that it would work if they had it because then the html would already been rendered from the server and then the client gets fully rendered html. I'm not really a .NET developer so i'm not sure hot it handels the backend.

                   

                  But with CMS systems like Django CMS, Wordpress, Laravel and other paid CMS Platforms this have never been a issue.

                  • 6. Re: Sharing Script for Bootstrap 3 Menu
                    Liam Dilley Adobe Community Professional & MVP

                    Using such site edit tools limit what a site can be. They can only be basic, visual, little content, not much going on sites and not benefit from real functionality.

                    Having some proper code ability in BC with liquid allowing some really rich and powerful websites.. Clients use the admin.

                    Just some basic training and the clients are away. Any enterprise solution either the agency has to be the one doing all the site management OR clients are in powerful admin interfaces, not rich edit site tools.

                     

                    It not really an issue, it is just how these things are. Live edit tools can only handle so much.