# Sylius

### Installation <a href="#od_c9a26491" id="od_c9a26491"></a>

#### Prerequisites <a href="#od_117c69a2" id="od_117c69a2"></a>

[Register for a demo](https://www.scaleflex.com/en/request-a-demo) if you don't already have a DAM account.

#### Step 1: Download <a href="#od_c9a26491-1" id="od_c9a26491-1"></a>

Open a command console, enter your project directory and execute the following command to download the latest stable version of this bundle:

```
 composer require scaleflex/sylius-filerobot-plugin
```

This command requires you to have Composer [installed globally](https://getcomposer.org/doc/00-intro.md), as explained in the installation chapter of the Composer documentation.

#### Step 2: Enable the plugin <a href="#od_89b10974" id="od_89b10974"></a>

Then, enable the plugin by adding it to the list of registered plugins/bundles in config/bundles.php file of your project:

```
<?php
# config/bundles.php

return [
    // ...
    Scaleflex\SyliusFilerobotPlugin\ScaleflexSyliusFilerobotPlugin::class => ['all' => true],
];
```

#### Step 3: Configure <a href="#od_0eb6b2f0" id="od_0eb6b2f0"></a>

To configure the DAM Sylius plugin, the following components need to be updated:

**1. DB Schema**

Copy

```
bin/console doctrine:migration:diff
bin/console doctrine:migration:migrate
bin/console cache:clear
```

**2. Admin route**

Create file in `config/routes/scaleflex_sylius_filerobot.yaml` with the following content:

Copy

```
# config/routes/scaleflex_sylius_filerobot.yaml

scaleflex_sylius_filerobot:
  resource: "@ScaleflexSyliusFilerobotPlugin/Resources/config/routing.yaml"
```

**3. Product media tab form**

Change form theme `{% form_theme form '@ScaleflexSyliusFilerobotPlugin/Admin/Form/imagesTheme.html.twig' %}` in your `templates/bundles/SyliusAdminBundle/Product/Tab/_media.html.twig`

Copy

```
{% form_theme form '@ScaleflexSyliusFilerobotPlugin/Admin/Form/imagesTheme.html.twig' %}

<div class="ui tab" data-tab="media">
  <h3 class="ui top attached header">{{ 'sylius.ui.media'|trans }}</h3>

  <div class="ui attached segment">
    {{ form_row(form.images, {'label': false}) }}

    {{ sylius_template_event(['sylius.admin.product.' ~ action ~ '.tab_media', 'sylius.admin.product.tab_media'], {'form': form}) }}
  </div>
</div>
```

**4. Product grid thumbnail**

Change grid thumbnail column template

```
# config/package/_sylius.yaml

sylius_grid:
  grids:
    sylius_admin_product:
      fields:
        image:
          options:
            template: "@ScaleflexSyliusFilerobotPlugin/Admin/Product/Grid/Field/image.html.twig"
```

**5. Script**

```
# config/package/sylius_ui.yaml

sylius_ui:
  events:
    sylius.admin.layout.javascripts:
      blocks:
        filerobot_script: '@ScaleflexSyliusFilerobotPlugin\Admin\filerobotScript.html.twig'
```

**6. Config filter**

Create a file `config/packages/scaleflex_filerobot.yaml` and add content bellow

```
# config/packages/scaleflex_filerobot.yaml

imports:
  - { resource: "@ScaleflexSyliusFilerobotPlugin/Resources/config/filters.yaml"}
```

**7. Update configuration in Admin**

Navigate to *Configuration* / *Scaleflex DAM*

<figure><img src="https://opendocs-global.airstore.io/project_test/c45bcb98c06c86e206993a429e75d45d359d48237073843d507509b93ef3c623.png" alt=""><figcaption></figcaption></figure>

You can enable the plugin only if both token and security template id are correct.

* **Activation**: Enable/Disable the plugin
* **DAM Token**: Your DAM token, unique DAM Project and gallery identifier
* **Security Template Identifier:** Your security template ID, found in the "Access > Security templates" section of your DAM admin
* **DAM upload directory**: (sub)folder path to your asset's gallery, eg. /my\_sylius\_folder

### Developer's den <a href="#od_589d765c" id="od_589d765c"></a>

The DAM plugin offers various Twig methods and filters to assist developers:

* `is_filerobot(image_path)`: Twig function which checks if an image is stored in DAM ;
* `image_path|filerobot('sylius_shop_product_thumbnail')`: A resizing Twig filter; More filters can be added in in `config/package/scaleflex_filerobot.yaml`.

```
  scaleflex_sylius_filerobot:
    filters:
      custom_size: { width: 120, height: 120 }
```

and in Twig

```
  image_path|filerobot('custom_size')
```

We have some default size follow Sylius default, you can override it in filter config ab

```
  scaleflex_sylius_filerobot:
    filters:
      sylius_admin_product_large_thumbnail: { width: 550, height: 412 }
      sylius_admin_product_small_thumbnail: { width: 150, height: 112 }
      sylius_admin_product_tiny_thumbnail: { width: 64, height: 64 }
      sylius_admin_product_thumbnail: { width: 50, height: 50 }
      sylius_shop_product_tiny_thumbnail: { width: 64, height: 64 }
      sylius_shop_product_small_thumbnail: { width: 150, height: 112 }
      sylius_shop_product_thumbnail: { width: 260, height: 260 }
      sylius_shop_product_large_thumbnail: { width: 550, height: 412 }
      sylius_small: { width: 120, height: 120 }
```

* If you use Scaleflex DAM on existing File you have to check the path is filerobot or not, if not use the default way

**Example with Sylius default**

* `templates/bundles/SyliusShopBundle/Product/_mainImage.html.twig`

```
{% if product.imagesByType('thumbnail') is not empty %}
    {% if is_filerobot(product.imagesByType('thumbnail').first.path) %}
        {% set path = product.imagesByType('thumbnail').first.path|filerobot('sylius_shop_product_thumbnail') %}
    {% else %}
        {% set path = product.imagesByType('thumbnail').first.path|imagine_filter(filter|default('sylius_shop_product_thumbnail')) %}
    {% endif %}
{% elseif product.images.first %}
    {% if is_filerobot(product.images.first.path) %}
        {% set path = product.images.first.path|filerobot('sylius_shop_product_thumbnail') %}
    {% else %}
        {% set path = product.images.first.path|imagine_filter(filter|default('sylius_shop_product_thumbnail')) %}
    {% endif %}
{% else %}
    {% set path = asset('assets/shop/img/200x200.png') %}
{% endif %}

<img src="{{ path }}" {{ sylius_test_html_attribute('main-image') }} alt="{{ product.name }}" class="ui bordered image" />
```

* `templates/bundles/SyliusShopBundle/Product/Show/_mainImage.html.twig`:

```
{% if product.imagesByType('main') is not empty %}
    {% set source_path = product.imagesByType('main').first.path %}
    {% if not is_filerobot(source_path) %}
        {% set original_path = source_path|imagine_filter('sylius_shop_product_original') %}
        {% set path = source_path|imagine_filter(filter|default('sylius_shop_product_large_thumbnail')) %}
    {% else %}
        {% set original_path = source_path|filerobot('sylius_shop_product_original') %}
        {% set path = source_path|filerobot('sylius_shop_product_large_thumbnail') %}
    {% endif %}
{% elseif product.images.first %}
    {% set source_path = product.images.first.path %}
    {% if not is_filerobot(source_path) %}
        {% set original_path = source_path|imagine_filter('sylius_shop_product_original') %}
        {% set path = source_path|imagine_filter(filter|default('sylius_shop_product_large_thumbnail')) %}
    {% else %}
        {% set original_path = source_path|filerobot('sylius_shop_product_original') %}
        {% set path = source_path|filerobot('sylius_shop_product_large_thumbnail') %}
    {% endif %}
{% else %}
    {% set original_path = asset('assets/shop/img/400x300.png') %}
    {% set path = original_path %}
{% endif %}

<div data-product-image="{{ path }}" data-product-link="{{ original_path }}"></div>
<a href="{{ original_path }}" class="ui fluid image" data-lightbox="sylius-product-image">
    <img src="{{ path }}" id="main-image" alt="{{ product.name }}" {{ sylius_test_html_attribute('main-image') }} />
</a>
{% if product.images|length > 1 %}
<div class="ui divider"></div>

{{ sylius_template_event('sylius.shop.product.show.before_thumbnails', {'product': product}) }}

<div class="ui small images">
    {% for image in product.images %}
    {% set path = image.path is not null ? (is_filerobot(image.path) ? image.path|filerobot('sylius_shop_product_small_thumbnail') : image.path|imagine_filter('sylius_shop_product_small_thumbnail')) : asset('assets/shop/img/200x200.png') %}
    <div class="ui image">
    {% if product.isConfigurable() and product.enabledVariants|length > 0 %}
        {% include '@SyliusShop/Product/Show/_imageVariants.html.twig' %}
    {% endif %}
        <a href="{{ is_filerobot(image.path) ? image.path|filerobot('sylius_shop_product_original') : image.path|imagine_filter('sylius_shop_product_original') }}" data-lightbox="sylius-product-image">
            <img src="{{ path }}" data-large-thumbnail="{{ is_filerobot(image.path) ? image.path|filerobot('sylius_shop_product_large_thumbnail') : image.path|imagine_filter('sylius_shop_product_large_thumbnail') }}" alt="{{ product.name }}" />
        </a>
    </div>
    {% endfor %}
</div>
{% endif %}
```


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://docs.scaleflex.com/digital-asset-management-dam/plugins-and-connectors/plugins/sylius.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.