README

概述

此包是为将Baato.io地图集成到Magento 2结账页面而构建的。此模块背后的概念是在结账过程中将用户的纬度和经度存储在magento 2后端。

内容

• 安装
• 定制
  • 样式定制
    • 前端
    • 后端
  • JS定制
    • 前端
    • 后端
  • PHP定制
  • 模板
    • 前端
    • 后端

安装

• 在magento项目根目录中创建app/code/Baato/Baato目录。
• 下载.zip文件并将其内容解压到您的app/code/Baato/Baato。
• 运行以下命令安装模块。

cd <MAGENTO_ROOT_DIRECTORY> &&
rm -rf generated/code &&
php bin/magento s:up &&
php bin/magento set:di:com

• 登录到magento 2管理员面板。转到商店 > 设置 > 配置。
• 您应该能在侧边栏看到Baato.io。
• 在Baato.io > 一般 > 密钥 > Baato.io密钥下，输入您网站的Baato.io API密钥并保存配置。

定制

样式定制

⚠️在自定义任何.less文件后，请运行bin/magento setup:grade并使用命令bin/magento cache:clean清除缓存，否则自定义可能不可见。

前端样式定制

要自定义结账页面地图容器的样式，请考虑将自定义放在以下位置

view/frontend/web/css/maps.less

后端样式定制

要自定义结账页面地图容器的样式，请考虑将自定义放在以下位置

view/adminhtml/web/css/maps.less

JavaScript定制

前端JS定制

• 地图是通过view/frontend/web/js/maps.js在结账页面加载的。

• 地图容器的KnockoutJS模板是view/frontend/web/template/maps.html

后端JS定制

• 订单查看页面的地图是通过view/adminhtml/templates/order/shipping-address-map.phtml渲染的。

PHP定制

• 前面提到的JS Magento 2 UI组件是通过Plugins\Magento\Checkout\Block\Checkout\LayoutProcessor.php加载到结账页面的。
• 您可以通过修改$mapElementField数组的sortOrder键值来修改地图在结账页面内的位置。

$mapElementField = [
 ...
 'sortOrder' => 100 // Change this value by the scale of 10 to move up/down ...]

• Plugins/Magento/Checkout/Block/Checkout/LayoutProcessor.php文件通过依赖注入覆盖了现有的布局处理器文件。请参阅etc/di.xml
• 纬度和经度是通过Plugins/Sales/Model/Order/SaveCustomAddressAttributes.php保存到报价送货地址的。
• 在结账时，通过订阅Observer/UpdateOrderAddress.php中的订单创建事件，将报价送货地址转换为订单送货地址。

模板文件

前端模板定制

有关在结账页面渲染地图的模板，请参阅view/frontend/web/template/maps.html。仅将baato API密钥放置在view/frontend/templates/map.phtml文件中，供JavaScript使用。

后端模板定制

有关在订单查看页面渲染地图的模板，请参阅view/adminhtml/templates/order/shipping-address-map.phtml。