Skip to content

CC-37779 Quick order visual add to card adjust #3598

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
vitaliiShveider wants to merge 5 commits into
base: master
Choose a base branch
from
Open

CC-37779 Quick order visual add to card adjust #3598

Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
2c39432
CC-37779 Adjust visual add to cart documentation
vitaliiShveider Apr 1, 2026
8050c36
CC-37779 Adjust visual add to cart documentation
vitaliiShveider Apr 2, 2026
5d7a8c8
CC-37779 fix ci
vitaliiShveider Apr 3, 2026
69cdd08
Merge branch 'master' of github.com:spryker/spryker-docs into feature…
vitaliiShveider Apr 3, 2026
a6cd2be
Merge branch 'master' of github.com:spryker/spryker-docs into feature…
vitaliiShveider Apr 10, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
159 changes: 125 additions & 34 deletions docs/dg/dev/ai/ai-commerce/visual-add-to-cart/install-visual-add-to-cart.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -15,34 +15,46 @@ 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

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
Expand Down Expand Up @@ -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 {
Expand All @@ -154,21 +199,67 @@ In `src/Pyz/Yves/QuickOrderPage/Theme/default/components/molecules/quick-order-f
} only %}

{% for pluginForm in embed.pluginForms %}
<hr>

{% if pluginForm.vars.template_path is defined %}
{% include pluginForm.vars.template_path with {
data: {
form: pluginForm,
},
} only %}
{% else %}
{{ form_widget(pluginForm) }}
{% endif %}
<div class="plugins-quick-order-form">
{% if pluginForm.vars.template_path is defined %}
{% include pluginForm.vars.template_path with {
data: {
form: pluginForm,
},
} only %}
{% else %}
{{ form_widget(pluginForm) }}
{% endif %}
</div>
{% 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.
Expand Down
Loading