1{#**
2 * Copyright since 2007 PrestaShop SA and Contributors
3 * PrestaShop is an International Registered Trademark & Property of PrestaShop SA
4 *
5 * NOTICE OF LICENSE
6 *
7 * This source file is subject to the Open Software License (OSL 3.0)
8 * that is bundled with this package in the file LICENSE.md.
9 * It is also available through the world-wide-web at this URL:
10 * https://opensource.org/licenses/OSL-3.0
11 * If you did not receive a copy of the license and are unable to
12 * obtain it through the world-wide-web, please send an email
13 * to license@prestashop.com so we can send you a copy immediately.
14 *
15 * DISCLAIMER
16 *
17 * Do not edit or add to this file if you wish to upgrade PrestaShop to newer
18 * versions in the future. If you wish to customize PrestaShop for your
19 * needs please refer to https://devdocs.prestashop.com/ for more information.
20 *
21 * @author    PrestaShop SA and Contributors <contact@prestashop.com>
22 * @copyright Since 2007 PrestaShop SA and Contributors
23 * @license   https://opensource.org/licenses/OSL-3.0 Open Software License (OSL 3.0)
24 *#}
25<div class="row" id="combinations">
26  <div class="col-md-9">
27    <h2>
28      {{ 'Manage your product combinations'|trans({}, 'Admin.Catalog.Feature') }}
29      <span
30        class="help-box"
31        data-toggle="popover"
32        data-content="{{ "Combinations are the different variations of a product, with attributes like its size, weight or color taking different values. To create a combination, you need to create your product attributes first. Go to Catalog > Attributes & Features for this!"|trans({}, 'Admin.Catalog.Help') }}"
33      ></span>
34    </h2>
35    <div id="attributes-generator">
36      <div class="alert alert-info" role="alert">
37        <p class="alert-text">
38          {{ 'To add combinations, you first need to create proper attributes and values in [1]%attributes_and_features_label%[/1]. <br> When done, you may enter the wanted attributes (like "size" or "color") and their respective values ("XS", "red", "all", etc.) in the field below; or simply select them from the right column. Then click on "%generate_label%": it will automatically create all the combinations for you!'|trans({'%attributes_and_features_label%': 'Attributes & Features'|trans({}, 'Admin.Navigation.Menu'), '%generate_label%': 'Generate'|trans({}, 'Admin.Actions')}, 'Admin.Catalog.Help')|replace({'[1]': '<a class="alert-link" href=' ~ getAdminLink("AdminAttributesGroups") ~ ' target="_blank">', '[/1]': '</a>'})|raw }}
39        </p>
40      </div>
41      <div class="row">
42        <div class="col-xl-10 col-lg-9">
43          <fieldset class="form-group">
44            {{ form_errors(form.attributes) }}
45            {{ form_widget(form.attributes) }}
46          </fieldset>
47        </div>
48        <div class="col-xl-2 col-lg-3">
49          <button class="btn btn-outline-primary" id="create-combinations">
50            Generate
51          </button>
52        </div>
53      </div>
54    </div>
55
56    <div id="combinations-bulk-form">
57      <div class="row">
58        <div class="col-md-12">
59          <p
60            class="form-control bulk-action"
61            data-toggle="collapse"
62            href="#bulk-combinations-container"
63            aria-expanded="false"
64            aria-controls="bulk-combinations-container"
65          >
66            {# First tag [1] is number of combinations selected. Second tag [2] is the total of combinations available. #}
67            <strong>{{ 'Bulk actions ([1]/[2] combination(s) selected)'|trans({}, 'Admin.Catalog.Feature')|replace({ '[1]': '<span class="js-bulk-combinations">0</span>', '[2]': '<span id="js-bulk-combinations-total">' ~ combinations_count ~ '</span>' })|raw }}</strong>
68            <i class="material-icons float-right">keyboard_arrow_down</i>
69          </p>
70        </div>
71        <div class="col-md-12 collapse js-collapse" id="bulk-combinations-container">
72          <div class="border p-3">
73            {{ include('@Product/ProductPage/Forms/form_combinations_bulk.html.twig', { 'form': form_combination_bulk }) }}
74          </div>
75        </div>
76      </div>
77    </div>
78
79    <div class="combinations-list">
80      <table class="table">
81        <thead class="thead-default" id="combinations_thead" {% if not has_combinations %}style="display: none;"{% endif %}>
82          <tr>
83            <th>
84              <input type="checkbox" id="toggle-all-combinations" >
85            </th>
86            <th></th>
87            <th>{{ 'Combinations'|trans({}, 'Admin.Catalog.Feature') }}</th>
88            <th>{{ 'Impact on price (tax excl.)'|trans({}, 'Admin.Catalog.Feature') }}</th>
89            <th>{{ 'Final price (tax excl.)'|trans({}, 'Admin.Catalog.Feature') }}</th>
90            {% if configuration('PS_STOCK_MANAGEMENT') %}
91                <th>{{ 'Quantity'|trans({}, 'Admin.Catalog.Feature') }}</th>
92            {% endif %}
93            <th colspan="3" class="text-sm-right">{{ 'Default combination'|trans({}, 'Admin.Catalog.Feature') }}</th>
94          </tr>
95        </thead>
96        <tbody class="js-combinations-list panel-group accordion" id="accordion_combinations" data-action-delete-all="{{ path('admin_delete_all_attributes', { 'idProduct': 1 }) }}" data-weight-unit="{{ configuration('PS_WEIGHT_UNIT') }}" data-action-refresh-images="{{ path('admin_get_form_images_combination', { 'idProduct': 1 }) }}"  data-id-product= {{ id_product }} data-ids-product-attribute="{{ ids_product_attribute }}" data-combinations-url="{{ path('admin_combination_generate_form', { 'combinationIds': ':numbers' }) }}">
97          {% if has_combinations %}
98            <tr class="combination loading timeline-wrapper" id="loading-attribute">
99              <td class="timeline-item" width="1%">
100              </td>
101              <td class="timeline-item img">
102                <div class="animated-background"></div>
103              </td>
104              <td>
105                <div class="animated-background"></div>
106              </td>
107              <td class="attribute-price">
108                <div class="animated-background"></div>
109              </td>
110              <td class="attribute-finalprice">
111                <div class="animated-background"></div>
112              </td>
113              {% if configuration('PS_STOCK_MANAGEMENT') %}
114                <td class="attribute-quantity">
115                  <div class="animated-background"></div>
116                </td>
117              {% endif %}
118              <td colspan="6"></td>
119            </tr>
120          {% endif %}
121        </tbody>
122      </table>
123    </div>
124  </div>
125
126  <div id="attributes-list" class="col-md-3">
127    {% for attribute_group in attribute_groups %}
128      <div class="attribute-group">
129        <a
130          class="attribute-group-name {% if loop.index > 3 or has_combinations %} collapsed {% endif %}"
131          data-toggle="collapse"
132          href="#attribute-group-{{ attribute_group.id }}"
133          aria-expanded="{% if loop.index <= 3 or not has_combinations %}true{% else %}false{% endif %}"
134        >
135          {{ attribute_group.name }}
136        </a>
137        <div class="collapse {% if loop.index <= 3 and not has_combinations %} show {% endif %} attributes " id="attribute-group-{{ attribute_group.id }}">
138          <div class="attributes-overflow {% if attribute_group.attributes|length > 7 %} two-columns {% endif %}">
139            {% for attribute in attribute_group.attributes %}
140              <div class="attribute">
141                <input
142                  class="js-attribute-checkbox"
143                  id="attribute-{{ attribute.id }}"
144                  data-label="{{ attribute_group.name }} : {{ attribute.name }}"
145                  data-value="{{ attribute.id }}"
146                  data-group-id="{{ attribute_group.id }}"
147                  type="checkbox"
148                >
149                <label class="attribute-label" for="attribute-{{ attribute.id }}">
150                  <span
151                    class="pretty-checkbox {% if attribute.color is empty and attribute.texture is empty %} not-color {% endif %}"
152                    {% if attribute.texture is not empty %} style="content: url({{ attribute.texture }})"
153                    {% elseif attribute.color is not empty %} style="background-color: {{ attribute.color }}"
154                    {% endif %}
155                  >
156                  </span>
157                  {{ attribute.name }}
158                </label>
159              </div>
160            {% endfor %}
161          </div>
162        </div>
163      </div>
164    {% endfor %}
165  </div>
166</div>
167
168<div class="form-group">
169  <div class="row">
170
171    <div class="col-md-12">
172      <h2>{{ 'Availability preferences'|trans({}, 'Admin.Catalog.Feature') }}</h2>
173    </div>
174    {% if configuration('PS_STOCK_MANAGEMENT') %}
175      <div class="col-md-12">
176        <label class="form-control-label">{{ 'Behavior when out of stock'|trans({}, 'Admin.Catalog.Feature') }}</label>
177        {{ form_errors(form.out_of_stock) }}
178        {{ form_widget(form.out_of_stock) }}
179      </div>
180
181      <div class="col-md-4">
182        <label class="form-control-label">{{ form.available_now.vars.label }}</label>
183        {{ form_errors(form.available_now) }}
184        {{ form_widget(form.available_now) }}
185      </div>
186
187      <div class="col-md-4 ">
188        <label class="form-control-label">{{ form.available_later.vars.label }}</label>
189        {{ form_errors(form.available_later) }}
190        {{ form_widget(form.available_later) }}
191      </div>
192    {% else %}
193      <div class="col-md-12">
194        <h3>{{  'Stock management is disabled'|trans({}, 'Admin.Catalog.Feature') }}</h3>
195      </div>
196    {% endif %}
197
198    {% if not has_combinations %}
199    <div class="col-md-4 ">
200      <label class="form-control-label">{{ form.available_date.vars.label }}</label>
201      {{ form_errors(form.available_date) }}
202      {{ form_widget(form.available_date) }}
203    </div>
204    {% endif %}
205
206  </div>
207</div>
208