I have developed a custom CMS form element similar to the contact form, but with additional fields. However, the salutation field does not display options in my custom form. Below is the view of my element on the storefront:
{% block element_form %}
{% set config = element.fieldConfig.elements %}
<div class="cms-element-contact">
<div class="row justify-content-center">
<div class="col-lg-12">
{% set formViolations = app.request.get('errors') %}
<div class="card">
<div class="card-body">
<div class="card-title mb-4" v-if="element.config.title.value.length > 0">
{{ element.config.title.value }}
</div>
{% block cms_packageform %}
<form action="" method="post" data-form-validation="true">
<div class="form-content">
<div class="row g-2">
{% block cms_packageform_select_salutation %}
{% sw_include '@Storefront/storefront/element/cms-element-form/form-components/cms-element-form-select-salutation.html.twig'
with {
additionalClass: 'col-md-6',
required: true
}
%}
{% endblock %}
{% block cms_packageform_input_first_name %}
{% sw_include '@Storefront/storefront/element/cms-element-form/form-components/cms-element-form-input.html.twig'
with {
fieldName: 'firstName',
required: true,
additionalClass: 'col-md-6',
label: 'packageform.label.firstName',
placeholder: 'packageform.placeholder.firstName'
}
%}
{% endblock %}
</div>
<div class="row g-2">
{% block cms_packageform_input_email %}
{% sw_include '@Storefront/storefront/element/cms-element-form/form-components/cms-element-form-input.html.twig'
with {
fieldName: 'email',
type: 'email',
required: true,
additionalClass: 'col-md-6',
label: 'packageform.label.email',
placeholder: 'packageform.placeholder.email'
}
%}
{% endblock %}
{% block cms_packageform_input_phome %}
{% set phoneNumberFieldRequired = config('core.basicInformation.phoneNumberFieldRequired') == true %}
{% sw_include '@Storefront/storefront/element/cms-element-form/form-components/cms-element-form-input.html.twig'
with {
fieldName: 'phone',
required: true,
additionalClass: 'col-md-6',
label: 'packageform.label.phone',
placeholder: 'packageform.placeholder.phone'
}
%}
{% endblock %}
</div>
<div class="row g-2">
{% block cms_packageform_input_street %}
{% sw_include '@Storefront/storefront/element/cms-element-form/form-components/cms-element-form-input.html.twig'
with {
required: true,
fieldName: 'street',
additionalClass: 'col-md-4',
label: 'packageform.label.street',
placeholder: 'packageform.placeholder.street'
}
%}
{% endblock %}
{% block cms_packageform_input_city %}
{% sw_include '@Storefront/storefront/element/cms-element-form/form-components/cms-element-form-input.html.twig'
with {
required: true,
fieldName: 'city',
additionalClass: 'col-md-4',
label: 'packageform.label.city',
placeholder: 'packageform.placeholder.city'
}
%}
{% endblock %}
{% block cms_packageform_input_zip %}
{% sw_include '@Storefront/storefront/element/cms-element-form/form-components/cms-element-form-input.html.twig'
with {
required: true,
fieldName: 'zip',
additionalClass: 'col-md-4',
label: 'packageform.label.zip',
placeholder: 'packageform.placeholder.zip'
}
%}
{% endblock %}
</div>
<div class="row g-2">
{% block cms_packageform_input_packagetype %}
<div class="col-md-4">
<label class="form-label" for="form-qty">{{ packageform.label.packagetype }}</label>
<select name="package['type']" id="packageform-packageType" required="required" class="form-select">
<option value="1">
Type 1
</option>
<option value="2">
Type 2
</option>
</select>
</div>
{% endblock %}
{% block cms_packageform_input_qty %}
{% sw_include '@Storefront/storefront/element/cms-element-form/form-components/cms-element-form-input.html.twig'
with {
required: true,
fieldName: 'qty',
additionalClass: 'col-md-4',
label: 'packageform.label.quantity',
placeholder: 'Quantity',
}
%}
{% endblock %}
<div class="col-md-4">
<button >Add Package</button>
</div>
</div>
{% block cms_packageform_submit %}
{% sw_include '@Storefront/storefront/element/cms-element-form/form-components/cms-element-form-submit.html.twig' %}
{% endblock %}
</div>
</form>
{% endblock %}
</div>
</div>
</div>
</div>
</div>
{% endblock %}
Please guide me on how to add the dynamic salutation field to the form above.
When creating custom CMS elements, you sometimes need to use other entities. In those cases you can implement a custom CmsElementResolver to resolve the configuration data.
PackageFormCmsElementResolver.php data resolver in the <plugin root>/src/Core/Content/Cms/DataResolver/Element/ directory.File contents PackageFormCmsElementResolver.php:
<?php declare(strict_types=1);
namespace Swag\BasicExample\Core\Content\Cms\DataResolver\Element;
use Shopware\Core\Content\Cms\DataResolver\Element\FormCmsElementResolver;
class PackageFormCmsElementResolver extends FormCmsElementResolver
{
public function getType(): string
{
return 'package-form';
}
}
Our custom resolver extends from the FormCmsElementResolver. As you can see, the getType method reflects the name of the CMS element.
<plugin root>/src/Resources/config/services.xml file.File contents services.xml:
<?xml version="1.0" ?>
<container xmlns="http://symfony.com/schema/dic/services"
xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
xsi:schemaLocation="http://symfony.com/schema/dic/services http://symfony.com/schema/dic/services/services-1.0.xsd">
<services>
<service id="Swag\BasicExample\Core\Content\Cms\DataResolver\Element\PackageFormCmsElementResolver">
<argument type="service" id="Shopware\Core\System\Salutation\SalesChannel\SalutationRoute"/>
<tag name="shopware.cms.data_resolver"/>
</service>
</services>
</container>
The salutations selection will now be available in your custom CMS form element.