0

I am trying to include the Estimate shipping costs block on my homepage.

enter image description here

In my layout file (cms_index_index.xml) I have the following:

<?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>
        <referenceContainer name="page.bottom.container">
            <block class="Magento\Checkout\Block\Cart\Shipping" name="checkout.cart.shipping" as="shipping" template="Magento_Checkout::cart/shipping.phtml"/>
        </referenceContainer>
    </body>
</page>

But this only includes the first line of text then nothing else. There are no errors in the console.

Any ideas? Thanks.

0

Resolved. I just wasn't including enough layout information:

<?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>
        <referenceContainer name="page.bottom.container">
            <container name="postcode.popup" htmlTag="div" htmlClass="postcode-popup" after="-">
                <block class="Magento\Checkout\Block\Cart\Shipping" name="checkout.cart.shipping" as="shipping" template="Magento_Checkout::cart/shipping.phtml" after="checkout.cart.summary.title">
                    <arguments>
                        <argument name="jsLayout" xsi:type="array">
                            <item name="types" xsi:type="array">
                                <item name="form.input" xsi:type="array">
                                    <item name="component" xsi:type="string">Magento_Ui/js/form/element/abstract</item>
                                    <item name="config" xsi:type="array">
                                        <item name="provider" xsi:type="string">checkoutProvider</item>
                                        <item name="deps" xsi:type="array">
                                            <item name="0" xsi:type="string">checkoutProvider</item>
                                        </item>
                                        <item name="template" xsi:type="string">ui/form/field</item>
                                        <item name="elementTmpl" xsi:type="string">ui/form/element/input</item>
                                    </item>
                                </item>
                            </item>
                            <item name="components" xsi:type="array">
                                <item name="summary-block-config" xsi:type="array">
                                    <item name="component" xsi:type="string">uiComponent</item>
                                    <item name="children" xsi:type="array">
                                        <item name="shipping-rates-validation" xsi:type="array">
                                            <item name="children" xsi:type="array">
                                                <!--Step configuration components-->
                                            </item>
                                        </item>
                                    </item>
                                </item>
                                <item name="block-summary" xsi:type="array">
                                    <item name="component" xsi:type="string">uiComponent</item>
                                    <item name="deps" xsi:type="array">
                                        <item name="0" xsi:type="string">summary-block-config</item>
                                    </item>
                                    <item name="children" xsi:type="array">
                                        <item name="block-rates" xsi:type="array">
                                            <item name="component" xsi:type="string">Magento_Checkout/js/view/cart/shipping-rates</item>
                                            <item name="sortOrder" xsi:type="string">2</item>
                                        </item>
                                        <item name="block-shipping" xsi:type="array">
                                            <item name="component" xsi:type="string">Magento_Checkout/js/view/cart/shipping-estimation</item>
                                            <item name="provider" xsi:type="string">checkoutProvider</item>
                                            <item name="sortOrder" xsi:type="string">1</item>
                                            <item name="deps" xsi:type="array">
                                                <item name="0" xsi:type="string">block-summary.block-shipping.address-fieldsets</item>
                                            </item>
                                            <item name="children" xsi:type="array">
                                                <item name="address-fieldsets" xsi:type="array">
                                                    <item name="component" xsi:type="string">uiComponent</item>
                                                    <item name="config" xsi:type="array">
                                                        <item name="deps" xsi:type="array">
                                                            <item name="0" xsi:type="string">checkoutProvider</item>
                                                        </item>
                                                    </item>
                                                    <item name="displayArea" xsi:type="string">address-fieldsets</item>
                                                    <item name="children" xsi:type="array">
                                                        <item name="city" xsi:type="array">
                                                            <item name="sortOrder" xsi:type="string">115</item>
                                                            <item name="dataScope" xsi:type="string">shippingAddress.city</item>
                                                            <item name="provider" xsi:type="string">checkoutProvider</item>
                                                        </item>
                                                        <item name="country_id" xsi:type="array">
                                                            <item name="sortOrder" xsi:type="string">110</item>
                                                            <item name="dataScope" xsi:type="string">shippingAddress.country_id</item>
                                                            <item name="provider" xsi:type="string">checkoutProvider</item>
                                                        </item>
                                                        <item name="region_id" xsi:type="array">
                                                            <item name="component" xsi:type="string">Magento_Ui/js/form/element/region</item>
                                                            <item name="sortOrder" xsi:type="string">112</item>
                                                            <item name="config" xsi:type="array">
                                                                <item name="template" xsi:type="string">ui/form/field</item>
                                                                <item name="elementTmpl" xsi:type="string">ui/form/element/select</item>
                                                                <item name="customEntry" xsi:type="string">shippingAddress.region</item>
                                                            </item>
                                                            <!-- Value of region_id field is filtered by the value of county_id attribute -->
                                                            <item name="filterBy" xsi:type="array">
                                                                <item name="target" xsi:type="string"><![CDATA[${ $.provider }:${ $.parentScope }.country_id]]></item>
                                                                <item name="field" xsi:type="string">country_id</item>
                                                            </item>
                                                        </item>
                                                        <!-- The following items override configuration of corresponding address attributes -->
                                                        <item name="region" xsi:type="array">
                                                            <!-- Make region attribute invisible on frontend. Corresponding input element is created by region_id field -->
                                                            <item name="visible" xsi:type="boolean">false</item>
                                                            <item name="component" xsi:type="string">Magento_Ui/js/form/element/abstract</item>
                                                            <item name="sortOrder" xsi:type="string">111</item>
                                                            <item name="dataScope" xsi:type="string">shippingAddress.region</item>
                                                        </item>
                                                        <item name="postcode" xsi:type="array">
                                                            <!-- post-code field has custom UI component -->
                                                            <item name="component" xsi:type="string">Magento_Ui/js/form/element/abstract</item>
                                                            <item name="dataScope" xsi:type="string">shippingAddress.postcode</item>
                                                            <item name="sortOrder" xsi:type="string">114</item>
                                                            <item name="provider" xsi:type="string">checkoutProvider</item>
                                                        </item>
                                                    </item>
                                                </item>
                                            </item>
                                        </item>
                                    </item>
                                </item>
                                <item name="checkoutProvider" xsi:type="array">
                                    <item name="component" xsi:type="string">uiComponent</item>
                                </item>
                            </item>
                        </argument>
                    </arguments>
                </block>
                <block class="Magento\Checkout\Block\Cart\Totals" name="checkout.cart.totals" template="Magento_Checkout::cart/totals.phtml">
                    <arguments>
                        <argument name="jsLayout" xsi:type="array">
                            <item name="components" xsi:type="array">
                                <item name="block-totals" xsi:type="array">
                                    <item name="component" xsi:type="string">Magento_Checkout/js/view/cart/totals</item>
                                    <item name="displayArea" xsi:type="string">totals</item>
                                    <item name="config" xsi:type="array">
                                        <item name="template" xsi:type="string">Magento_Checkout/cart/totals</item>
                                    </item>
                                    <item name="children" xsi:type="array">
                                        <!-- sort order for this totals is configured on admin panel-->
                                        <!-- Stores->Configuration->SALES->Sales->General->Checkout Totals Sort Order -->
                                        <item name="shipping" xsi:type="array">
                                            <item name="component" xsi:type="string">Magento_Checkout/js/view/cart/totals/shipping</item>
                                            <item name="config" xsi:type="array">
                                                <item name="title" xsi:type="string" translate="true">Shipping</item>
                                                <item name="template" xsi:type="string">Magento_Checkout/cart/totals/shipping</item>
                                            </item>
                                        </item>

                                    </item>
                                </item>
                            </item>
                        </argument>
                    </arguments>
                </block>
            </container>
        </referenceContainer>
    </body>
</page>

The Estimate shipping and Tax block now appears correctly on the homepage.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.