Skip to content

Commit 30e0aaa

Browse files
author
CSoellinger
committed
Create new minor version
1 parent 60f0d8d commit 30e0aaa

File tree

5 files changed

+236
-31
lines changed

5 files changed

+236
-31
lines changed

‎info.xml‎

Lines changed: 53 additions & 31 deletions
Original file line numberDiff line numberDiff line change
@@ -1,34 +1,56 @@
11
<?xml version='1.0' encoding="ISO-8859-1"?>
22
<jtlshop3plugin>
3-
<Name>PixelCrab LoadCSS</Name>
4-
<Description>Verwenden Sie LoadCSS und CriticalCSS um ein besserers PageSpeed Ranking zu erhalten.</Description>
5-
<Author>Christopher Söllinger</Author>
6-
<URL>https://github.com/CSoellinger/jtl-shop4-plugin-loadcss</URL>
7-
<PluginID>pixelcrab_loadcss</PluginID>
8-
<XMLVersion>100</XMLVersion>
9-
<Shop4Version>400</Shop4Version>
10-
<Icon>preview.png</Icon>
11-
<Install>
12-
<Version nr="100">
13-
<CreateDate>2018-02-01</CreateDate>
14-
</Version>
15-
<Hooks>
16-
<Hook id="140">pclc_140_smarty_outputfilter.php</Hook>
17-
</Hooks>
18-
<Adminmenu>
19-
<Settingslink sort="2">
20-
<Name>Einstellungen</Name>
21-
<Setting type="checkbox" initialValue="" sort="1" conf="Y">
22-
<Name>Lade CriticalCSS von EVO</Name>
23-
<Description>Damit die wichtigsten CSS Klassen bereits beim Öffnen der Seite vorhanden sind fügen wir ohne Farben alle vom Evo extrahierten CriticalCSS Pfade.</Description>
24-
<ValueName>pclc_use_criticalcss</ValueName>
25-
</Setting>
26-
<Setting type="checkbox" initialValue="" sort="2" conf="Y">
27-
<Name>Verwende LoadCSS für vorhandene Stylesheets</Name>
28-
<Description>Ersetzte vorhande Stylesheets mit rel="preload" und verwende loadCss als Fallback für ältere Browser.</Description>
29-
<ValueName>pclc_use_loadcss</ValueName>
30-
</Setting>
31-
</Settingslink>
32-
</Adminmenu>
33-
</Install>
3+
<Name>PixelCrab Optimize CSS and JS load</Name>
4+
<Description>Mit diesem Plugin kann das Laden von CSS und JS Dateien optimieren und so den PageSpeed Rank erhöhen.</Description>
5+
<Author>Christopher Söllinger</Author>
6+
<URL>https://github.com/CSoellinger/jtl-shop4-plugin-optimize-css-and-js-load</URL>
7+
<PluginID>pixelcrab_optimize_css_js_load</PluginID>
8+
<XMLVersion>100</XMLVersion>
9+
<Shop4Version>400</Shop4Version>
10+
<Icon>preview.png</Icon>
11+
<Install>
12+
<Version nr="100">
13+
<CreateDate>2018-02-01</CreateDate>
14+
</Version>
15+
<Version nr="110">
16+
<CreateDate>2018-02-02</CreateDate>
17+
</Version>
18+
19+
20+
<Hooks>
21+
<Hook id="140">pcocjl_140_smarty_outputfilter.php</Hook>
22+
</Hooks>
23+
<Adminmenu>
24+
<Settingslink sort="1">
25+
<Name>Einstellungen</Name>
26+
<!-- CSS Configuration -->
27+
<Setting type="text" initialValue="" sort="10" conf="N">
28+
<Name>CSS</Name>
29+
<ValueName>Spacer</ValueName>
30+
<Description></Description>
31+
</Setting>
32+
<Setting type="checkbox" initialValue="" sort="11" conf="Y">
33+
<Name>Lade CriticalCSS von EVO</Name>
34+
<Description>Damit die wichtigsten CSS Klassen bereits beim Öffnen der Seite vorhanden sind fügen wir ohne Farben alle vom Evo extrahierten CriticalCSS Pfade.</Description>
35+
<ValueName>pcocjl_use_criticalcss</ValueName>
36+
</Setting>
37+
<Setting type="checkbox" initialValue="" sort="12" conf="Y">
38+
<Name>Verwende LoadCSS für vorhandene Stylesheets</Name>
39+
<Description>Ersetzte vorhande Stylesheets mit rel="preload" und verwende loadCss als Fallback für ältere Browser.</Description>
40+
<ValueName>pcocjl_use_loadcss</ValueName>
41+
</Setting>
42+
<!-- JavaScript Configuration -->
43+
<Setting type="text" initialValue="" sort="20" conf="N">
44+
<Name>JS</Name>
45+
<ValueName>Spacer</ValueName>
46+
<Description></Description>
47+
</Setting>
48+
<Setting type="checkbox" initialValue="" sort="21" conf="Y">
49+
<Name>Verschiebe JS an das Ende vom HTML Body</Name>
50+
<Description>Sucht mit PHPQuery alle SCRIPT vorkommen und fügt diese am Ende des BODY HTML Tag ein.</Description>
51+
<ValueName>pcocjl_move_js_to_body</ValueName>
52+
</Setting>
53+
</Settingslink>
54+
</Adminmenu>
55+
</Install>
3456
</jtlshop3plugin>

‎version/110/frontend/pcocjl_140_smarty_outputfilter.php‎

Lines changed: 32 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,32 @@
1+
<?php
2+
/**
3+
* Manipulate DOM for LoadCSS and CriticalCSS and
4+
* load JS at the end of HTML BODY tag.
5+
*
6+
* @author PixelCrab <cs@pixelcrab.at>
7+
* @copyright 2018 PixelCrab
8+
*
9+
* @global JTLSmarty $smarty
10+
* @global Plugin $oPlugin
11+
*/
12+
13+
if (class_exists('Shop')) {
14+
require_once $oPlugin->cFrontendPfad . '../include/class.pcocjl.helper.php';
15+
$pcocjlHelper = pcocjlHelper::getInstance($oPlugin, $smarty);
16+
17+
// Prepend default critical css from evo template without colors. Our CSS file will overwrite the stuff when it's loaded
18+
if ($pcocjlHelper->getConfig('use_criticalcss')) {
19+
$pcocjlHelper->insertCriticalCss();
20+
}
21+
22+
// Append loadCss JavaScript into head
23+
if ($pcocjlHelper->getConfig('use_loadcss')) {
24+
// @todo Maybe we should make this step after moving JS
25+
$pcocjlHelper->insertLoadCss();
26+
}
27+
28+
// Move JS stuff into body
29+
if ($pcocjlHelper->getConfig('move_js_to_body')) {
30+
$pcocjlHelper->moveJsToBodyEnd();
31+
}
32+
}

‎version/110/include/class.pcocjl.helper.php‎

Lines changed: 132 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,132 @@
1+
<?php
2+
/**
3+
* Plugin helper with all the magic.
4+
*
5+
* @author PixelCrab <cs@pixelcrab.at>
6+
* @copyright 2018 PixelCrab
7+
*/
8+
9+
class pcocjlHelper
10+
{
11+
12+
/**
13+
* @var null|pcocjlHelper Self instance
14+
*/
15+
private static $_instance = null;
16+
17+
/**
18+
* @var null|Plugin Plugin instance
19+
*/
20+
private $plugin = null;
21+
22+
/**
23+
* @var null|JTLSmarty Smarty instance
24+
*/
25+
private $smarty = null;
26+
27+
/**
28+
* constructor
29+
*
30+
* @param Plugin $oPlugin
31+
*/
32+
public function __construct(Plugin $oPlugin, JTLSmarty $smarty)
33+
{
34+
$this->plugin = $oPlugin;
35+
$this->smarty = $smarty;
36+
}
37+
38+
/**
39+
* singleton getter
40+
*
41+
* @param Plugin $oPlugin
42+
* @return pcocjlHelper
43+
*/
44+
public static function getInstance(Plugin $oPlugin, JTLSmarty $smarty)
45+
{
46+
return (self::$_instance === null) ? new self($oPlugin, $smarty) : self::$_instance;
47+
}
48+
49+
/**
50+
* Replace all CSS sheet references with rel="preload" and add LoadCSS as polyfill fallback.
51+
*
52+
* @return pcocjlHelper $this
53+
*/
54+
public function insertLoadCss()
55+
{
56+
include_once 'pcocjl_load-css-polyfill.php';
57+
58+
// First append LoadCSS polyfill
59+
pq('head')->append('<script>' . $loadCssPolyfillJs . '</script>');
60+
61+
// Callback for all CSS link items
62+
$cb = function ($key, $item) {
63+
$el = pq($item);
64+
$href = $el->attr('href');
65+
66+
$newEl = '<link rel="preload" href="' . $href . '" as="style" onload="this.onload=null;this.rel=\'stylesheet\'">';
67+
$newEl .= '<noscript><link rel="stylesheet" href="' . $href . '"></noscript>';
68+
69+
$el->replaceWith($newEl);
70+
};
71+
72+
// At least we replace all default css links in the head with rel"preload" and fallback.
73+
phpQuery::each(pq('head link[rel=stylesheet]'), $cb);
74+
75+
return $this;
76+
}
77+
78+
/**
79+
* Insert critical css, extracted from default evo template, into head.
80+
*
81+
* @return pcocjlHelper $this
82+
*/
83+
public function insertCriticalCss()
84+
{
85+
include_once 'pcocjl_critical-css.php';
86+
87+
pq('head')->prepend('<style>' . $criticalCss . '</style>');
88+
89+
return $this;
90+
}
91+
92+
/**
93+
* Fetch and move JS stuff to the end from BODY HTML tag.
94+
*
95+
* @return pcocjlHelper $this
96+
*/
97+
public function moveJsToBodyEnd()
98+
{
99+
// First fetch all scripts from HEAD
100+
if (pq('head script')->count() > 0) {
101+
$scriptsHead = pq('head script');
102+
// and remove them
103+
pq('head script')->remove();
104+
}
105+
106+
// Second fetch all scripts from BODY
107+
if (pq('body script')->count() > 0) {
108+
$scriptsBody = pq('body script');
109+
// and remove them
110+
pq('body script')->remove();
111+
}
112+
113+
// At least append them to body so that they are here again
114+
pq('body')
115+
->append($scriptsHead)
116+
->append($scriptsBody);
117+
118+
return $this;
119+
}
120+
121+
/**
122+
* Get a config variable
123+
*
124+
* @param String $cfg
125+
* @return String
126+
*/
127+
public function getConfig($cfg)
128+
{
129+
return $this->plugin->oPluginEinstellungAssoc_arr['pcocjl_' . $cfg];
130+
}
131+
132+
}

0 commit comments

Comments
 (0)