diff --git a/docs/dg/dev/ai/ai-commerce/visual-add-to-cart/install-visual-add-to-cart.md b/docs/dg/dev/ai/ai-commerce/visual-add-to-cart/install-visual-add-to-cart.md
index 73ad3c72f38..4fd5ce2bb7d 100644
--- a/docs/dg/dev/ai/ai-commerce/visual-add-to-cart/install-visual-add-to-cart.md
+++ b/docs/dg/dev/ai/ai-commerce/visual-add-to-cart/install-visual-add-to-cart.md
@@ -15,11 +15,13 @@ Follow the steps in the following sections to install the Visual Add to Cart fea
Install the required features:
-| NAME | VERSION | INSTALLATION GUIDE |
-|------|---------|-------------------|
-| AI Commerce | {{page.release_tag}} | [Install AI Commerce](/docs/dg/dev/ai/ai-commerce/install-ai-commerce.html) |
-| Quick Order Page | {{page.release_tag}} | |
-| Catalog | {{page.release_tag}} | |
+| NAME | VERSION | INSTALLATION GUIDE |
+|----------------------------|---------|-------------------|
+| AI Commerce | {{page.release_tag}} | [Install AI Commerce](/docs/dg/dev/ai/ai-commerce/install-ai-commerce.html) |
+| Quick Order Page | {{page.release_tag}} | |
+| Search | {{page.release_tag}} | |
+| Catalog | {{page.release_tag}} | |
+| SearchElasticsearch | {{page.release_tag}} | |
### 1) Add translations
@@ -27,22 +29,32 @@ Append the glossary according to your configuration:
`data/import/common/common/glossary.csv`
```csv
-ai-commerce.quick-order-image-to-cart.image-order.errors.ai-request-failed,AI request failed. Please try again.,en_US
-ai-commerce.quick-order-image-to-cart.image-order.errors.ai-request-failed,KI-Anfrage fehlgeschlagen. Bitte versuchen Sie es erneut.,de_DE
-ai-commerce.quick-order-image-to-cart.image-order.errors.ai-response-invalid,The AI returned an invalid response. Please try again.,en_US
-ai-commerce.quick-order-image-to-cart.image-order.errors.ai-response-invalid,Die KI hat eine ungültige Antwort zurückgegeben. Bitte versuchen Sie es erneut.,de_DE
-ai-commerce.quick-order-image-to-cart.image-order.errors.no-products-recognized,No products could be recognized in the image.,en_US
-ai-commerce.quick-order-image-to-cart.image-order.errors.no-products-recognized,Es konnten keine Produkte im Bild erkannt werden.,de_DE
-ai-commerce.quick-order-image-to-cart.image-order.errors.product-limit-exceeded,The image contains too many products. Please upload an image with fewer products.,en_US
-ai-commerce.quick-order-image-to-cart.image-order.errors.product-limit-exceeded,Das Bild enthält zu viele Produkte. Bitte laden Sie ein Bild mit weniger Produkten hoch.,de_DE
-ai-commerce.quick-order-image-to-cart.image-order.errors.invalid-format,The uploaded file format is not supported.,en_US
-ai-commerce.quick-order-image-to-cart.image-order.errors.invalid-format,Das hochgeladene Dateiformat wird nicht unterstützt.,de_DE
-ai-commerce.quick-order-image-to-cart.image-order.errors.invalid-mime-type,The uploaded file type is not allowed.,en_US
-ai-commerce.quick-order-image-to-cart.image-order.errors.invalid-mime-type,Der hochgeladene Dateityp ist nicht zulässig.,de_DE
-ai-commerce.quick-order-image-to-cart.image-order.errors.file-too-large,The uploaded file exceeds the maximum allowed size.,en_US
-ai-commerce.quick-order-image-to-cart.image-order.errors.file-too-large,Die hochgeladene Datei überschreitet die maximal zulässige Größe.,de_DE
-ai-commerce.quick-order-image-to-cart.image-order.errors.product-not-found,Product "%name%" could not be found in the catalog.,en_US
-ai-commerce.quick-order-image-to-cart.image-order.errors.product-not-found,Produkt "%name%" konnte im Katalog nicht gefunden werden.,de_DE
+ai-commerce.quick-order-image-to-cart.image-upload.title,Quick order with AI,en_US
+ai-commerce.quick-order-image-to-cart.image-upload.title,Schnellbestellung mit KI,de_DE
+ai-commerce.quick-order-image-to-cart.image-upload.description,"Upload purchase order, invoices or product lists. Supports %formats% formats and Screenshots.",en_US
+ai-commerce.quick-order-image-to-cart.image-upload.description,"Titelliste, Rechnungen oder Produktlisten hochladen. Unterstützt %formats% Formate und Screenshots.",de_DE
+ai-commerce.quick-order-image-to-cart.image-upload.button.upload,Upload,en_US
+ai-commerce.quick-order-image-to-cart.image-upload.button.upload,Uploaden,de_DE
+ai-commerce.quick-order-image-to-cart.image-upload.browse-file,No file selected. Browse file,en_US
+ai-commerce.quick-order-image-to-cart.image-upload.browse-file,Keine Datei ausgewählt. Datei durchsuchen,de_DE
+ai-commerce.quick-order-image-to-cart.image-order.errors.invalid-format,Invalid image format. Please upload a image file.,en_US
+ai-commerce.quick-order-image-to-cart.image-order.errors.invalid-format,Ungültiges Bildformat. Bitte laden Sie eine Bilddatei hoch.,de_DE
+ai-commerce.quick-order-image-to-cart.image-order.errors.invalid-mime-type,Invalid image mime type.,en_US
+ai-commerce.quick-order-image-to-cart.image-order.errors.invalid-mime-type,Ungültiger Bild-MIME-Typ.,de_DE
+ai-commerce.quick-order-image-to-cart.image-order.errors.no-image,No image uploaded.,en_US
+ai-commerce.quick-order-image-to-cart.image-order.errors.no-image,Kein Bild hochgeladen.,de_DE
+ai-commerce.quick-order-image-to-cart.image-order.errors.product-limit-exceeded,"The number of recognized products exceeds the limit. Please upload an image with no more than %maxProducts% products.",en_US
+ai-commerce.quick-order-image-to-cart.image-order.errors.product-limit-exceeded,"Die Anzahl der erkannten Produkte überschreitet das Limit. Bitte laden Sie ein Bild mit nicht mehr als %maxProducts% Produkten hoch.",de_DE
+ai-commerce.quick-order-image-to-cart.image-order.errors.no-products-recognized,"No products were recognized in the uploaded image.",en_US
+ai-commerce.quick-order-image-to-cart.image-order.errors.no-products-recognized,"Es wurden keine Produkte im hochgeladenen Bild erkannt.",de_DE
+ai-commerce.quick-order-image-to-cart.image-order.errors.product-not-found,"Product '%product%' was not found in the catalog.",en_US
+ai-commerce.quick-order-image-to-cart.image-order.errors.product-not-found,"Produkt '%product%' wurde im Katalog nicht gefunden.",de_DE
+ai-commerce.quick-order-image-to-cart.image-order.errors.ai-request-failed,The AI request failed. The image could not be recognized.,en_US
+ai-commerce.quick-order-image-to-cart.image-order.errors.ai-request-failed,Die KI-Anfrage ist fehlgeschlagen. Das Bild konnte nicht erkannt werden.,de_DE
+ai-commerce.quick-order-image-to-cart.image-order.errors.ai-response-invalid,The AI returned an unexpected response. The image could not be recognized.,en_US
+ai-commerce.quick-order-image-to-cart.image-order.errors.ai-response-invalid,Die KI hat eine unerwartete Antwort zurückgegeben. Das Bild konnte nicht erkannt werden.,de_DE
+ai-commerce.quick-order-image-to-cart.image-order.errors.file-too-large,The uploaded image exceeds the maximum allowed file size.,en_US
+ai-commerce.quick-order-image-to-cart.image-order.errors.file-too-large,Das hochgeladene Bild überschreitet die maximal zulässige Dateigröße.,de_DE
```
### 2) Set up behavior
@@ -134,16 +146,49 @@ On the Storefront Quick Order page, make sure the image upload button is visible
## Integrate the feature frontend
-### 1) Update the Quick Order form template
+### 1) Update the Quick Order page templates
{% info_block infoBox "Info" %}
-Do this step only if you have overridden `quick-order-form.twig` in `QuickOrderPage` module at the project level. If you have not overridden this template, skip to [2) Apply the frontend changes](#2-apply-the-frontend-changes).
+Do this step only if you have overridden `quick-order-form.twig`, `quick-order.twig` in `QuickOrderPage` module at the project level. If you have not overridden this template, skip to [2) Apply the frontend changes](#2-apply-the-frontend-changes).
{% endinfo_block %}
In `src/Pyz/Yves/QuickOrderPage/Theme/default/components/molecules/quick-order-form/quick-order-form.twig`, make sure the plugin forms loop is placed after the `quick-order-file-upload` molecule include inside `{% raw %}{% block fields %}{% endraw %}`:
+Add `pluginForms: [],` to the `data` variable definition:
+
+```twig
+{% raw %}
+{% define data = {
+ form: required,
+ products: [],
+ prices: [],
+ additionalColumns: [],
+ fileTemplateExtensions: [],
+ textOrderForm: required,
+ uploadOrderForm: required,
+ pluginForms: [],
+} %}
+{% endraw %}
+```
+
+Add `pluginForms: data.pluginForms,` to the `embed` variable definition in `{% raw %}embed molecule('form'){% endraw %}`:
+
+```twig
+{% raw %}
+ {% embed molecule('form') with {
+ ...
+ embed: {
+ ...
+ pluginForms: data.pluginForms,
+ }
+ } only %}
+{% endraw %}
+```
+
+Add the plugin forms including.
+
```twig
{% raw %}
{% include molecule('quick-order-file-upload', 'QuickOrderPage') with {
@@ -154,21 +199,67 @@ In `src/Pyz/Yves/QuickOrderPage/Theme/default/components/molecules/quick-order-f
} only %}
{% for pluginForm in embed.pluginForms %}
-
-
- {% if pluginForm.vars.template_path is defined %}
- {% include pluginForm.vars.template_path with {
- data: {
- form: pluginForm,
- },
- } only %}
- {% else %}
- {{ form_widget(pluginForm) }}
- {% endif %}
+
+ {% if pluginForm.vars.template_path is defined %}
+ {% include pluginForm.vars.template_path with {
+ data: {
+ form: pluginForm,
+ },
+ } only %}
+ {% else %}
+ {{ form_widget(pluginForm) }}
+ {% endif %}
+
{% endfor %}
{% endraw %}
```
+Add styles to the `src/Pyz/Yves/QuickOrderPage/Theme/default/components/molecules/quick-order-form/quick-order-form.scss`:
+
+```scss
+ .plugins-quick-order-form {
+ background-color: #f6f6f6;
+ padding: 1.0625rem 1.25rem;
+ border-radius: 2px;
+ margin-top: 0.5rem;
+ }
+```
+
+add the following code to the `src/Pyz/Yves/QuickOrderPage/Theme/default/views/quick-order/quick-order.twig` file:
+
+```twig
+{% raw %}
+{% define data = {
+ forms: {
+ quickOrderForm: _view.quickOrderForm,
+ textOrderForm: _view.textOrderForm,
+ uploadOrderForm: _view.uploadOrderForm,
+ },
+ pluginForms: _view.pluginForms | default([]),
+ additionalColumns: _view.additionalColumns,
+ products: _view.products,
+ prices: _view.prices,
+ fileTemplateExtensions: _view.fileTemplateExtensions,
+ title: 'quick-order.page-title' | trans,
+} %}
+
+{% block content %}
+ {% include molecule('quick-order-form', 'QuickOrderPage') with {
+ data: {
+ form: data.forms.quickOrderForm,
+ products: data.products,
+ prices: data.prices,
+ fileTemplateExtensions: data.fileTemplateExtensions,
+ additionalColumns: data.additionalColumns,
+ textOrderForm: data.forms.textOrderForm,
+ uploadOrderForm: data.forms.uploadOrderForm,
+ pluginForms: data.pluginForms,
+ },
+ } only %}
+{% endblock %}
+{% endraw %}
+```
+
{% info_block warningBox "Warning" %}
If the `{% raw %}{% for pluginForm in embed.pluginForms %}{% endraw %}` loop is placed before or outside the `quick-order-file-upload` include, the Visual Add to Cart upload component will not render on the Quick Order page.