I Thought I would do a quick post showing that I have got Sitelok working with the latest Elements Beta using a combination of PHP and Custom Components to make using it easier. Please note, I won’t win any prizes for website design. 
I am changing the colour of the menu bar to indicate when logged in and logged out. Once more control of the menu bar is possible, then I wouldn’t display the menu items that can only be used when logged in i.e. about and logout in this example.
That’s awesome, was it fairly straightforward? I’m wondering how best to share this knowledge with other users that might be looking to do the same thing 
Would love to know if there is anything we can do to make it easier?
Oh, and did you manage to hook it all so that the custom components are using Tailwinds CSS?
It was relatively straight forward? 
I used the documention on the Sitelok site.
I currently use Sitelok on one of my sites which is Foundry 3 based and use Joe Workman’s Visilok set of stacks to control it. Vibralogix provide full documentation on how to set it up manually, so you don’t have to use a Sitelok specific stack but it makes it easier. I am trying to replicate that ease in Elements.
I had to wait for the latest beta for the php fix and after that it was fairly easy. One of the things I identified in the post - Custom Component & Template Areas - is that the following typical php code needs to be added at the start of every page that wants to control logins:
<?php
require_once("slpw/slloginform.php");
$loginpage=$slpagename;
$logoutpage=$slpagename;
$loginredirect=0;
$groupswithaccess="CLIENT";
require_once("slpw/sitelokpw.php");
?>
and in the page header area:
<?php if (function_exists('sl_loginformhead')) sl_loginformhead(7,false); ?>
The $groupswithaccess can change or have more than one group and the 7 in the sl_loginformhead(7,false); refers to the id of the login form that might not always be 7.
This means if anything changes then these areas need to be edited for every page.
If there was an Elements capability to add a global Custom Component to every page, that would be named something like Sitelok Initialisation, then it would be a simple matter to setup properies for the variable sections of this code. The the Custom Component could invoke an API to have te code posted into the appropriate section.
The other thing referenced in this post - @dropzone Identification - so that areas can be clearly seen, not just when the mouse is over them. Also having the capability to have the dropzone namee as in @dropzone(“name”) shown on the page woud be helpful. So in this case it would identify the Logged In and the Logged Out dropzone.
As far as using Tailwind’s CSS, the login panel is generated by Sitelok, it has a login form dialogue where you can configure the look and fields required. It is possible, I think, to generate a minimalist form where you can use your own CSS (or Elements, which would make sense). I haven’t got as far as investigating that yet as I wanted to get the basics to work.
The Sitelok Control Custom Component has the following template:
<?php
if ({{displayMode}}$slpublicaccess) {
?>
@dropzone("content")
<?php
}
elseif ("{{elseMode}}" == "else") {
?>
@if(elseMode)
@dropzone("content_else")
@endif
<?php
}
?>
and properties:
{
"groups": [
{
"title": "Sitelok Content Control",
"icon": "key",
"properties": [
{
"information": {},
"title": "Display content when ..."
},
{
"title": "Logged In",
"property": "displayMode",
"switch": {
"trueValue": "!",
"falseValue": "",
"default": true
}
},
{
"information": {},
"title": "[^ Displays when Logged In]",
"visible": "displayMode == true"
},
{
"information": {},
"title": "[^ Displays when Logged Out]",
"visible": "displayMode == false"
},
{
"information": {},
"title": "... else display alternate content."
},
{
"title": "Else",
"property": "elseMode",
"switch": {
"trueValue": "else",
"falseValue": "",
"default": false
}
},
{
"information": {},
"title": "[^ Displays when Logged In]",
"visible": "elseMode == true && displayMode == false"
},
{
"information": {},
"title": "[^ Displays when Logged Out]",
"visible": "elseMode == true && displayMode == true"
},
]
}
]
}
In summary, if we could get on top of some of the things listed above, then I think it would be quite simple to package this up as a solution for an Elelemnts Sitelok implementation that would be easy to use.
I would be happy to discuss offline if that would help?
This is really good stuff, love it!
What you really need is access to the dev tools (like we use to build our components), these gives you access to including files and linking to things in other areas of the template.
We’re working on enabling this in a future beta, hang tight for a few more weeks…
Will discuss your other requests with @bon and @tpbradley 
Hi, I also use sitelok and vibracartpro. I haven’t tried with Elements yet but the “off-stack” design of Vibralogix products seemed to me to allow for trouble-free integration: a Global with the snippet(s) placed either in an HTML module on the page or in the Head-Body parts of the entire site as in RW Classic. Is there a problem with this in Elements? I mean to write and place code as in RW Classic (with the Elements development videos, it seemed to me that it worked the same way)?
No issue, it’s even easier in Elements to include code wherever you need it 
As a few more weeks have gone by, I was wondering how far away is the Dev Tools being made available in the beta?
I’m trying to get Sitelok working in Elements. How do I access the head section and add HTML in the body?
Have you got this sorted now? I see @logrunner answered in your other thread.
@dan I have thanks. I’ve actually had a lot of fun playing around with elements. I’ve created a membership login and used the Strava API to connect and download my activities - I can share a video if you like?!
@johnhiggins Would love to see a video of what you’ev created 
Not sure how to load up a mp4?
Ah, the forum doesn;t allow for direct upload of videos, you need to host it somewhere else like YouTube… I use CleanShot for Mac as it has built-in sharing/hosting.
I use Jumpshare. See if this works.
WOW, that’s really, really, nice
I’m super impressed!
Thanks Dan 
this is really cool! Nice work 
Thanks Bon. I’m going to set it up so I can input my training plan which will then atomically compare what’s on Strava and produce stats.
