Skip to content

Commit

Permalink
Initial commit
Browse files Browse the repository at this point in the history
  • Loading branch information
JaJuMa committed Nov 27, 2023
0 parents commit af2bee7
Show file tree
Hide file tree
Showing 11 changed files with 554 additions and 0 deletions.
45 changes: 45 additions & 0 deletions Block/CoreWebVitals.php
Original file line number Diff line number Diff line change
@@ -0,0 +1,45 @@
<?php
/**
* @author JaJuMa GmbH <info@jajuma.de>
* @copyright Copyright (c) 2023 JaJuMa GmbH <https://www.jajuma.de>. All rights reserved.
* @license http://opensource.org/licenses/mit-license.php MIT License
*/

namespace Jajuma\PotCoreWebVitals\Block;

use Jajuma\PowerToys\Block\PowerToys\Dashboard;
use Magento\Framework\View\Element\Template\Context;
use Magento\Framework\App\State;
use Magento\Framework\App\Area;

class CoreWebVitals extends Dashboard
{
const XML_PATH_ENABLE = 'power_toys/core_web_vitals/is_enabled';

private $state;

public function __construct(
Context $context,
State $state,
array $data = []
) {
$this->state = $state;
parent::__construct($context, $data);
}

public function isEnable(): bool
{
return $this->_scopeConfig->isSetFlag(self::XML_PATH_ENABLE) && $this->isFrontend();
}

public function isLazyload(): bool
{
return false;
}

public function isFrontend(): bool
{
$areaCode = $this->state->getAreaCode();
return $areaCode == Area::AREA_FRONTEND;
}
}
21 changes: 21 additions & 0 deletions LICENSE
Original file line number Diff line number Diff line change
@@ -0,0 +1,21 @@
MIT License

Copyright (c) 2023 JaJuMa

Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
in the Software without restriction, including without limitation the rights
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
copies of the Software, and to permit persons to whom the Software is
furnished to do so, subject to the following conditions:

The above copyright notice and this permission notice shall be included in all
copies or substantial portions of the Software.

THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
SOFTWARE.
215 changes: 215 additions & 0 deletions README.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,215 @@
# :vertical_traffic_light: Core Web Vitals Power Toy for Magento 2 by [JaJuMa](https://www.jajuma.de/)

<img align="right" width="35%" height="auto" src="https://www.jajuma.de/media/wysiwyg/jajuma-develop/power-toys-magento/JaJuMa-Core-Web-Vitals-Power-Toy-For-Magento-2-small.png">

Core Web Vitals Power Toy for Magento 2 by [JaJuMa](https://www.jajuma.de/en) is a dashboard toy
that displays Core Web Vitals for current page load.
Powered by [Google web-vitals library](https://github.com/GoogleChrome/web-vitals) for measuring Web Vitals metrics.

Compatible with

<div align="left">
<table >
<tr>
<td><b>Hyvä Themes</b></td>
<td><b>Mage-OS</b></td>
<td><b>Magento</b></td>
</tr>
<tr>
<td><a href="https://www.jajuma.de/en/jajuma-shop/online-shop-with-magento-2-and-hyva-themes"><img align="left" width="80" src="https://www.jajuma.de/media/wysiwyg/jajuma-shop/magento-with-hyva/JaJuMa-Hyvanaut-small.png"></a></td>
<td><a href="https://www.jajuma.de/en/jajuma-shop/demo-shop-with-mage-os-and-hyva-themes"><img align="left" width="80" src="https://www.jajuma.de/media/wysiwyg/jajuma-develop/Mage-OS-Compatible.svg"></a></td>
<td><a href="https://www.jajuma.de/en/jajuma-shop"><img align="left" height="60" src="https://www.jajuma.de/media/wysiwyg/jajuma-develop/magento-icon.svg"></a></td>
</tr>
</table>
</div>

## Features

This Dashboard Power Toy provides:
* Core Web Vitals and other performance KPI measured for current page load with
* CLS – Content Layout Shift
* LCP – Largest Contentful Paint
* INP – Interaction to Next Paint
* FID – First Input Delay
* FCP – First Contentful Pain
* TTFB – Time To First Byte

(Note: This Toy only shows in frontend)

## Screenshots

<td>
<table>
<tr>
<td><b>Core Web Vitals Toy</b><br>Dark Mode</td>
<td><b>Core Web Vitals Toy</b><br>Light Mode</td>
</tr>
<tr>
<td><img src="https://www.jajuma.de/media/wysiwyg/jajuma-develop/power-toys-magento/screenshots/Magento-Core-Web-Vitals-Power-Toy-Dark.jpg"></td>
<td><img src="https://www.jajuma.de/media/wysiwyg/jajuma-develop/power-toys-magento/screenshots/Magento-Core-Web-Vitals-Power-Toy-Light.jpg"></td>
</tr>
</table>
</td>


## Requirements

<div align="left">
<table>
<tr>
<td><img align="left" width="80" height="auto" src="https://www.jajuma.de/media/wysiwyg/jajuma-develop/power-toys-magento/JaJuMa-Power-Toys-For-Magento-2-small.png"></td>
<td>:bangbang: This module requires <a href="https://github.com/JaJuMa-GmbH/power-toys">Power Toys for Magento 2</a><br>:bangbang: by <a href="https://www.jajuma.de/en/jajuma-develop/extensions/power-toys-for-magento-2">JaJuMa</a></td>
</tr>
</table>
</div>

* Magento Power Toys v1.0.0+
* Magento v2.4.5+ OR
Mage-OS v1.0.0+
* Magewire v1.10+
* Magewire-requirejs v1.1+

## Further Info, Extension Description & Manual

* [Extension Website EN](https://www.jajuma.de/en/jajuma-develop/extensions/power-toys-for-magento-2)
* [Extension Website DE](https://www.jajuma.de/de/jajuma-develop/extensions/power-toys-fuer-magento-2)

## Demos

* [Magento Power Toys Demo on Luma Theme](https://www.jajuma.de/en/jajuma-shop/demo-shop-with-magento-2)
* [Magento Power Toys Demo on Hyvä Theme](https://www.jajuma.de/en/jajuma-shop/demo-shop-with-magento-2-and-hyva-themes)
* [Magento Power Toys Demo on Mage-OS](https://www.jajuma.de/en/jajuma-shop/demo-shop-with-mage-os-and-hyva-themes)

## Installation

Install via composer as any other Magento extension from Github:
```
composer require jajuma/pot-core-web-vitals
```

## Using ChatGPT Power Toy For Magento

After installing this module:
Go to
**JaJuMa -> Power Toys -> Configuration**
and enable & configure Core Web Vitals Toy.

After enabling, see the floating button at left/right edge of your screen
in your Frontend (while logged in as Admin).
When click on this button, the Power Toys Panel will open
displaying the Core Web Vitals Toy.
(Note: this Toy only shows in frontend)

* [See Manual for more details](https://www.jajuma.de/media/wysiwyg/jajuma-develop/power-toys-magento/manuals/JaJuMa_Core_Web_Vitals_Power_Toy_Manual_v001.pdf)


## License

The code is licensed under the [MIT License (MIT)](https://github.com/JaJuMa/pot-core-web-vitals/blob/master/LICENSE)

## :heart: Powered by

Developing the Power Toys module and the toys was a lot easier and more fun thanks to [Magewire](https://github.com/magewirephp/magewire).
A big shout and Thank You to [Willem Poortman](https://github.com/wpoortman) for creating Magewire

## Other [Magento 2 Extensions](ttps://www.jajuma.de/en/jajuma-develop/magento-extensions) by [JaJuMa](https://www.jajuma.de/)

* :framed_picture: Performance & UX:<br>[Ultimate Image Optimizer for Magento 2](https://www.jajuma.de/en/jajuma-develop/extensions/ultimate-image-optimizer-extension-for-magento-2)<br>
AVIF & WebP Images, Lazy Loading, High-Resolution / Retina images

* :framed_picture: Performance & UX:<br>[WebP Optimized Images for Magento 2](https://www.jajuma.de/en/jajuma-develop/extensions/webp-optimized-images-extension-for-magento-2#portfolio-content)<br>
The #1 WebP Images Solution for Magento 2

* :see_no_evil: SEO:<br>[PRG Pattern Link Masking for Magento 2](https://www.jajuma.de/en/jajuma-develop/extensions/prg-pattern-link-masking-for-magento-2)<br>
Link Masking for Layered Navigation

* :cop: User Experience:<br>[Shariff Social Share for Magento 2](https://www.jajuma.de/en/jajuma-develop/extensions/shariff-social-share-buttons-extension-for-magento-2)<br>
GDPR compliant and customizable Sharing Buttons

* :movie_camera: Content Management:<br>[Video Widget for Magento 2](https://www.jajuma.de/en/jajuma-develop/extensions/video-widget-gdpr-extension-for-magento-2)<br>
Embedding YouTube videos, GDPR compliant with auto preview image & fully responsive

* :rocket: Performance & UX:<br>[Page Preload for Magento 2](https://www.jajuma.de/en/jajuma-develop/extensions/page-preload-extension-for-magento-2)<br>
Faster faster page transitions and subsequent page-loads by preloading / prefetching

* :chart_with_upwards_trend: Marketing:<br>[Matomo Analytics for Magento 2](https://www.jajuma.de/en/jajuma-develop/extensions/honey-spam-anti-spam-extension-for-magento-2)<br>
Web Analytics - GDPR Compliant

* :honey_pot: Site Optimization:<br>[Honey Spam Anti-Spam for Magento 2](https://www.jajuma.de/en/jajuma-develop/extensions/honey-spam-anti-spam-extension-for-magento-2)<br>
Spam Protection - Reliable & GDPR Compliant

* :bell: Marketing:<br>[Customer Registration Reminder & Cleanup for Magento 2](https://www.jajuma.de/en/jajuma-develop/extensions/customer-registration-reminder-and-cleanup-extension-for-magento-2)<br>
Increase Your Customer Engangement & Cleanup your Customer Account Data Automatically

* :mega: UX & Marketing:<br>[Category Grid Callouts for Magento 2](https://www.jajuma.de/en/jajuma-develop/extensions/category-grid-callouts-extension-for-magento-2)<br>
Enrich Your Category Grids With Eye-Catching Callouts

* :thought_balloon: UX & Marketing:<br>[Customer Satisfaction Feedback for Magento 2](https://www.jajuma.de/en/jajuma-develop/extensions/category-grid-callouts-extension-for-magento-2)<br>
Collect Valuable Feedback From Your Customers & Understand How To Satisfy Your Customers

* :sparkler: UX:<br>[Auto Select Options for Magento 2](https://www.jajuma.de/en/jajuma-develop/extensions/auto-select-options-extension-for-magento-2)<br>
Automatically Select Configurable & Custom Options Based On Your Customer's Preferences

* :left_right_arrow: UX & Performance:<br>[Back Forward Cache - bfcache for Magento 2](https://www.jajuma.de/en/jajuma-develop/extensions/back-forward-cache-extension-for-magento-2)<br>
Enable bfcache for Magento 2 for improved UX & Core Web Vitals

* :heavy_division_sign: Accounting:<br>[Dynamic Shipping Tax Plus for Magento 2](https://www.jajuma.de/en/jajuma-develop/extensions/proportional-pro-rata-dynamic-shipping-tax-plus-extension-for-magento-2)<br>
Dynamic Shipping Tax Calculation incl. pro-rata/proportional tax rates

* :mag: Search:<br>[MySQL Search for Magento 2](https://www.jajuma.de/en/jajuma-develop/extensions/magento-without-elasticsearch-mysql-search-extension-for-magento-2)<br>
MySQL Search for Magento 2 without Elasticsearch

* :bangbang: Performance:<br>[Preload Critical Resources & Assets](https://www.jajuma.de/en/jajuma-develop/extensions/resource-hints-preload-critical-resources-assets-extension-for-magento-2)<br>
Resource Hints for preloading important and critical resources

* :octocat: Content Management:<br>[git 4 Page Builder](https://www.jajuma.de/en/jajuma-develop/extensions/git-4-page-builder-extension-for-magento-2)<br>
Manage & deploy Magento 2 Page Builder content via git

* :rocket: Performance:<br>[Hyvä Inline CSS](https://www.jajuma.de/en/jajuma-develop/extensions/hyva-inline-css-extension-for-magento-with-hyva-themes)<br>
Run Magento 2 without CSS file by inline all CSS

* :man_technologist: :free: Content Management:<br>[Syntax Highlighter 4 Page Builder](https://www.jajuma.de/en/jajuma-develop/extensions/syntax-highlighter-4-page-builder-extension-for-magento-2)<br>
Syntax Highlighting and more for Magento 2 Page Builder

* :triangular_flag_on_post: :free: UI & UX:<br>[Awesome Hyvä for Hyvä Themes](https://www.jajuma.de/en/jajuma-develop/extensions/font-awesome-icons-for-hyva-themes-extension)<br>
Font Awesome 5 & 6 Icons for your [Hyvä Themes](https://www.jajuma.de/de/jajuma-shop/online-shop-mit-magento-2-und-hyva-themes) Store

* :triangular_flag_on_post: :free: UI & UX:<br>[Hyvä Flags for Hyvä Themes](https://www.jajuma.de/en/jajuma-develop/extensions/country-language-flag-icons-for-hyva-themes-extension)<br>
Country & Language Flag Icons for your [Hyvä Themes](https://www.jajuma.de/de/jajuma-shop/online-shop-mit-magento-2-und-hyva-themes) Store

* :ok_man: :free: User Experience:<br>[Customer Navigation Manager for Magento 2](https://www.jajuma.de/en/jajuma-develop/extensions/customer-navigation-manager-extension-for-magento-2)<br>
Easily manage the links in your Customer Account

* :heavy_division_sign: :free: Accounting:<br>[Dynamic Shipping Tax for Magento 2](https://www.jajuma.de/en/jajuma-develop/extensions/dynamic-shipping-tax-extension-for-magento-2)<br>
Dynamic Shipping Tax Calculation

* :question: :free: Content:<br>[Hyvä FAQ Widget for Hyvä Themes](https://www.jajuma.de/en/jajuma-develop/extensions/dynamic-shipping-tax-extension-for-magento-2)<br>
FAQ Widget for your [Hyvä Themes](https://www.jajuma.de/de/jajuma-shop/online-shop-mit-magento-2-und-hyva-themes) Store

## Other [Services](https://www.jajuma.de/en/jajuma/company-magento-ecommerce-agency-stuttgart) by [JaJuMa](https://www.jajuma.de/)

* :shopping: [JaJuMa-Market: Marketplace Software](https://www.jajuma.de/en/jajuma-market)<br>
Complete Online Marketplace Software Solution. For Professional Demands. Feature Rich. Flexibly Customizable.

* :shopping_cart: [JaJuMa-Shop](https://www.jajuma.de/en/jajuma-shop)<br>
Customized Magento Shop Solutions.

* :rocket: [JaJuMa-Shop: Hyvä Magento Shop Development](https://www.jajuma.de/de/jajuma-shop/online-shop-mit-magento-2-und-hyva-themes)<br>
Hyvä Magento Shop Development.

* :orange_book: [JaJuMa-Shop: Magento Handbuch in Deutsch](https://www.jajuma.de/de/jajuma-shop/magento-2-handbuch/)<br>
Magento Handbuch in Deutsch.

* :card_index_dividers: [JaJuMa-PIM](https://www.jajuma.de/en/jajuma-pim)<br>
Product Information Management. Simple. Better.

* :heavy_plus_sign: [JaJuMa-Develop: Magento 2 Extensions](https://www.jajuma.de/en/jajuma-develop/magento-extensions)<br>
Individual Solutions For Your Business Case.

* :paintbrush: [JaJuMa-Design](https://www.jajuma.de/en/jajuma-design)<br>
Designs That Inspire.

* :necktie: [JaJuMa-Consult](https://www.jajuma.de/en/jajuma-consult)<br>
We Show You New Perspectives.

© JaJuMa GmbH | [www.jajuma.de](www.jajuma.de)
27 changes: 27 additions & 0 deletions composer.json
Original file line number Diff line number Diff line change
@@ -0,0 +1,27 @@
{
"name": "jajuma/pot-core-web-vitals",
"description": "Core Web Vitals Power Toy for Magento 2 by JaJuMa",
"type": "magento2-module",
"license": "MIT",
"version": "1.0.0",
"authors": [
{
"email": "info@jajuma.de",
"name": "JaJuMa"
}
],
"minimum-stability": "dev",
"require": {
"magewirephp/magewire": "^1.10",
"magewirephp/magewire-requirejs": "^1.1",
"jajuma/power-toys": "^1.0"
},
"autoload": {
"psr-4": {
"Jajuma\\PotCoreWebVitals\\": ""
},
"files": [
"registration.php"
]
}
}
14 changes: 14 additions & 0 deletions etc/adminhtml/system.xml
Original file line number Diff line number Diff line change
@@ -0,0 +1,14 @@
<?xml version="1.0"?>
<config xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:module:Magento_Config:etc/system_file.xsd">
<system>
<section id="power_toys">
<group id="core_web_vitals" translate="label" sortOrder="110" showInDefault="1" showInWebsite="1" showInStore="1">
<label>Core Web Vitals</label>
<field id="is_enabled" translate="label comment" type="select" sortOrder="10" showInDefault="1" showInWebsite="1" showInStore="1">
<label>Enable</label>
<source_model>Magento\Config\Model\Config\Source\Yesno</source_model>
</field>
</group>
</section>
</system>
</config>
10 changes: 10 additions & 0 deletions etc/config.xml
Original file line number Diff line number Diff line change
@@ -0,0 +1,10 @@
<?xml version="1.0"?>
<config xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:module:Magento_Store:etc/config.xsd">
<default>
<power_toys>
<core_web_vitals>
<is_enabled>1</is_enabled>
</core_web_vitals>
</power_toys>
</default>
</config>
19 changes: 19 additions & 0 deletions etc/jajuma_powertoys.xml
Original file line number Diff line number Diff line change
@@ -0,0 +1,19 @@
<?xml version="1.0" encoding="UTF-8"?>
<!--
/**
* @author JaJuMa GmbH <info@jajuma.de>
* @copyright Copyright (c) 2023 JaJuMa GmbH <https://www.jajuma.de>. All rights reserved.
* @license http://opensource.org/licenses/mit-license.php MIT License
*/
-->

<powertoys xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
xsi:noNamespaceSchemaLocation="urn:magento:module:Jajuma_PowerToys:etc/jajuma_powertoys.xsd">
<dashboard id="core_web_vitals" class="Jajuma\PotCoreWebVitals\Block\CoreWebVitals">
<label translate="true">Core Web Vitals</label>
<arguments>
<argument name="enable">true</argument>
<argument name="template">Jajuma_PotCoreWebVitals::corewebvitals.phtml</argument>
</arguments>
</dashboard>
</powertoys>
8 changes: 8 additions & 0 deletions etc/module.xml
Original file line number Diff line number Diff line change
@@ -0,0 +1,8 @@
<?xml version="1.0"?>
<config xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:Module/etc/module.xsd">
<module name="Jajuma_PotCoreWebVitals">
<sequence>
<module name="Jajuma_PowerToys"/>
</sequence>
</module>
</config>
14 changes: 14 additions & 0 deletions registration.php
Original file line number Diff line number Diff line change
@@ -0,0 +1,14 @@
<?php
/**
* @author JaJuMa GmbH <info@jajuma.de>
* @copyright Copyright (c) 2023 JaJuMa GmbH <https://www.jajuma.de>. All rights reserved.
* @license http://opensource.org/licenses/mit-license.php MIT License
*/

use Magento\Framework\Component\ComponentRegistrar;

ComponentRegistrar::register(
ComponentRegistrar::MODULE,
'Jajuma_PotCoreWebVitals',
__DIR__
);
Loading

0 comments on commit af2bee7

Please sign in to comment.