jQuery position, why do we HAVE to have it in the header, and how can i move it just for Guests?
Permalink
Hi,
So as usual Concrete5 requires jQuery to be loaded up top. Fine. In 5.6 we could edit the header_required with some logic to move it into the footer when a Guest is viewing the page, to help speed things up and keep search engines happier.
But, in 5.7 it seems to have moved to a config file, and whatever you set is the same rule for every user. Meaning I either have a slower load time for my users, or I can't use the edit features of conrete5 when logged in, as if jQuery is in the footer it breaks.
Is there a way to define different positions based on the current User, is there any available logic which can be pulled in?
I can't seem to get the User class in to the app.php file.
Any ideas?
So as usual Concrete5 requires jQuery to be loaded up top. Fine. In 5.6 we could edit the header_required with some logic to move it into the footer when a Guest is viewing the page, to help speed things up and keep search engines happier.
But, in 5.7 it seems to have moved to a config file, and whatever you set is the same rule for every user. Meaning I either have a slower load time for my users, or I can't use the edit features of conrete5 when logged in, as if jQuery is in the footer it breaks.
Is there a way to define different positions based on the current User, is there any available logic which can be pulled in?
I can't seem to get the User class in to the app.php file.
<?php namespace Application\Config\App; use Concrete\Core\User; $u = new User(); if (!$u->isRegistered()) { //if they are not logged in $pos = 'F'; }else{ $pos = 'H'; } return array( 'assets' => array( 'jquery' => array( array( 'javascript', 'js/jquery.js',
Viewing 15 lines of 20 lines. View entire code block.
Class 'Concrete\Core\User' not found
Any ideas?
Hi pixelhero,
You can load jQuery in the footer conditionally, but doing that will break blocks that use it. It isn't ideal, but the 33KB GZIP'ed jQuery in your head is necessary.
The alternative is using blocks that don't use jQuery or have been modified to wait until jQuery is loaded to execute. Doing something like this is not trivial, but will depend on your site audience. If you are serving users in developing countries who have low quality mobile connections or that most users who visit your site are on mobile, then it is something to explore. If not, I am not sure if it is worth the effort.
You can load jQuery in the footer conditionally, but doing that will break blocks that use it. It isn't ideal, but the 33KB GZIP'ed jQuery in your head is necessary.
The alternative is using blocks that don't use jQuery or have been modified to wait until jQuery is loaded to execute. Doing something like this is not trivial, but will depend on your site audience. If you are serving users in developing countries who have low quality mobile connections or that most users who visit your site are on mobile, then it is something to explore. If not, I am not sure if it is worth the effort.
I'm not using any blocks that require jQuery, it's simply the concrete5 editor that stops working, the overlays get lost so I cant click on anything to edit it.
I will exclude it from the theme config and simply include it in the footer when the user is not logged in. Seems the most reliable way.
Thanks guys
I will exclude it from the theme config and simply include it in the footer when the user is not logged in. Seems the most reliable way.
Thanks guys
@pixelhero
In your theme page_theme.php, you can do something like this:
- if the current user can view the toolbar or is logged in, concrete5 will load jQuery
- if not, you provide jQuery in your theme
In your theme page_theme.php, you can do something like this:
$c = \Page::getCurrentPage(); $currentPermissions = new \Permissions($c); $user = new \User; if ($currentPermissions->canViewToolbar() || $user->isLoggedIn()) { $this->requireAsset('javascript', 'jquery'); } else { $this->providesAsset('javascript', 'jquery'); }
- if the current user can view the toolbar or is logged in, concrete5 will load jQuery
- if not, you provide jQuery in your theme
Hi MrKDilkington,
I'm having issues with this as well.
"Providing" jquery (whether in the header or footer) breaks the block edit functionality.
"Requiring" the inherent jquery causes issues with the frontend.
I have added a conditional code snippet to my page_theme.php.
But in order for this to load the provided files when the user is not logged in, I still need to add jquery to the footer, which then means it is loaded twice when a user is logged in. Or am I missing something?
page_theme.php:
public function registerAssets()
{
$c = \Page::getCurrentPage();
$currentPermissions = new \Permissions($c);
$user = new \User;
if ($currentPermissions->canViewToolbar() || $user->isLoggedIn()) {
$this->requireAsset('javascript', 'jquery/*');
} else {
$this->providesAsset('javascript', 'jquery/*');
}
$this->providesAsset('javascript', 'bootstrap/*');
$this->providesAsset('css', 'bootstrap/*');
}
footer_bottom.php:
<!-- Plugin JQuery -->
<script src="<?php echo $view->getThemePath()?>/vendor/jquery/jquery.min.js"></script>
<!-- Bootstrap core JavaScript -->
<script src="<?php echo $view->getThemePath()?>/vendor/bootstrap/js/bootstrap.min.js"></script>
Thanks,
Una
I'm having issues with this as well.
"Providing" jquery (whether in the header or footer) breaks the block edit functionality.
"Requiring" the inherent jquery causes issues with the frontend.
I have added a conditional code snippet to my page_theme.php.
But in order for this to load the provided files when the user is not logged in, I still need to add jquery to the footer, which then means it is loaded twice when a user is logged in. Or am I missing something?
page_theme.php:
public function registerAssets()
{
$c = \Page::getCurrentPage();
$currentPermissions = new \Permissions($c);
$user = new \User;
if ($currentPermissions->canViewToolbar() || $user->isLoggedIn()) {
$this->requireAsset('javascript', 'jquery/*');
} else {
$this->providesAsset('javascript', 'jquery/*');
}
$this->providesAsset('javascript', 'bootstrap/*');
$this->providesAsset('css', 'bootstrap/*');
}
footer_bottom.php:
<!-- Plugin JQuery -->
<script src="<?php echo $view->getThemePath()?>/vendor/jquery/jquery.min.js"></script>
<!-- Bootstrap core JavaScript -->
<script src="<?php echo $view->getThemePath()?>/vendor/bootstrap/js/bootstrap.min.js"></script>
Thanks,
Una
you have 2 problems here.
First, when requiring or providing jquery, don't use "jquery/*". Use "jquery" instead.
Second, jQuery should be loaded in the header, not in the footer, to make sure it is loaded before Concrete5 core scripts. Or, if you really want it in the footer, make sure you load it before the footer_required directive.
First, when requiring or providing jquery, don't use "jquery/*". Use "jquery" instead.
Second, jQuery should be loaded in the header, not in the footer, to make sure it is loaded before Concrete5 core scripts. Or, if you really want it in the footer, make sure you load it before the footer_required directive.
Hi mnakalay, removing the wildcard in the jquery call solved my issue ( along with the conditional script). Thanks a lot! una
If you configure the page_theme.php in your theme so that it provides jquery can't you then use page level logic to decide where it is included?