Expose Global Variable Within the Control Panel for Selected Site

[richhayler]

It would be great to expose a global variable to get the “selected site” within the control panel on pages where the multisite site selection dropdown is present, e.g. globals and entry pages where you can select the site from a dropdown.

My use case is using this variable to apply style cues to the CP UI based on the selected site based on values stored in global sets.

By exposing this variable I can use it to lookup the values of specific global fields based on the selected site as opposed to the current site that I am logged in against.

{% set selectedSiteHandle = selectedSite|default(primarySite) %}

{% set globals = craft.globalSets().handle('globalSetHandle').site(selectedSiteHandle).all() %}

{% set global = globals[0] %}

{% set color = global.colorField %}

<style>
#nav {background-color: {{ color }}; }
</style>

[brandonkelly]

As of Craft 4, the selected site will be remembered across CP pages via a site query string param. You can fetch the site that param is referencing via craft\helpers\Cp::requestedSite().

I don’t think we would expose that to Twig though, as it would be a little confusing alongside the currentSite variable, which is slightly different (more of a front-end thing, which should always resolve to the primary site within the control panel). You could fetch it from PHP and make it available to Twig yourself though, by registering a custom Twig extension.

[richhayler]

@brandonkelly thank you for the tip.

I had a go at creating a custom module and twig extension to make the "requested site" available as a twig variable (named "selectedSite") and referenced this in the control panel, however the value appears to be the name of the Primary Site.

Despite selecting a different site in the dropdown (see screenshot) and navigating around the control panel and checking that the "site" param in the query string was displaying something other than the primary site.

I will try to figure it out but does anything spring to mind looking at my code below?

<?php

namespace richhayler\twigextensions;

use Craft;
use Twig\Extension\AbstractExtension;
use Twig\Extension\GlobalsInterface;

class ExtraGlobalsTwigExtensions extends AbstractExtension implements GlobalsInterface
{

	public function getGlobals(): array
	{
		 return [

			'selectedSite' => craft\helpers\Cp::requestedSite()

		];

	}
}

I then used some css to display the variable value...

#nav:before {content: "{{ selectedSite|lower }}"; color: red; font-weight: bold; }

[brandonkelly]

The site param must be set to the handle of a site that the current user has permission to access.

[richhayler]

I finally got this to work. I had previously added my twig variable in a stylesheet that I had linked to from the "Control Panel CSS" plugin and it seems in this case the value would always return my primary site name (fallback).

However I then created a simple .twig page with my variable {{ requestedSite }} to return the requestedSite value and added that as linked template in the Global field layout designer to display the result.

I have updated my twig extension so it is using the same CP method here: https://github.com/craftcms/cms/blob/main/src/web/twig/CpExtension.php

My twig extension code is:

<?php

namespace richhayler\twigextensions;

use Craft;
use craft\helpers\Cp;
use Twig\Extension\AbstractExtension;
use Twig\Extension\GlobalsInterface;

class ExtraGlobalsTwigExtensions extends AbstractExtension implements GlobalsInterface
{
	public function getGlobals(): array
	{
		return [
			'requestedSite' => Cp::requestedSite(),
		];
	}
}

[richhayler]

And finally here is an example implementation - changing the colour of the nav bar as a visual indicator of which site is currently selected based on a globals colour value set for that site. I did this by adding some css to the linked template in the globals section but of course this only applies the styling on those pages so I will likely need to add the CSS into my twig extension for it to be applied throughout based on the site param value.

{% set globals = craft.globalSets()
.handle('global')
.site(requestedSite)
.all()
 %}

{% set siteGlobal       = globals[0] %}
{% set dark             = siteGlobal.dark|default('black') %}

<html>
	<head>
		<style>
			#nav {background-color: {{ dark }} !important;}
		</style>
	</head>
	<body>
		<p>The requested site is: {{ requestedSite }}</p>
		<p>Dark is {{ dark }}</p>
	</body>
</html>

[brandonkelly]

Just added a new craft.cp.requestedSite variable for the next release (needed in order to implement #11303) – 77f87cc.

Sorry, not sure why it didn’t occur to put it under craft.cp to begin with.

[brandonkelly]

Craft 4.0.4 is out now with that change ✨