The mixin sw-skin-alert will be removed in v6.7.0. Instead of styling the alert manually with CSS selectors and the custom mixin sw-skin-alert,
we modify the appearance inside the alert-* modifier classes directly with the Bootstrap CSS variables like it is documented: https://getbootstrap.com/docs/5.3/components/alerts/#sass-loops
Before:
@each $color, $value in $theme-colors {
.alert-#{$color} {
@include sw-skin-alert($value, $white);
}
}After:
@each $state, $value in $theme-colors {
.alert-#{$state} {
--#{$prefix}alert-border-color: #{$value};
--#{$prefix}alert-bg: #{$white};
--#{$prefix}alert-color: #{$body-color};
}
}When rendering an alert using the include template Resources/views/storefront/utilities/alert.html.twig, the class alert-has-icon will be removed. Helper classes d-flex align-items-center will be used instead.
- <div class="alert alert-info alert-has-icon">
+ <div class="alert alert-info d-flex align-items-center">
{% sw_icon 'info' %}
<div class="alert-content-container">
An important info
</div>
</div>As of v6.7.0, the superfluous inner container alert-content will be removed to have lesser elements and be more aligned with Bootstraps alert structure.
When rendering an alert using the include template Resources/views/storefront/utilities/alert.html.twig, the inner container alert-content will no longer be present in the HTML output.
The general usage of Resources/views/storefront/utilities/alert.html.twig and all include parameters remain the same.
Before:
<div role="alert" class="alert alert-info d-flex align-items-center">
<span class="icon icon-info"><svg></svg></span>
<div class="alert-content-container">
<div class="alert-content">
Your shopping cart is empty.
</div>
</div>
</div>After:
<div role="alert" class="alert alert-info d-flex align-items-center">
<span class="icon icon-info"><svg></svg></span>
<div class="alert-content-container">
Your shopping cart is empty.
</div>
</div>The old "sw-popover" component will be removed in the next major version. Please use the new "mt-floating-ui" component instead.
We will provide you with a codemod (ESLint rule) to automatically convert your codebase to use the new "mt-floating-ui" component. This component is much different from the old "sw-popover" component, so the codemod will not be able to convert all occurrences. You will have to manually adjust some parts of your codebase. For this you can look at the Storybook documentation for the Meteor Component Library.
If you don't want to use the codemod, you can manually replace all occurrences of "sw-popover" with "mt-floating-ui".
Following changes are necessary:
Replace all component names from "sw-popover" with "mt-floating-ui"
Before:
<sw-popover />After:
<mt-floating-ui />The property "zIndex" is removed without a replacement.
Before:
<sw-popover :zIndex="myZIndex" />After:
<mt-floating-ui />The property "resizeWidth" is removed without a replacement.
Before:
<sw-popover :resizeWidth="myWidth" />After:
<mt-floating-ui />The property "popoverClass" is removed without a replacement.
Before:
<sw-popover popoverClass="my-class" />After:
<mt-floating-ui />The "open" property is removed. You have to control the visibility of the popover by yourself with the property "isOpened".
Before:
<sw-popover />After:
<mt-floating-ui :isOpened="myVisibility" />- Removed method
ImportExportProfileEntity::getName()andImportExportProfileEntity::setName(). UsegetTechnicalName()andsetTechnicalName()instead. - Removed
profileattribute fromImportEntityCommand. Use--profile-technical-nameinstead. - Removed
namefield fromImportExportProfileEntity.
- All Shopware states will become Pinia Stores and will be available via
Shopware.Store
- The
onlyAvailableflag in theShopware\Core\Checkout\Gateway\SalesChannel\CheckoutGatewayRoutein the request will be removed in the next major version. The route will always filter the payment and shipping methods before calling the checkout gateway based on availability.
- The
Shopware\Core\Checkout\Cart\SalesChannel\AbstractCartOrderRoute::ordermethod will change its signature in the next major version. A new mandatoryrequestparameter will be introduced.
Replace the redis_url parameter in config/packages/shopware.yaml file:
cart:
compress: false
expire_days: 120
redis_url: false # or 'redis://localhost'to
cart:
compress: false
expire_days: 120
storage:
type: "mysql" # or "redis"
# config:
# dsn: 'redis://localhost'Replace the redis_url parameter in config/packages/shopware.yaml file:
number_range:
increment_storage: "SQL"
redis_url: false # or 'redis://localhost'to
number_range:
increment_storage: "mysql" # or "redis"
# config:
# dsn: 'redis://localhost'- Removed constants
Shopware\Core\Content\MailTemplate\Subscriber\MailSendSubscriberConfig::{ACTION_NAME,MAIL_CONFIG_EXTENSION}useShopware\Core\Content\Flow\Dispatching\Action\SendMailAction::{ACTION_NAME,MAIL_CONFIG_EXTENSION}instead - Removed constant
Shopware\Core\Content\MailTemplate\MailTemplateActions::MAIL_TEMPLATE_MAIL_SEND_ACTIONuseShopware\Core\Content\Flow\Dispatching\Action\SendMailAction::ACTION_NAMEinstead - Removed class
Shopware\Core\Content\MailTemplate\MailTemplateActionswithout replacement
The old "sw-tabs" component will be removed in the next major version. Please use the new "mt-tabs" component instead.
We will provide you with a codemod (ESLint rule) to automatically convert your codebase to use the new "mt-tabs" component. In this specific component it cannot convert anything correctly, because the new "mt-tabs" component has a different API. You have to manually check and solve every "TODO" comment created by the codemod.
If you don't want to use the codemod, you can manually replace all occurrences of "sw-tabs" with "mt-tabs".
Following changes are necessary:
Replace all component names from "sw-tabs" with "mt-tabs"
Before:
<sw-tabs />After:
<mt-tabs />You need to replace the "default" slot with the "items" property. The "items" property is an array of objects which are used to render the tabs. Using the "sw-tabs-item" component is not needed anymore.
Before:
<sw-tabs>
<template #default="{ active }">
<sw-tabs-item name="tab1">Tab 1</sw-tabs-item>
<sw-tabs-item name="tab2">Tab 2</sw-tabs-item>
</template>
</sw-tabs>After:
<mt-tabs :items="[
{
'label': 'Tab 1',
'name': 'tab1'
},
{
'label': 'Tab 2',
'name': 'tab2'
}
]">
</mt-tabs>The content slot is not supported anymore. You need to set the content manually outside the component. You can use the "new-item-active" event to get the active item and set it to a variable. Then you can use this variable anywere in your template.
Before:
<sw-tabs>
<template #content="{ active }">
The current active item is {{ active }}
</template>
</sw-tabs>After:
<!-- setActiveItem need to be defined -->
<mt-tabs @new-item-active="setActiveItem"></mt-tabs>
The current active item is {{ activeItem }}Before:
<sw-tabs is-vertical />After:
<mt-tabs vertical />Before:
<sw-tabs align-right />After:
<mt-tabs />The old "sw-select-field" component will be removed in the next major version. Please use the new "mt-select" component instead.
We will provide you with a codemod (ESLint rule) to automatically convert your codebase to use the new "mt-select" component.
If you don't want to use the codemod, you can manually replace all occurrences of "sw-select-field" with "mt-select".
Following changes are necessary:
Replace all component names from "sw-select-field" with "mt-select"
Before:
<sw-select-field />After:
<mt-select />Replace all occurrences of the prop "value" with "modelValue"
Before:
<sw-select-field :value="selectedValue" />After:
<mt-select :modelValue="selectedValue" />Replace all occurrences of the "v-model:value" directive with "v-model"
Before:
<sw-select-field v-model:value="selectedValue" />After:
<mt-select v-model="selectedValue" />The prop "options" now expects an array of objects with the properties "label" and "value". The old format with "name" and "id" is not supported anymore.
Before:
<sw-select-field :options="[ { name: 'Option 1', id: 1 }, { name: 'Option 2', id: 2 } ]" />After:
<mt-select :options="[ { label: 'Option 1', value: 1 }, { label: 'Option 2', value: 2 } ]" />The prop "aside" was removed without replacement.
Before:
<sw-select-field :aside="true" />After:
<mt-select />The default slot was removed. The options are now passed via the "options" prop.
Before:
<sw-select-field>
<option value="1">Option 1</option>
<option value="2">Option 2</option>
</sw-select-field>After:
<mt-select :options="[ { label: 'Option 1', value: 1 }, { label: 'Option 2', value: 2 } ]" />The label slot was removed. The label is now passed via the "label" prop.
Before:
<sw-select-field>
<template #label>
My Label
</template>
</sw-select-field>After:
<mt-select label="My Label" />The event "update:value" was renamed to "update:modelValue"
Before:
<sw-select-field @update:value="onUpdateValue" />After:
<mt-select @update:modelValue="onUpdateValue" />The old "sw-textarea-field" component will be removed in the next major version. Please use the new "mt-textarea" component instead.
We will provide you with a codemod (ESLint rule) to automatically convert your codebase to use the new "mt-textarea" component. In this specific component it cannot convert anything correctly, because the new "mt-textarea" component has a different API. You have to manually check and solve every "TODO" comment created by the codemod.
If you don't want to use the codemod, you can manually replace all occurrences of "sw-textarea-field" with "mt-textarea".
Following changes are necessary:
Replace all component names from "sw-textarea-field" with "mt-textarea"
Before:
<sw-textarea-field />After:
<mt-textarea />Replace all occurrences of the property "value" with "modelValue"
Before:
<sw-textarea-field :value="myValue" />After:
<mt-textarea :modelValue="myValue" />Replace all occurrences of the binding "v-model:value" with "v-model"
Before:
<sw-textarea-field v-model:value="myValue" />After:
<mt-textarea v-model="myValue" />Replace all occurrences of the slot "label" with the property "label"
Before:
<sw-textarea-field>
<template #label>
My Label
</template>
</sw-textarea-field>After:
<mt-textarea label="My Label" />Replace all occurrences of the event "update:value" with "update:modelValue"
Before:
<sw-textarea-field @update:value="onUpdateValue" />After:
<mt-textarea @update:modelValue="onUpdateValue" />The old "sw-datepicker" component will be removed in the next major version. Please use the new "mt-datepicker" component instead.
We will provide you with a codemod (ESLint rule) to automatically convert your codebase to use the new "mt-datepicker" component. In this specific component it cannot convert anything correctly, because the new "mt-datepicker" component has a different API. You have to manually check and solve every "TODO" comment created by the codemod.
If you don't want to use the codemod, you can manually replace all occurrences of "sw-datepicker" with "mt-datepicker".
Following changes are necessary:
Replace all component names from "sw-datepicker" with "mt-datepicker"
Before:
<sw-datepicker />After:
<mt-datepicker />Replace all occurrences of the property "value" with "modelValue"
Before:
<sw-datepicker :value="myValue" />After:
<mt-datepicker :modelValue="myValue" />Replace all occurrences of the binding "v-model:value" with "v-model"
Before:
<sw-datepicker v-model:value="myValue" />After:
<mt-datepicker v-model="myValue" />Replace all occurrences of the slot "label" with the property "label"
Before:
<sw-datepicker>
<template #label>
My Label
</template>
</sw-datepicker>After:
<mt-datepicker label="My Label" />Replace all occurrences of the event "update:value" with "update:modelValue"
Before:
<sw-datepicker @update:value="onUpdateValue" />After:
<mt-datepicker @update:modelValue="onUpdateValue" />The old "sw-password-field" component will be removed in the next major version. Please use the new "mt-password-field" component instead.
We will provide you with a codemod (ESLint rule) to automatically convert your codebase to use the new "mt-password-field" component.
If you don't want to use the codemod, you can manually replace all occurrences of "sw-password-field" with "mt-password-field".
Following changes are necessary:
Replace all component names from "sw-password-field" with "mt-password-field"
Before:
<sw-password-field>Hello World</sw-password-field>After:
<mt-password-field>Hello World</mt-password-field>Replace all occurrences of the "value" prop with "modelValue"
Before:
<sw-password-field value="Hello World" />After:
<mt-password-field modelValue="Hello World" />Replace all occurrences of the "v-model:value" directive with "v-model"
Before:
<sw-password-field v-model:value="myValue" />After:
<mt-password-field v-model="myValue" />Replace all occurrences of the "size" prop with "default"
Before:
<sw-password-field size="medium" />After:
<mt-password-field size="default" />Remove all occurrences of the "isInvalid" prop
Before:
<sw-password-field isInvalid />After:
<mt-password-field />Replace all occurrences of the "update:value" event with "update:modelValue"
Before:
<sw-password-field @update:value="updateValue" />After:
<mt-password-field @update:modelValue="updateValue" />Remove all occurrences of the "base-field-mounted" event
Before:
<sw-password-field @base-field-mounted="onFieldMounted" />After:
<mt-password-field />Remove all occurrences of the "label" slot. The slot content should be moved to the "label" prop. Only string values are supported. Other slot content is not supported anymore.
Before:
<sw-password-field>
<template #label>
My Label
</template>
</sw-password-field>After:
<mt-password-field label="My label">
</mt-password-field>Remove all occurrences of the "hint" slot. The slot content should be moved to the "hint" prop. Only string values are supported. Other slot content is not supported
Before:
<sw-password-field>
<template #hint>
My Hint
</template>
</sw-password-field>After:
<mt-password-field hint="My hint">
</mt-password-field>The old "sw-colorpicker" component will be removed in the next major version. Please use the new "mt-colorpicker" component instead.
We will provide you with a codemod (ESLint rule) to automatically convert your codebase to use the new "mt-colorpicker" component. In this specific component it cannot convert anything correctly, because the new "mt-colorpicker" component has a different API. You have to manually check and solve every "TODO" comment created by the codemod.
If you don't want to use the codemod, you can manually replace all occurrences of "sw-colorpicker" with "mt-colorpicker".
Following changes are necessary:
Replace all component names from "sw-colorpicker" with "mt-colorpicker"
Before:
<sw-colorpicker />After:
<mt-colorpicker />Replace all occurrences of the property "value" with "modelValue"
Before:
<sw-colorpicker :value="myValue" />After:
<mt-colorpicker :modelValue="myValue" />Replace all occurrences of the binding "v-model:value" with "v-model"
Before:
<sw-colorpicker v-model:value="myValue" />After:
<mt-colorpicker v-model="myValue" />Replace all occurrences of the slot "label" with the property "label"
Before:
<sw-colorpicker>
<template #label>
My Label
</template>
</sw-colorpicker>After:
<mt-colorpicker label="My Label" />Replace all occurrences of the event "update:value" with "update:modelValue"
Before:
<sw-colorpicker @update:value="onUpdateValue" />After:
<mt-colorpicker @update:modelValue="onUpdateValue" />The old "sw-external-link" component will be removed in the next major version. Please use the new "mt-external-link" component instead.
We will provide you with a codemod (ESLint rule) to automatically convert your codebase to use the new "mt-external-link" component.
If you don't want to use the codemod, you can manually replace all occurrences of "sw-external-link" with "mt-external-link".
Following changes are necessary:
Replace all component names from "sw-external-link" with "mt-external-link"
Before:
<sw-external-link>Hello World</sw-external-link>After:
<mt-external-link>Hello World</mt-external-link>The "icon" property is removed from the "mt-external-link" component. There is no replacement for this property.
Before:
<sw-external-link icon="world">Hello World</sw-external-link>After:
<mt-external-link>Hello World</mt-external-link>The old "sw-skeleton-bar" component will be removed in the next major version. Please use the new "mt-skeleton-bar" component instead.
We will provide you with a codemod (ESLint rule) to automatically convert your codebase to use the new "mt-skeleton-bar" component.
If you don't want to use the codemod, you can manually replace all occurrences of "sw-skeleton-bar" with "mt-skeleton-bar".
Following changes are necessary:
Replace all component names from "sw-skeleton-bar" with "mt-skeleton-bar"
Before:
<sw-skeleton-bar>Hello World</sw-skeleton-bar>After:
<mt-skeleton-bar>Hello World</mt-skeleton-bar>The old "sw-email-field" component will be removed in the next major version. Please use the new "mt-email-field" component instead.
We will provide you with a codemod (ESLint rule) to automatically convert your codebase to use the new "mt-email-field" component.
If you don't want to use the codemod, you can manually replace all occurrences of "sw-email-field" with "mt-email-field".
Following changes are necessary:
Replace all component names from "sw-email-field" with "mt-email-field"
Before:
<sw-email-field>Hello World</sw-email-field>After:
<mt-email-field>Hello World</mt-email-field>Replace all occurrences of the "value" prop with "modelValue"
Before:
<mt-email-field value="Hello World" />After:
<mt-email-field modelValue="Hello World" />Replace all occurrences of the "v-model:value" directive with "v-model"
Before:
<mt-email-field v-model:value="myValue" />After:
<mt-email-field v-model="myValue" />Replace all occurrences of the "size" prop with "default"
Before:
<mt-email-field size="medium" />After:
<mt-email-field size="default" />Remove all occurrences of the "isInvalid" prop
Before:
<mt-email-field isInvalid />After:
<mt-email-field />Remove all occurrences of the "aiBadge" prop
Before:
<mt-email-field aiBadge />After:
<mt-email-field />Replace all occurrences of the "update:value" event with "update:modelValue"
Before:
<mt-email-field @update:value="updateValue" />After:
<mt-email-field @update:modelValue="updateValue" />Remove all occurrences of the "base-field-mounted" event
Before:
<mt-email-field @base-field-mounted="onFieldMounted" />After:
<mt-email-field />Remove all occurrences of the "label" slot. The slot content should be moved to the "label" prop. Only string values are supported. Other slot content is not supported anymore.
Before:
<mt-email-field>
<template #label>
My Label
</template>
</mt-email-field>After:
<mt-email-field label="My label">
</mt-email-field>The old "sw-url-field" component will be removed in the next major version. Please use the new "mt-url-field" component instead.
We will provide you with a codemod (ESLint rule) to automatically convert your codebase to use the new "mt-url-field" component.
If you don't want to use the codemod, you can manually replace all occurrences of "sw-url-field" with "mt-url-field".
Following changes are necessary:
Replace all component names from "sw-url-field" with "mt-url-field"
Before:
<sw-url-field />After:
<mt-url-field />Replace all occurrences of the "value" prop with "modelValue"
Before:
<sw-url-field value="Hello World" />After:
<mt-url-field modelValue="Hello World" />Replace all occurrences of the "v-model:value" directive with "v-model"
Before:
<sw-url-field v-model:value="myValue" />After:
<mt-url-field v-model="myValue" />Replace all occurrences of the "update:value" event with "update:modelValue"
Before:
<sw-url-field @update:value="updateValue" />After:
<mt-url-field @update:modelValue="updateValue" />Remove all occurrences of the "label" slot. The slot content should be moved to the "label" prop. Only string values are supported. Other slot content is not supported anymore.
Before:
<sw-url-field>
<template #label>
My Label
</template>
</sw-url-field>After:
<mt-url-field label="My label">
</mt-url-field>Remove all occurrences of the "hint" slot. There is no replacement for this slot.
Before:
<sw-url-field>
<template #hint>
My Hint
</template>
</sw-url-field>After:
<mt-url-field />The old "sw-progress-bar" component will be removed in the next major version. Please use the new "mt-progress-bar" component instead.
We will provide you with a codemod (ESLint rule) to automatically convert your codebase to use the new "mt-progress-bar" component.
If you don't want to use the codemod, you can manually replace all occurrences of "sw-progress-bar" with "mt-progress-bar".
Following changes are necessary:
Replace all component names from "sw-progress-bar" with "mt-progress-bar"
Before:
<sw-progress-bar />After:
<mt-progress-bar />Replace all occurrences of the "value" prop with "modelValue"
Before:
<mt-progress-bar value="5" />After:
<mt-progress-bar modelValue="5" />Replace all occurrences of the "v-model:value" directive with "v-model"
Before:
<mt-progress-bar v-model:value="myValue" />After:
<mt-progress-bar v-model="myValue" />Replace all occurrences of the "update:value" event with "update:modelValue"
Before:
<mt-progress-bar @update:value="updateValue" />After:
<mt-progress-bar @update:modelValue="updateValue" />
```g
## Introduced in 6.6.2.0
## Removal of "sw-button":
The old "sw-button" component will be removed in the next major version. Please use the new "mt-button" component instead.
We will provide you with a codemod (ESLint rule) to automatically convert your codebase to use the new "mt-button" component.
If you don't want to use the codemod, you can manually replace all occurrences of "sw-button" with "mt-button".
Following changes are necessary:
### "sw-button" is removed
Replace all component names from "sw-button" with "mt-button"
Before:
```html
<sw-button>Save</sw-button>After:
<mt-button>Save</mt-button>Remove the property "variant". Use the property "ghost" instead.
Before:
<sw-button variant="ghost">Save</sw-button>After:
<mt-button ghost>Save</mt-button>Replace the value "danger" with "critical" in the property "variant".
Before:
<sw-button variant="danger">Delete</sw-button>After:
<mt-button variant="critical">Delete</mt-button>Replace the value "ghost-danger" with "critical" in the property "variant". Add the property "ghost".
Before:
<sw-button variant="ghost-danger">Delete</sw-button>After:
<mt-button variant="critical" ghost>Delete</mt-button>Remove the value "contrast" from the property "variant". There is no replacement.
Remove the value "context" from the property "variant". There is no replacement.
Replace the property "router-link" with a "@click" event listener and a "this.$router.push()" method.
Before:
<sw-button router-link="sw.example.route">Go to example</sw-button>After:
<mt-button @click="this.$router.push('sw.example.route')">Go to example</mt-button>- Removed service
Shopware\Core\Content\MailTemplate\Service\AttachmentLoaderwithout replacement. - Removed event
Shopware\Core\Content\MailTemplate\Service\Event\AttachmentLoaderCriteriaEventwithout replacement.
The old "sw-icon" component will be removed in the next major version. Please use the new "mt-icon" component instead.
We will provide you with a codemod (ESLint rule) to automatically convert your codebase to use the new "mt-icon" component.
If you don't want to use the codemod, you can manually replace all occurrences of "sw-icon" with "mt-icon".
Following changes are necessary:
Replace all component names from "sw-icon" with "mt-icon"
Before:
<sw-icon name="regular-times-s" />After:
<mt-icon name="regular-times-s" />Replace the property "small" with "size" of value "16px" if used
Before:
<sw-icon name="regular-times-s" small />After:
<mt-icon name="regular-times-s" size="16px" />Replace the property "large" with "size" of value "32px" if used
Before:
<sw-icon name="regular-times-s" large />After:
<mt-icon name="regular-times-s" size="32px" />If no property "size", "small" or "large" is used, you need to use the "size" prop with the value "24px" to avoid a different default size than with "sw-icon"
Before:
<sw-icon name="regular-times-s" />After:
<mt-icon name="regular-times-s" size="24px" />The old "sw-card" component will be removed in the next major version. Please use the new "mt-card" component instead.
We will provide you with a codemod (ESLint rule) to automatically convert your codebase to use the new "mt-card" component.
If you don't want to use the codemod, you can manually replace all occurrences of "sw-card" with "mt-card".
Following changes are necessary:
Replace all component names from "sw-card" with "mt-card"
Before:
<sw-card>Hello World</sw-card>After:
<mt-card>Hello World</mt-card>Replace the property "aiBadge" by using the "sw-ai-copilot-badge" component directly inside the "title" slot
Before:
<mt-card aiBadge>Hello Wolrd</mt-card>After:
<mt-card>
<slot name="title"><sw-ai-copilot-badge /></slot>
Hello World
</mt-card>The property "contentPadding" is removed without a replacement.
Before:
<mt-card contentPadding>Hello World</mt-card>After:
<mt-card>Hello World</mt-card>- Removed
Shopware\Core\System\Snippet\Exception\FilterNotFoundException. UseShopware\Core\System\Snippet\SnippetException::filterNotFoundinstead. - Removed
Shopware\Core\System\Snippet\Exception\InvalidSnippetFileException. UseShopware\Core\System\Snippet\SnippetException::invalidSnippetFileinstead.
The old "sw-text-field" component will be removed in the next major version. Please use the new "mt-text-field" component instead.
We will provide you with a codemod (ESLint rule) to automatically convert your codebase to use the new "mt-text-field" component.
If you don't want to use the codemod, you can manually replace all occurrences of "sw-text-field" with "mt-text-field".
Following changes are necessary:
Replace all component names from "sw-text-field" with "mt-text-field"
Before:
<sw-text-field>Hello World</sw-text-field>After:
<mt-text-field>Hello World</mt-text-field>Replace all occurrences of the "value" prop with "modelValue"
Before:
<mt-text-field value="Hello World" />After:
<mt-text-field modelValue="Hello World" />Replace all occurrences of the "v-model:value" directive with "v-model"
Before:
<mt-text-field v-model:value="myValue" />After:
<mt-text-field v-model="myValue" />Replace all occurrences of the "size" prop with "default"
Before:
<mt-text-field size="medium" />After:
<mt-text-field size="default" />Remove all occurrences of the "isInvalid" prop
Before:
<mt-text-field isInvalid />After:
<mt-text-field />Remove all occurrences of the "aiBadge" prop
Before:
<mt-text-field aiBadge />After:
<mt-text-field />Replace all occurrences of the "update:value" event with "update:modelValue"
Before:
<mt-text-field @update:value="updateValue" />After:
<mt-text-field @update:modelValue="updateValue" />Remove all occurrences of the "base-field-mounted" event
Before:
<mt-text-field @base-field-mounted="onFieldMounted" />After:
<mt-text-field />Remove all occurrences of the "label" slot. The slot content should be moved to the "label" prop. Only string values are supported. Other slot content is not supported anymore.
Before:
<mt-text-field>
<template #label>
My Label
</template>
</mt-text-field>After:
<mt-text-field label="My label">
</mt-text-field>The old "sw-switch-field" component will be removed in the next major version. Please use the new "mt-switch" component instead.
We will provide you with a codemod (ESLint rule) to automatically convert your codebase to use the new "mt-switch" component.
If you don't want to use the codemod, you can manually replace all occurrences of "sw-switch-field" with "mt-switch".
Following changes are necessary:
Replace all component names from "sw-switch-field" with "mt-switch".
Before:
<sw-switch-field>Hello World</sw-switch-field>After:
<mt-switch>Hello World</mt-switch>Replace all occurrences of the "noMarginTop" prop with "removeTopMargin".
Before:
<mt-switch noMarginTop />After:
<mt-switch removeTopMargin />Remove all occurrences of the "size" prop.
Before:
<mt-switch size="small" />After:
<mt-switch />Remove all occurrences of the "id" prop.
Before:
<mt-switch id="example-identifier" />After:
<mt-switch />Replace all occurrences of the "value" prop with "checked".
Before:
<mt-switch value="true" />After:
<mt-switch checked="true" />Remove all occurrences of the "ghostValue" prop.
Before:
<mt-switch ghostValue="true" />After:
<mt-switch />Remove all occurrences of the "padded" prop. Use CSS styling instead.
Before:
<mt-switch padded="true" />After:
<mt-switch />Remove all occurrences of the "partlyChecked" prop.
Before:
<mt-switch partlyChecked="true" />After:
<mt-switch />Replace all occurrences of the "label" slot with the "label" prop.
Before:
<mt-switch>
<template #label>
Foobar
</template>
</mt-switch>After:
<mt-switch label="Foobar">
</mt-switch>Remove all occurrences of the "hint" slot.
Before:
<mt-switch>
<template #hint>
Foobar
</template>
</mt-switch>After:
<mt-switch>
<!-- Slot "hint" was removed with no replacement. -->
</mt-switch>The old "sw-number-field" component will be removed in the next major version. Please use the new "mt-number-field" component instead.
We will provide you with a codemod (ESLint rule) to automatically convert your codebase to use the new "mt-number-field" component.
If you don't want to use the codemod, you can manually replace all occurrences of "sw-number-field" with "mt-number-field".
Following changes are necessary:
Replace all component names from "sw-number-field" with "mt-number-field"
Before:
<sw-number-field />After:
<mt-number-field />Replace all occurrences of the "value" prop with "modelValue"
Before:
<mt-number-field :value="5" />After:
<mt-number-field :modelValue="5" />Replace all occurrences of the "v-model:value" directive with the combination of :modelValue and @change
Before:
<mt-number-field v-model:value="myValue" />After:
<mt-number-field :modelValue="myValue" @change="myValue = $event" />Replace all occurrences of the "label" slot with the "label" prop
Before:
<mt-number-field>
<template #label>
My Label
</template>
</mt-number-field>After:
<mt-number-field label="My Label" />Replace all occurrences of the "update:value" event with the "change" event
Before:
<mt-number-field @update:value="updateValue" />After:
<mt-number-field @change="updateValue" />The old "sw-loader" component will be removed in the next major version. Please use the new "mt-loader" component instead.
We will provide you with a codemod (ESLint rule) to automatically convert your codebase to use the new "mt-loader" component.
If you don't want to use the codemod, you can manually replace all occurrences of "sw-loader" with "mt-loader".
Following changes are necessary:
Replace all component names from "sw-loader" with "mt-loader"
Before:
<sw-loader />After:
<mt-loader />The old "sw-checkbox-field" component will be removed in the next major version. Please use the new "mt-checkbox" component instead.
We will provide you with a codemod (ESLint rule) to automatically convert your codebase to use the new "mt-checkbox" component.
If you don't want to use the codemod, you can manually replace all occurrences of "sw-checkbox-field" with "mt-checkbox".
Following changes are necessary:
Replace all component names from "sw-checkbox-field" with "mt-checkbox"
Before:
<sw-checkbox-field />After:
<mt-checkbox />Replace all occurrences of the "value" prop with "checked"
Before:
<sw-checkbox-field :value="myValue" />After:
<mt-checkbox :checked="myValue" />Replace all occurrences of the "v-model" directive with "v-model:checked"
Before:
<sw-checkbox-field v-model="isCheckedValue" />After:
<mt-checkbox v-model:checked="isCheckedValue" />Replace all occurrences of the "label" slot with the "label" prop
Before:
<sw-checkbox-field>
<template #label>
Hello Shopware
</template>
</sw-checkbox-field>After:
<mt-checkbox label="Hello Shopware">
</mt-checkbox>The "hint" slot was removed without replacement
Before:
<sw-checkbox-field>
<template v-slot:hint>
Hello Shopware
</template>
</sw-checkbox-field>The "id" prop was removed without replacement
Before:
<sw-checkbox-field id="checkbox-id" />The "ghostValue" prop was removed without replacement
Before:
<sw-checkbox-field ghostValue="yes" />Replace all occurrences of the "partlyChecked" prop with "partial"
Before:
<sw-checkbox-field partlyChecked />After:
<mt-checkbox partial />The "padded" prop was removed without replacement
Before:
<sw-checkbox-field padded />Replace all occurrences of the "update:value" event with "update:checked"
Before:
<sw-checkbox-field @update:value="updateValue" />After:
<mt-checkbox @update:checked="updateValue" />We added a new optional parameter bool $recursive to TreeUpdater::batchUpdate.
If you extend the TreeUpdater class, you should properly handle the new parameter in your custom implementation.
<?php
class CustomTreeUpdater extends TreeUpdater
{
public function batchUpdate(array $updateIds, string $entity, Context $context, bool $recursive = false): void
{
parent::batchUpdate($updateIds, $entity, $context, $recursive);
}
}\Shopware\Core\Framework\DataAbstractionLayer\Command\CreateSchemaCommand will be removed. You can use \Shopware\Core\Framework\DataAbstractionLayer\Command\CreateMigrationCommand instead.
\Shopware\Core\Framework\DataAbstractionLayer\SchemaGenerator will be removed. You can use \Shopware\Core\Framework\DataAbstractionLayer\MigrationQueryGenerator instead.
- Replace
isEmailUsedwithisEmailAlreadyInUseinsw-users-permission-user-detail.
- Replace
isEmailUsedwithisEmailAlreadyInUseinsw-users-permission-user-detail.
The Shopware\Core\Checkout\Customer\SalesChannel\AccountService::login method is removed. Use AccountService::loginByCredentials or AccountService::loginById instead.
Unused constant Shopware\Core\Checkout\Customer\CustomerException::CUSTOMER_IS_INACTIVE and unused method Shopware\Core\Checkout\Customer\CustomerException::inactiveCustomer are removed.
floatMatchandarrayMatchmethods insrc/Core/Framework/Rule/CustomFieldRule.phpwill be removed for Shopware 6.7.0.0
The technicalName property will be required for payment and shipping methods in the API.
The technical_name column will be made non-nullable for the payment_method and shipping_method tables in the database.
Plugin developers will be required to supply a technicalName for their payment and shipping methods.
Merchants must review their custom created payment and shipping methods for the new technicalName property and update their methods through the administration accordingly.