Display dynamic content on a static page

Sometimes a single collection template just isn't flexible enough. This trick uses ajax to pull dynamic content into a static page.

View in Webflow
See it in action
Static content

2022 MST Mk1

We’ve already seen a properly pukka Mk2 Escort-esque continuation from MST Cars and Motorsport Tools. And now they’ve done a Mk1.

Why Escort-esque? Because you’ll see no Ford badges and it’s not officially an Escort. But a sensible pair of eyes will identify it as a retro rebirth of one of the coolest rally cars of all time.

The Mk1 follows a similar recipe to the Mk2, with prices starting at £85,000 before tax but the end bill totally at the behest of what you order.

You’ve a choice of 2.5- or 2.8-litre engines, power ranging between 200 and 380bhp. There are six-speed H-pattern manual or sequential gearboxes. MST has allowed some nods to modern tech with launch and traction control systems. And you can have the interior stripped out for competition or luxuriously trimmed for comfier road use.

“Cars can be built for road and touring, fast road and track, as well as full race and rally cars,” we’re told. “The cars maintain the classic look and feel of the 1960s classic, featuring the bubble arches and Minilite wheels. Underneath the cars run the latest electrical systems and ECUs making them ultra-reliable”

Sounds dreamy, huh? And given the cost of a clean, cared-for Mk1 Escort – or even just its bare shell – there’s potential value in knocking on the door of £100k to get one with a box-fresh body and all the components specced to your heart’s desire.

And just to rubber-stamp its ‘rally cool’ status, Mk1 is being made in North Wales. The waiting list is already over a year long. Better be hasty, then…

-- topgear.com

Dynamic sidebar
This dynamic sidebar is pulled from the collection item page.
Dynamic footer
More cars
This dynamic footer excludes the current item from being shown. Pulled from the collection item page.
Implementation notes

1. Create a static page & add your static content to the page. Create placeholder divs where you want your dynamic content to display & give them unique IDs. For this page, we're using #dynamic-sidebar#dynamic-footer.

2. Create a collection for your dynamic content. For this project, we're referencing the 🟧 Automobiles collection. Include a Page URL field to reference the static page instead of the Current Item url.

3. Style your dynamic content on the collection item's Template page. Include dynamic content in divs with specific IDs. For this project we're using #sidebar-content#footer-content.

4. Include this script at the end of your Body. Replace the IDs, the collection URL, & the slug with the ones you chose.

<script>
	/* import blog slider posts, needed to reduce colections on page */
	$('#dynamic-sidebar').load('/[your-collection]/[your-item-slug] div#sidebar-content');
	$('#dynamic-footer').load('/[your-collection]/[your-item-slug] div#footer-content');
</script>

5. Watch a good movie. You are finished. How about Beetlejuice?