Skip to content

Commit b1246da

Browse files
GenakerGenaker
committed
new fixes
1 parent 9d69199 commit b1246da

12 files changed

+188
-31
lines changed

‎ReactInjectPlugin.php

+32-7
Original file line numberDiff line numberDiff line change
@@ -19,6 +19,7 @@
1919
class ReactInjectPlugin extends Renderer
2020
{
2121

22+
// Allowed optimisations for
2223
public $actionFilter = [
2324
'catalog_category_view',
2425
'cms_index_index',
@@ -59,18 +60,20 @@ public function __construct(
5960
*/
6061
protected function renderAssetHtml(\Magento\Framework\View\Asset\PropertyGroup $group)
6162
{
63+
@header("x-built-with: Ract-Luma", false);
6264
$startTime = microtime(true);
6365

6466
$objectManager = \Magento\Framework\App\ObjectManager::getInstance();
6567

6668
$reactEnabled = boolval($this->config->getValue('react_vue_config/react/enable'));
6769
$vueEnabled = boolval($this->config->getValue('react_vue_config/vue/enable'));
68-
/* remove default magento Junky JS */
70+
/* remove default Magento Junky JS */
6971
$removeAdobeJSJunk = boolval($this->config->getValue('react_vue_config/junk/remove'));
7072
$removeCSSjunk = boolval($this->config->getValue('react_vue_config/css/remove'));
73+
$criticalCSSHTML = boolval($this->config->getValue('react_vue_config/css/critical'));
7174

72-
if (isset($_GET['css-test'])){
73-
// Css test mode
75+
if (isset($_GET['css-junk'])) {
76+
// Css test mode
7477
$removeCSSjunk = false;
7578
}
7679

@@ -93,6 +96,10 @@ protected function renderAssetHtml(\Magento\Framework\View\Asset\PropertyGroup $
9396
$assetOptimizedLarge = false;
9497
$assetProductOptimized = false;
9598
$assetCategoryOptimized = false;
99+
$assetNotOptimisedMobile = false;
100+
$optimisedProductCSSFileCriticalPath = false;
101+
$optimisedCategoryCSSFileCriticalPath = false;
102+
96103
$removeController = in_array($actionName, $this->actionFilter);
97104
$isProduct = in_array($actionName, ['catalog_product_view']);
98105
$isCategory = in_array($actionName, ['catalog_category_view', 'catalogsearch_result_index']);
@@ -105,12 +112,15 @@ protected function renderAssetHtml(\Magento\Framework\View\Asset\PropertyGroup $
105112
foreach ($assets as $key => $asset) {
106113
if (in_array($actionName, $this->actionFilter) && strpos($asset->getUrl(), 'styles-m')) {
107114
// http://**/static/version1642788857/frontend/Magento/luma/en_US/css/styles-m.css
115+
$assetNotOptimisedMobile = $asset->getUrl();
108116
$optimisedCSSFileUrl = $baseURL . 'styles-m.css';
109117
$optimisedCSSFilePath = BP . '/pub/static/styles-m.css';
118+
110119
$optimisedProductCSSFileUrl = $baseURL . 'product-styles-m.css';
111120
$optimisedProductCSSFileCriticalUrl = $baseURL . 'product-critical-m.css';
112121
$optimisedProductCSSFileCriticalPath = BP . '/pub/static/product-critical-m.css';
113122
$optimisedProductCSSFilePath = BP . '/pub/static/product-styles-m.css';
123+
114124
$optimisedCategoryCSSFileUrl = $baseURL . 'category-styles-m.css';
115125
$optimisedCategoryCSSFilePath = BP . '/pub/static/category-styles-m.css';
116126
$optimisedCategoryCSSFileCriticalUrl = $baseURL . 'category-critical-m.css';
@@ -137,6 +147,7 @@ protected function renderAssetHtml(\Magento\Framework\View\Asset\PropertyGroup $
137147
// http://**/static/version1642788857/frontend/Magento/luma/en_US/css/styles-l.css
138148
$optimisedCSSFileUrlLarge = $baseURL . 'styles-l.css';
139149
$optimisedCSSFilePathLarge = BP . '/pub/static/styles-l.css';
150+
$assetNotOptimisedLarge = $asset->getUrl();
140151
if (file_exists($optimisedCSSFilePathLarge)) {
141152
// echo $optimisedCSSFileUrl;
142153
$assetOptimizedLarge = $optimisedCSSFileUrlLarge;
@@ -239,27 +250,40 @@ protected function renderAssetHtml(\Magento\Framework\View\Asset\PropertyGroup $
239250

240251
if ($removeCSSjunk) {
241252
// mobile CSS
242-
if ($assetOptimized && !($isProduct || $isCategory)) {
253+
if ($assetOptimized && !($assetProductOptimized || $assetCategoryOptimized)) {
243254
$result = '<link rel="stylesheet" type="text/css" media="all" href="' . $assetOptimized . '" />' . "\n" . $result;
244255
}
245256
if ($assetOptimizedLarge) {
246257
$result = '<link rel="stylesheet" type="text/css" media="screen and (min-width: 768px)" href="' . $assetOptimizedLarge . '" />' . "\n" . $result;
247258
}
248259
if ($assetProductOptimized && $isProduct) {
249-
if (file_exists($optimisedProductCSSFileCriticalPath)) {
250-
$result = '<link rel="stylesheet" type="text/css" media="all" href="' . $optimisedProductCSSFileCriticalUrl . '" />' . "\n" . $result;
260+
if ($optimisedProductCSSFileCriticalPath && file_exists($optimisedProductCSSFileCriticalPath)) {
261+
@header("Link: <" . $optimisedProductCSSFileCriticalUrl . ">; rel=preload; as=style", false);
262+
if (!$criticalCSSHTML) {
263+
$result = '<link rel="stylesheet" type="text/css" media="all" href="' . $optimisedProductCSSFileCriticalUrl . '" />' . "\n" . $result;
264+
}
251265
$result = '<link rel="stylesheet" media="print" onload="this.onload=null;this.media=\'all\';" href="' . $assetProductOptimized . '" />' . "\n" . $result;
252266
} else {
253267
$result = '<link rel="stylesheet" type="text/css" media="all" href="' . $assetProductOptimized . '" />' . "\n" . $result;
254268
}
269+
} else if (!$assetProductOptimized && $isProduct) {
270+
if ($optimisedProductCSSFileCriticalPath && file_exists($optimisedProductCSSFileCriticalPath)) {
271+
$result = '<link rel="stylesheet" type="text/css" media="all" href="' . $optimisedProductCSSFileCriticalUrl . '" />' . "\n" . $result;
272+
$result = '<link rel="stylesheet" media="print" onload="this.onload=null;this.media=\'all\';" href="' . $assetNotOptimisedMobile . '" />' . "\n" . $result;
273+
}
255274
}
256275
if ($assetCategoryOptimized && $isCategory) {
257-
if (file_exists($optimisedCategoryCSSFileCriticalPath)) {
276+
if ($optimisedCategoryCSSFileCriticalPath && file_exists($optimisedCategoryCSSFileCriticalPath)) {
258277
$result = '<link rel="stylesheet" type="text/css" media="all" href="' . $optimisedCategoryCSSFileCriticalUrl . '" />' . "\n" . $result;
259278
$result = '<link rel="stylesheet" media="print" onload="this.onload=null;this.media=\'all\';" href="' . $assetCategoryOptimized . '" />' . "\n" . $result;
260279
} else {
261280
$result = '<link rel="stylesheet" type="text/css" media="all" href="' . $assetCategoryOptimized . '" />' . "\n" . $result;
262281
}
282+
} else if (!$assetCategoryOptimized && $isCategory) {
283+
if ($optimisedCategoryCSSFileCriticalPath && file_exists($optimisedCategoryCSSFileCriticalPath)) {
284+
$result = '<link rel="stylesheet" type="text/css" media="all" href="' . $optimisedProductCSSFileCriticalUrl . '" />' . "\n" . $result;
285+
$result = '<link rel="stylesheet" media="print" onload="this.onload=null;this.media=\'all\';" href="' . $$assetNotOptimisedLarge . '" />' . "\n" . $result;
286+
}
263287
}
264288
}
265289

@@ -276,6 +300,7 @@ protected function renderAssetHtml(\Magento\Framework\View\Asset\PropertyGroup $
276300

277301
public function checkFile($file)
278302
{
303+
// TODO: add APCu or file cache optimisation
279304
return file_exists($file);
280305
}
281306

‎Template.php

+29
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,29 @@
1+
<?php
2+
// React-Luma extended Template for Block
3+
namespace React\React;
4+
5+
use Magento\Framework\App\Config\ScopeConfigInterface;
6+
use Magento\Framework\ObjectManagerInterface as ObjectManager;
7+
use Magento\Framework\Registry;
8+
use Magento\Framework\View\Element\Template as MTemplate;
9+
use Magento\Framework\View\Element\Template\Context;
10+
11+
class Template extends MTemplate
12+
{
13+
public $om;
14+
public $registry;
15+
public $config;
16+
17+
public function __construct(
18+
Context $context,
19+
ObjectManager $om,
20+
Registry $registry,
21+
ScopeConfigInterface $config,
22+
array $data = []
23+
) {
24+
$this->om = $om;
25+
$this->registry = $registry;
26+
$this->config = $config;
27+
parent::__construct($context, $data);
28+
}
29+
}

‎etc/adminhtml/system.xml

+5
Original file line numberDiff line numberDiff line change
@@ -47,6 +47,11 @@
4747
<source_model>Magento\Config\Model\Config\Source\Yesno</source_model>
4848
<comment>Remove Magento's default CSS garbage. You will need add optimized CSS to pub/static/styles-m.css and pub/static/styles-l.css. The files will be automaticaly included if they are exists</comment>
4949
</field>
50+
<field id="critical" type="select" sortOrder="10" showInWebsite="1" showInStore="1" showInDefault="1" translate="label">
51+
<label>CSS to HTML</label>
52+
<source_model>Magento\Config\Model\Config\Source\Yesno</source_model>
53+
<comment>Output Critical CSS to HTML</comment>
54+
</field>
5055
</group>
5156
</section>
5257
</system>

‎etc/config.xml

+1
Original file line numberDiff line numberDiff line change
@@ -16,6 +16,7 @@
1616
</junk>
1717
<css>
1818
<remove>1</remove>
19+
<critical>1</critical>
1920
</css>
2021
</react_vue_config>
2122
</default>

‎pub/static/product-critical-m.css

+1-1
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎pub/static/product-styles-m.css

+1-1
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎view/frontend/layout/default.xml

+2-2
Original file line numberDiff line numberDiff line change
@@ -6,12 +6,12 @@
66
<block class="Magento\Framework\View\Element\Template" template="React_React::vue-component.phtml" ifconfig="react_vue_config/vue/enable"/>
77
</referenceContainer>
88
<referenceContainer name="footer">
9-
<block class="Magento\Framework\View\Element\Template"
9+
<block class="React\React\Template"
1010
name="react-luma.footer.block"
1111
template="React_React::react-footer.phtml"/>
1212
</referenceContainer>
1313
<referenceContainer name="head.additional">
14-
<block class="Magento\Framework\View\Element\Template"
14+
<block class="React\React\Template"
1515
name="react-luma.head.block"
1616
template="React_React::react-header.phtml"/>
1717
</referenceContainer>

‎view/frontend/layout/default_head_blocks.xml

+8
Original file line numberDiff line numberDiff line change
@@ -26,6 +26,14 @@
2626
<remove src="fonts/opensans/regular/opensans-400.woff2"/>
2727
<remove src="fonts/opensans/semibold/opensans-600.woff2"/>
2828
<remove src="fonts/opensans/bold/opensans-700.woff2"/>
29+
<!--
30+
you can also remove from here ;)
31+
<remove src="css/styles-m.css"/>
32+
<css src="css/styles-l.css" media="screen and (min-width: 768px)"/>
33+
<remove src="css/styles-l.css" media="screen and (min-width: 768px)"/>
34+
-->
35+
36+
<remove src="css/print.css"/>
2937
<!--<remove src="fonts/Luma-Icons.woff2"/>-->
3038
</head>
3139
</page>

‎view/frontend/templates/product/breadcrumbs.phtml

+17-2
Original file line numberDiff line numberDiff line change
@@ -84,6 +84,7 @@ nav.breadcrumbs {
8484
margin-bottom: 0;
8585
padding: 0;
8686
padding-left: 20px;
87+
width: 100%;
8788
}
8889

8990
/* Breadcrumbs List */
@@ -121,21 +122,34 @@ nav.breadcrumbs {
121122
color: #000;
122123
}
123124

125+
.bc-container {
126+
width: 100%;
127+
max-width: 1280px;
128+
margin: 0 auto;
129+
position: relative;
130+
text-align: center;
131+
}
132+
124133
/* Responsive - Mobile */
125134
@media (max-width: 768px) {
135+
nav.breadcrumbs, .bc-container {
136+
max-width: auto;
137+
}
126138
.breadcrumbs {
127139
padding: 8px 15px;
128140
}
129-
141+
.breadcrumbs ul {
142+
padding-left: 0px;
143+
}
130144
.breadcrumbs li {
131145
font-size: 14px;
132146
}
133-
134147
.breadcrumbs li:not(:last-child)::after {
135148
margin: 0 5px;
136149
}
137150
}
138151
</style>
152+
<div class="bc-container">
139153
<nav class="breadcrumbs">
140154
<ul>
141155
<li><a href="<?=$block->getBaseUrl();?>">Home</a></li>
@@ -151,6 +165,7 @@ nav.breadcrumbs {
151165
<li><?=$block->escapeHtml($product->getName());?></li>
152166
</ul>
153167
</nav>
168+
</div>
154169

155170
<?php
156171
//$widget = $this->helper(\Magento\Framework\Json\Helper\Data::class)->jsonDecode($viewModel->getJsonConfigurationHtmlEscaped());

‎view/frontend/templates/product/view/gallery.phtml

+4-3
Original file line numberDiff line numberDiff line change
@@ -55,9 +55,10 @@ $images = json_decode($gallaryData, true);
5555

5656
<!-- Thumbnail Navigation -->
5757
<div class="thmb">
58-
<?php foreach ($images as $image): ?>
58+
<?php if(count($images) > 1): foreach ($images as $image): ?>
5959
<img src="<?=$image['thumb'];?>" loading="lazy" alt="<?=$image['caption'];?>" class="thumb" onclick="document.querySelectorAll('#mob-pict source').forEach(source => source.remove());document.getElementById('mImg').src='<?=$image['img'];?>'">
60-
<?php endforeach; ?>
60+
<?php endforeach;endif; ?>
61+
<?php if(count($images) <= 1) {echo "<style>@media (max-width: 768px) {.gallery {min-height: 255px !important;}</style>";} ?>
6162
</div>
6263
</div>
6364

@@ -104,7 +105,7 @@ $images = json_decode($gallaryData, true);
104105
border: 2px solid #007bff;
105106
}
106107

107-
/* 📌 Responsive Adjustments */
108+
/* Responsive Adjustments */
108109
@media (max-width: 768px) {
109110
.gallery {
110111
min-height: 350px;

‎view/frontend/templates/react-footer.phtml

+42-15
Original file line numberDiff line numberDiff line change
@@ -1,21 +1,10 @@
11
<?php
2-
$currentUrl = $block->getUrl('*/*/*', ['_current' => true, '_use_rewrite' => true]);
3-
$objectManager = \Magento\Framework\App\ObjectManager::getInstance();
4-
$regestry = $objectManager->get(\Magento\Framework\Registry::class);
5-
$product = $regestry->registry('current_product');
6-
$request = $this->getRequest();
7-
$controller = $request->getControllerName();
8-
$uenc = base64_encode($currentUrl);
2+
$product = $this->registry->registry('current_product');
93
?>
10-
<script>
11-
<?php if ($product) {?>
12-
window.productType = "<?=$product->getTypeId();?>";
13-
<?php }?>
14-
window.curentUenc = "<?=$uenc?>";
15-
window.controller = "<?=$controller?>";
16-
</script>
17-
<link rel="stylesheet" media="print" onload="this.onload=null;this.media='all';" href="/media/styles.css" >
184

5+
<?php /* Only Luma Demo Needs this */ if (!$product): ?>
6+
<link rel="stylesheet" media="print" onload="this.onload=null;this.media='all';" href="/media/styles.css" >
7+
<?php endif; ?>
198
<style>
209
/* Show only the first-level submenu on hover */
2110
.navigation .level0:hover > .submenu {
@@ -295,6 +284,16 @@ display: none;
295284
<script>
296285

297286
var mage = (() => {
287+
var loaded = false;
288+
var doc = document;
289+
window.addEventListener('load', () => {
290+
loaded = true;
291+
});
292+
293+
function isLoaded(){
294+
return loaded;
295+
}
296+
298297
function getCookie(name) {
299298
let match = document.cookie.match(new RegExp('(^| )' + name + '=([^;]+)'));
300299
return match ? decodeURIComponent(match[2]) : null;
@@ -446,6 +445,32 @@ onDOM = (callback, ...args) => {
446445
document.addEventListener("DOMContentLoaded", () => callback(...args));
447446
}
448447

448+
const checkInterval = 150;
449+
const loadTimeout = 3000
450+
451+
// Function to run code only after the page has loaded, with optional arguments
452+
runAfterLoad = (interval = checkInterval, callback, ...args) => {
453+
let counter = 5;
454+
const checkLoad = setInterval(() => {
455+
if (isLoaded()) {
456+
clearInterval(checkLoad);
457+
callback(...args);
458+
}
459+
counter++;
460+
}, interval);
461+
}
462+
463+
loadScript = (src) => {
464+
return new Promise((resolve, reject) => {
465+
const script = document.createElement("script");
466+
script.src = src;
467+
script.async = true;
468+
script.onload = () => resolve(src);
469+
script.onerror = () => reject(new Error(`Failed to load script: ${src}`));
470+
document.head.appendChild(script);
471+
});
472+
}
473+
449474
getUenc = () => {
450475
return window.curentUenc;
451476
}
@@ -534,9 +559,11 @@ return {
534559
addToWishlist,
535560
addToCompare,
536561
getFormKey,
562+
isLoaded,
537563
getUenc,
538564
onLoad,
539565
onDOM,
566+
doc
540567
};
541568
})();
542569
</script>

0 commit comments

Comments
 (0)