https://github.com/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.

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 'config/variables';

.#{$ns}recent-lowest-price {
    color: $color_text-400;
    margin-top: 0.5rem;
    
    &--buybox {
        white-space: nowrap;
    }

    &--tile {
        font-size: 1.2rem;
    }
}

Import scss file in theme-[child]/src/components/recent-lowest-price/index.ts

import 'components/recent-lowest-price/recent-lowest-price.scss';

and then include in category and pdp entries (theme-[child]/src/entries/category.ts and theme-[child]/src/entries/pdp.ts

import 'components/recent-lowest-price';

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

"optionPrices": {
  "227507": {
    "baseOldPrice": {
      "amount": 6.7142847142857
    },
    "oldPrice": {
      "amount": 7.99
    },
    "basePrice": {
      "amount": 1.563024210084
    },
    "finalPrice": {
      "amount": 1.86
    },
    "tierPrices": [],
    "msrpPrice": {
      "amount": 0
    },
    "recentLowestPrice": {
      "amount": 1.86
    }
  },
  ....

LowestPriceLoggerFrontend (optional)