baato / baato-magento2
Integrate Baato.io maps to Magento 2 Storefront Checkout process.
Installs: 0
Dependents: 0
Suggesters: 0
Security: 0
Stars: 0
Watchers: 1
Forks: 1
Language:JavaScript
Type:magento2-module
This package is auto-updated.
Last update: 2024-10-23 09:39:28 UTC
README
Overview
This package has been built for integration of Baato.io maps into Magento 2 Checkout page. The concept behind this module is to store latitude and longitude of user (customer) into magento 2 backend during the checkout process.
Contents
Installation
- Create directory
app/code/Baato/Baato
inside magento project root directory. - Download the .zip file and extract the contents into your
app/code/Baato/Baato
. - Run the following commands to install the module.
cd <MAGENTO_ROOT_DIRECTORY> && rm -rf generated/code && php bin/magento s:up && php bin/magento set:di:com
- Login to magento 2 admin panel. Go to
Stores > Settings > Configurations
. - You should be able to see
Baato.io
in the side bar. - Under
Baato.io > General > Keys > Baato.io Key
, enter your Baato.io API Key for your site and save the configurations.
Customization
Style Customization
⚠️ Please run bin/magento setup:grade
after customizing any .less
files and clean the cache by using the command bin/magento cache:clean
, else the customizations may not be visible
Frontend Style Customization
To customize the styling of maps container in checkout page, please consider placing the customizations in
view/frontend/web/css/maps.less
Backend Style Customization
To customize the styling of maps container in checkout page, please consider placing the customizations in
view/adminhtml/web/css/maps.less
JavaScript Customization
Frontend JS Customization
-
The map is loaded in the checkout page by
view/frontend/web/js/maps.js
-
The KnockoutJS template to the map containers is
view/frontend/web/template/maps.html
Backend JS Customization
- The map in the Order view page is rendered via
view/adminhtml/templates/order/shipping-address-map.phtml
PHP Customization
- The previously mentioned JS Magento 2 UI Component and are loaded to the checkout page by
Plugins\Magento\Checkout\Block\Checkout\LayoutProcessor.php
- You can modify the positioning of the maps inside checkout page by modifying the
sortOrder
key value of$mapElementField
array.
$mapElementField = [ ... 'sortOrder' => 100 // Change this value by the scale of 10 to move up/down ...]
- The
Plugins/Magento/Checkout/Block/Checkout/LayoutProcessor.php
file overrides the pre-existing layout processor file via dependency injection. Seeetc/di.xml
- The latitudes and longitudes are saved into quote shipping address via
Plugins/Sales/Model/Order/SaveCustomAddressAttributes.php
. - The quote shipping address is converted into order shipping address at the time of checkout by subscribing to order created event at
Observer/UpdateOrderAddress.php
Template Files
Frontend Template Customization
See view/frontend/web/template/maps.html
for the template that renders map in checkout page.
The view/frontend/templates/map.phtml
file only places the baato API key for usages through JavaScript.
Backend Template Customization
See view/adminhtml/templates/order/shipping-address-map.phtml
for template that renders map in order view page.