Do you want to display content in Beaver Builder layout based on visitor country (code) location? Beaver Themer addon provides a lot of conditional options but such location-based targeting is not available by default. However, this can be implemented via Conditional Logic API. To implement this, we shall build conditional logic “User Country Code”.
Preview: User Country Code conditional
First: Create Rules.php File
First, we will create a file called rules.php and upload into the child theme folder. Add the following code and upload it at the correct location (see screenshot below).
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 |
<?php /** * Register a callback function for processing the rule */ BB_Logic_Rules::register( array( 'user-country-code' => 'wpd_user_country_code', ) ); //* Callback function function wpd_user_country_code( $rule ) { //* getting local IP address $ip = $_SERVER['REMOTE_ADDR']; if (filter_var(@$_SERVER['HTTP_X_FORWARDED_FOR'], FILTER_VALIDATE_IP)) $ip = $_SERVER['HTTP_X_FORWARDED_FOR']; if (filter_var(@$_SERVER['HTTP_CLIENT_IP'], FILTER_VALIDATE_IP)) $ip = $_SERVER['HTTP_CLIENT_IP']; //* getting local geolocation data as json type $json = file_get_contents('http://www.geoplugin.net/json.gp?ip=' . $ip ); $data = json_decode($json); $countryCode = strtoupper( substr( $data->geoplugin_currencyCode, 0, 2) ); if( $rule->operator == "includes" || $rule->operator == "does_not_include" ) { $codes = $rule->compare; $rule->compare = $countryCode; $countryCode = explode( ',', strtoupper( $codes ) ); } return BB_Logic_Rules::evaluate_rule( array( 'value' => $countryCode, 'operator' => $rule->operator, 'compare' => strtoupper( $rule->compare ), ) ); } |
File Location
We are using Beaver Builder Theme in this example. Ideally, this tutorial should work in any theme that is compatible with the Beaver Builder plugin.
Second: Front-end Rule Registration
Now we need to create rules.js file. To get started, created js folder inside the child theme folder (see screenshot above for the reference). Now add the following code in rules.js file and place it inside the js folder.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 |
var addRuleType = BBLogic.api.addRuleType var __ = BBLogic.i18n.__ addRuleType( 'user-country-code', { label: __( 'User Country Code' ), category: 'user', form: { operator: { type: 'operator', operators: [ 'equals', 'does_not_equal', 'includes', 'does_not_include' ], }, compare: { type: 'text', defaultValue: 'US', }, }, } ) |
Add a new rule type in rules.js file using the BBLogic.api.addRuleType function. Our rule matches with the visitor country code. We are using the 4 operators: equals, does not equal, includes and does not include. When you select equals or does not equal operator, you will enter a single value like UK. You will enter multiple country codes like FR,NL,PL with a comma when you select the includes or does not include operator.
Now, all files are ready and we shall set them for execution. Open the functions.php file of your theme and add the following code at the end.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 |
/** * Creates User Country Code Logic Field */ if ( class_exists( 'FLPageData' ) ) { add_action( 'bb_logic_enqueue_scripts', function() { wp_enqueue_script( 'wpd-themer-logic-rules', get_stylesheet_directory_uri() . '/js/rules.js', array( 'bb-logic-core' ), '1.1', true ); } ); add_action( 'init', function() { require_once get_stylesheet_directory() . '/rules.php'; } ); } |
Now you should see the User Country Code logic under the User category. Follow this:
- Open the Settings by clicking on the wrench icon of row/column/module.
- Click on the Advanced Tab.
- Go to the Visibility section.
- Select Conditional Logic from the Display drop-down.
- Click on Open Conditional Logic Settings button.
- Set the logic as per your requirement and click on Save button.
Leave a Reply