ACF Options page (bumped)

🙋Get Help
1

Hi, i´m new to Frontity and i’m on my way to build a WP back-end heavily based on ACF.

However I have issues with the the custom fetching to the state.
I have read Dominique´s post about this, I can’t really say i understand much of it unfortunately :no_mouth:.

I have manages to create a custom endpoint via frontity-settings.js 

    "name": "@frontity/wp-source",
      "state": {
        "source": {
          "url": "https://mydomain.com",
          "ACF": "https://mydomain.com/wp-json/acf/v3/options/options",
           "homepage" : "/my-startpage"
        }
      }

This gives me something to work with. frontity.state.source in the console gives me the url back.

Sources: {
   ACF: "https://mydomain.com/wp-json/acf/v3/options/options"
}

Dominique is using a acfOptionsHandler function in the outer index.js. However it dose not work for me. Noting happens. Probably I missed some steps here.

Could someone give me an explanation on how (and where in the theme structure) to correctly fetch and populate custom endpoints?

2

I’m answering my own question.

Don’t bother with the frontity.state.source. Here is a modified version of the old thread that works.

Your index.js should look like this

import Theme from "./components";
import image from "@frontity/html2react/processors/image";
import iframe from "@frontity/html2react/processors/iframe";

    // Custom handler for ACF options
    const acfOptionsHandler = {
      pattern: "acf-settings",
      func: async ({ route, state, libraries }) => {
        // 1. Get ACF option page from REST API.
        const response = await libraries.source.api.get({
          endpoint: `/acf/v3/options/options`
        });
        const option = await response.json();

        // 2. Add data to `source`.
        const data = state.source.get(route);
        Object.assign(data, { ...option, isAcfOptionsPage: true });
      }
    };

    const marsTheme = {
      name: "ThemeName",
      roots: {
        /**
         *  In Frontity, any package can add React components to the site.
         *  We use roots for that, scoped to the `theme` namespace.
         */
        theme: Theme,
      },
      state: {
        /**
         * State is where the packages store their default settings and other
         * relevant state. It is scoped to the `theme` namespace.
         */
        theme: {
          menu: [],
          isMobileMenuOpen: false,
          featured: {
            showOnList: false,
            showOnPost: false,
          },
        },
      },
      /**
       * Actions are functions that modify the state or deal with other parts of
       * Frontity like libraries.
       */
      actions: {
        theme: {
          beforeSSR: async ({ state, actions }) => {
            await Promise.all([
              actions.source.fetch("acf-settings"),
            ]);
          },
          toggleMobileMenu: ({ state }) => {
            state.theme.isMobileMenuOpen = !state.theme.isMobileMenuOpen;
          },
          closeMobileMenu: ({ state }) => {
            state.theme.isMobileMenuOpen = false;
          },
        },
      },
      libraries: {
        html2react: {
          /**
           * Add a processor to `html2react` so it processes the `<img>` tags
           * inside the content HTML. You can add your own processors too
           */
          processors: [image, iframe],
        },
        source: {
        handlers: [acfOptionsHandler]
        }
      },
    };

    export default marsTheme;

Then you can request ACF Settings like this

const Root = ( {state} ) => {
  const options = state.source.get("acf-settings");
  console.log(options);
  ...