👋,

​

​

The idea of a community library has been part of Slater's vision from the start, but it took a couple of tries to get it right. The code is now written and we have moved our focus to populating the library with useful scripts.

If you have a valuable script to contribute, please add it to your personal library and document it with Slater Documentation. We will review your scripts and reach out if your script is something we want to include.

👀 You have probably head about Devin, the first AI software engineer. The hype around Devin is understandable, but it's important to recognize that a thoughtful human is still required, and that is unlikely to change anytime soon.

In fact, now is an excellent time to learn how to use code. AI will not replace you. It will make you more valuable. Slater AI can handle writing the code, freeing you up to focus on higher-level problem-solving, design, and creativity. Embracing AI tools will enhance your capabilities rather than render you obsolete. The future belongs to those who can work alongside AI!

​This breakdown of Devin will demonstrate just that.

Javascript 101: Loading All CMS Items

Have you ever wondered how popular tools like Finsweet Load More or Jetboost manage to load multiple pages of CMS items? While their solutions might be more complex, here’s a simple JavaScript approach you can adapt to your project.

The Code

let cmsArray = [];
let initUrl = "/companies-ref" // Point to page with CMS collection
let cmsSelector = ".cms-item" // add selector to get CMS item element
let cmsList = ".cms-list" // add selector to populate list

function parseCMSItems(dom) {
  let cmsItems = $(dom).find(cmsSelector);
  let url = $(dom).find(".w-pagination-next").attr("href")

  cmsItems.each((index, comp) => {
    cmsArray.push(comp);
  });

  if (url) {
    getCMSItems(url)
  } else {
    renderList()
  }
}

function getCMSItems(url) {
  $.get(url, function (data) {
    parseCMSItems(data)
  });
}

function renderList() {
  console.log("companyArray", cmsArray);
  $(cmsList).html(cmsArray)
}

getCMSItems(initUrl)

How It Works

1. The code starts by initializing an empty array cmsArray to store the CMS items and defining some variables to hold the initial URL, the CSS selector for CMS items, and the selector for the list where the items will be rendered.
2. The parseCMSItems function takes the DOM content of a page and finds all the CMS item elements using the provided CSS selector (cmsSelector). It also looks for a link to the next pagination page (.w-pagination-next).
3. For each CMS item found, it pushes the item into the cmsArray.
4. If a link to the next pagination page is found, the function calls getCMSItems with the URL of the next page. Otherwise, it calls the renderList function to render the collected items.
5. The getCMSItems function uses jQuery’s $.get method to fetch the content of the provided URL. Once the content is loaded, it calls parseCMSItems with the new DOM content, continuing the process of collecting CMS items across multiple pages.
6. The renderList function logs the collected cmsArray to the console and inserts its contents into the specified list element (cmsList) using jQuery’s .html method.
7. getCMSItems starts the process with the initial URL (initUrl).

This code demonstrates a simple approach to recursively fetching and parsing multiple pages of CMS items, storing them in an array, and rendering them in a list on the page. You can adapt this solution to fit your specific project requirements, such as handling different CMS structures or pagination mechanisms.

Give the solution a try and happy coding!

​

🤙 The Slater team

​

If Slater helps you create better websites, please support the team behind it.

​
​
1295 Canyon View Rd, Midway, UT 84049
​Unsubscribe · Preferences​

​