0

I have a custom off-canvas sidebar (foundation 6) which I declared via a standard phtml template. It shows only in the checkout.

Now I would like to display the content of the checkout's sidebar (summary, cart_items etc.) inside of it.

I figure I need to initialize a component via knockout:

<div class="off-canvas position-right" id="offcanvas-sidebar" data-off-canvas>
    <button aria-label="Close menu" type="button" data-close="">
        <span aria-hidden="true">×</span>
    </button>

    <!-- ko foreach: getRegion('summary') -->
        <!-- ko template: getTemplate() --><!-- /ko -->
    <!--/ko-->   

    <div class="opc-block-shipping-information">
        <!-- ko foreach: getRegion('shipping-information') -->
            <!-- ko template: getTemplate() --><!-- /ko -->
        <!--/ko-->
    </div>
</div>

<script type="text/x-magento-init">
    {
        "#offcanvas-sidebar": {
            "Magento_Checkout/js/core/app": {
               ... and here I am lost
            }
        }
    }
</script>

I have no idea how to do the proper initialization so the templates summary and shipping_information are available.

0

Why are you initialising a new UI component? If all you need to do is wrap the existing sidebar in your own markup and styling just overwrite vendor/magento/module-checkout/view/frontend/web/template/onepage.html into your theme and add the HTML you need.

If you need to do anything more advanced than this such as move the sidebar in the DOM you're limited to what scope of the checkout which is defined on the element .checkout-container.

If you look at how complex vendor/magento/module-checkout/view/frontend/layout/checkout_index_index.xml is you'll see it isn't wise to make any large customisations to the M2 checkout. It's a complete minefield.

Default sidebar UI component config

This is the default sidebar UI component config, if you're creating your own you'll need to include this.

<item name="sidebar" xsi:type="array">
<item name="sortOrder" xsi:type="string">50</item>
<item name="component" xsi:type="string">Magento_Checkout/js/view/sidebar</item>
<item name="displayArea" xsi:type="string">sidebar</item>
<item name="config" xsi:type="array">
    <item name="template" xsi:type="string">Magento_Checkout/sidebar</item>
    <item name="deps" xsi:type="array">
        <item name="0" xsi:type="string">checkout.steps</item>
    </item>
</item>
<item name="children" xsi:type="array">
    <item name="summary" xsi:type="array">
        <item name="component" xsi:type="string">Magento_Checkout/js/view/summary</item>
        <item name="displayArea" xsi:type="string">summary</item>
        <item name="config" xsi:type="array">
            <item name="template" xsi:type="string">Magento_Checkout/summary</item>
        </item>
        <item name="children" xsi:type="array">
            <item name="totals" xsi:type="array">
                <item name="component" xsi:type="string">Magento_Checkout/js/view/summary/totals</item>
                <item name="displayArea" xsi:type="string">totals</item>
                <item name="config" xsi:type="array">
                    <item name="template" xsi:type="string">Magento_Checkout/summary/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="subtotal" xsi:type="array">
                        <item name="component"  xsi:type="string">Magento_Checkout/js/view/summary/subtotal</item>
                        <item name="config" xsi:type="array">
                            <item name="title" xsi:type="string" translate="true">Cart Subtotal</item>
                        </item>
                    </item>
                    <item name="shipping" xsi:type="array">
                        <item name="component"  xsi:type="string">Magento_Checkout/js/view/summary/shipping</item>
                        <item name="config" xsi:type="array">
                            <item name="title" xsi:type="string" translate="true">Shipping</item>
                            <item name="notCalculatedMessage" xsi:type="string" translate="true">Not yet calculated</item>
                        </item>
                    </item>
                    <item name="grand-total" xsi:type="array">
                        <item name="component"  xsi:type="string">Magento_Checkout/js/view/summary/grand-total</item>
                        <item name="config" xsi:type="array">
                            <item name="title" xsi:type="string" translate="true">Order Total</item>
                        </item>
                    </item>
                </item>
            </item>
            <item name="itemsBefore" xsi:type="array">
                <item name="component" xsi:type="string">uiComponent</item>
                <item name="children" xsi:type="array">
                    <!-- merge your components here -->
                </item>
            </item>
            <item name="cart_items" xsi:type="array">
                <item name="component" xsi:type="string">Magento_Checkout/js/view/summary/cart-items</item>
                <item name="children" xsi:type="array">
                    <item name="details" xsi:type="array">
                        <item name="component" xsi:type="string">Magento_Checkout/js/view/summary/item/details</item>
                        <item name="children" xsi:type="array">
                            <item name="thumbnail" xsi:type="array">
                                <item name="component" xsi:type="string">Magento_Checkout/js/view/summary/item/details/thumbnail</item>
                                <item name="displayArea" xsi:type="string">before_details</item>
                            </item>
                            <item name="subtotal" xsi:type="array">
                                <item name="component" xsi:type="string">Magento_Checkout/js/view/summary/item/details/subtotal</item>
                                <item name="displayArea" xsi:type="string">after_details</item>
                            </item>
                        </item>
                    </item>
                </item>
            </item>
            <item name="itemsAfter" xsi:type="array">
                <item name="component" xsi:type="string">uiComponent</item>
                <item name="children" xsi:type="array">
                    <!-- merge your components here -->
                </item>
            </item>
        </item>
    </item>
    <item name="shipping-information" xsi:type="array">
        <item name="component" xsi:type="string">Magento_Checkout/js/view/shipping-information</item>
        <item name="config" xsi:type="array">
            <item name="deps" xsi:type="string">checkout.steps.shipping-step.shippingAddress</item>
        </item>
        <item name="displayArea" xsi:type="string">shipping-information</item>
        <item name="children" xsi:type="array">
            <item name="ship-to" xsi:type="array">
                <item name="component" xsi:type="string">Magento_Checkout/js/view/shipping-information/list</item>
                <item name="displayArea" xsi:type="string">ship-to</item>
            </item>
        </item>
    </item>
</item>

  • I need it in a sidebar (foundation 6). This sidebar cannot be triggered when added to the dom via knockout so I need to create an empty sidebar beforehand. All I want is that the mentioned knockout data will also be placed inside this sidebar. I know that the magento checkout is a minefield (thank you varien, well done!). My understanding of knockout is that I can place ko variables anywhere I like and don't have to worry about updating it's contents. So, all I need to know is what I initially asked for. I Know it is possible. – omsta Jun 8 '18 at 11:08
  • Why can it not be triggered? I feel it would be easier to fix that conflict than to create your own custom sidebar. I've included the default sidebar config to my answer, if you really want to create your own that is the config you need to pass through. – Ben Crook Jun 8 '18 at 11:12
  • Why would I need to do this when it is already there? I am using the exact same ko variables as in sidebar.html. I just need a copy of the same in another template. – omsta Jun 8 '18 at 11:13
  • "My understanding of knockout is that I can place ko variables anywhere I like" - Incorrect, it has to be in the scope of the UI component, you aren't just working with KO you're working within the M2 checkout UI component which is incredibly complex. – Ben Crook Jun 8 '18 at 11:13
  • 1
    shopware is looking better by the minute – omsta Jun 8 '18 at 11:44

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.