vtex-apps / checkout-step-group

Checkout Step Group

The Step Group component renders a list of "steps" in the Checkout interfaces. Each step is represented by a required part of the checkout process that the user must complete before they finish their order.

Configuration

1. Add the Step Group app to your theme's dependencies in the manifest.json. For example:

{
  "dependencies": {
    "vtex.checkout-step-group": "0.x"
  }
}

2. Add the checkout-step-group block inside the block which renders the checkout. For example:

// interfaces.json
{
  "my-checkout-page": {
    "around": ["checkout-container"],
    "composition": "children"
  }
}

// blocks.json
{
  "my-checkout-page": {
    "children": ["checkout-step-group"]
  }
}

Advanced customization

The checkout-step-group block renders by default 3 steps, the most common ones in the checkout process:

• profile-step: Renders the profile form, and the profile summary
• shipping-step: Renders the shipping form, which includes the address form and pickup point
• payment-step: Renders the payment form, with all the available payment methods in the current store

If you want to customize and remove (or add) one of these steps, you can do so by doing the following:

// blocks.json
{
  "checkout-step-group#my-checkout": {
    "children": [
      // you can include here only the steps you need
      // in your store
      "profile-step",
      "payment-step"
    ]
  },
  "my-checkout-page": {
    "children": ["checkout-step-group#my-checkout"]
  }
}

CSS Customization

In order to apply CSS customizations in this and other blocks, follow the instructions given in this recipe regarding using CSS classes for store customization.

CSS Handles
stepGroupWrapper
stepGroupList
stepGroupCheckoutLabel
step
indicator
indicatorActive
indicatorInactive
stepTitle
stepContentWrapper
stepDivider
stepContent

checkout-step-group's Issues

Checkout steps get stuck on COL environment

Describe the bug
I'm debugging this series of checkout-IO APPS, in this test environment juan--norhlatamprojects.myvtex.com, I installed the apps succesfully, on top vtex.checkout, and then checkout-step-group, whenever I try to continue the flow of a normal purchase, or modify some data (profile, shipping, payment) The whole page get stuck in the same anchor (#), that means: if I try to modify the #profile, then it's impossible to continue.

To Reproduce
Steps to reproduce the behavior:

1. Go to https://juan--northlatamprojects.myvtex.com/
2. Add something to cart and go to Checkout
3. Click on 'Edit profile data'
4. Try to change something
5. Then try to continue the checkout process (The app intents to continue but the router put it back on #profile again)
   Expected behavior
   A clear and concise description of what you expected to happen.

Screenshots

Desktop environment:

System:
OS: macOS 10.15.4
CPU: (8) x64 Intel(R) Core(TM) i5-1038NG7 CPU @ 2.00GHz
Memory: 189.34 MB / 16.00 GB
Shell: 5.7.1 - /bin/zsh
Binaries:
Node: 12.18.3 - /usr/local/bin/node
Yarn: 1.22.5 - /usr/local/bin/yarn
npm: 6.14.6 - /usr/local/bin/npm
Browsers:
Chrome: 85.0.4183.102
Safari: 13.1

Please let me know if you need more context to find the root cause of this unexpected behavior.