Al Hatab Foods: a growing website, in the content team’s hands.

Give the team room to keep the site useful.

A food catalogue, a growing store network and regular campaigns need frequent updates. We built the site around those everyday jobs: creating pages, maintaining product details, helping customers find a branch and collecting feedback. Arabic and English run through the same content structure, with layouts that work in both reading directions.

Build a page from familiar pieces.

Editors combine reusable blocks for copy, images, products, categories, forms, slideshows and other content. They can adjust layout and presentation within the component system, so a new campaign page can use existing pieces. The templates cache suitable blocks separately for each language, while previews and forms remain fresh.

Copy rich editorial textAccordion FAQs, expandable informationLeadership team profilesSlideshow promotional slidesSocial Media Embed embedded social contentVideo video sectionsGallery image collectionsProducts curated product selectionsCategories category cards and navigationProduct Categories category showcasesCTA Cards calls to actionIcon Cards features, benefits, highlightsBrands brand and logo collectionsOne Column flexible single columnTwo Column split content and mediaAllergen Table structured allergen informationStatistics company figuresTimeline history and milestonesTestimonials quotationsForm embedded formsError reusable error messaging each block carries its own width, alignment, spacing, background, heading and card controls

Help people find the details they need.

Product entries bring together images, ingredients, nutrition, allergens, cooking instructions and storage guidance. Reusable categories and badges keep those details consistent across the catalogue. Search and filters help visitors narrow the selection by category, product attributes or allergens they want to exclude.

Desktop filters and the mobile filter dialog use the same choices. Those choices stay in the URL, so a filtered view can be shared or revisited. Search Manager supplies search and autocomplete, while a custom integration prepares the content for indexing.

identity name, code, category and subcategory, gallerymeasures sizes, units, serving sizecomposition description, ingredients, allergensnutrition editable facts table, traffic-light display from nutrient valuespreparation cooking methods, storage and handlingbadges health claims, features, protein sources, quality seals, serving experiencespresentation card and detail-page options, CTA controls, sticky product barrouting short product URL to the canonical page "favourites" is an editorial collection chosen by the team, not a customer wishlist

◆ query Arabic or English, with autocomplete│ fuzzy matching and wildcards through Search Manager│ ◇ indexes products, categories, stores, combined│ a custom transformer assembles the searchable text│ ◇ filters category, allergen, health badge, attribute│ allergen exclusion: products without│ ◇ counts products and per-filter counts│ from the category cache, not live queries│ ├─ desktop sticky search and filter area└─ mobile a filter dialog kept in sync with it  filters validated server-side; state carried in the URL; AJAX endpoints for results and counts

Find a branch, then know how to get there.

Customers can browse a map or store cards, check opening hours and get directions. Location-based sorting helps them find nearby branches; Riyadh provides a starting point when location is unavailable. Stores load progressively so the initial list can appear before the full network.

A custom Craft module brings in Google Places details in both languages. Editors can keep their own names and hours without losing them during a refresh. Scheduled updates and cached distances reduce the repeated work needed to keep the locator useful.

map branded markers, clustering, info windows, store cardstypes Fresh, To Go, Marketopen now filter and status, from hoursdetails address, phone, hours, rating and reviews, directionsnear me use my location; nearest first; metres or kilometresfallback Riyadh, when location is unavailable or outside the regionloading progressive: the first stores, then the rest

◇ a new store Google Places fetches its data│ Arabic and English, automatically for eligible stores│ ◇ overrides custom name and hours│ synchronised fields stay protected│ ◇ validation duplicate Place IDs rejected│ separate timestamp for the last Google update│ ◆ distances store-to-city distances, precomputed│ one store edited: 14 distances, not all; bulk imports detected│ ├─ refreshes scheduled, in the background└─ utilities cache status, rebuild, import commands  update one store’s cached distances when its details change

Prepare repeated information once.

Catalogue pages repeatedly need the same product counts and filter options. A custom cache module prepares that information ahead of time, including category totals, allergen exclusions and available attributes. Queued jobs rebuild it, and a Craft utility shows coverage and refresh status. Templates read the prepared data instead of recalculating those counts for every visitor.

precomputes filter data per category: product and subcategory counts, allergen-free counts, badges, attributesrebuilds full, or one category; scheduled; queued in batches with progressstores JSON on Servd's CDN with database tracking; local fallbackexposes a Twig API for templates, a Control Panel utility for status, coverage and the scheduler its purpose is to remove repeated database work from catalogue and filter pages

Keep the product beside the question.

A feedback link can identify a product by its code or barcode and show it beside the form. Arabic and English versions share the same journey. Star, emoji and recommendation ratings give the team different ways to ask for feedback, while configured form integrations send submissions into its existing tools.

◆ arrive from a QR on the packaging, a receipt or a link│ language from the URL│ ◇ product looked up by code or barcode│ shown with its image beside the form; works for retired products too│ ◇ context invoice, store and member references from the URL│ store code resolved to its Google Place│ ◇ rate stars, emoji or a 0 to 10 score│ through the family's Formie fields│ ├─ delivered to the team's sheet└─ excluded from search engines

One editing environment, more than one screen.

The same Craft installation includes Arabic and English mobile sites, with content models for app banners, onboarding, navigation and other screens. A private GraphQL schema exposes the content the app needs alongside shared products and stores. WebView layouts support pages opened inside the app; building the app itself is a separate project.

sites mobile_en, mobile_arbuilder a dedicated mobile content buildermodels hero, banner, category, product, onboarding, splashsettings homepage, navigation, a configurable More menu, access gatesapi a private GraphQL schema for mobile content and assetsshared products, categories, stores and news, the same entries as the website the app itself is a separate piece of work; this is its content and API backend

Connect the tools around the team’s work.

Our plugins support search, translations, links, forms, icons and logging inside Craft. The custom work connects those tools to Al Hatab’s content and customer journeys, giving the team a coherent editing environment. The individual plugin pages explain those products in more detail.

• Search Managersearch and autocomplete behind product discovery
• Translation Managerthe bilingual interface and form translation workflow
• Icon Managerbranded icons, product badges and editor icon selection
• Component Managerrendering of the reusable component library
• SmartLink Managerdevice-aware links, app routing and QR journeys
• ShortLink Managercampaign links, QR codes and expiry
• Redirect Managerredirects and broken-URL handling
• Formie Rating Fieldstar, emoji and NPS inputs in feedback forms
• Formie Paragraph Fieldexplanatory copy inside forms
• Formie REST APIauthenticated access to form data
• Formie SAP Integrationsubmissions into the client's SAP
• Logging Libraryone diagnostics viewer across the custom work

Make ongoing changes easier to manage.

Development, staging and production use separate build settings. Version-controlled Craft configuration keeps content structure changes reviewable, and automated releases record the work being delivered. Image optimisation, language-aware caching and CDN delivery support the frontend, while metadata, canonical links and language references help search engines understand it.

version 1.142.1releases 295, from conventional commitsbuilds dev · stage · prod, from one Vite configenvironments DDEV locally; Servd and Cloudflare in production