Fully Framework - Next.js

Connects to a headless Wordpress CMS using Next.js and Fully Components

Quickstart

Make sure prettier and eslint plugin for your code editor is activated in this workspace.

npm install (this will also run npm run build automatically to move all static assets)

npm run dev - to start a dev server

If you wanna test a different market, attach the suffix after dev, ex:

npm run dev-global
npm run dev-no
npm run dev-dk
npm run dev-fi
npm run dev-be
npm run dev-se

First time setup

• Add the current CMS domain in next.config.js and helpers/globals.js

Build static pages - Not for SSR pages

1. npm run build
2. npm run export

Sync ACF between pages

If you do small changes, it's easier to just open all 6 sub-sites, and edit the ACF field on all of them in the same time.

If it's bigger changes, then you maybe wanna use the ACF export and import function. Just note that the global site and the country/market sites has different ACF fields. So don't you dare copy settings from the global site to a country site or vice versa.

Please take a backup before!

NEW README FOR SETUP - CLEANUP LATER

If anything in this new section below is unclear or confusing, let me know so I can make it better! / Linn

Fully Framework

Check out the NextJS documentation here

Repository setup:

• Fork this project

• From gitlab, remove your new project fork relationship to wordpress/headless/fully-framework-nextjs by navigating to Settings->General->Advanced and choose "Remove fork relationship"

• Clone your new fork to your computer

• Merge the version of the framework that you want to use into "develop". (For now this will be "server-side-rendered". In the future there will also be a working static version to choose from.)

• Run "npm i"

• Run "npm i @fullystudios/components@latest"

• Then start your project using "npm run dev"

WordPress setup:

Check out the wordpress rest api documentation here

• If you have a WP setup you want o add it as WP_URL in helper/globals.js in your project. If not, you will be working temporarily towards a test-wp.

• Import ACF fields from one of the exports in the WP folder. Go to Custom Fields - Tools in WP and import it there.

• You also need to import the Team post type. Go to CTP UI - Tools in WP, and paste the json from the CPT-teams.json file in your project. (If you don't want the Team post type in ypur project there is some code you need to remove. Look in all the pages and in Layout, remove everything you don't want there and you shold be up and running!)

• To use certain layouts/components you need to import the Product post type. Go to CTP UI - Tools in WP, and paste the json from the CPT-products.json file in your project. (If you don't want the Product post type in your project there is some code you need to remove. You also need to remove these fields from ACF.)

• To make the preview-function work with Custom Post Types you need to go to CPT UI, Edit Post Types and scroll to the bottom of the post type, there you need to check Supports: Revisions.

• After importing your post types and custom fields you can remove the WP folder in ypur project.

• Go to Setting- Permalink and change to "Post name".

• Create a Home page, set this pages slug to “home”, this indicates to our navigation and buttons that this page should be used as our home-page when we don’t have a url ending with a slug.

• You will need a Home page, menu and some options-fields setup to start project properly.

• You could also check the site title, description, site language etc in the settings section.

Give it some style:

• Begin by updating defaultTheme.js, here you can change color, font and menu-variables. The other should be left as they are unless you need to do something more custom than simple Framework projects.

• You can also change font-sizes for all h-tags in defaultGlobals. Here you can find other global style rules you might sometimes want to change.

• Replace the Loading-animation with something appropriate for your project.

• Layout.jsx in Components. This file handles the overall layout of your pages. Here you can change which footer you use, comment out CookieBanner and Forms etc.

• Do you need to update the Navbar more than just new colors? Change or comment out stuff in PageNavigation!

• The rules for all components is set in RenderFunctions. Here you can change the block-width for individual components or change other props.

• If you really need to customize things you can also edit the pageTemplates and add your own components in RenderFunctions and ACF.

Have fun!

Update your project:

Did you build a project by forking this repository and now someone built a cool new component in the library? Here's how you add it to an existing project:

• run "npm i @fullystudios/components@latest"

Does the new component have ACF in Framework WP?

• Export your projects ACF, you can do this under Custom Fields - Tools, just toggle all and export file.

• Export ACF from Framework.

• Copy/paste the new layouts from the Frameworks ACF-json, to your project.

Does the new component exist in Frameworks RenderFunction?

• Copy the component-logic and import from RenderFunction in Framework and paste in RenderFunctions in your own project.

That is all!

If the component does not yet exist in Framework WP and RenderFunctions then you will have to create new ACF for it and use the Component-library storybook for reference on how to use it in RenderFunctions.

SystemOne Documentation

Documentation: https://www.systemonesoftware.com/en/support/article/242-api-with-shows-in-json-format

Questions by Jonas, answers by Martijn Kers [email protected]

Are there any way to see if an event only has few tickets left?

No, there is no real time ticket system integration, only the soldout flag that you already found.

if the event is cancelled

status.phase='C'

or moved

At this momnet is no archiving feature for keeping track of "moved shows" (never had this feature request). The client will change the date on a show or cancel it.

Request about type of event, ex if it's a concert or a comedy-show.

Possibly the client configures this value in a custom field, which are not outputted in the generic API. If necessary, we can create a custom API for ATL, but we will need to charge an initial amount for setup & maintenance. If required, we will need to set up a spec and quote that would need to be approved by ATL.

status object

Every client can define their own set of statuses, that can be assigned 1:1 to a show, like

"Show in option"
"Show confirmed, but not fully internally handled",
"Show cancelled by us"
"Show cancelled by them"

These statuses in the end all boil down to 3 phases:

Option
Confirmed / Definitive 
Cancelled