We Keep Coding

Using a jQuery script in a .php file and adding a condition

How can I run the following woodmart theme jquery script based on a php condition?
The jQuery script here asks for age validation on the website and restricts the page if there is no validation.
I just want to use this code for some category products but I don't know how to add condition to jQuery script and I am bad at javascript.
(function($) {
woodmartThemeModule.ageVerify = function() {
if ( typeof Cookies === 'undefined' ) {
return;
}
if ( woodmart_settings.age_verify !== 'yes' || Cookies.get('woodmart_age_verify') === 'confirmed') {
return;
}
$.magnificPopup.open({
items : {
src: '.wd-age-verify'
},
type : 'inline',
closeOnBgClick : false,
closeBtnInside : false,
showCloseBtn : false,
enableEscapeKey: false,
removalDelay : 500,
tClose : woodmart_settings.close,
tLoading : woodmart_settings.loading,
callbacks : {
beforeOpen: function() {
this.st.mainClass = 'mfp-move-horizontal wd-promo-popup-wrapper';
}
}
});
$('.wd-age-verify-allowed').on('click', function(e) {
e.preventDefault();
Cookies.set('woodmart_age_verify', 'confirmed', {
expires: parseInt(woodmart_settings.age_verify_expires),
path : '/',
secure : woodmart_settings.cookie_secure_param
});
$.magnificPopup.close();
});
$('.wd-age-verify-forbidden').on('click', function(e) {
e.preventDefault();
$('.wd-age-verify').addClass('wd-forbidden');
});
};
$(document).ready(function() {
woodmartThemeModule.ageVerify();
});
})(jQuery);
UPDATE
The code here is working now, echo is no more, I also added 999 as priority and it works fine that way.
<?php
add_action( 'wp_footer', 'add_age_verify', 999 );
function add_age_verify() {
if( is_product_category( array( 4201, 4500, 4300 ) ) ) {
?>
<script type="text/javascript"> (function($) {
woodmartThemeModule.ageVerify = function() {
if ( typeof Cookies === 'undefined' ) {
return;
}
if ( woodmart_settings.age_verify !== 'yes' || Cookies.get('woodmart_age_verify') === 'confirmed') {
return;
}
$.magnificPopup.open({
items : {
src: '.wd-age-verify'
},
type : 'inline',
closeOnBgClick : false,
closeBtnInside : false,
showCloseBtn : false,
enableEscapeKey: false,
removalDelay : 500,
tClose : woodmart_settings.close,
tLoading : woodmart_settings.loading,
callbacks : {
beforeOpen: function() {
this.st.mainClass = 'mfp-move-horizontal wd-promo-popup-wrapper';
}
}
});
$('.wd-age-verify-allowed').on('click', function(e) {
e.preventDefault();
Cookies.set('woodmart_age_verify', 'confirmed', {
expires: parseInt(woodmart_settings.age_verify_expires),
path : '/',
secure : woodmart_settings.cookie_secure_param
});
$.magnificPopup.close();
});
$('.wd-age-verify-forbidden').on('click', function(e) {
e.preventDefault();
$('.wd-age-verify').addClass('wd-forbidden');
});
};
$(document).ready(function() {
woodmartThemeModule.ageVerify();
});
})(jQuery); </script>
<?php
}
}

You can send a JQuery ajax call to the php script, the php script then sends it back to the javascript file and then you can easily use the variable within javascript.
$.ajax({
url: 'path/to/your/php/file',
type: 'get',
success: (res) => {
//do things when you get the response
},
error: (err) => {
//do things when you get the error, error is optional
},
})
or you can even simplify it
$.get('url/to/your/script', (res) => {
//do things with the response
})

I copied the jQuery script into the child theme and then <script src='/wp-content/themes/woodmart-child/js/scripts/global/ageVerify.js'></script> to show the jQuery script, while doing this I added the conditions with PHP and now it works fine.
The final version of the code with PHP is like this.
<?php
add_action( 'wp_footer', 'add_age_verify_jquery', 999 );
function add_age_verify_jquery() {
if ( has_term(array('jacket', 'fridge', 'hats', 'magic wand'), 'product_cat')) {
?>
<script src='/wp-content/themes/woodmart-child/js/scripts/global/ageVerify.js'></script>
<?php
}
}
?>

vuejs mobile router-link prevented by v-on:mouseover

have this for list:
<li
class="projects-item"
v-for="project in filteredProjects"
:key="project.id"
v-on:mouseover="displayHoverInfo($event, project)"
v-on:mouseleave="hover = false"
>
<router-link v-bind:to="'/project/' + project.slug">
and js:
displayHoverInfo(event, project) {
this.hover = true;
this.hoveredProject = project;
console.log(event);
}
on desktop works all fine, on mobile (on tap) only the v-on:mouseover/v-on:mouseleave events are being triggered.

I stole the answer here: https://forum.vuejs.org/t/how-to-disable-mouseover-on-mobile/37335
You can disable the mouseover and mouseleave on mobile. Going further you can detect if it's actually a mobile/tablet using the user agent.
<li
class="projects-item"
v-for="project in filteredProjects"
:key="project.id"
v-on:mouseover="isMobile ? null : displayHoverInfo($event, project)"
v-on:mouseleave="isMobile ? null : hover = false"
>
new Vue({
el: "#app",
data: {
isMobile: false,
hover: false
},
methods: {
mq() {
this.isMobile = window.matchMedia('(max-width: 400px)').matches;
},
displayHoverInfo($event, project) {
// your method
}
},
created () {
// get initial val
this.mq()
// listen to resize
window.addEventListener('resize', this.mq)
},
beforeDestroy() {
window.removeEventListener('resize', this.mq)
}
})

Using owl-filter.js to filter through owl carousel items

I am using this plugin to filter through items in my owl carousel
But it is not working, I have had various console errors, this is the current one:
"Uncaught ReferenceError: initOwlEvent is not defined"
I have added the jquery.owl-filter.js in the footer of my page, and below this called the plugin using this script tag:
<script>
$(function() {
/* animate filter */
var owlAnimateFilter = function(even) {
$(this)
.addClass('__loading')
.delay(70 * $(this).parent().index())
.queue(function() {
$(this).dequeue().removeClass('__loading')
})
}
$('.btn-filter-wrap').on('click', '.btn-filter', function(e) {
var filter_data = $(this).data('filter');
/* return if current */
if($(this).hasClass('btn-active')) return;
/* active current */
$(this).addClass('btn-active').siblings().removeClass('btn-active');
/* Filter */
initOwlEvent.owlFilter(filter_data, function(_owl) {
$(_owl).find('.item').each(owlAnimateFilter);
});
})
})
</script>
This is how I initiate the owl carousel:
var OwlCarousel = function () {
return {
initOwlEvent: function () {
jQuery(document).ready(function() {
var owl = jQuery(".owl-events");
owl.owlCarousel({
lazyLoad: true,
items: 4,
itemsDesktop : [1000,2],
itemsDesktopSmall : [900,2],
itemsTablet: [600,1],
itemsMobile : [479,1],
slideSpeed: 1000,
autoPlay : 5000
});
});
}
}();
My HTML
<div class="row parallax-counter-v4 parallaxBg" id="row_events">
<div class="content container">
<h2 class="title-v2 title-center">Events</h2>
<div id="filter-container" class="btn-filter-wrap cbp-1-filters-text">
<div data-filter=".event-1" class="btn-filter cbp-filter-item">Main Events</div> |
<div data-filter=".event-2" class="btn-filter cbp-filter-item">The Venue</div> |
<div data-filter=".event-3" class="btn-filter cbp-filter-item">Woodys</div> |
<div data-filter=".event-4" class="btn-filter cbp-filter-item">Activities</div>
</div>
<div class="owl-carousel-v1 owl-work-v1 margin-bottom-50 mobile-margin-bottom-10">
<div class="owl-events">
{exp:su_event:homepage limit="8"} {events}
<div class="item news-v2 cbp-item event-{venue_id}">
<div class="news-v2-badge">
{if thumbnail_url == ""}
<a href="/events/id/{event_id}-{url_name}">
<img alt="" class="img-responsive lazyOwl" src="" />
</a>
{if:else}
<a href="/events/id/{event_id}-{url_name}">
<img alt="" class="img-responsive lazyOwl" src="{thumbnail_url}" />
</a>
{/if}
<p>
<span>{start_date format="%d"}</span>
<small>{start_date format="%M"}</small>
</p>
</div>
<h4>{title}</h4>
<p>{description}</p>
</div>
{/events} {/exp:su_event:homepage}
</div>
</div>
</div>
</div>

I had a similar issue while working with WordPress theme. Owl theme displayed the same error as you have mentioned. I have added jquery at the header and the issue got solved I am not sure whether this will work for you but you can give a try. Also, check if the owl script files are included after jquery.

for me, it's working...
$(function() {
$.fn.owlRemoveItem = function(num) {
var owl_data = $(this).data('owlCarousel');
owl_data._items = $.map(owl_data._items, function(data, index) {
if (index != num) return data;
})
$(this).find('.owl-item').eq(num).remove();
}
$.fn.owlFilter = function(data, callback) {
var owl = this,
owl_data = $(owl).data('owlCarousel'),
$elemCopy = $('<div>').css('display', 'none');
/* check attr owl-clone exist */
if (typeof($(owl).data('owl-clone')) == 'undefined') {
$(owl).find('.owl-item:not(.cloned)').clone().appendTo($elemCopy);
$(owl).data('owl-clone', $elemCopy);
} else {
$elemCopy = $(owl).data('owl-clone');
}
/* clear content */
owl.trigger('replace.owl.carousel', ['<div/>']);
switch (data) {
case '*':
$elemCopy.children().each(function() {
owl.trigger('add.owl.carousel', [$(this).clone()]);
})
break;
default:
$elemCopy.find(data).each(function() {
owl.trigger('add.owl.carousel', [$(this).parent().clone()]);
})
break;
}
/* remove item empty when clear */
owl.owlRemoveItem(0);
owl.trigger('refresh.owl.carousel').trigger('to.owl.carousel', [0]);
// callback
if (callback) callback.call(this, owl);
}
var owl = $('.owl-carousel').owlCarousel({
autoplay: false,
nav: true,
loop: false,
items: 3,
autoplayHoverPause: true,
lazyLoad: true,
margin: 10,
responsiveClass: true,
navText : ["",""],
responsive: {
0: {
items: 1,
nav: true
},
600: {
items: 3,
nav: true
},
1000: {
items: 3,
nav: true,
}
},
});
/* animate filter */
var owlAnimateFilter = function(even) {
$(this)
.addClass('__loading')
.delay(70 * $(this).parent().index())
.queue(function() {
$(this).dequeue().removeClass('__loading')
})
}
$('.btn-filter-wrap').on('click', '.btn-filter', function(e) {
console.log('ddd');
var filter_data = $(this).data('filter');
/* return if current */
if ($(this).hasClass('btn-active')) return;
/* active current */
$(this).addClass('btn-active').siblings().removeClass('btn-active');
/* Filter */
owl.owlFilter(filter_data, function(_owl) {
$(_owl).find('.item').each(owlAnimateFilter);
});
})
})

How to slide to div element using javascript

I am trying to use classic
Jumo .... <div id="jump">some content</div>
and with this some javascript code ....
if ( ! window.console ) console = { log: function(){} };
$('.single-page-nav').singlePageNav({
offset: $('.single-page-nav').outerHeight(true),
filter: ':not(.external)',
updateHash: true,
beforeStart: function() {
console.log('begin scrolling');
},
onComplete: function() {
console.log('done scrolling');
}
});
But it slide not exactly on the top of the div, but some pixels above ... can you help me with this? Thanks.

Close a div when other is opened Jquery

I'm not very good at JavaScript/jQuery. I have code that opens a dropdown. I want to add code so that when one dropdown is opened the others close automatically.
Here's the script code:
var s;
ShowHideWidget = {
settings : {
clickHere : document.getElementById('clickHere'),
dropdown_login : document.getElementById('dropdown_login')
},
init : function() {
//kick things off
s = this.settings;
this.bindUIActions();
},
bindUIActions : function() {
ShowHideWidget.addEvent(s.clickHere, 'click', function() {
ShowHideWidget.toggleVisibility(s.dropdown_login);
});
},
addEvent : function(element, evnt, funct) {
//addEventListener is not supported in <= IE8
if (element.attachEvent) {
return element.attachEvent('on'+evnt, funct);
} else {
return element.addEventListener(evnt, funct, false);
}
},
toggleVisibility : function(id) {
$(id).animate({
left: "",
height: "toggle"
}, 500, function() {
});
}
};
(function() {
ShowHideWidget.init();
})();
/*Script 2*/
var k;
ShowHideWidget = {
settings : {
clickHere2 : document.getElementById('clickHere2'),
dropdown_signup : document.getElementById('dropdown_signup')
},
init : function() {
//kick things off
k = this.settings;
this.bindUIActions();
},
bindUIActions : function() {
ShowHideWidget.addEvent(k.clickHere2, 'click', function() {
ShowHideWidget.toggleVisibility(k.dropdown_signup);
});
},
addEvent : function(element, evnt, funct) {
//addEventListener is not supported in <= IE8
if (element.attachEvent) {
return element.attachEvent('on'+evnt, funct);
} else {
return element.addEventListener(evnt, funct, false);
}
},
toggleVisibility : function(id) {
$(id).animate({
left: "",
height: "toggle"
}, 500, function() {
});
}
};
(function() {
ShowHideWidget.init();
})();
Here's the HTML code:
<div id="clickHere" class="login_area">Sign up</div>
<div id="clickHere2" class="login_area">Login</div>
<div id="dropdown_login">
<div class="dropdown_login_header">
<div class="beeper_login"></div>
</div>
Hello World 111
</div>
<div id="dropdown_signup">
<div class="dropdown_signup_header">
<div class="beeper_value"></div>
<div class="beeper_signup"></div>
</div>
Hello World 2222
</div>

Add a class to dropdowns div identity them in jquery (say drop-down)
<div id="dropdown_login" class="drop-down">
<div class="dropdown_login_header">
<div class="beeper_login"></div>
</div>
Hello World 111
</div>
<div id="dropdown_signup" class="drop-down">
<div class="dropdown_signup_header">
<div class="beeper_value"></div>
<div class="beeper_signup"></div>
</div>
Hello World 2222
</div>
now you can hide the dropdowns anytime by $('.drop-down').hide() [this hides all the elements those matches drop-down in class name, so beware this name should not be used anywhere for class.]
in your case this code will come in
toggleVisibility : function(id) {
$('.drop-down').hide();
$(id).animate({
left: "",
height: "toggle"
}, 500, function() {

You could wrap the drop downs in an extra div like this:
<div id="clickHere" class="login_area">Sign up</div>
<div id="clickHere2" class="login_area">Login</div>
<div>
<div id="dropdown_login">
<div class="dropdown_login_header">
<div class="beeper_login"></div>
</div>
Hello World 111
</div>
<div id="dropdown_signup">
<div class="dropdown_signup_header">
<div class="beeper_value"></div>
<div class="beeper_signup"></div>
</div>
Hello World 2222
</div>
</div>
Then you could use the siblings() method.
toggleVisibility : function(id) {
$(id)
.siblings().hide()
.end()
.animate({
left: "",
height: "toggle"
}, 500, function() {
});
}
Instead of wrapping the drop downs in an extra div, you could add a class to each of the drop down divs. You could then use that class to filter the siblings. For example:
$(id).siblings('.drop-down').hide();