# 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 %}
```