Well I spent a lot of hours looking how templates and other stuffs are related with knockout.js
, i will try to explain how subtotal price format is displayed to order summary at checkout module, but is same to other things too. My current version is Magento ver. 2.0.4.
First if you navigate to the corresponding layout file for checkout at
vendor/magento/module-checkout/view/frontend/layout/checkout_index_index.xml
you will see at line 392 inside cart_items
block the subtotal block like this:
As you can see , Magento calls a js template to display subtotal of product right after product details.
If you navigate to
vendor/magento/module-checkout/view/frontend/web/js/view/summary/subtotal.js
you will see at line 15 is called subtotal template , and a function called getValue()
,
getValue: function () {
return this.getFormattedPrice(this.getPureValue());
}
which later i saw it is called in subtotal template , which is located to
vendor/magento/module-checkout/view/frontend/web/template/summary/subtotal.html
with this code:
Subtotal.js
file uses
Magento_Checkout/view/frontend/web/js/view/summary/abstract-total.js
getFormattedPrice()
function, while this file uses
Magento_Checkout/view/frontend/web/js/model/quote.js getPriceFormat()
function read about require.js dependencies ,
which returns a price format, and here i saw that this variable is populated like this,
var priceFormat = window.checkoutConfig.priceFormat;
So where does window.checkoutConfig.priceFormat comes from?
Magento 2 did this:
If you navigate to
/vendor/magento/module-checkout/view/frontend/templates/onepage.phtml
at line 26 is initialized window.checkoutConfig with $block->getCheckoutConfig()
, which function is at
/vendor/magento/module-checkout/Block/Onepage.php
line 89, here it takes all config providers and returns them.
Where are config providers defined?
They are defined at
vendor/magento/module-checkout/etc/frontend/di.xml
at line 46, at sends us to
Magento\Checkout\Model\DefaultConfigProvider.php
which has getConfig()
function, at line 254 you can see getConfig()
function and at line 271 is priceFormat populated like this:
$output['priceFormat'] = $this->localeFormat->getPriceFormat(
null,
$this->checkoutSession->getQuote()->getQuoteCurrencyCode()
);
This means priceFormat is declared at populated here at getConfig()
function, so you can later use it with window.checkouConfig.priceFormat
.
To complete this Answer. Soundararajan m is correct but he doesn't specify which files to update. They're located at
app/design/frontend/Smartwave/porto/Mageplaza_AjaxLayer/web/js/view/layer.js
app/design/frontend/Smartwave/porto/Mageplaza_LayeredNavigation/web/js/view/layer.js
Update the top of the layer.js file to this
define([
'jquery',
'Mageplaza_AjaxLayer/js/action/submit-filter',
'Magento_Catalog/js/price-utils',
'jquery/ui',
'accordion',
'js/jquery.lazyload',
'productListToolbarForm'
], function ($, submitFilterAction, ultil) {
...
This will solve this error.
Best Answer
Hi @meweb432344 and guys
I write something here if anyone meets the same problem. In order to add lazy into pagebuilder. Please follow up steps here:
Create a new backend theme(mine: [vendor]/backend) app/design/adminhtml/[vendor]/backend/theme.xml
Add master.html into the new theme: app/design/adminhtml/[vendor]/backend/Magento_PageBuilder/web/template/content-type/image/full-width/master.html
Create a custom module to active the backend theme and customize layout for lazy
3.1. File module.xml(app/code/[Vendor]/Backend/etc/module.xml)
3.2. File di.xml(app/code/[Vendor]/Backend/etc/di.xml)
Add layout for file image.xml(app/code/[Vendor]/Backend/view/adminhtml/pagebuilder/content_type/image.xml)
There is a new attribute named "mobile_image_data_src" in the above code.
Declare the new attribute: app/code/[Vendor]/Backend/view/adminhtml/ui_component/pagebuilder_image_form.xml
Add value for the new field. Copy file empty-mobile-image.js from core into the new Backend theme: app/design/adminhtml/[Vendor]/backend/Magento_PageBuilder/web/js/mass-converter/empty-mobile-image.js
###Keep code here###
I assign the value of desktop_image_variable to variable mobile_image_data_src_variable