I’m trying to define various modal (popup) templates in my new WP Sage environment and then get them via Ajax call based on the provided “type” ID.
For example, modal with “type” 1 would have a centered title, image on the left and text on the right. The one with “type” 2 would have a title on a different place, then text on left, image on right, and another row the other way around. Modal type is selected when adding a modal in backend (custom post type) - based on this, proper content fields appear and must be filled in.
What I’m trying now is this:
When you click a certain button with a given data attribute, Ajax call is made to WP Rest API, which gets all the content for the modal which will be opened. You also get modal type (1,2,3 …). This works as expected already. (data from ACF fyi).
Based on the given modal type, I’d like to fill in the existing modal already loaded on page (just the wrapper) with the modal template in views/ajax/modal1.blade.php (or modal2.blade.php etc.). I want to keep the modal as blade template because i includes certain files / components already and also it’s probably better to keep it that way, no ?
Now I insert the received HTML/strings to the template via Javascript to display it to the user, and I make the modal visible.
How do I go about compiling the ajax-received modal templates before getting it?
“I should probably make a controller” I though, but there’s no actual ‘view’ for which this controller would work; it’s just for the partial templates for this modals.
Any suggestions/help appreciated. Perhaps I’m even complicating things.
First time Sage user, hopefully, this is not a total misunderstanding of the concepts here
I saw that and it actually seemed helpful indeed at first, but I’m a bit at a loss : what ajax url to call to get the appropriate data? How do I expose a certain URL (my controller that has a public static method inside which returns Template(…)). Certainly not just “…/views/ajax/modal1.blade.php” or something like that? This of course just gets the actual data within.
Still did not wrap my head around this 100% it seems!
In a new file called ajax.php under app/controllers/:
namespace App;
use Sober\Controller\Controller;
class Ajax extends Controller
{
public static function getModalTemplateHTML($popup_type = 1) {
if(isset($_POST['popup_type'])) {
$popup_type = (int)$_POST['popup_type'];
}
echo Template('ajax.modal'.$popup_type, ['data' => 'stuff']);
wp_die();
}
}
And lastly in common.js (or any other) got the data via $.ajax:
$.ajax({
url: GLOBAL_OBJECT.ajax_url,
method: 'POST',
data: { action: 'get_modal', popup_type: data.popup_type },
}).done(function (data) {
console.warn("FILL THE DATA IN THE MODAL WITH what you got from ajax");
$('#modal-content').html(data); // this way I get a modal template; now I can fill it with the data provided by a previous ajax to the REST API :)
});
If there’s a better/more correct approach to this, please do let me know
Speculatively, another way of accomplishing this would be to move your code out of controllers and setup.php and put it in app/ajax.php.
The reasons I explored this:
Using a controller here that’s run via separate actions unrelated to how the controller normally functions feels a little strange / out of place to me. Moving it out of there makes it clear that the ajax controller isn’t run as part of the normal template loading process like the other controllers are.
Currently if you want to add more AJAX hooks you would need to edit setup.php every time on top of your ajax.php file. Moving the add_action calls to it make it a little more self-contained.
But at the end of the day if your current setup is working and fits with how you want to organize your theme I don’t know if there’s any real advantage to doing it this way.
Here’s how you would set this up…
Create app/ajax.php and put your AJAX-related code in there:
<?php
namespace App;
class Ajax
{
public function __construct()
{
add_action('wp_ajax_get_modal', [$this, 'myMethod']);
add_action('wp_ajax_nopriv_get_modal', [$this, 'myMethod']);
}
public function myMethod()
{
echo 'AJAX response here';
wp_die();
}
}
new Ajax();
Add ‘ajax’ to the array of files loaded by Sage in functions.php:
/**
* Sage required files
*
* The mapped array determines the code library included in your theme.
* Add or remove files to the array as needed. Supports child theme overrides.
*/
array_map(function ($file) use ($sage_error) {
$file = "../app/{$file}.php";
if (!locate_template($file, true, true)) {
$sage_error(sprintf(__('Error locating <code>%s</code> for inclusion.', 'sage'), $file), 'File not found');
}
}, ['helpers', 'setup', 'filters', 'admin', 'ajax']);
What data should I pass to populate the template with its content?
if I understand correctly, the “partials/content-single” is used within the loop. I’m having an ajax call, which properly echos the template but of course without any content.
echo template("partials.content-single");
I tried passing the post Object data, but didn’t help:
If you are passing data (whatever you wish actually) you have to properly use it in your used template, and also take care of what you are passing to the template on the first place.
So $data in your case is an Object (came from get_post()).
If you pass an array get_post(50, ARRAY_A) (check docs) then you can immediately use the keys as variables in your template.
So for example you could access $ID or $post_author etc.
I was wondering which $data can I pass to use the template as is (e.g. get_the_title() is not working neither is the custom Controller “SingleBookCategoryPost”).
Is it possible or should I create another template?
Also, you usually don’t need to use returning functions, since Blade echoes stuff for you.
So {!! get_the_title() !!} could become {{ the_title() }} or {!! the_title() !!} if you need html data visible.
Hi @Jiannis_Sotiropoulos! I was wondering if you could walk us/me through how you set up barbra.js in Sage 9.0? I’m somewhat new to Sage (I’ve used sage 5.0 for a while and moving to 9.0 with blade) and would love to know how you set it up.
import 'jquery';
import './autoload/**/*'
import Router from './util/Router';
import common from './routes/common';
const routes = new Router({
common
});
jQuery(document).ready(() => routes.loadEvents());
so now the main.js runs only once.
the common.js sets up barba and initializes all other templates. Basically adding all Barba code in the init method:
import Barba from 'barba.js/dist/barba.min';
import Router from '../util/Router';
import home from './home';
import singlePost from './singlePost';
import templateAbout from './templateAbout';
export default {
init() {
Barba.Dispatcher.on('transitionCompleted', function() {
// reload home, or singlePost JS
var routes = new Router({ home, singlePost, templateAbout});
routes.loadEvents();
});
Barba.Pjax.start();
Barba.Prefetch.init();
},
finalize() {
},
};
.
