This is the product page of my ecommerce website. https://www.myhealingcrystalstore.com/beta/product/abundance-bracelet/
Its is built on woocommerce. I would like a add an auto scroll to the recommended products once the user adds product to their cart. I would really appreciate if I could get a guidance on how I can achieve this. Thanks!
as your page is reloading after adding to cart, you can do it with LocalStorage.
Try this and use different conditions as per your requirements.
jQuery( document ).ready(function() {
jQuery(".single_add_to_cart_button").on("click", function(e){
localStorage.setItem('add_to_cart', 'clicked');
});
var add_to_cart_clicked = localStorage.getItem('add_to_cart');
if(add_to_cart_clicked == 'clicked'){
jQuery('html, body').animate({
scrollTop: jQuery(".hongo-woocommerce-tabs.hongo-woocommerce-tabs-wrapper").offset().top
}, 2000);
}
}
Let me know if you need more help, thanks
Related
I need to prevent Contact Form 7 WordPress plugin from clearing form on successful submission. I want user to be able to keep editing the form (and possibly to resubmit it again).
Thanks.
I actually found a solution. You can just attach an event handler to reset event and then do e.preventDefault().
setTimeout( function(){
$( '.my-form form' ).on( 'reset', function(e) {
e.preventDefault();
});
},500)
It didn't work without the timeout, but this should be safe enough. Not many users can fill a form in under 0.5 second :-)
Maybe not a perfect solution but it works for my case.
EDIT: Here is a new version without the setTimeout (thanks to #Jan Myszkier)
$(document).on('reset', '.my-form form', function(e) {
e.preventDefault();
});
In JS wp-content/plugins/contact-form-7/includes/js/scripts.js around line 300 there's ajaxSuccess function described with the following piece:
if ( 'mail_sent' == data.status ) {
$form.each( function() {
this.reset();
} );
wpcf7.toggleSubmit( $form );
}
which might be just what you're looking for because this.reset(); resets the field one by one within the form after successful status.
EDIT: Following your information you want to modify the behaviour but not change the plugin, you can use the events that come with CF7.
https://contactform7.com/dom-events/
add wpcf7submit watcher to store the data in the localstorage and add another watcher (wpcf7mailsent this time ) to write the data back to the form.
I'm trying to limits the times click on button in divi theme in wordpress but don't know how and I need help. Thank you.
You don't need Divi for this, just add a simple javascript at your code to track the clicks.
Supposing that you are using jQuery, here is the code.
var clicks = 0;
var maxClicks = 3; // set the maximum time to be clicked
var elementClassSelector = '.your-class-button';
$(elementClassSelector).on('click', function(e){
// prevent the event if we already have enought clicks
if (clicks >= maxClicks) {
e.preventDefault();
} else {
clicks++ // increase the number of clicks
}
})
Here is a link how to add a custom javascript using Divi.
Here is a link to help you add javascript or CSS in any theme.
I want to get the variation price on my single product page, On change the variation drop-down using jQuery, Is there any way to doing this... ?
Thanks in advance.
woocoommerce has build in callback result product details (attributes, price, images, etc..)
you can see variation details on console
jQuery(document).ready(function() {
jQuery( '.variations_form' ).each( function() {
// when variation is found, do something
jQuery(this).on( 'found_variation', function( event, variation ) {
console.log(variation);
console.log(variation.display_price);//selectedprice
});
});
});
I have setup woocommerce store. In my store every product have more then 16 gallery images.
So i want to show first 8 gallery images then below show one link "See more sample configuration" on click collapsible event work and then below show another 8 gallery images. See this screen shot -> http://nimb.ws/2buKoh
For this my requirements i do research on google but can't find any solutions. So any one know solutions then please help me.
Thanks,
Ketan.
You can try this jquery code.You need to add this jQuery into your theme option of bellow the wp_footer() in footer.php
<script type="application/javascript">
jQuery(document).ready(function () {
jQuery('.images').append('<div id="loadMore">See more sample configuration</div><div id="showLess">Hide</div>');
jQuery(".thumbnails a").hide();
size_li = jQuery(".thumbnails a").size();
x=3;
jQuery('.thumbnails a:lt('+x+')').show();
jQuery('#loadMore').click(function () {
x= (x+5 <= size_li) ? x+3 : size_li;
jQuery('.thumbnails a:lt('+x+')').show();
});
jQuery('#showLess').click(function () {
x=(x-5<0) ? 3 : x-3;
jQuery('.thumbnails a').not(':lt('+x+')').hide();
});
});
</script>
after added the code, go to your product page and click on See more sample configuration.Try this then let me know the result.
Thanks
Thanks for reading. I have some codes on my wordpress site, the first one adds an overlay over an image with a color, the article title and a link to go to the project. The second code adds an ajax pagination using jQuery.
The thing is that i have my projects with images and the jquery overlay owrking perfect, but when they click on the previous projects link that calls the ajax pagination, the jquery overlay stops working.
I have been trying different options, but maybe i'm not on the correct way to solve it. Does anyone has a clue?
Thanks in advance.
The codes:
// PORTFOLIO HOVER EFFECT
jQuery('ul.portfolio-thumbs li').hover(function(){
jQuery(".overlay", this).stop().animate({top:'0px'},{queue:false,duration:300});
}, function() {
jQuery(".overlay", this).stop().animate({top:'190px'},{queue:false,duration:300});
});
// POSTS NAVIGATION
jQuery('#posts-navigation a').live('click', function(e){
e.preventDefault();
var link = jQuery(this).attr('href');
jQuery('#ajax-container').fadeOut(500).load(link + ' #ajax-inner', function(){ jQuery('#ajax-container').fadeIn(500); });
});
I've found the solution in the same day and #BrockAdams helped me with the doubts. I'm putting here the code because it can be helpful for someone.
jQuery('ul.portfolio-thumbs li').live('hover', function(event){
if (event.type == 'mouseenter') {
jQuery(".overlay", this).stop().animate({top:'0px'},{queue:false,duration:300});
} else {
jQuery(".overlay", this).stop().animate({top:'190px'},{queue:false,duration:300});
}
});
jQuery('#posts-navigation a').live('click', function(e){
e.preventDefault();
var link = jQuery(this).attr('href');
jQuery('#ajax-container').fadeOut(500).load(link + ' #ajax-inner', function(){ jQuery('#ajax-container').fadeIn(500); });
});
You can post answers to your own question.
And, you needed to use live()Doc on the hover, because the pagination presumably loads in new portfolio-thumbs lis.
Without the live(), these new lis would have no events attached to them (unless you re-called jQuery('ul.portfolio-thumbs li').hover after every pagination event).
Live is easier, and avoids the pitfall of having multiple copies of the same event-listener attached to an element.
And, yes, you can use both live() calls (or more) on the same page without problems.