I’m developing a plugin for Shopware 6 that extends the product specifications tab with additional fields. The data is loaded correctly when data is manually inserted into the database tables (wuc_catalogue_box_extension and wuc_catalogue_box_extension_translation). However, when there is no existing data, the administration interface does not allow me to input and save new data. The data appears to be initialized correctly, but it is not being saved to the database when I click the default save button of the product editor in the sw6 administration.
Steps I’ve Taken:
- Extending the product detail specifications tab.
- Initializing a new entity if no existing data is found.
- Setting the initialized data in the product.extensions.catalogueBoxData property.
Here is my Component.override:
const {Criteria} = Shopware.Data;
const {Component} = Shopware;
const Context = Shopware.Context;
import template from "./sw-product-extension-detail-specifications.html.twig";
Component.override('sw-product-detail-specifications', {
template,
inject: ['acl', 'repositoryFactory'],
data() {
return {
productId: null,
product: {
extensions: {
catalogueBoxData: this.initCatalogueBoxData(),
}
},
linkTargetOptions: [
{label: '_blank', value: '_blank'},
{label: '_parent', value: '_parent'},
{label: '_self', value: '_self'},
],
};
},
created() {
this.productId = this.$route.params.id;
this.initializeEntity();
},
computed: {
wucPluginCatalogueBoxExtensionCriteria() {
const criteria = new Criteria();
criteria.addFilter(Criteria.equals('productId', this.productId));
return criteria;
},
catalogueBoxRepository() {
return this.repositoryFactory.create('wuc_catalogue_box_extension');
},
},
methods: {
initCatalogueBoxData() {
return {
productId: this.productId,
headline: 'Test',
subtitle: '',
showProductNumber: true,
benefitOne: '',
benefitTwo: '',
benefitThree: '',
benefitFour: '',
benefitFive: '',
showButtonOne: true,
showButtonTwo: true,
buttonOneText: '',
buttonOneLink: '',
buttonOneTarget: '_parent',
buttonTwoText: '',
buttonTwoLink: '',
buttonTwoTarget: '_parent',
linkOneText: '',
linkOneLink: '',
linkOneTitle: '',
linkOneTarget: '_parent',
linkTwoText: '',
linkTwoLink: '',
linkTwoTitle: '',
linkTwoTarget: '_parent',
linkThreeText: '',
linkThreeLink: '',
linkThreeTitle: '',
linkThreeTarget: '_parent',
};
},
initializeEntity() {
this.catalogueBoxRepository
.search(this.wucPluginCatalogueBoxExtensionCriteria)
.then(result => {
if (result.length) {
console.log('Data found', result.last());
this.product.extensions.catalogueBoxData = result.last();
} else {
console.log('No existing data found, creating new entity');
this.createAndSetNewEntity();
}
})
.catch(error => {
console.error('Error loading data:', error);
});
},
createAndSetNewEntity() {
const newEntity = this.catalogueBoxRepository.create();
newEntity.productId = this.productId;
newEntity.headline = 'New Entity Headline';
newEntity.subtitle = '';
newEntity.showProductNumber = true;
newEntity.benefitOne = '';
newEntity.benefitTwo = '';
newEntity.benefitThree = '';
newEntity.benefitFour = '';
newEntity.benefitFive = '';
newEntity.showButtonOne = true;
newEntity.showButtonTwo = true;
newEntity.buttonOneText = '';
newEntity.buttonOneLink = '';
newEntity.buttonOneTarget = '_parent';
newEntity.buttonTwoText = '';
newEntity.buttonTwoLink = '';
newEntity.buttonTwoTarget = '_parent';
newEntity.linkOneText = '';
newEntity.linkOneLink = '';
newEntity.linkOneTitle = '';
newEntity.linkOneTarget = '_parent';
newEntity.linkTwoText = '';
newEntity.linkTwoLink = '';
newEntity.linkTwoTitle = '';
newEntity.linkTwoTarget = '_parent';
newEntity.linkThreeText = '';
newEntity.linkThreeLink = '';
newEntity.linkThreeTitle = '';
newEntity.linkThreeTarget = '_parent';
this.product.extensions.catalogueBoxData = newEntity;
console.log('New Entity initialized:', newEntity);
}
}
});
This is the according template:
{% block sw_product_detail_specifications_custom_fields %}
{% block sw_product_detail_wuc_catalogue_box %}
<sw-card :title="$tc('wucCatalogueBox.product.cardTitles.basics')">
<sw-text-field
v-model:value="product.extensions.catalogueBoxData.headline"
class="sw-product-catalogue-box__headline-field"
:label="$tc('wucCatalogueBox.product.configLabels.headline')"
placeholder="Enter headline"
:allow-edit="acl.can('product.editor')"
></sw-text-field>
<sw-text-field
class="sw-product-catalogue-box__subtitle-field"
:error="null"
:label="$tc('wucCatalogueBox.product.configLabels.subtitle')"
placeholder="Enter subtitle"
v-model:value="product.extensions.catalogueBoxData.subtitle"
:allow-edit="acl.can('product.editor')"
></sw-text-field>
<sw-switch-field
:error="null"
:label="$tc('wucCatalogueBox.product.configLabels.showProductNumber')"
v-model:value="product.extensions.catalogueBoxData.showProductNumber"
:allow-edit="acl.can('product.editor')"
></sw-switch-field>
</sw-card>
<sw-card :title="$tc('wucCatalogueBox.product.cardTitles.benefits')">
<sw-text-field
class="sw-product-catalogue-box__benefit-field"
label="Benefit #1"
placeholder="Enter benefit"
v-model:value="product.extensions.catalogueBoxData.benefitOne"
></sw-text-field>
<sw-text-field
class="sw-product-catalogue-box__benefit-field"
label="Benefit #2"
placeholder="Enter benefit"
v-model:value="product.extensions.catalogueBoxData.benefitTwo"
></sw-text-field>
<sw-text-field
class="sw-product-catalogue-box__benefit-field"
label="Benefit #3"
placeholder="Enter benefit"
v-model:value="product.extensions.catalogueBoxData.benefitThree"
></sw-text-field>
<sw-text-field
class="sw-product-catalogue-box__benefit-field"
label="Benefit #4"
placeholder="Enter benefit"
v-model:value="product.extensions.catalogueBoxData.benefitFour"
></sw-text-field>
<sw-text-field
class="sw-product-catalogue-box__benefit-field"
label="Benefit #5"
placeholder="Enter benefit"
v-model:value="product.extensions.catalogueBoxData.benefitFive"
></sw-text-field>
</sw-card>
<sw-card title="Button #1">
<sw-switch-field
:error="null"
:label="$tc('wucCatalogueBox.product.configLabels.showButtonOne')"
v-model:value="product.extensions.catalogueBoxData.showButtonOne"
></sw-switch-field>
<sw-text-field
class="sw-product-catalogue-box__headline-field"
label="Button #1 Text"
placeholder="Enter text"
v-model:value="product.extensions.catalogueBoxData.buttonOneText"
></sw-text-field>
<sw-url-field
:error="null"
label="Button #1 Link"
placeholder="Enter link"
v-model:value="product.extensions.catalogueBoxData.buttonOneLink"
></sw-url-field>
<sw-single-select
:label="$tc('wucCatalogueBox.product.configLabels.buttonOneTarget')"
class="sw-product-catalogue-box__select-field"
placeholder="Select link target"
:options="linkTargetOptions"
v-model:value="product.extensions.catalogueBoxData.buttonOneTarget"
></sw-single-select>
</sw-card>
<sw-card title="Button #2">
<sw-switch-field
:error="null"
:label="$tc('wucCatalogueBox.product.configLabels.showButtonTwo')"
v-model:value="product.extensions.catalogueBoxData.showButtonTwo"
></sw-switch-field>
<sw-text-field
class="sw-product-catalogue-box__headline-field"
label="Button #2 Text"
placeholder="Enter text"
v-model:value="product.extensions.catalogueBoxData.buttonTwoText"
></sw-text-field>
<sw-url-field
:error="null"
label="Button #2 Link"
placeholder="Enter link"
v-model:value="product.extensions.catalogueBoxData.buttonTwoLink"
></sw-url-field>
<sw-single-select
:label="$tc('wucCatalogueBox.product.configLabels.buttonTwoTarget')"
class="sw-product-catalogue-box__select-field"
placeholder="Select link target"
:options="linkTargetOptions"
v-model:value="product.extensions.catalogueBoxData.buttonTwoTarget"
></sw-single-select>
</sw-card>
<sw-card title="Link #1">
<sw-text-field
:error="null"
label="Link #1 Text"
placeholder="Enter text"
v-model:value="product.extensions.catalogueBoxData.linkOneText"
></sw-text-field>
<sw-url-field
:error="null"
label="Link #1 Link"
placeholder="Enter link"
v-model:value="product.extensions.catalogueBoxData.linkOneLink"
></sw-url-field>
<sw-text-field
:error="null"
:label="$tc('wucCatalogueBox.product.configLabels.linkOneTitle')"
placeholder="Enter title"
v-model:value="product.extensions.catalogueBoxData.linkOneTitle"
></sw-text-field>
<sw-single-select
:label="$tc('wucCatalogueBox.product.configLabels.linkOneTarget')"
class="sw-product-catalogue-box__select-field"
placeholder="Select link target"
:options="linkTargetOptions"
v-model:value="product.extensions.catalogueBoxData.linkOneTarget"
></sw-single-select>
</sw-card>
<sw-card title="Link #2">
<sw-text-field
:error="null"
label="Link #2 Text"
placeholder="Enter text"
v-model:value="product.extensions.catalogueBoxData.linkTwoText"
></sw-text-field>
<sw-url-field
:error="null"
label="Link #2 Link"
placeholder="Enter link"
v-model:value="product.extensions.catalogueBoxData.linkTwoLink"
></sw-url-field>
<sw-text-field
:error="null"
:label="$tc('wucCatalogueBox.product.configLabels.linkTwoTitle')"
placeholder="Enter title"
v-model:value="product.extensions.catalogueBoxData.linkTwoTitle"
></sw-text-field>
<sw-single-select
:label="$tc('wucCatalogueBox.product.configLabels.linkTwoTarget')"
class="sw-product-catalogue-box__select-field"
placeholder="Select link target"
:options="linkTargetOptions"
v-model:value="product.extensions.catalogueBoxData.linkTwoTarget"
></sw-single-select>
</sw-card>
<sw-card title="Link #3">
<sw-text-field
:error="null"
label="Link #3 Text"
placeholder="Enter text"
v-model:value="product.extensions.catalogueBoxData.linkThreeText"
></sw-text-field>
<sw-text-field
:error="null"
:label="$tc('wucCatalogueBox.product.configLabels.linkThreeTitle')"
placeholder="Enter title"
v-model:value="product.extensions.catalogueBoxData.linkThreeTitle"
></sw-text-field>
<sw-url-field
:error="null"
label="Link #3 Link"
placeholder="Enter link"
v-model:value="product.extensions.catalogueBoxData.linkThreeLink"
></sw-url-field>
<sw-single-select
:label="$tc('wucCatalogueBox.product.configLabels.linkThreeTarget')"
class="sw-product-catalogue-box__select-field"
placeholder="Select link target"
:options="linkTargetOptions"
v-model:value="product.extensions.catalogueBoxData.linkThreeTarget"
></sw-single-select>
</sw-card>
{% endblock %}
{% parent %}
{% endblock %}
How can I ensure that the catalogueBoxData extension is correctly saved to the database when i save the product in the administration? What might be missing or incorrectly implemented in my current approach?
Thanks in advance,
Niklas
I tried initializing a new entity in the JavaScript component when no existing data was found. I expected that when saving the product, the new entity would be included in the product.extensions.catalogueBoxData and saved to the database. However, despite the new entity being initialized and appearing in the product.extensions.catalogueBoxData, it does not get saved to the database when I click the save button in the product editor.
Problem Description:
- The new entity is initialized in the frontend when no existing data is found.
- The new entity appears in product.extensions.catalogueBoxData.
- When saving the product, the new entity is not persisted in the database.
New contributor
nibra180 is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
Check out our Code of Conduct.