In Advanced Custom Fields, there is the Post Object field that allows you to select a post resource from your WordPress website. This field can return the actual post object or the post ID. I ran into a problem where I wanted to reuse this field but with dynamic content (posts from another WordPress website). After doing some digging into the ACF code base, I found a method to make this work.

Using the existing Post Object field did not work as there is a non-pluggable function deep in that code that sets the database connection. Copying this field and tweaking it (as a new field) also doesn't work as the Javascript on the frontend is looking for that field name.

From there I moved to use the Select Field. With the Select field, there are multiple filters and hooks you can use to customize the field. For our purposes, there is a Select field with the name "external_resource". 

Using the ACF and Select2 Javascript filters, upon typing in the Select field, query the external Wordpress JSON API and return the appropriate resources (ID and title). The ID gets saved to the database and then use "load_field" hook to fetch populate the field (so it appears correctly in ACF).

First we need to setup the initial Javascript filter. Using this, we can modify the Select2 augments so it will query the external API.

Inside this, we can make sure it's the field we want to modify. From there, we can actually modify the Select2 arguments. Then we send the search query to the Search endpoint and then returning the ID and the title. 

Now that the front end portion is working, we need to get the back end ACF to work. One of the things ACF does with Select fields is verify the value of the Select field with possible values. Because of this, setting the field with dynamic choices will break ACF and leave it with a blank value.

To get around this, the "load_field" hook can be used to dynamically populate the contents of the Select field. Since only IDs exist, an additional call needs to be made to the external WordPress API to fetch the title. 

Now the Select field can populated dynamically and work both on the front end and back end with an external WordPress source.

Custom Dev

Backend Development

WordPress

Dynamic Select Fields with Advanced Custom Fields

We recently completed a website project on behalf of our partners at Foxhollow Farm to combine their separate websites for delivery and pickup orders into one. You can read more about our UX solutions and results of the project in our case study. In this journal article however, we wanted to outline some of the development solutions that made this project possible.

The biggest issue when merging two systems is that you have data in different formats in different places, even if it is being used for the same purpose. In Foxhollow Farm's case, we had product data in WooCommerce and Shopify, with additional subscription data in Shopify. VIA Studio intended to merge everything into WooCommerce; this meant we had to move all the subscriptions from Shopify. In addition, one site used Stripe, and the other one used Authorize.net. 

, we were able to set up subscriptions in WooCommerce. The plugin also offers an 

, which can import a formatted CSV with subscriber data. On the Shopify side, Foxhollow Farm was using a tool called ReCharge to manage the subscriptions. 

 offers an active subscriber export, which we used to create a CSV of all the existing data. From there, we did some data massaging to only include the fields we need to import into the Subscriptions plugin. In order to be able to bill customers again, we had to pull the client ID and payment ID from Stripe as well.

Once that data was in the WooCommerce Subscriptions plugin, the subscriptions ran seamlessly, and customers continued to have their subscriptions fulfilled with no interruption on their side. Existing subscriptions use the existing Stripe token to authorize payments while new subscriptions use Authorize.net, to match the rest of the site.

Now that both pickup and delivery products are served through one website, the normal checkout flow provided out of the box by WooCommerce is inadequate. For instance, pickup products do not have shipping, however, they have pickup times and need to be noted multiple times during the checkout flow so the consumer knows this. Another example would be that some delivery products are only available for certain zip codes and there are also instances where both types of products would be in a user's shopping cart.

With this in mind, the design team came up with single page, multi-step checkout experience that informs the user of the shipping information (pickup times, actual shipment information, etc..) and makes everything clear and concise.

To do this, development-wise we created two different portions - the slideout cart that uses ajax to update cart amounts and products and the actual checkout template. The checkout page is able to include all the required information at page load in tabs, with validation in between each tab step. The backend contains logic for the different use cases of product types.

 to help manage orders. With it, adding new order statuses became something the Foxhollow Farm team could do, and it even has the ability to customize emails sent when the status is changed to the new status. We also customized the existing emails to better reflect the different product types and their delivery or pickup methods.

While these solutions all primarily impacted the website's backend and eCommerce and payment platforms, it is what made the task of combining two website experiences into one, consistent experience possible!

Want to learn more about this project? Check out the UX case study!

Websites

Development Solutions for Foxhollow.com

Non-profit Marketing

UX / UI

Platform Integrations

Illustration

Fund For The Arts

Back-end development does all the heavy lifting behind the scenes. From database design and deployment to writing application programming interfaces (APIs) to simply storing and serving your content, we’ve got you covered.

Backend Development

Backend Development: Case Studies

01

Fund For The Arts

Backend Development: Blog Posts

Dynamic Select Fields with Advanced Custom Fields

Development Solutions for Foxhollow.com