Skip to content

Instantly share code, notes, and snippets.

@zakirsajib
Last active June 21, 2020 08:12
Show Gist options
  • Save zakirsajib/fc549e5b1b2bde1d335d9b2d9e78a180 to your computer and use it in GitHub Desktop.
Save zakirsajib/fc549e5b1b2bde1d335d9b2d9e78a180 to your computer and use it in GitHub Desktop.
Convert the following jQuery dependent javascript to Vanilla js.
# jQuery
$( '.post-type-archive-product #secondary' ).prepend( '<div class="close-drawer"></div>' );
# JavaScript
var drawer = document.createElement("div");
drawer.className="close-drawer"
document.querySelector('.post-type-archive-product #secondary').appendChild(drawer);
#jQuery
$( document ).ready( function() {
$( '.single-product form.cart' ).attr( 'id', 'sticky-scroll' );
} );
# JavaScript
var ready = (callback) => {
if (document.readyState != "loading") callback();
else document.addEventListener("DOMContentLoaded", callback);
}
ready(() => {
document.querySelector('.single-product form.cart').setAttribute('id', 'sticky-scroll');
});
#jQuery
$( document ).on( 'click', '.mobile-filter', function( e ) {
e.stopPropagation();
e.preventDefault();
$( 'body' ).toggleClass( 'filter-open' );
} );
# JavaScript
document.querySelector(".mobile-filter").addEventListener("click", (e) => {
e.stopPropagation();
e.preventDefault();
document.querySelector('body').classList.toggle("filter-open");
});
#jQuery
if ( 0 < $( '.term-description' ).length ) {
$( '.woocommerce-products-header' ).addClass( 'description-exists' );
}
# JavaScript
if ( 0 < document.querySelector(".term-description").length ) {
document.querySelector(".woocommerce-products-header").classList.add("description-exists");
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment