Skip to content

Commit 01723cf

Browse files
Serfe-comSerfe-com
committed
chroe: initial version
0 parents  commit 01723cf

12 files changed

+405
-0
lines changed

‎CHANGELOG.md

+10
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,10 @@
1+
# Serfe - Smart reCaptcha Loader - Magento 2
2+
3+
All notable changes to this project will be documented in this file.
4+
5+
The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
6+
and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
7+
8+
## [Unreleased]
9+
### Added
10+
- Initial version

‎COPYING.txt

+17
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,17 @@
1+
Copyright © 2021-present Serfe S.A.
2+
3+
This file is part of Serfe/SmartRecaptchaLoader.
4+
5+
Serfe/SmartRecaptchaLoader is free software: you can redistribute it and/or modify
6+
it under the terms of the GNU General Public License as published by
7+
the Free Software Foundation, either version 3 of the License, or
8+
(at your option) any later version.
9+
10+
This program is distributed in the hope that it will be useful,
11+
but WITHOUT ANY WARRANTY; without even the implied warranty of
12+
MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
13+
GNU General Public License for more details.
14+
15+
You should have received a copy of the GNU General Public License
16+
along with this program. If not, see <http://www.gnu.org/licenses/>.
17+
Please see LICENSE.txt for the full text of GNU General Public License

‎README.md

+67
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,67 @@
1+
# Magento 2 Smart reCaptcha Loader
2+
3+
[![Latest Stable Version](https://poser.pugx.org/serfe/magento2-smart-recaptcha-loader/version)](https://packagist.org/packages/serfe/magento2-smart-recaptcha-loader)[![License](http://poser.pugx.org/serfe/magento2-smart-recaptcha-loader/license)](https://packagist.org/packages/serfe/magento2-smart-recaptcha-loader)
4+
5+
Boost your Magento 2 store's performance and user experience with the **Smart reCaptcha Loader** module. This extension loads the reCAPTCHA API only when users interact with form fields, improving initial page load times without compromising security.
6+
7+
## Key Features
8+
9+
- **On-Demand reCAPTCHA Loading**: Triggers the reCAPTCHA API only when a form field is focused, enhancing initial page performance.
10+
- **Performance Optimization**: Reduces unnecessary reCAPTCHA loads, creating a smoother and faster user experience.
11+
- **Enhanced User Interaction**: Keeps the page light and responsive until user interaction, ensuring optimal load times.
12+
13+
## Performance Comparison
14+
15+
### Product Detail Page (PDP) Performance
16+
Below are performance comparisons on the Product Detail Page (PDP), using Magento 2.4.7-p3, Luma theme, and sample data:
17+
18+
#### Without the Module Enabled:
19+
![PDP Without Module](docs/pdp_without_module.png)
20+
21+
#### With the Module Enabled:
22+
![PDP With Module](docs/pdp_with_module.png)
23+
24+
These images illustrate how the module reduces script load by deferring reCAPTCHA until it's needed.
25+
26+
### On-Focus Loading in Action
27+
See the GIF below to observe how the module loads reCAPTCHA only when the user focuses on a form field:
28+
29+
![On Focus Loading](docs/on_focus_loading.gif)
30+
31+
## Installation Guide
32+
33+
To install the **Smart reCaptcha Loader** module, follow these steps:
34+
35+
1. **Install via Composer**:
36+
Run the following command in your terminal:
37+
38+
```bash
39+
composer require serfe/magento2-smart-recaptcha-loader
40+
```
41+
42+
2. **Enable and Update**:
43+
After installation, run these commands from the Magento root directory to enable and set up the module:
44+
45+
```bash
46+
bin/magento module:enable Serfe_SmartRecaptchaLoader
47+
bin/magento setup:upgrade
48+
bin/magento cache:clean
49+
```
50+
### Integration with Magento reCAPTCHA Settings
51+
52+
The **Smart reCaptcha Loader** module is fully compatible with all Magento-native reCAPTCHA settings for the storefront. It supports flexible integration with reCAPTCHA v2 challenge (Invisible and "I am not a robot") and reCaptcha v3 (Invisible) score based variants, ensuring seamless protection across various customer interaction points. This includes areas such as Customer Login, Account Creation, Contact Us, Product Reviews, Checkout, and more.
53+
54+
![reCAPTCHA Loader Compatibility](docs/reCaptchaLoaderCompatibility.png)
55+
56+
This adaptability enables store owners to apply reCAPTCHA security precisely where it's needed, enhancing the user experience while maximizing site security and performance.
57+
58+
### Personalization
59+
If you wish to have some changes done into this module to adapt it to your specific needs, theme or situation, feel free to contact us to make the adjustments.
60+
61+
## About Us
62+
63+
[Serfe](https://www.serfe.com/?utm_medium=referral_profile&utm_source=github&utm_campaign=115959) develops complete e-commerce solutions focused on performance, scalability, and usability, specializing in Magento 2 and other platforms. Explore our services and expertise on our website.
64+
65+
### Contributing
66+
67+
We welcome contributions to this module. To contribute, fork the repository, make your changes, and submit a pull request.

‎composer.json

+24
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,24 @@
1+
{
2+
"name": "serfe/magento2-smart-recaptcha-loader",
3+
"description": "This Magento 2 module optimizes the performance of reCAPTCHA by loading its related files only when a form field gains focus.",
4+
"license": "MIT",
5+
"authors": [
6+
{
7+
"email": "[email protected]",
8+
"name": "Serfe"
9+
}
10+
],
11+
"version": "1.0.0",
12+
"minimum-stability": "stable",
13+
"require": {
14+
"magento/module-re-captcha-frontend-ui": "*"
15+
},
16+
"autoload": {
17+
"psr-4": {
18+
"Serfe\\SmartRecaptchaLoader\\": ""
19+
},
20+
"files": [
21+
"registration.php"
22+
]
23+
}
24+
}

‎docs/on_focus_loading.gif

8.82 MB
Loading

‎docs/pdp_with_module.png

318 KB
Loading

‎docs/pdp_without_module.png

319 KB
Loading

‎docs/reCaptchaLoaderCompatibility.png

118 KB
Loading

‎etc/module.xml

+8
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,8 @@
1+
<?xml version="1.0"?>
2+
<config xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:Module/etc/module.xsd">
3+
<module name="Serfe_SmartRecaptchaLoader" setup_version="1.0.0">
4+
<sequence>
5+
<module name="Magento_ReCaptchaFrontendUi"/>
6+
</sequence>
7+
</module>
8+
</config>

‎registration.php

+25
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,25 @@
1+
<?php
2+
/**
3+
* Serfe S.A.
4+
*
5+
* NOTICE OF LICENSE
6+
*
7+
* This source file is subject to the Serfe license that is
8+
* available on the file COPYING.txt
9+
*
10+
* DISCLAIMER
11+
*
12+
* Do not edit or add to this file if you wish to upgrade this extension to newer
13+
* version in the future.
14+
*
15+
* @category Serfe
16+
* @package Serfe_SmartRecaptchaLoader
17+
* @copyright Copyright (c) Serfe S.A. (https://www.serfe.com/)
18+
*/
19+
use Magento\Framework\Component\ComponentRegistrar;
20+
21+
ComponentRegistrar::register(
22+
ComponentRegistrar::MODULE,
23+
'Serfe_SmartRecaptchaLoader',
24+
__DIR__
25+
);

‎view/frontend/requirejs-config.js

+7
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
var config = {
2+
map: {
3+
'*': {
4+
'Magento_ReCaptchaFrontendUi/js/reCaptcha': 'Serfe_SmartRecaptchaLoader/js/reCaptcha'
5+
}
6+
}
7+
};

0 commit comments

Comments
 (0)