Bagisto Forum

    Bagisto

    • Register
    • Login
    • Search
    • Categories
    • Recent
    • Tags
    • Popular
    • Users
    • Groups

    Call jquery function in .vue file

    General Discussion
    2
    6
    777
    Loading More Posts
    • Oldest to Newest
    • Newest to Oldest
    • Most Votes
    Reply
    • Reply as topic
    Log in to reply
    This topic has been deleted. Only users with topic management privileges can see it.
    • O
      otheriz last edited by

      Dear bagisto,

      Currently, i try to make a "fly to cart" effect when the user clicks the 'add to cart' button..with jquery..

      i try to edit the "add-to-cart.vue" file..
      when i put any jquery function inside the "addToCart" method inside the file it throws an error "xxxx is not a function" how to be able to use jquery inside this method... ?

      i see your other 'vue' and you can use the jquery function with no problem..but not on this 'add-to-cart.vue'..

      i'm a newbie in Vue btw..

      Thank You.. 🙂

      1 Reply Last reply Reply Quote 0
      • shubhwebkul
        shubhwebkul last edited by

        Hello there,

        Can you please send screenshot where you are trying to call jquery function

        1 Reply Last reply Reply Quote 0
        • O
          otheriz last edited by

          On this method "add-to-cart.vue": https://github.com/bagisto/bagisto/blob/master/packages/Webkul/Velocity/src/Resources/assets/js/UI/components/add-to-cart.vue#L38
          f64a3793-7a59-4393-81c2-0b859d586606-image.png

          I want to implement this (With Plugin)
          https://www.jqueryscript.net/animation/Fly-To-Cart-Effect-jQuery-Flyto.html
          Demo :
          https://www.jqueryscript.net/demo/Fly-To-Cart-Effect-jQuery-Flyto/

          Or this (Without Plugin)
          https://codepen.io/elmahdim/pen/tEeDn

          But when i debug it with simple jquery function like ".hide(),.find(), etc" it's not working inside those vue method..

          1 Reply Last reply Reply Quote 0
          • shubhwebkul
            shubhwebkul last edited by

            That should not generate a exception, maybe something is going wrong.

            Could you please send the code you are trying to put here for more clarification.

            Thanks!

            1 Reply Last reply Reply Quote 0
            • O
              otheriz last edited by

              if you put the code inside the "if(...== 'success')" code..it only show the "something wrong" on the console..

              try put any jquery function outside/before the "this.$http.post"....
              like

              let url = `${this.$root.baseUrl}/cart/add`;
              
              //Try add this or any standard jquery function.
              alert($("#mini-cart").attr("id"));
              
              1 Reply Last reply Reply Quote 0
              • O
                otheriz last edited by

                Hello @shubhwebkul ,

                Any idea of how to archive that "fly to cart" effect. ?
                Or how to make jquery can be used in that method?

                Thank You 🙂

                1 Reply Last reply Reply Quote 0
                • First post
                  Last post