magento-2.1magento2
Attempting to move the progressBar within magento's checkout to the header of the page. I thought something simple like creating a move element within checkout_index_index.xml would do the trick however this doesn't seem to work.
<move element="progressBar" destination="header.content" before="-"/>
Any help is appreciated.
I added this xml file to move "product.price.final" to "product.info.form.options" destination.
File
app/design/frontend/Vendor/theme/Magento_ConfigurableProduct/layout/catalog_product_view_type_configurable.xml
<?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>
<move element="product.price.final" as="product.info.main.bottom.price" destination="product.info.form.options" before="product.info.options.wrapper.bottom"/>
</body>
</page>
First of all, we need to understand how the Magento Gift Message works on Cart Page.
vendor/magento/module-gift-message/view/frontend/templates/cart/gift_options.phtml
This file is our light. We will save a lot of time if we understand its logic.
window.giftOptionsConfig: this global variable used for config. We should recreate it on checkout.
Let's start to implement our custom logic. Create a new module, add following logic:
app/code/Vendor/CheckoutDemo/view/frontend/layout/checkout_index_index.xml
<?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="content">
<referenceBlock name="checkout.root">
<arguments>
<argument name="jsLayout" xsi:type="array">
<item name="components" xsi:type="array">
<item name="checkout" xsi:type="array">
<item name="children" xsi:type="array">
<item name="steps" xsi:type="array">
<item name="children" xsi:type="array">
<item name="shipping-step" xsi:type="array">
<item name="children" xsi:type="array">
<item name="shippingAddress" xsi:type="array">
<item name="config" xsi:type="array">
<item name="template" xsi:type="string">Vendor_CheckoutDemo/shipping</item>
</item>
<item name="children" xsi:type="array">
<!--Gift Options Cart-->
<item name="giftOptionsCart" xsi:type="array">
<item name="displayArea" xsi:type="string">gift_options</item>
<item name="component" xsi:type="string">Magento_GiftMessage/js/view/gift-message</item>
<item name="config" xsi:type="array">
<item name="template" xsi:type="string">Magento_GiftMessage/gift-message</item>
<item name="formTemplate" xsi:type="string">Magento_GiftMessage/gift-message-form</item>
</item>
</item>
<!--End Gift Option-->
</item>
</item>
</item>
</item>
</item>
</item>
</item>
</item>
</item>
</argument>
</arguments>
</referenceBlock>
<block class="Magento\Framework\View\Element\Template" name="gift.messages.data" template="Vendor_CheckoutDemo::gift_options.phtml"/>
</referenceBlock>
</body>
</page>
There are 3 notes:
-Shipping step will use our custom shipping html template. It's easier to add our custom region.
<item name="shippingAddress" xsi:type="array">
<item name="config" xsi:type="array">
<item name="template" xsi:type="string">Vendor_CheckoutDemo/shipping</item>
</item>
-Our Gift area: I copied the content from vendor/magento/module-gift-message/view/frontend/layout/checkout_cart_index.xml.
<!--Gift Options Cart-->
<item name="giftOptionsCart" xsi:type="array">
<item name="displayArea" xsi:type="string">gift_options</item>
<item name="component" xsi:type="string">Magento_GiftMessage/js/view/gift-message</item>
<item name="config" xsi:type="array">
<item name="template" xsi:type="string">Magento_GiftMessage/gift-message</item>
<item name="formTemplate" xsi:type="string">Magento_GiftMessage/gift-message-form</item>
</item>
</item>
<!--End Gift Option-->
-The Gift config
<block class="Magento\Framework\View\Element\Template" name="gift.messages.data" template="Vendor_CheckoutDemo::gift_options.phtml"/>
Create app/code/Vendor/CheckoutDemo/view/frontend/templates/gift_options.phtml
<script>
window.giftOptionsConfig = window.checkoutConfig.giftMessageConfig;
</script>
We use the giftOptionsConfig global variable because the gift message js logic will use it.
app/code/Vendor/CheckoutDemo/etc/frontend/di.xml
<?xml version="1.0"?>
<config xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:ObjectManager/etc/config.xsd">
<type name="Magento\Checkout\Model\CompositeConfigProvider">
<arguments>
<argument name="configProviders" xsi:type="array">
<item name="gift_message_checkout_config_provider" xsi:type="object">Vendor\CheckoutDemo\Model\GiftMessageConfigProvider\Proxy</item>
</argument>
</arguments>
</type>
</config>
app/code/Vendor/CheckoutDemo/Model/GiftMessageConfigProvider.php
<?php
namespace Vendor\CheckoutDemo\Model;
class GiftMessageConfigProvider extends \Magento\GiftMessage\Model\GiftMessageConfigProvider
{
public function getConfig()
{
$config = parent::getConfig();
return ['giftMessageConfig' => $config];
}
}
Create the shipping html, copy the content from vendor/magento/module-checkout/view/frontend/web/template/shipping.html to our custom app/code/Vendor/CheckoutDemo/view/frontend/web/template/shipping.html. And, add our custom gift message region:
app/code/Vendor/CheckoutDemo/view/frontend/web/template/shipping.html
......
<div class="step-title" translate="'Gift Options'" data-role="title" />
<each args="getRegion('gift_options')" render="" />
......
Result:
Best Answer
I don't think you can move the progress bar this way. It is rendered in
onepage.htmlusing knockout:You can move it around there, but I don't think you can move it to the top of the header. To do that you'll have to resort to some CSS hacking.