baato/baato-magento2

There is no license information available for the latest version (dev-master) of this package.

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

dev-master 2021-11-23 03:20 UTC

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. See etc/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.