Announcement

Collapse
No announcement yet.

Javascript with Ready Themes (Levels)

Collapse
X
 
  • Filter
  • Time
  • Show
Clear All
new posts

    Javascript with Ready Themes (Levels)

    Hey - I am building a new development store on Levels, and can't for the life of me get a single custom javascript to execute within the levels framework.

    I am wanting to add a simple Flexslider on the SFNT page, and want a simple script that is used for image maps on responsive designs on the Category pages - and no matter where I put the JS and call files within the pages (global head, page header, page footer, within the correct SFNT or CTGY part of the scripts.js file), I get two errors, specifically:

    ReferenceError: $ is not defined
    $(...).imageMap is not a function or $(...).flexslider is not a function

    When I try these scripts on other sites, they work - what am I missing here? Is there a video or guide to adding your own Javacript in MIVA docs? I can't find anything!

    I am not a pro when it comes to scripts, but these seem like really basic - is there a special process for MIVA frameworks to execute scripts?

    Also - the .js/css files are being correctly uploaded and executed on my Firefox Console, I feel the issue is with the calling of them. I may need to write it a bit differently than what the developers give on their site?

    For reference, the flexslider I am using this call on the SFNT page :

    // Can also be used with $(document).ready()
    $(window).load(function() {
    $('.flexslider').flexslider({
    animation: "slide"
    });
    });



    And for the image map script using on the CTGY pages:

    https://www.npmjs.com/package/image-map


    Thanks in advance - this is causing me a ton of headaches :)


    #2
    The script tags you are using to call in these files to be placed below the global footer tag on their respective pages. Then, within the scripts.js file, you would put your initialization strings within the respective page functions. Most likely, the errors you are seeing are due to the fact that you are initializing the scripts before jQuery and/or the scripts are loaded.
    Matt Zimmermann

    Miva Web Developer
    Alchemy Web Development
    https://www.alchemywebdev.com
    Site Development - Maintenance - Consultation

    Miva Certified Developer
    Miva Professional Developer

    https://www.dev4web.net | Twitter

    Comment


      #3
      Hi Matt,

      Thanks for the quick response. So all the calls need to be done in the scripts.js file? I tried putting the one script under the jsCTGY section and got the same result (in bold):

      Code:
          jsCTGY: function () {
              // ---- Conform all subcategory and/or product DIVs to same height ---- //
              cornerstoneUX.sharedFunctions.conformDisplay();
              cornerstoneUX.sharedFunctions.conformDisplay('.sub-category');
      
              // ---- Open Quick View ---- //
              cornerstoneUX.sharedFunctions.openQuickView();
      
         $('img[usemap]').imageMap();
      
          },
      I understand the call needs to be below the script itself, but thought it could be anywhere in the head or body/foot as long as it followed those rules.

      Comment


        #4
        One more followup to what you told me - is it perhaps because I am putting the slider/imagemap js file and the call ABOVE the jquery file (which I think is vendor.min.js for MIVA) ?
        Last edited by Unsu; 09-16-17, 11:57 AM.

        Comment


          #5
          Problem solved - I didn't realize we had to put the JS files below 'vendor.min' in the global footer.

          Thank you - it looks like 9.00007 is going to have a javascript upgrade that makes pinpointing and applying to single pages alot easier? Looks exciting.
          Last edited by Unsu; 09-16-17, 11:59 AM.

          Comment


            #6
            The location of your imagemap call is correct for the jsCTGY function. As for the location, place them after the vendor call.
            Matt Zimmermann

            Miva Web Developer
            Alchemy Web Development
            https://www.alchemywebdev.com
            Site Development - Maintenance - Consultation

            Miva Certified Developer
            Miva Professional Developer

            https://www.dev4web.net | Twitter

            Comment


              #7
              Maybe try placing them in the Details tab section just before the closing body tag.

              Personally, I try to avoid adding or modifying the Miva supplied scripts where ever possible. Updates could overwrite your changes.

              Scott
              Need to offer Shipping Insurance?
              Interactive Design Solutions https://www.myids.net
              MivaMerchant Business Partner | Certified MivaMerchant Web Developer
              Competitive Rates, Custom Modules and Integrations, Store Integration
              AutoBaskets|Advanced Waitlist Integration|Ask about Shipping Insurance Integration
              My T-shirt Collection is mostly MivaCon T-shirts!!

              Comment


                #8
                Originally posted by ids View Post
                Maybe try placing them in the Details tab section just before the closing body tag.

                Personally, I try to avoid adding or modifying the Miva supplied scripts where ever possible. Updates could overwrite your changes.

                Scott
                Agreed - I spend most of my time with Wordpress, and there is nothing more frustrating than modifying core files only to forget what you did when you apply a core update. Thanks for the heads up.

                Comment


                  #9
                  Modern Miva themes are loading most Javascript including jQuery library in the footer.
                  If you need to run your jQuery code earlier (which is not recommended at all), you just need to load jQuery library before your code (alternatively in the header).

                  Something like
                  Code:
                  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
                  in the header will do the job.

                  But better DON'T! :-)

                  Comment


                    #10

                    Also, personally, i recommend ALWAYS using $(document).ready(function(){ // Your code here }); When adding any jQuery
                    Bruce Golub
                    Phosphor Media - "Your Success is our Business"

                    Improve Your Customer Service | Get MORE Customers | Edit CSS/Javascript/HTML Easily | Make Your Site Faster | Get Indexed by Google | Free Modules | Follow Us on Facebook
                    phosphormedia.com

                    Comment

                    Working...
                    X