My code works with one exception; I do not know how to turn the country code into an array. I've tried {1, 2, 3}; and [1, 2, 3]; and ["1", "2"]; and other formats without success.
I need the country code to be an array.
Thanks to Milney, this is the working version:
add_action( 'woocommerce_before_checkout_billing_form', 'international_shipping_notice' );
function international_shipping_notice() {
echo '<div class="international-shipping-notice woocommerce-info" style="display:none">Please allow 5-10 business days for delivery after order processing.</div>';
}
add_action( 'woocommerce_after_checkout_form', 'show_international_shipping_notice' );
function show_international_shipping_notice(){ ?>
<script>
jQuery(document).ready(function($){
var countryCode = ["DK", "SE"];
$('select#billing_country').change(function(){
selectedCountries = $(this).val();
if (countryCode.some(r => selectedCountries.includes(r))){
$('.international-shipping-notice').show();
} else {
$('.international-shipping-notice').hide();
}
});
});
</script>
<?php
}
This will define an array:
var countryCodes = ["UK"];
But this doesn't seem to make sense in the rest of your code... Do you really mean you get an array and want to check if country code is in it?
if ( selectedCountry.indexOf(countryCode) != -1)
If you want to check if any of the values are in the array if would be more like:
if(selectedCountry.some(r=> countryCode.includes(r))){
Assuming you have a select element like
<select id="billing_country" multiple>
Then this code will work:
var countryCodes = ['UK'];
$('select#billing_country').change(function(){
selectedCountries = $(this).val();
if (countryCodes.some(r => selectedCountries.includes(r))){
Related
I want to display more calendars on laravel-admin grid, but fullcalendar events were accumulated, so what can I do? I think maybe can clear events before? thanks.
my code like this:
$grid->column('name', __('name'))->modal('calendar', function ($model) {
$id = $model->id;
$punches = DB::table('punches')->where('userid', $id)->get();
$punches = $punches->map(function ($punch) use ($id) {
return Calendar::event($punch->id, true, $punch->start_date, $punch->end_date, "stringEventId");
});
$calendar = Calendar::addEvents($punches)->setId('calendar-' . $id);
return $calendar->calendar().$calendar->script();
});
I would like to have two date field in my Wordpress contact form 7. A start-date and an end-date. The fields will be datepickers from the "Contact Form 7 Datepicker" plugin.
When visitor has selected a start-date he should only be able to select an end date that is 4 days later then the start-date.
How can I achieve this by only using the "contact form 7" form creator?
This is the syntax I put in the "contact form 7".
Start date charter*:
[date* date-start date-format:MM_d_yy]
End date charter*:
[date* date-end date-format:MM_d_yy]
And I added this code to the end of the functions file of the Wordpress theme.
function calendar_js(){
?>
<script>
jQuery(function($){
var start = $('.date-start input').first();
var end = $('.date-end input').first();
start.on('change', function() {
var start_date = $(this).datepicker('getDate');
start_date.setDate(start_date.getDate() + 3);
end.datepicker('option', 'minDate', start_date);
});
});
</script>
<?php
}
add_action('wp_footer', 'calendar_js');
Now the second date picker must be at least 4 days later then the first date picker.
May be this plugin will help you. This plugin works along with CF 7
http://wordpress.org/plugins/contact-form-7-datepicker/
And you can add your own javascript for date manipulation after adding datepicker in CF 7.
Example:
jQuery(document).ready(function($) {
$( ".from" ).datepicker({
onClose: function( selectedDate ) {
$( "#to" ).datepicker( "option", "minDate", selectedDate );
}
});
$( ".to" ).datepicker({
onClose: function( selectedDate ) {
$( "#from" ).datepicker( "option", "maxDate", selectedDate );
}
});
});
2021 Update: Contact form 7 datepicker was removed from wordpress repository due to security reasons
https://blog.cf7skins.com/contact-form-7-datepicker-removed-security-vulnerability/
You can try the WP-Datepicker by Fahad Mahmood
This is my solution without the use of plugins,
this is the code of the CF7 fields:
Start date charter *:
[date* date-start]
End date charter *:
[date* date-end]
this is the code added in the functions.php file:
add_action('wp_footer', 'calendar_js');
function calendar_js()
{
?>
<script>
jQuery(function($)
{
var start = $('.date-start input').first();
var end = $('.date-end input').first();
start.datepicker ({dateFormat: 'yy-mm-dd', beforeShow: function() { $(this).datepicker('option','maxDate',end.datepicker('getDate')); } });
end.datepicker ({dateFormat: 'yy-mm-dd', beforeShow: function() { $(this).datepicker('option','minDate',start.datepicker('getDate')); } });
});
</script>
<?php
}
There is no way to achieve it with the form builder directly, but with a bit of JavaScript you can validate the second input field to get your desired behaviour.
Here is an example, that falls back to the earliest date possible once a date is selected, that is out of scope.
<input type=date class=c-date-start>
<input type=date class=c-date-end>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!-- Add the below code to the page your form is located -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.29.4/moment.min.js"></script>
<script>
jQuery(($) => {
const dateStart = $('.c-date-start')
const dateEnd = $('.c-date-end')
const minBuffer = 4
// Only allow dates in date end field that are after the date start field plus the minimum buffer
dateEnd.on('change', () => {
const startDate = dateStart.val()
const endDate = dateEnd.val()
if (startDate && endDate) {
const startDateMoment = moment(startDate)
const endDateMoment = moment(endDate)
const minDate = startDateMoment.clone().add(minBuffer, 'days')
if (endDateMoment.isBefore(minDate)) {
dateEnd.val(minDate.format('YYYY-MM-DD'))
}
}
})
})
</script>
On WordPress, you probably do not need to load jQuery extra and for the form markup you can add the classes in the CF7 builder like so:
[date date-427 class:c-date-start]
[date date-427 class:c-date-end]
Change the selectors and the minimum timespan according to your needs by adjusting the following declarations inside the source:
const dateStart = $('.c-date-start')
const dateEnd = $('.c-date-end')
const minBuffer = 4
i am using WordPress post to build post.is there any plugin or some function that warn be when i don't select a category for the post.its a headache ever time i post a category i miss some time as there is a lot of post to be made in the category after some time see those post in uncategory its a great headache.
add_theme_support('menus');
**
**> the above code is nothing because stack over flow doesn't allow me to
post my question as it say standard low.**
**
thanks in advance.
hope i could find one suitable answer
hah.. its so funny but you can try as below in your functions.php file
function force_post_categ_init()
{
wp_enqueue_script('jquery');
}
function force_post_categ()
{
echo "<script type='text/javascript'>\n";
echo "
jQuery('#publish').click(function()
{
var cats = jQuery('[id^=\"taxonomy\"]')
.find('.selectit')
.find('input');
category_selected=false;
for (counter=0; counter<cats.length; counter++)
{
if (cats.get(counter).checked==true)
{
category_selected=true;
break;
}
}
if(category_selected==false)
{
alert('You have not selected any category for the post. Please select post category.');
setTimeout(\"jQuery('#ajax-loading').css('visibility', 'hidden');\", 100);
jQuery('[id^=\"taxonomy\"]').find('.tabs-panel').css('background', '#F96');
setTimeout(\"jQuery('#publish').removeClass('button-primary-disabled');\", 100);
return false;
}
});
";
echo "</script>\n";
}
add_action('admin_init', 'force_post_categ_init');
add_action('edit_form_advanced', 'force_post_categ');
NOte:- javascript must be enable to run this
I would suggest using a jQuery object to read the real value of the input since the page can be loaded with a checked value and then an input can be un-checked and saved. This uses the jQuery object .is('checked') method:
function force_post_categ()
{
$custom_js = <<<CUSTOM_JS
<script type='text/javascript'>
jQuery('#publish').click(function()
{
var cats = jQuery('[id^="taxonomy"]').find('.selectit').find('input');
category_selected = false;
$.each(cats, function(key,value){
if ( $(this).is(':checked') == true ) {
category_selected = true;
return false;
}
});
if (category_selected == false)
{
alert('You have not selected any metro or country for the post. Please select a metro.');
setTimeout("jQuery('#ajax-loading').css('visibility', 'hidden');", 100);
jQuery('[id^="taxonomy"]').find('.tabs-panel').css('background', '#F96');
setTimeout("jQuery('#publish').removeClass('button-primary-disabled');", 100);
return false;
}
});
</script>
CUSTOM_JS;
echo $custom_js;
}
I'm using the Vitrux theme in Wordpress that uses Isotope jQuery plugin to display a work porfolio. Isotope allows categories to be used to sort the items, but within the theme it's only possible to sort by one category at a time (e.g. 'Year' or 'Type', not 'Year' and 'Type'.
You can see a mock-up here: http://snaprockandpop.samcampsall.co.uk/shoots/
The jQuery attached to each category item, that sorts the posts, is as follows:
function (){
var selector = $(this).attr('data-filter');
$container_isotope.isotope({ filter: selector });
var $parent = $(this).parents(".filter_list");
$parent.find(".active").removeClass('active');
$(".filter_list").not($parent).find("li").removeClass('active').first().addClass("active");
$(this).parent().addClass("active");
return false;
}
I can see from the Isotope site that it's possible to use multiple filters, and I've found the authors notes on this here: http://jsfiddle.net/desandro/pJ6W8/31/
EDIT:
Editing the theme files has allowed me to assign appropriate classes and properties to the filter lists (you can see these in the page source) and I'm targeting them through an edited version of the jsfiddle to reflect the classes and id's in the theme styling:
$( function() {
var $container = $('#portfolio_container');
$container.isotope({
animationOptions: { duration: 300, easing: 'linear', queue: false },
getSortData : {
year : function ( $elem ) { return parseFloat( $elem.find('._year').text() ); },
live-shows : function ( $elem ) { return parseFloat( $elem.find('._live-shows').text() ); }
}
});
var filters = {};
$('.ql_filter a').click(function(){
var $this = $(this);
if ( $this.hasClass('selected') ) {
return;
}
var $optionSet = $this.parents('.filter_list');
$optionSet.find('.active').removeClass('active');
$this.addClass('active');
var group = $optionSet.attr('data-filter-group');
filters[ group ] = $this.attr('data-filter');
var isoFilters = [];
for ( var prop in filters ) {
isoFilters.push( filters[ prop ] )
}
var selector = isoFilters.join('');
$container.isotope({ filter: selector });
return false;
});
});
Two (fairly major) things:
1) I'm not 100% that I've edited this correctly. Despite Rich's excellent comments I'm still out of my depth. I'm particularly not clear on how to set-up the 'getSortData' section - I think it's right but any input would be great.
2) I'm not sure that this JavaScript is being initiated. At the moment I've placed it immediately before the closing head tag but a check on the page suggests that the original script outlined above is the one running on the filter items.
Any pointers at this stage would be fantastic!
I see what you mean. You are looking for the intersection of both filters and not the mutually exclusive filter values.
Short answer: Contact the theme vendor and see if they can make the intersection filters for you.
Longer assistance (not an answer):
Your ultimate goal is to get the Vitrux theme working the way you want.
Your first goal is to understand what the jsfiddle code is doing.
I can handle your first goal by explicating the code.
// hook into the JQuery Document Load event and run an anonymous function
$( function() {
// Create a variable called container
// make container refer to the element with ID Container
var $container = $('#container');
// initialize isotope
// Call the isotope method on the container element
$container.isotope({
// options...
//distracting options
animationOptions: { duration: 300, easing: 'linear', queue: false },
getSortData : {
price : function ( $elem ) { return parseFloat( $elem.find('.price').text() ); },
size : function ( $elem ) { return parseFloat( $elem.find('.size').text() ); }
}
});
// sorting button
//for the anchor tag that has a class of 'pricelow', wire up an anonymous function to the click event
$('a.pricelow').click(function(){
//Rerun the isotope method when it is clicked, pass an array of options as a parameter
$('#container').isotope({ sortBy : 'price',sortAscending : true });
//return false for the anonymous function. Not 100% sure why this is necessary but it has bitten me before
return false;
});
//removed the rest of the click methods, because it does the same thing with different params
//Here is what you are interested in understanding
//Create an empty filters object
var filters = {};
// filter buttons
//When an anchor tag with class filters is clicked, run our anonymous function
$('.filters a').click(function(){
//Create a variable that is the action anchor element
var $this = $(this);
// don't proceed if already selected by checking if a class of "selected" has already been applied to the anchor
if ( $this.hasClass('selected') ) {
return;
}
//Create an optionSet Variable, point it to the anchor's parent's class of "option-set"
var $optionSet = $this.parents('.option-set');
// change selected class
//Inside the optionSet, find elements that match the "selected" class and then remove the "selected class"
$optionSet.find('.selected').removeClass('selected');
// set this (the anchor element) class to "selected"
$this.addClass('selected');
// store filter value in object
// create a variable called 'group' that points to the optionsSet variable and grab the data-filter-group expando attribute
var group = $optionSet.attr('data-filter-group');
//Append to the filters object at the top of this section and set the data-filter-group value to the anchor tag's data-filter value
filters[ group ] = $this.attr('data-filter');
//create an isoFilters array variable
var isoFilters = [];
//Loop through each one of the items in filters (give the item an alias variable called 'prop'
for ( var prop in filters ) {
//push the prop into the isoFilters array (the opposite is pop)
isoFilters.push( filters[ prop ] )
//keep looping until there are no more items in the object
}
//create a variable called selector and turn the array into a string by joining all of the arrays together
var selector = isoFilters.join('');
//Like always, call the 'isotope' method of the 'container' element and pass our newly concatenated 'selector' string as the 'filter' option.
$container.isotope({ filter: selector });
//return false for some reason (maybe someone can expand on that)
return false;
});
});
Next is your ultimate goal which is modifying the Vitrux theme to handle intersection filters.
This gets a little tricky because
You have automatically generated tags from PHP to create the category links and the Year filter. So, there will be definitely some PHP code changes.
You must convert the jsfiddle code to handle your PHP changes
Try it using jQuery noconflict. In effect, replace any "$" with "jQuery" and see if it works.
Wordpress doesn't play well with the dollar sign.
I'm experiencing a problem to solve the newly added "Prix" in my Soiree Form
I've embedded the PRixForm in my SoireeForm and i'm using ajax calls to add as many prix as we want.
The problem is, when I want to add a new PRix by clicking on the "+" and after filling my fields nothing is saved...
When i'm editing or filling the first default embedded form prix it works which is weird. Only those added by ajax are not saved..
Here is my code
in my form, SoireeForm:
public function addNewPrix($number){
$new_prix = new BaseForm();
for($i=0; $i <= $number; $i+=1){
$pri = new Prix();
$pri->setSoiree($this->getObject());
$prix_form = new PrixForm($pri);
$new_prix ->embedForm($i, $prix_form);
}
$this->embedForm('new', $new_prix);
}
public function saveEmbeddedForm($con = null, $forms = null){
$dataForms = $this->getEmbeddedForm('new')->getEmbeddedForms();
foreach ($dataForms as $dataForm)
$dataForm->getObject()->setSoiree($this->getObject());
parent::saveEmbeddedForm($con, $forms);
}
In my action:
public function executeAdd($request)
{
$this->forward404unless($request->isXmlHttpRequest());
$number = intval($request->getParameter("num"));
$this->form = new SoireeForm();
$this->form->addNewPrix($number);
return $this->renderPartial('addPri',array('form' => $this->form, 'num' => $number));
}
my partial addPri:
<li>
<?php echo $form['new'][$num]['titre']->renderLabel();?>
<?php echo $form['new'][$num]['titre']->render()?>
<?php echo $form['new'][$num]['montant']->renderLabel();?>
<?php echo $form['new'][$num]['montant']->render();?>
<br />
<br />
and my prix.js file:
newfieldscount = 0;
function addPri(num) {
return $.ajax({
type: 'GET',
url: '/backend_dev.php/soiree/add?num='+num,
async: false
}).responseText;
};
var removeNew = function(){
$('.removenew').click(function(e){
e.preventDefault();
$(this).parent().remove();
})
};
$(document).ready(function(){
$('#add_prix').click(function(e) {
e.preventDefault();
$("ul#extraprix").append(addPri(newfieldscount));
newfieldscount = newfieldscount + 1;
$('.removenew').unbind('click');
removeNew();
});
});
I guess the problem comes from my saveEmbed method in my form, but i don't understand why or how to make everything work as it should.
Thank you in advance you guys
So you want save an 1:n relation, so you should find everything you need here
http://www.thatsquality.com/articles/stretching-sfform-with-dynamic-elements-ajax-a-love-story
http://www.symfony-project.org/more-with-symfony/1_4/en/06-Advanced-Forms
If not, please provide information or code of your PrixForm->configure() function !
PS: Your saveEmbeddedForm() function is unneeded, you'll find more information about the form saving process in the second link in chapter 6 !