How do you add a custom block in checkout/cart page in magento2?

magento.stackexchange https://magento.stackexchange.com/questions/143798

Question

I am trying to create a custom block on the checkout/cart page so that I can show a countdown to free shipping. I keep getting Invalid block type as an error, though.

checkout_cart_index.xml

<?xml version="1.0"?>
<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" layout="1column" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
<body>
    <referenceContainer name="checkout.cart.totals.container">
        <block type="checkout/cart" class="Miles\FreeShippingCountOnPage\Block\Checkout\Cart\Countdown" name="checkout.cart.miles.countdown" after="-" template="Vendor_Module::checkout/cart/countdown.phtml"/>
    </referenceContainer>
</body>
</page>

Vendor\Module\view\frontend\templates\checkout\cart\countdown.phtml

<span><?php

$_item = $block->getItem();
$product = $_item->getProduct();
$additional_data = $block->getAdditionalData();
?>
<div>
<span><?php echo $additional_data?></span>
</div>

?></span>

Vendor\Module\etc\module.xml

<?php

namespace Vendor\Module\Block\Checkout\Cart;

class Countdown extends \Magento\Framework\View\Element\Template
{

public function __construct(
    \Magento\Framework\View\Element\Template\Context $context,
    array $data = []
) {
    parent::__construct($context, $data);
}


}

UPDATE

I have found an html file that looks to actually build the area I need to add the information on located in the path below that I am attempting to use/override

\vendor\magento\module-tax\view\frontend\web\template\checkout\summary\subtotal.html

<!--
/**
 * Copyright © 2016 Magento. All rights reserved.
 * See COPYING.txt for license details.
 */
-->


<!-- ko if: isBothPricesDisplayed() -->
<tr class="totals sub excl">
    <th class="mark" scope="row">
        <span data-bind="text: title"></span>
        <span data-bind="text: excludingTaxMessage"></span>
    </th>
    <td class="amount">
        <span class="price" data-bind="text: getValue(), attr: {'data-th': excludingTaxMessage}"></span>
    </td>
</tr>
<tr class="totals sub incl">
    <th class="mark" scope="row">
        <span data-bind="text: title"></span>
        <span data-bind="text: includingTaxMessage"></span>
    </th>
    <td class="amount">
        <span class="price" data-bind="text: getValueInclTax(), attr: {'data-th': includingTaxMessage}"></span>
    </td>
</tr>
<!-- /ko -->
<!-- ko if: !isBothPricesDisplayed() && isIncludingTaxDisplayed() -->
<tr class="totals sub">
    <th data-bind="text: title" class="mark" scope="row"></th>
    <td class="amount">
        <span class="price" data-bind="text: getValueInclTax(), attr: {'data-th': title}"></span>
    </td>
</tr>
<!-- /ko -->
<!-- ko if: !isBothPricesDisplayed() && !isIncludingTaxDisplayed() -->
<tr class="totals sub">
    <th data-bind="text: title" class="mark" scope="row"></th>
    <td class="amount">
        <span class="price" data-bind="text: getValue(), attr: {'data-th': title}"></span><br/>
        <!-- ko if: getValue() >= 50 -->
        <div data-bind="text: 'This order qualifies for free shipping!'"></div>
        <!-- /ko -->
        <!-- ko ifnot: getValue() >= 50 -->
        <div data-bind="text: getValue(), html: 'You have $' + (50.00 - getValue()) + ' left until free shipping!'"></div>
        <!-- /ko -->


    </td>
</tr>
<!-- /ko -->

Any help would be greatly appreciated and thanks in advance!

Was it helpful?

Solution 2

I actually just figured it out. I had to update the lines in the if ifnot statement to this:

<span class="price" data-bind="text: getValue(), attr: {'data-th': title}"></span><br/>
<!-- ko if: totals().subtotal >= 50 -->
<div data-bind="text: 'This order qualifies for free shipping!'"></div>
<!-- /ko -->
<!-- ko ifnot: totals().subtotal >= 50 -->
<div data-bind="html: 'You have $' + (50.00 - totals().subtotal) + ' left until free shipping!'"></div>
<!-- /ko -->

I just needed the correct param/functions and variables.

OTHER TIPS

you need to add the class of your block.Try below code

<?xml version="1.0"?>
    <page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" layout="1column" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd"> 
        <body> 
            <referenceContainer name="checkout.cart.totals.container"> 
                <block class="Miles\FreeShippingCountOnPage\Block\Checkout\Cart\Countdown" name="checkout.cart.miles.countdown" after="-" template="Vendor_Module::checkout/cart/countdown.phtml"/> 
            </referenceContainer> 
        </body>
    </page>
Licensed under: CC-BY-SA with attribution
Not affiliated with magento.stackexchange
scroll top