I wanted to know where the button from the image is defined (The place order button in the payment step of checkout)
And also where is the discount code section defined?
Magento – Where is defined the Place Order button in default checkout payment step section
checkoutmagento-2.1magento2magento2.2template
Related Solutions
Below i have add some step. please follow step
1.Create your checkout_index_index.xml file in layout folder
app/code/VendorName/PlaceOrder/view/frontend/layout
<?xml version="1.0"?>
<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" layout="checkout" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
<head>
<css src="VendorName_PlaceOrder::css/place_order_button.css"/>
</head>
<body>
<referenceBlock name="checkout.root">
<arguments>
<argument name="jsLayout" xsi:type="array">
<item name="components" xsi:type="array">
<item name="checkout" xsi:type="array">
<item name="children" xsi:type="array">
<item name="sidebar" xsi:type="array">
<item name="children" xsi:type="array">
<item name="newstep" xsi:type="array">
<item name="component" xsi:type="string">VendorName_PlaceOrder/js/view/newstep</item>
<item name="config" xsi:type="array">
<item name="template" xsi:type="string">VendorName_PlaceOrder/newstep</item>
</item>
</item>
</item>
</item>
</item>
</item>
</item>
</argument>
</arguments>
</referenceBlock>
</body>
</page>
2.Create a file newstep.html in template
app/code/VendorName/PlaceOrder/view/frontend/web/template
<div class="opc-block-newstep" data-bind="blockLoader: isLoading">
<span data-bind="i18n: 'Order newstep'" class="title"></span>
<!-- ko foreach: elems() -->
<!-- ko template: getTemplate() --><!-- /ko -->
<!-- /ko -->
</div>
<!-- ko if: (isVisible()) -->
<div class="actions-toolbar-trigger" id="place-order-trigger-wrapper">
<button type="button" class="button action primary" id="place-order-trigger" value="Place Order" >
<span>Place Order</span>
</button>
</div>
<!-- /ko -->
- Create a file newstep.js in the path
app/code/VendorName/PlaceOrder/view/frontend/web/js/view
define(
[
'jquery',
'ko',
'Magento_Checkout/js/view/newstep',
'Magento_Checkout/js/model/step-navigator',
],
function(
$,
ko,
Component,
stepNavigator
) {
'use strict';
return Component.extend({
isVisible: function () {
return stepNavigator.isProcessed('shipping');
},
initialize: function () {
$(function() {
$('body').on("click", '#place-order-trigger', function () {
$(".payment-method._active").find('.action.primary.checkout').trigger( 'click' );
});
});
var self = this;
this._super();
}
});
}
);
4.For Add terms & condition checkbox in checkout_index_index.xml :
<?xml version="1.0"?>
<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
<body>
<referenceBlock name="checkout.root">
<arguments>
<argument name="jsLayout" xsi:type="array">
<item name="components" xsi:type="array">
<item name="checkout" xsi:type="array">
<item name="children" xsi:type="array">
<item name="sidebar" xsi:type="array">
<item name="children" xsi:type="array">
<item name="newstep" xsi:type="array">
<item name="children" xsi:type="array">
<item name="agreements" xsi:type="array">
<item name="component" xsi:type="string">Magento_CheckoutAgreements/js/view/checkout-agreements</item>
<item name="sortOrder" xsi:type="string">100</item>
<item name="displayArea" xsi:type="string">before-place-order</item>
<item name="dataScope" xsi:type="string">checkoutAgreements</item>
<item name="provider" xsi:type="string">checkoutProvider</item>
</item>
<item name="agreements-validator" xsi:type="array">
<item name="component" xsi:type="string">Magento_CheckoutAgreements/js/view/agreement-validation</item>
</item>
</item>
</item>
</item>
</item>
</item>
</item>
</item>
</argument>
</arguments>
</referenceBlock>
</body>
</page>
You can set your custom attribute inside checkout page summary block using below way,
app/code/{Package}/{Module}/etc/di.xml
<?xml version="1.0"?>
<config xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:ObjectManager/etc/config.xsd">
<!-- Set Custom attribute in chekcout page summary block -->
<type name="Magento\Checkout\Model\DefaultConfigProvider">
<plugin name="default_config_provider" type="Package\Module\Model\DefaultConfigProvider"/>
</type>
</config>
app/code/{Package}/{Module}/Model/DefaultConfigProvider.php file
<?php
namespace Package\Module\Model;
use Magento\Checkout\Model\Session as CheckoutSession;
use Magento\Quote\Api\CartItemRepositoryInterface as QuoteItemRepository;
class DefaultConfigProvider
{
private $checkoutSession;
private $quoteItemRepository;
protected $scopeConfig;
public function __construct(
CheckoutSession $checkoutSession,
QuoteItemRepository $quoteItemRepository,
\Magento\Framework\App\Config\ScopeConfigInterface $scopeConfig
) {
$this->_scopeConfig = $scopeConfig;
$this->checkoutSession = $checkoutSession;
$this->quoteItemRepository = $quoteItemRepository;
}
public function afterGetConfig(\Magento\Checkout\Model\DefaultConfigProvider $subject, $result)
{
$quoteId = $this->checkoutSession->getQuote()->getId();
if ($quoteId) {
$itemOptionCount = count($result['totalsData']['items']);
$quoteItems = $this->quoteItemRepository->getList($quoteId);
$isbnOptions = array();
foreach ($quoteItems as $index => $quoteItem) {
$quoteItemId = $quoteItem['item_id'];
$isbnOptions[$quoteItemId] = $quoteItem['isbn'];
}
for($i=0;$i<$itemOptionCount;$i++){
$quoteParentId = $result['totalsData']['items'][$i]['item_id'];
$currentOption = array();
$currentOption = json_decode($result['totalsData']['items'][$i]['options'],true);
$newOption = $isbnOptions[$quoteParentId];
//for set new option inside current option tab
if(count($newOption) > 0 && is_array($newOption)){
foreach($newOption as $key=>$value){
if( !is_array($value) ){
$currentOption[] = array('value'=>$value,'label'=>$key);
}
}
$result['totalsData']['items'][$i]['options'] = json_encode($currentOption);
}
}
}
return $result;
}
}
Best Answer
In each payment, it defines its own the place order button, for example, for Cash On Delivery payment:
vendor/magento/module-offline-payments/view/frontend/web/template/payment/cashondelivery.html.For the discount:
vendor/magento/module-sales-rule/view/frontend/web/template/payment/discount.html.We need to override these templates.