Ajax reload on homepage with site controller?

The CMS Questions
1

Hey there,

i implemented an Ajax Reload for my Bloglisting by following the cookbook.
I also have an Element, which previous the newest blogs for example directly on the homepage:

preview.PNG
preview.PNG1785×647 254 KB

I implemented this little Icon at the right, when this is clicked i want to replace the current page of blogs with the next one.
I tried to adapt the cookbook but used the site controller instead. Of course this can not really work, because i cant have https://mydomain.de/.json. I guess using the site controller is not the right way?

Greetings and thanks for advices

2

This url refers to the json representation of the home page.

Please provide more information:

  1. On which page are you doing this?
  2. What is the template name of this page?
  3. Does this template have its own controller?
  4. Please post your code, if you adapted it, it’s no longer the same as in the cookbook.
3

Hey thanks for your quick reply!

The part which should be reloaded is inside a snippet, which i implementet via a custom block in my homepage (home.twig). So i have a home.php controller:

<?php

return function ($site, $page) {

  $limit = 4;
  $blogs = $site->children()->filterBy('intendedTemplate', 'blog-overview')->children()->listed()->sortBy('date', 'desc')->paginate($limit);

  return [
    'limit' => $limit,
    'blogs' => $blogs,  
    'blogspagination' => $blogs->pagination(),  
  ];

};

which works correct. And a home.json.php controller:

<?php

return function ($page) {
  $limit = 4;
  $blogs = $site->children()->filterBy('intendedTemplate', 'blog-overview')->children()->listed()->sortBy('date', 'desc')->paginate($limit);
  $blogspagination = $blogs->pagination();
  $more = $pagination->hasNextPage();
  $less = $pagination->hasPrevPage();

  return [
      'blogs' => $blogs,
      'more' => $more,
      'less' => $less,
      'html' => '',
      'json' => [],
    ];
};

and then the javascript:

const ccfblogs = document.querySelector('#ccf-blogs');
const next = document.querySelector('#blogs-next');
const prev = document.querySelector('#blogs-prev');

if (ccfblogs) {
    let page = parseInt(ccfblogs.getAttribute('data-page'));

    const fetchProjects = async () => {
    let url = `${window.location.href.split('#')[0]}.json/page;${page}`;
    try {
        const response = await fetch(url);
        const { html, more, less } = await response.json();
        next.hidden = !more;
        prev.hidden = !less;
        ccfblogs.insertAdjacentHTML('beforeend', html);
        page++;
    } catch (error) {
        console.log('Fetch error: ', error);
    }
    }
    if (next) {
        next.addEventListener('click', fetchProjects);
    }
}

for my snippet which is rendered as a block in the home.twig:

{% block kd_blog_list %}
    <div class="kd-blog-container">
        <div id="ccf-blogs" class="row" data-page="{{ blogspagination.nextPage }}" data-aos="fade-in">
            {% if blogs is not empty %}
                {% for blog in blogs %}
                    {{ snippet('elements/blog/blog-card', { 'blog': blog } ) }}
                {% endfor %}
            {% endif %}
        </div>
        {% block kd_blog_prev %}
            {% if blogspagination.hasPrevPage %}
                <div id="blogs-prev" class="kd-blog-controll kd-blog-prev d-flex align-items-center justify-content-center">
                    <i class="fa-solid fa-chevron-left"></i>
                </div>
            {% endif %}
        {% endblock %}
        {% block kd_blog_next %}
            {% if blogspagination.hasNextPage %}
                <div id="blogs-next" class="kd-blog-controll kd-blog-next d-flex align-items-center justify-content-center">
                    <i class="fa-solid fa-chevron-right"></i>
                </div>
            {% endif %}
        {% endblock %}
    </div>
{% endblock %}

I think i make a mistake in declaring the json.

greetings and thanks again.

4

I don’t see where the $html variable is defined, or what’s in the home.json.php template…

5

Sorry i overlooked to share the file with you, but i already solved it. I just missed, that in this case the name of my homepage is the name of the template. In This Case “home”. So i just had to make sure to adjust the link in the js file. Everything else was fine.

Thank you very much!