cancel
Showing results for 
Search instead for 
Did you mean: 

Success page as a step in checkout?

SOLVED

Success page as a step in checkout?

Hello i'm looking to add the success page as a step in the step navigator. I followed the following tutorial on how to make an extra step but i'm unsure on how to connect the success page to it.

 

My current files:

 

success-step.html

<li id="success_step" data-bind="fadeVisible: isVisible">
    <div class="step-title" data-bind="i18n: 'Success'" data-role="title"></div>

    <div id="checkout-step-title"
         class="step-content"
         data-role="content">

    </div>
</li>

success-step.js

define(
    [
        'ko',
        'uiComponent',
        'underscore',
        'Magento_Checkout/js/model/step-navigator'
    ],
    function (
        ko,
        Component,
        _,
        stepNavigator
    ) {
        'use strict';

        return Component.extend({
            defaults: {
                template: 'BigBridge_Checkout/success-step'
            },

            isVisible: ko.observable(true),

            /**
             *
             * @returns {*}
             */
            initialize: function () {
                this._super();

                // register your step
                stepNavigator.registerStep(
                    //step code will be used as step content id in the component template
                    'success_step',
                    //step alias
                    null,
                    //step title value
                    'Success',
                    //observable property with logic when display step or hide step
                    this.isVisible,

                    _.bind(this.navigate, this),

                    /**
                     * sort order value
                     * 'sort order value' < 10: step displays before shipping step;
                     * 10 < 'sort order value' < 20 : step displays between shipping and payment step
                     * 'sort order value' > 20 : step displays after payment step
                     */
                    30
                );

                return this;
            },

            /**
             * The navigate() method is responsible for navigation between checkout step
             * during checkout. You can add custom logic, for example some conditions
             * for switching to your custom step
             */
            navigate: function () {
            },

            /**
             * @returns void
             */
            navigateToNextStep: function () {
                stepNavigator.next();
            }
        });
    }
);

checkout_index_index.xml

<?xml version="1.0"?>
<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" layout="checkout"
      xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
    <body>
        <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">
~~ other code ~~
                                        </item>
                                        <item name="billing-step" xsi:type="array">
~~ other code ~~
                                        </item>

                                        <item name="success-step" xsi:type="array">
                                            <item name="component" xsi:type="string">BigBridge_Checkout/js/view/success-step</item>
                                            <item name="sortOrder" xsi:type="string">3</item>
                                            <item name="children" xsi:type="array">
                                                <!--add here child component declaration for your step-->
                                            </item>
                                        </item>

                                    </item>
                                </item>
                            </item>
                        </item>
                    </item>
                </argument>
            </arguments>
        </referenceBlock>
    </body>
</page>

Any idea? 

 

It also seems like the success step is instantly enabled at the moment on step 1?

1 ACCEPTED SOLUTION

Accepted Solutions

Re: Success page as a step in checkout?

I ended up just faking success as a step. I removed the above code and did the following:

 

I copied progress-bar.html to my module and added an 'li' for the success step.

 

<ul class="opc-progress-bar">
    <!-- ko foreach: { data: steps().sort(sortItems), as: 'item' } -->
    <li class="opc-progress-bar-item" data-bind="css: item.isVisible() ? '_active' : ($parent.isProcessed(item) ? '_complete' : '')">
        <span data-bind="i18n: item.title, click: $parent.navigateTo"></span>
    </li>
    <!-- /ko -->
    <li class="opc-progress-bar-item">
        <span data-bind="i18n: 'Success'"></span>
    </li>
</ul>

And in the checkout_onepage_success I added a block to show a fake stepNavigator.

<block class="Magento\Framework\View\Element\Template" name="checkout.progress.bar" template="BB_Checkout::progress-bar.phtml" cacheable="false"/>

 

View solution in original post

2 REPLIES 2

Re: Success page as a step in checkout?

Hello @SannNL

 

It is very hard to achieve this.

 

In checkout success page some time we are adding facebook code, google code.

 

So just add step as you did, keep other flow same it is.

 

After go to the success page, just add top navigation using CSS.

 

Hope it will help you.

 

It works then give kudos.

 

 


Problem solved? Click Kudos & Accept as Solution!
Sunil Patel
Magento 2 Certified Professional Developer & Frontend Developer

Re: Success page as a step in checkout?

I ended up just faking success as a step. I removed the above code and did the following:

 

I copied progress-bar.html to my module and added an 'li' for the success step.

 

<ul class="opc-progress-bar">
    <!-- ko foreach: { data: steps().sort(sortItems), as: 'item' } -->
    <li class="opc-progress-bar-item" data-bind="css: item.isVisible() ? '_active' : ($parent.isProcessed(item) ? '_complete' : '')">
        <span data-bind="i18n: item.title, click: $parent.navigateTo"></span>
    </li>
    <!-- /ko -->
    <li class="opc-progress-bar-item">
        <span data-bind="i18n: 'Success'"></span>
    </li>
</ul>

And in the checkout_onepage_success I added a block to show a fake stepNavigator.

<block class="Magento\Framework\View\Element\Template" name="checkout.progress.bar" template="BB_Checkout::progress-bar.phtml" cacheable="false"/>