Support

Account

Register Login

Home › Forums › Backend Issues (wp-admin) › Custom location rules – JS part

Solved

Custom location rules – JS part

  • Hey guys.

    I recently had to create a custom location rule for fields and although this guide helped, I think it wasn’t quite enough. More specifically, the JS part is missing (and I think it should be there)

    So here is how you can fix it:

    
jQuery(document).ready(function($){
  if (typeof acf == 'undefined') { return; }

  var acfCustom = acf.ajax.extend({
    events: {
      'change #page_template_type select': '_change_template_type',
    },

    _change_template_type: function(e){
      var page_template = e.$el.val();
      this.update('custom_template_type', page_template).fetch();
    },
  });

  $('#page_template_type select').trigger('change');
});

    (you need to create a select field that has the page_template_type id)

    You admin_enqueue_scripts/wp_enqueue_script this snippet and you’re good to go.

    I’m not sure if this is the right approach, but it certainly works. 🙂

    The PHP part remain quite the same:

    
add_filter('acf/location/rule_types', function ($rules) {
	$rules[__('Custom Rules')] = [
		'custom_template_type' => __("Template Type", 'acf'),
	];
	return $rules;
});

add_action('acf/location/rule_values/custom_template_type', function () {
	return [
		'' => '--------------------------',
		'slideshow' => __('Slideshow'),
		'gallery' => __('Gallery'),
		'other' => __('other'),
	];
});

add_filter('acf/location/rule_match/custom_template_type', function ($match, $rule, $options) {
	return isset($options['custom_template_type'], $rule['value']) && $options['custom_template_type'] == $rule['value'];
}, 10, 3);

  • So, I looked at this when you posted it and it got me thinking that it would be really useful. I’ve done a lot of stuff with ACF but the JS part has pretty much been a mystery to me.

    Then today I had some time to kill and I started playing with an idea. After nearly 10 hours of coding and digging through code I’ve created a little plugin that can be used to have field groups located somewhere based on field in other field groups on the same location.

    I’m not sure if this is the way it should be done, but it seems to be working. Not sure how far I’m willing to take it.

    There isn’t any documentation yet, honestly I don’t know if it’s completely working. Basically you need to create a field group that has a select, checkbox, radio or true/false field in it. Then when you create a new field group you can base the location on the fields in the other group on the same post.

    If you have some time I’d love to hear any thoughts on it https://github.com/Hube2/acf-custom-field-locations-rule

  • There is a small issue with the trigger though: page will be dirty every time. I.e. ACF will detect that the page had changed even if it didn’t 🙂

    Hopefully @Elliot will suggest a better approach 🙂

  • I noticed that as well, but there isn’t any way to have the correct field groups load when you initially open a page. I wonder if there’s a way to unset that so that you don’t get the warning about leaving the page?

  • Is the code you created for your project still working? I updated my copy of acf from the repo and no the values for the fields are not being sent with the rest of the options when checking the match rules.

  • Indeed, 154eaaf135a20a9ad65c8352b42cccc386e1213c is the latest revision where this used to work.

    Probably it’s a temporary issue?

  • This reply has been marked as private.

  • I solved the dirty page problem, your code from above with a couple changes

    
jQuery(document).ready(function($){
  if (typeof acf == 'undefined') { return; }

  var acfCustom = acf.ajax.extend({
    events: {
      'change #page_template_type select': '_change_template_type',
      'ready #page_template_type select': '_change_template_type',
    },

    _change_template_type: function(e){
      var page_template = e.$el.val();
      this.update('custom_template_type', page_template).fetch();
    },
  });

  $('#page_template_type select').trigger('ready');
});

  • Is this still doable in 2020? acf.ajax.extend doesn’t exist, but acf.Model or acf.Field might be the ticket; however after either of those fire, this.update('custom_template_type', page_template).fetch(); no longer triggers an update as it used to. How do I let ACF know via JavaScript that the location has changed, so it needs to re-check what field groups to show based on that location?

  • I don’t think any of this is still relevant with the new ACF JS API and I don’t know how to replace .fetch(). If I remember correctly update.fetch() was a method in acf.ajax which no longer exists. What you’d have to do is find the method in the ACF scripts that is used to update the field groups on the page and see if you can call it.

  • I had hoped acf.doAction('refresh'); $(window).trigger('acfrefresh'); from acf-input.js might work, but it doesn’t seem to have any effect. Whatever gets called on change of .categorychecklist for the built in taxonomy sidebar panels does trigger a new location and swaps field groups in/out, but I’ve been unable to track down exactly what it’s triggering to accomplish this.

    For my particular use case, I’m going to be able to abandon the custom locations I had built and instead use post taxonomy locations built into ACF, so I’ll fortunately be able to bypass my issues. It still would be great though to know how to refresh the location using the new API for future projects where I need custom locations.

Viewing 11 posts - 1 through 11 (of 11 total)

The topic ‘Custom location rules – JS part’ is closed to new replies.