How do I add a custom field to the cart in magento 2?

Question

I am a little new to magento 2 and am looking to add a custom field to the cart to display how many dollars the customer has left to get free shipping. It's basically something like:

<div>

<?php

if ($subtotal >= 50) { 
echo "You have free shipping!" 
} elseif ($subtotal < 50){ 
echo "You have " 50 - $subtotal "left until free shipping!" 
} else { 
echo 'Free Shipping is available on orders $50 or larger!' 
}

?>

</div>

I keep getting fatal errors when I try the magento calls for subtotals that I have found and I'm not sure where to put this aside from the minicart.phtml file that I have from my theme, but I feel this may be better as a plugin. Any help would be greatly appreciated!

Well both the minicart and the view cart pages, but if I could get the minicart it would probably give me the start that I would need to get it all setup. — Rich, Jul 24 '16 at 02:36
The minicart is using knockout template: vendor/magento/module-checkout/view/frontend/web/template/minicart — Khoa TruongDinh, Jul 24 '16 at 02:42
Gotcha. I'm mainly a PHP developer and do not have much experience in JavaScript at all. Magento 2 has been an adventure on this project. How would I set it up or call it? — Rich, Jul 24 '16 at 03:09
You can read more here: http://magento.stackexchange.com/questions/123879/getting-the-product-sku-in-the-header-mini-cart/123903?noredirect=1#comment167902_123903 — Khoa TruongDinh, Jul 24 '16 at 06:45

Aaron Allen · Accepted Answer · 2016-07-24T09:28:56.523

Here's how to do it for the mini-cart:

Start by creating a new module with the necessary registration.php and etc/module.xml files. Your module.xml file should have Magento_Tax added to the sequence element. I'll call this module Foo/Module for demonstration purposes.

We first need to make a customized version of the knockout template that renders the subtotal in the cart. Create the file /view/frontend/web/template/checkout/minicart/subtotal/totals.html in your module's directory with the following content:

<div class="amount price-container">
    <!-- ko if: displaySubtotal() -->
        <!-- ko if: display_cart_subtotal_excl_tax -->
            <span class="price-wrapper" data-bind="html: cart().subtotal_excl_tax"></span>

        <!-- /ko -->

        <!-- ko if: !display_cart_subtotal_excl_tax && display_cart_subtotal_incl_tax -->
            <span class="price-wrapper" data-bind="html: cart().subtotal_incl_tax"></span>
        <!-- /ko -->

        <!-- ko if: !display_cart_subtotal_excl_tax && !display_cart_subtotal_incl_tax -->
            <span class="price-wrapper price-including-tax"
                  data-bind="attr: { 'data-label': $t('Incl. Tax') }, html: cart().subtotal_incl_tax">
            </span>

            <span class="price-wrapper price-excluding-tax"
                  data-bind="attr: { 'data-label': $t('Excl. Tax') }, html: cart().subtotal_excl_tax">
            </span>
        <!-- /ko -->

        <!-- ko if: cart().subtotal_excl_tax.match(/\d*\.\d{2}/)[0] >= 50 -->
            <div>Free Shipping is available on orders $50 or larger!</div>
        <!-- /ko -->
        <!-- ko ifnot: cart().subtotal_excl_tax.match(/\d*\.\d{2}/)[0] >= 50 -->
            <div data-bind="html: 'You have $' + (50 - cart().subtotal_excl_tax.match(/\d*\.\d{2}/)[0]).toFixed(2) + ' left until free shipping!'"></div>
        <!-- /ko -->

    <!-- /ko -->
    <!-- ko ifnot: displaySubtotal() -->
        <!-- ko foreach: getRegion('minicart-subtotal-hidden') -->
            <!-- ko template: getTemplate() --><!-- /ko -->
        <!-- /ko -->
    <!-- /ko -->
</div>

Now to tell magento to use this template, add /view/frontend/layout/checkout_cart_sidebar_total_renderers.xml to your module directory with this contents:

<?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="minicart">
            <arguments>
                <argument name="jsLayout" xsi:type="array">
                    <item name="components" xsi:type="array">
                        <item name="minicart_content" xsi:type="array">
                            <item name="children" xsi:type="array">
                                <item name="subtotal.container" xsi:type="array">
                                    <item name="children" xsi:type="array">
                                        <item name="subtotal" xsi:type="array">
                                            <item name="children" xsi:type="array">
                                                <item name="subtotal.totals" xsi:type="array">
                                                    <item name="component" xsi:type="string">Magento_Tax/js/view/checkout/minicart/subtotal/totals</item>
                                                    <item name="config" xsi:type="array">
                                                        <item name="template" xsi:type="string">Foo_Module/checkout/minicart/subtotal/totals</item>
                                                    </item>
                                                </item>
                                            </item>
                                        </item>
                                    </item>
                                </item>
                            </item>
                        </item>
                    </item>
                </argument>
            </arguments>
        </referenceBlock>
    </body>
</page>

The last thing you need to do is run the following console commands from the magento root to enable the module and flush the cache:

php bin/magento setup:upgrade

php bin/magento cache:flush

How do I add a custom field to the cart in magento 2?

1 Answers1

Linked