Call jquery function in .vue file

[otheriz]

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..

[shubhwebkul]

Hello there,

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

[otheriz]

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

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..

[shubhwebkul]

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!

[otheriz]

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"));

[otheriz]

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