stepswizard.phtml 3.4 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273
  1. <?php
  2. /**
  3. * Copyright © Magento, Inc. All rights reserved.
  4. * See COPYING.txt for license details.
  5. */
  6. // @codingStandardsIgnoreFile
  7. /** @var $block \Magento\Ui\Block\Component\StepsWizard */
  8. ?>
  9. <div data-role="steps-wizard-main" class="steps-wizard <?= /* @noEscape */ $block->getData('config/dataScope') ?>" data-bind="scope: '<?= /* @escapeNotVerified */ $block->getComponentName() ?>'">
  10. <div data-role="messages" class="messages"></div>
  11. <div data-role="steps-wizard-controls" class="steps-wizard-navigation">
  12. <ul class="nav-bar">
  13. <?php foreach ($block->getSteps() as $step) { ?>
  14. <li data-role="collapsible" data-bind="css: { 'active': selectedStep() == '<?= /* @escapeNotVerified */ $step->getComponentName() ?>'}">
  15. <a href="#<?= /* @escapeNotVerified */ $step->getComponentName() ?>"
  16. data-bind="click: showSpecificStep">
  17. <?= /* @escapeNotVerified */ $step->getCaption() ?>
  18. </a>
  19. </li>
  20. <?php } ?>
  21. </ul>
  22. <div class="nav-bar-outer-actions">
  23. <div class="action-wrap" data-role="closeBtn">
  24. <button type="button"
  25. class="action-cancel action-tertiary" data-bind="click: close">
  26. <span><?= /* @escapeNotVerified */ __('Cancel') ?></span>
  27. </button>
  28. </div>
  29. <div class="action-wrap action-wrap-prev" data-role="step-wizard-prev">
  30. <button type="button"
  31. class="action-default action-back-step"
  32. data-bind="click: back, css: { 'disabled': disabled}">
  33. <span><?= /* @escapeNotVerified */ __('Back') ?></span>
  34. </button>
  35. </div>
  36. <div class="action-wrap action-wrap-next" data-role="step-wizard-next">
  37. <button type="button"
  38. class="action-default action-primary action-next-step" data-bind="click: next">
  39. <span><?= /* @escapeNotVerified */ __('Next') ?></span>
  40. </button>
  41. </div>
  42. </div>
  43. </div>
  44. <div data-role="steps-wizard-tab">
  45. <?php foreach ($block->getSteps() as $step) { ?>
  46. <div data-bind="visible: selectedStep() == $element.id, css: {'no-display':false}"
  47. class="content no-display" id="<?= /* @escapeNotVerified */ $step->getComponentName() ?>"
  48. data-role="content">
  49. <?= /* @escapeNotVerified */ $step->getContent() ?>
  50. </div>
  51. <?php } ?>
  52. </div>
  53. </div>
  54. <script type="text/x-magento-init">
  55. {
  56. "*": {
  57. "Magento_Ui/js/core/app": {
  58. "components": {
  59. "<?= /* @escapeNotVerified */ $block->getComponentName() ?>": {
  60. "component": "Magento_Ui/js/lib/step-wizard",
  61. "initData": <?= /* @escapeNotVerified */ $this->helper("Magento\Framework\Json\Helper\Data")->jsonEncode($block->getInitData()) ?>,
  62. "stepsNames": <?= /* @escapeNotVerified */ $this->helper("Magento\Framework\Json\Helper\Data")->jsonEncode($block->getStepComponents()) ?>,
  63. "modalClass": "<?= /* @noEscape */ $block->getData('config/dataScope') ?>"
  64. }
  65. }
  66. }
  67. }
  68. }
  69. </script>