Flatpickr JS get listing attributes in common.js

Development
1

Hi Everyone,

Researching the option to disable selection of certain days based on attributes (check boxes) in the listing. The dates should be included in the range, but just not as start/stop option. So people can only select for example, Monday & Friday as start and stop date.

When testing, the Flatpickr calendar has the option to disable dates, however that would avoid people to select them as a range.

My solution for the font-end would be to just use CSS and disable the days for selection with the “pointerEvents” style parameter, so it stays available as range selection.

The Flatpicker calendar is setup in the common.js file inside (Hivepress/assets/js). To disable days for selection you can use the Flatpicker parameter “onDayCreate” to customise the creation of the calendar per element.

The following works with a manual input on the day numbers (1 & 5 for Mo-Fr). As can be seen in below example. Also the available days are coloured.

			if (field.data('ranges')) {
				var ranges = field.data('ranges');

				settings['onDayCreate'] = function (dObj, dStr, fp, dayElem) {
					if (dayElem.className.includes('disabled')) {
						return;
					}

					var d = new Date(dayElem.getAttribute("aria-label"));
					//Check if current date in current element is monday or friday using the aria-label that stores the full date in the element
					if (d.getDay() != 1 && d.getDay() != 5  )  {
					dayElem.style.pointerEvents = "none" ;
					}else{
						dayElem.style.backgroundColor = "#a0cdd9";
						dayElem.style.color = "white";
					}

and result in this. As you can see range selection works, but people can only click on the coloured fields as intended.

image
image517×541 30.7 KB

Now my question is;

How how would I best load the data from a checkbox attribute of the current listing. I tried a few different things, but I’m unable to load the data for the custom attribute of the listing. Checkbox on/off state. Something like $listing->get_custom_checkbox_attributes();

So I can map the (7) checkbox states against the week days and use them in the code above.

I realise that this would only fix the front-end side. And a “malicious booker” could override and select the other days. For that checking, I’m thinking we can use a filter to check if the start & stop days are in-line with the available days on the listing config for a booking to to be successful.

Any way hope someone can share some insight in the main question and that is how to load the listing checkbox data into the above function.

3

If you want to add some listing attribute value to the date field to use it for some actions in custom JS code, then please try this PHP snippet. It will add a custom attribute to the parent element of the date field in the booking make form, which is possible to get and use in the custom JS code.

add_filter(
	'hivepress/v1/forms/booking_make',
	function($fields, $form){
		$booking = $form->get_model();
		
		if(!$booking){
			return $fields;
		}
		
		$listing = $booking->get_listing();
		
		if(!$listing){
			return $fields;
		}
		
		$fields['fields']['_dates']['attributes']['data-attribute-name'] = 'attribute value';
		
		return $fields;
	},
	1000,
	2
);

If you want to add some additional checking for dates that the user can not change, then please try this PHP snippet. It gives the possibility to add a custom error-checking condition to the booking confirmation form and then show some error when a user does not pass the condition after submitting the form.

add_filter(
	'hivepress/v1/forms/booking_confirm/errors',
	function($errors, $form){
		
		// Get booking. It is possible to get the start time and end time of the booking to add some conditions to show errors.
		$booking = $form->get_model();
		
		if(!$booking){
			return $errors;
		}
			
		// Get listing. It is possible to get some listing attribute values to add some conditions to show errors.
		$listing = $booking->get_listing();
		
		if(!$listing){
			return $errors;
		}
		
		if(some condition here){
			$errors[] = 'Custom error';
		}
		
		$errors[] = 'test';
		return $errors;
	},
	1000,
	2
);

If I am correctly understand you then please try these PHP code snippets to start, but please note that it can require further customization. If you are not familiar with the code customization then please consider hiring someone for custom work https://fvrr.co/32e7LvY

4

Thanks @yevhen this is very helpful. I will work on this.

5

@yevhen I have one more issue I can’t get my head around. To access any attribute for the listing we would use.

$attribute_value = $listing->get_atrribute_name();

But this does not work for the custom attribute having multi select checkboxes. As in the example below.

Here you see the custom listing attribute. With multiple options (checkboxes)

image
image1155×1182 44.6 KB

Here you see the checkboxes and I need to check the value of each box.

image
image1870×1233 171 KB

I think I’m pretty close as I can see the attribute in the listing variable (var_dump), but I need to call a function to get its values since its an protected value.

So how can I access this multi level attribute in the $listing object?

6

Please try using this code instead:

$attribute_value = $listing->get_atrribute_name__id();

It will return an array of selected option IDs. You can also get a comma-separated list of option labels this way:

$attribute_value = $listing->display_atrribute_name();