LowestPriceLoggerFrontend (optional)
GitHub - magesuite/lowest-price-logger-frontend
This module adds displaying of the recent lowest price on the Frontend of simple and configurable products (with swatches change support). Backend functionality can be found in the creativestyle/magesuite-lowest-price-logger
module.
Â
Installation
This module is optional
composer require "creativestyle/magesuite-lowest-price-logger-frontend" ^1.0.0
Admin settings
This module does not require any admin configuration, the checkbox is visible once the module is installed.
Backend
BE documentation
Frontend
Â
XMLs
The lowest price element is added to product tile and PDP buybox components.
In product_tile.xml:
<referenceBlock name="product.tile.price.wrapper">
<block class="MageSuite\ProductTile\Block\Tile\Fragment" name="product.tile.recent_lowest_price" template="MageSuite_LowestPriceLoggerFrontend::recent-lowest-price.phtml" after="product.tile.price">
<arguments>
<argument name="view_model" xsi:type="object">MageSuite\LowestPriceLogger\ViewModel\LowestPrice</argument>
<argument name="additional_css_classes" xsi:type="string">cs-recent-lowest-price--tile</argument>
</arguments>
</block>
</referenceBlock>
catalog_product_view.xml:
<referenceContainer name="product.info.price">
<block class="Magento\Catalog\Block\Product\View" name="product.info.price.recent_lowest_price" template="MageSuite_LowestPriceLoggerFrontend::recent-lowest-price.phtml" after="-">
<arguments>
<argument name="view_model" xsi:type="object">MageSuite\LowestPriceLogger\ViewModel\LowestPrice</argument>
<argument name="additional_css_classes" xsi:type="string">cs-recent-lowest-price--buybox</argument>
</arguments>
</block>
</referenceContainer>
Styling
The component is called cs-recent-lowest-price
However in theme-creativeshop there is no corresponding scss file and styling, as usually, styles for the lowest price are minimal and project specific.
In order to create styles in a child theme add the following file: theme-[child]/src/components/recent-lowest-price/recent-lowest-price.scss
Sample styles;
Import scss file in theme-[child]/src/components/recent-lowest-price/index.ts
and then include in category and pdp entries (theme-[child]/src/entries/category.ts
and theme-[child]/src/entries/pdp.ts
Â
Scripts
magesuite-lowest-price-logger-frontend/view/frontend/web/js/swatch-renderer-recent-lowest-price.js
mixin takes care of changing the lowest price after swatches of configurable products are checked. It shows the recent lowest price when the final product is selected.
Â
The lowest price is added to optionPrices
of jsonConfig