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.
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 content pulled from collection item page.
Additional cars
Additional cars dynamic content pulled from collection item page.
Implementation notes
Last updated: 1/24/2004
Collection template pages can be great for displaying dynamic content, & Webflow offers a number of features for filtering this content in powerful ways. But template pages can also be limiting in terms of layout, & relying on conditional display to hide features can become cumbersome rather quickly.
One way to free yourself from the limitations of the template page is to build on a static & to use Ajax to pull in specific dynamic content from a template page. This introduces a short delay in content display on page load, so dynamic content works best below the fold. But otherwise this represents the best of both worlds.
Step 1 - Creating the collections & building the UI
This implementation works best when the dynamic data is secondary content. In this project, the dynamic data is car specs & links to other cars in the collection, omitting the current car. For displaying the dynamic content, we'll need to place empty divs on this page. We'll target the content to those empty divs using the IDs #dynamic-sidebar & #dynamic-footer.
The collection will need a URL field for the static page, which will be used in place of the default link to the collection item.
Step 2 - Styling the dynamic content on the collection page
Since we're only using the collection template page as a source for data, we'll need to add <meta name="robots" content="noindex, nofollow">to it's <head> section so that the pages don't get listed on search engines.
For this project, I styled the placeholder content on the static page, then pasted that content into the collection page, replacing the static content with dynamic content. Then I wrapped that content in IDs that the javascript could target: #sidebar-content & #footer-content.
Step 3 - Applying the javascript to the static page
The last step is applying the code below to the <body> section of the static page.
.svg)
