Skip to main content

Setup & Configuration

I. Add Configurable Options Field to Product Class​

  1. Open EcommerceProduct class
  2. Add field in section price_and_units and name it configurableOptions (Title: Configurable Options). Choose type from "OpenDXP Ecommerce" -> "Configurable Options"
  3. Save Product Class

II. Extend Product Class​

  1. Change parent of EcommerceProduct class (See code below) to allow configurable options
  2. Save EcommerceProduct Class

Product Class​

<?php

namespace App\Ecommerce\Model;

use OpenDxp\Bundle\EcommerceConfigurableOptionsBundle\Model\Traits\ConfigurableOptionsTrait;

class Product extends \OpenDxp\Ecommerce\Component\Core\Model\Product implements ProductInterface, ConfigurableOptionsAwareInterface
{
    use ConfigurableOptionsTrait;
}

Product Interface​

<?php

namespace App\Ecommerce\Model;

interface ProductInterface extends \OpenDxp\Ecommerce\Component\Core\Model\ProductInterface
{ 
}

III. Install Configurable Option Field Collection​

Automatic​

$ bin/console opendxp-ecommerce-configurable-options:install

Manually​

  1. Create a field collection with name EcommerceConfigurableOption
  2. Download EcommerceConfigurableOption_export.json
  3. Import class and save your field collection

IV. Add Field Collection to Order Item​

  1. Open EcommerceOrderItem class
  2. Add field collection and name it configurableOptions. You can add it right after unit in OrderItem
  3. Tick not editable checkbox
  4. Choose EcommerceConfigurableOption in Allowed Types select box.
  5. Save class

V. Add some Front-End Translations​

NameTranslation ENTranslation DE
opendxp_ecommerce.configurable_options.custom_text.range_lengthUp to %d LettersBis %d Zeichen
opendxp_ecommerce.form.configurable_options.choice.please_select-- Please select ---- Bitte wählen --
opendxp_ecommerce.form.configurable_options.checkbox.yesYesJa
opendxp_ecommerce.form.configurable_options.eacheachà
opendxp_ecommerce.form.configurable_options.one_time_base_price+ %price% one-time charge+ %price% einmaliger Grundpreis
opendxp_ecommerce.form.configurable_options.item_price.productProductProdukt
opendxp_ecommerce.form.configurable_options.item_price.optionsIncluding OptionsDavon Optionen
opendxp_ecommerce.form.configurable_options.closeCosesSchließen
opendxp_ecommerce.form.configurable_options.edit_buttonEdit OptionsOptionen bearbeiten
opendxp_ecommerce.form.configurable_options.refreshRefreshAktualisieren
opendxp_ecommerce.form.configurable_options.edit_headerEdit OptionsOptionen bearbeiten

VI. Front-End Templates​

Finally, we need to add some mark-up to the existing shop layout.

Product/_addToCart.html.twig​

Right after {{ form_errors(form) }} add:

{% if form.cartItem.configurableOptions is defined %}
    <div class="alert alert-success my-3 w-100">
        <h3>{{ 'opendxp_ecommerce.available_configurable_options'|trans }}</h3>
        {{ form_row(form.cartItem.configurableOptions) }}
    </div>
{% endif %}

Cart/Summary/_item.html.twig​

Options: Right after {% if item.getIsGiftItem %} [...] {% endif %} add:

{% if item|has_configurable_options %}
    <div class="alert alert-success my-3 w-100">
        {{ get_configurable_options_preview(item, true) }}
    </div>
    {% include '@EcommerceConfigurableOptions/Modal/form.html.twig' with {form: form, item_id: item.id} only %}
{% endif %}

Item Price: Instead of <span class="price-new">[...]</span> use the macro:

<td class="[...] cart-item-price">
    {# old: <span class="price-new">{{ currency.convertAndFormat(price) }}</span> [...] #}
    {% import '@EcommerceConfigurableOptions/Macro/item_price.html.twig' as custom_options_item_price %}
    {{ custom_options_item_price.create_item_price_list(item, true) }}
</td>

Checkout/steps/summary/_item.html.twig​

Options: Right after {% if item.getIsGiftItem %} [...] {% endif %} add:

{% if item|has_configurable_options %}
    <div class="alert alert-success my-3 w-100">
        {{ get_configurable_options_preview(item, true) }}
    </div>
{% endif %}

Item Price: Instead of <span class="price-new">[...]</span> use the macro:

<td class="[...] cart-item-price">
    {# old: <span class="price-new">{{ currency.convertAndFormat(price) }}</span> [...] #}
    {% import '@EcommerceConfigurableOptions/Macro/item_price.html.twig' as custom_options_item_price %}
    {{ custom_options_item_price.create_item_price_list(item, true) }}
</td>

Common/order_detail.html.twig​

Options: Right after {% if item.getIsGiftItem %} [...] {% endif %} add:

{% if item|has_configurable_options %}
    <div class="alert alert-success my-3 w-100">
        {{ get_configurable_options_preview(item, true) }}
    </div>
{% endif %}

Item Price: Instead of <span class="price-new">[...]</span> use the macro:

<td class="[...] cart-item-price">
    {# old: <span class="price-new">{{ currency.format(price, order.getCurrency.isoCode) }}</span> [...] #}
    {% import '@EcommerceConfigurableOptions/Macro/item_price.html.twig' as custom_options_item_price %}
    {{ custom_options_item_price.create_item_price_list(item, true, false, order.getCurrency.isoCode) }}
</td>

Mail/order-confirmation.html.twig​

There is no item list in ecommerce default mail layout. However, if you want to add this info:

{% if item|has_configurable_options %}
    {{ get_configurable_options_email_preview(item, true) }}
{% endif %}

Item Price​

If you need a single calculated item price + options price, you may want to use our simple twig helper:

{% import '@EcommerceConfigurableOptions/Macro/item_price.html.twig' as custom_options_item_price %}
{# old: item.getItemPrice() #}
{{ custom_options_item_price.create_item_price(item, true, false, order.getCurrency.isoCode) }}