OP-551: Add hookable templates

hmfilar · hmfilar · commit 1664db38a89a · 2025-02-18T12:35:57.000+01:00
diff --git a/src/Resources/views/Common/_removeFromWishlist.html.twig b/src/Resources/views/Common/_removeFromWishlist.html.twig
diff --git a/src/Resources/views/WishlistDetails/index/content/body/_item.html.twig b/src/Resources/views/WishlistDetails/index/content/body/_item.html.twig
diff --git a/src/Resources/views/WishlistDetails/index/content/body/form.html.twig b/src/Resources/views/WishlistDetails/index/content/body/form.html.twig
diff --git a/src/Resources/views/WishlistDetails/index/content/form.html.twig b/src/Resources/views/WishlistDetails/index/content/form.html.twig
@@ -3,30 +3,6 @@
 {% set wishlist = hookable_metadata.context.wishlist %}
 {% set form = hookable_metadata.context.form %}
 
-{% if sylius.channel is not null %}
-    {% set wishlists = findAllByAnonymousAndChannel(sylius.channel) %}
-{% else %}
-    {% set wishlists = findAllByAnonymous() %}
-{% endif %}
-
-{% if wishlists|length > 1 %}
-{% else %}
-    <div class="middle aligned column">
-        <button id="create_new_wishlist_button" class="ui right floated primary  button"
-                data-bb-wishlist-add="add-another-wishlist"
-                data-bb-wishlist-add-url="{{ path('bitbag_sylius_wishlist_plugin_shop_locale_wishlist_create_new_wishlist') }}"
-                data-bb-wishlist-add-title="{{ 'bitbag_sylius_wishlist_plugin.ui.wishlist_modal_add_title'|trans }}"
-                data-bb-wishlist-add-perform="{{ 'bitbag_sylius_wishlist_plugin.ui.wishlist_modal_add_perform'|trans }}"
-                data-bb-wishlist-add-cancel="{{ 'bitbag_sylius_wishlist_plugin.ui.wishlist_modal_add_cancel'|trans }}"
-                data-bb-wishlist-add-error="{{ 'bitbag_sylius_wishlist_plugin.ui.wishlist_modal_add_error'|trans }}"
-        >
-            {{ 'bitbag_sylius_wishlist_plugin.ui.add_another_wishlist'|trans }}
-        </button>
-        <input type="hidden" data-bb-csrf="{{ csrf_token('some-name') }}"/>
-    </div>
-{% endif %}
-<div class="ui hidden divider"></div>
-
 {% if wishlist.wishlistProducts.count > 0 %}
     <div class="middle aligned column">
         <a href="{{ path('bitbag_sylius_wishlist_plugin_shop_locale_wishlist_clean', {'wishlistId': wishlist.id}) }}" class="bitbag-clean-wishlist">
diff --git a/src/Resources/views/WishlistDetails/index/content/form/sections.html.twig b/src/Resources/views/WishlistDetails/index/content/form/sections.html.twig
@@ -0,0 +1,15 @@
+{% set wishlist = hookable_metadata.context.wishlist %}
+{% set form = hookable_metadata.context.form %}
+
+{% form_theme form '@SyliusShop/form/theme.html.twig' %}
+
+{{ form_start(form, { attr: { class: 'bb-wishlist ui form', id: "wishlist_form" } }) }}
+
+<div class="ui stackable" id="wishlist">
+    {% hook 'sections' with { form, wishlist } %}
+
+    <input type="hidden" data-bb-csrf="{{ csrf_token('some-name') }}"/>
+</div>
+
+{{ form_row(form._token) }}
+{{ form_end(form, {'render_rest': false} ) }}
diff --git a/src/Resources/views/WishlistDetails/index/content/form/sections/actions.html.twig b/src/Resources/views/WishlistDetails/index/content/form/sections/actions.html.twig
@@ -0,0 +1,6 @@
+{% set wishlist = hookable_metadata.context.wishlist %}
+{% set form = hookable_metadata.context.form %}
+
+<div class="bb-wishlist-actions">
+    {% hook 'actions' with { form, wishlist } %}
+</div>
diff --git a/src/Resources/views/WishlistDetails/index/content/form/sections/actions/collectiveActions.html.twig b/src/Resources/views/WishlistDetails/index/content/form/sections/actions/collectiveActions.html.twig
@@ -1,3 +1,5 @@
+{% set wishlist = hookable_metadata.context.wishlist %}
+
 {% if app.user %}
     {% set wishlists = findAllByShopUserAndToken(app.user) %}
 {% else %}
@@ -22,11 +24,11 @@
         {% if wishlists|length > 1 %}
             <div class="item wishlist-dropdown-menu__item">
                 <button type="button" class="ui green button wishlist-item--button" {{ sylius_test_html_attribute('wishlist-copy-to-wishlist') }}
-                        data-bb-wl-list-modal-target="choose-wishlist-button"
-                        data-bb-wl-list-modal-title="{{ 'bitbag_sylius_wishlist_plugin.ui.wishlist_modal_copy_title'|trans }}"
-                        data-bb-wl-list-modal-perform="{{ 'bitbag_sylius_wishlist_plugin.ui.wishlist_modal_copy_perform'|trans }}"
-                        data-bb-wl-list-modal-cancel="{{ 'bitbag_sylius_wishlist_plugin.ui.wishlist_modal_copy_cancel'|trans }}"
-                        data-bb-wl-list-modal-placeholder="{{ 'bitbag_sylius_wishlist_plugin.ui.wishlist_modal_placeholder'|trans }}"
+                    data-bb-wl-list-modal-target="choose-wishlist-button"
+                    data-bb-wl-list-modal-title="{{ 'bitbag_sylius_wishlist_plugin.ui.wishlist_modal_copy_title'|trans }}"
+                    data-bb-wl-list-modal-perform="{{ 'bitbag_sylius_wishlist_plugin.ui.wishlist_modal_copy_perform'|trans }}"
+                    data-bb-wl-list-modal-cancel="{{ 'bitbag_sylius_wishlist_plugin.ui.wishlist_modal_copy_cancel'|trans }}"
+                    data-bb-wl-list-modal-placeholder="{{ 'bitbag_sylius_wishlist_plugin.ui.wishlist_modal_placeholder'|trans }}"
                 >
                     <i class="copy icon"></i>
                     {{ 'bitbag_sylius_wishlist_plugin.ui.copy_to_wishlist'|trans }}
diff --git a/src/Resources/views/WishlistDetails/index/content/form/sections/actions/globalActions.html.twig b/src/Resources/views/WishlistDetails/index/content/form/sections/actions/globalActions.html.twig
@@ -1,3 +1,6 @@
+{% set form = hookable_metadata.context.form %}
+{% set wishlist = hookable_metadata.context.wishlist %}
+
 <a href="{{ path('bitbag_sylius_wishlist_plugin_shop_locale_wishlist_import_from_csv') }}">
     <button type="button" class="bb-wishlist-actions-import-button ui secondary button" {{ sylius_test_html_attribute('wishlist-import-from-csv') }}>
         <i class="cart icon"></i>
diff --git a/src/Resources/views/WishlistDetails/index/content/form/sections/items.html.twig b/src/Resources/views/WishlistDetails/index/content/form/sections/items.html.twig
@@ -0,0 +1,4 @@
+{% set wishlist = hookable_metadata.context.wishlist %}
+{% set form = hookable_metadata.context.form %}
+
+{% hook 'items' with { wishlist, form } %}
diff --git a/src/Resources/views/WishlistDetails/index/content/form/sections/items/body.html.twig b/src/Resources/views/WishlistDetails/index/content/form/sections/items/body.html.twig
@@ -0,0 +1,13 @@
+{% set wishlist = hookable_metadata.context.wishlist %}
+{% set form = hookable_metadata.context.form %}
+
+{% for item in form.items %}
+    {% set variant = item.vars.value.wishlistProduct.variant %}
+    {% set product = variant.product %}
+    {% set itemId = "wishlist_item_#{ variant.id }_#{ product.id }" %}
+
+    <div id="{{ itemId }}" class="bb-wishlist-item">
+        {% hook 'body' with { item, product, variant } %}
+    </div>
+    <input type="hidden" name="wishlist_collection[items][{{ loop.index - 1 }}][variant]" value="{{ item.vars.data.wishlistProduct.variant.id }}"/>
+{% endfor %}
diff --git a/src/Resources/views/WishlistDetails/index/content/form/sections/items/body/checkbox.html.twig b/src/Resources/views/WishlistDetails/index/content/form/sections/items/body/checkbox.html.twig
@@ -0,0 +1,6 @@
+{% set item = hookable_metadata.context.item %}
+{% set product = hookable_metadata.context.product %}
+
+<div class="bb-wishlist-item-select" data-bb-checkboxes="checkboxes-update-when-main">
+    {{ form_widget(item.selected, { id: product.name }) }}
+</div>
diff --git a/src/Resources/views/WishlistDetails/index/content/form/sections/items/body/image.html.twig b/src/Resources/views/WishlistDetails/index/content/form/sections/items/body/image.html.twig
@@ -0,0 +1,10 @@
+{% set product = hookable_metadata.context.product %}
+{% set variant = hookable_metadata.context.variant %}
+
+<div class="bb-wishlist-item-image">
+    {{ component('sylius_shop:main_image', {
+        product: variant.hasImages ? variant : product,
+        class: "w-100 h-100 object-fit-cover",
+        filter: 'sylius_shop_product_small_thumbnail'
+    }) }}
+</div>
diff --git a/src/Resources/views/WishlistDetails/index/content/form/sections/items/body/name.html.twig b/src/Resources/views/WishlistDetails/index/content/form/sections/items/body/name.html.twig
@@ -0,0 +1,8 @@
+{% set product = hookable_metadata.context.product %}
+{% set productUrl = path('sylius_shop_product_show', { slug: product.slug, _locale: product.translation.locale }) %}
+
+<div class="bb-wishlist-item-name">
+    <a href="{{ productUrl }}" {{ sylius_test_html_attribute('wishlist-item-name') }}>
+        {{ product.name }}
+    </a>
+</div>
diff --git a/src/Resources/views/WishlistDetails/index/content/form/sections/items/body/price.html.twig b/src/Resources/views/WishlistDetails/index/content/form/sections/items/body/price.html.twig
@@ -0,0 +1,12 @@
+{% import "@SyliusShop/shared/macro/money.html.twig" as money %}
+
+{% set product = hookable_metadata.context.product %}
+{% set variant = hookable_metadata.context.variant %}
+
+<div class="bb-wishlist-item-price">
+    {% if not product.variants.empty() %}
+        <b>
+            {{ money.calculatePrice(variant) }}
+        </b>
+    {% endif %}
+</div>
diff --git a/src/Resources/views/WishlistDetails/index/content/form/sections/items/body/quantity.html.twig b/src/Resources/views/WishlistDetails/index/content/form/sections/items/body/quantity.html.twig
@@ -0,0 +1,12 @@
+{% set item = hookable_metadata.context.item %}
+{% set product = hookable_metadata.context.product %}
+
+<div class="bb-wishlist-item-quantity" {{ sylius_test_html_attribute('wishlist-item-quantity') }}>
+    {{ form_widget(item.cartItem.cartItem.quantity, {
+        'attr': {
+            'min': 0,
+            'data-product-name': product.name,
+            'value': item.cartItem.cartItem.quantity.vars.value is same as("0") ? 1 : item.cartItem.cartItem.quantity.vars.value
+        }
+    }) }}
+</div>
diff --git a/src/Resources/views/WishlistDetails/index/content/form/sections/items/body/remove.html.twig b/src/Resources/views/WishlistDetails/index/content/form/sections/items/body/remove.html.twig
@@ -0,0 +1,15 @@
+{% set wishlist = hookable_metadata.context.wishlist %}
+{% set product = hookable_metadata.context.product %}
+{% set variant = hookable_metadata.context.variant %}
+
+<div class="bb-wishlist-item-actions">
+    <a
+        href="{{ path('bitbag_sylius_wishlist_plugin_shop_locale_wishlist_remove_product_variant', { wishlistId: wishlist.id, variantId: variant.id }) }}"
+        class="btn btn-icon btn-transparent"
+        data-product-name="{{ product.name }}"
+        data-tooltip="{{ 'bitbag_sylius_wishlist_plugin.ui.remove_from_wishlist'|trans }}"
+        {{ sylius_test_html_attribute('wishlist-remove-item') }}
+    >
+        {{ ux_icon('mdi:remove') }}
+    </a>
+</div>
diff --git a/src/Resources/views/WishlistDetails/index/content/form/sections/items/body/variant.html.twig b/src/Resources/views/WishlistDetails/index/content/form/sections/items/body/variant.html.twig
@@ -0,0 +1,14 @@
+{% set item = hookable_metadata.context.item %}
+
+<div class="bb-wishlist-item-variant">
+    {%  if item.cartItem.cartItem.variant is defined  %}
+        <div class="bb-wishlist-variant">
+            {% for child in item.cartItem.cartItem.variant.children %}
+                <div class="bb-wishlist-variant-option">
+                    {{ form_label(child, null, { label_attr: { class: 'bb-wishlist-variant-label'} } ) }}
+                    {{ form_widget(child, { attr: { class: 'bb-wishlist-variant-select', 'data-name': child.vars.name } } ) }}
+                </div>
+            {% endfor %}
+        </div>
+    {% endif %}
+</div>
diff --git a/src/Resources/views/WishlistDetails/index/content/form/sections/items/head.html.twig b/src/Resources/views/WishlistDetails/index/content/form/sections/items/head.html.twig
@@ -0,0 +1,3 @@
+<div class="bb-wishlist-item">
+    {% hook 'head' %}
+</div>
diff --git a/src/Resources/views/WishlistDetails/index/content/form/sections/items/head/actions.html.twig b/src/Resources/views/WishlistDetails/index/content/form/sections/items/head/actions.html.twig
@@ -0,0 +1,3 @@
+<div class="bb-wishlist-item-actions">
+    <span>{{ 'sylius.ui.actions'|trans }}</span>
+</div>
diff --git a/src/Resources/views/WishlistDetails/index/content/form/sections/items/head/image.html.twig b/src/Resources/views/WishlistDetails/index/content/form/sections/items/head/image.html.twig
@@ -0,0 +1,3 @@
+<div class="bb-wishlist-item-image">
+    <span>{{ 'sylius.ui.item'|trans }}</span>
+</div>
diff --git a/src/Resources/views/WishlistDetails/index/content/form/sections/items/head/price.html.twig b/src/Resources/views/WishlistDetails/index/content/form/sections/items/head/price.html.twig
@@ -0,0 +1,3 @@
+<div class="bb-wishlist-item-price">
+    <span>{{ 'sylius.ui.unit_price'|trans }}</span>
+</div>
diff --git a/src/Resources/views/WishlistDetails/index/content/form/sections/items/head/quantity.html.twig b/src/Resources/views/WishlistDetails/index/content/form/sections/items/head/quantity.html.twig
@@ -0,0 +1,3 @@
+<div class="bb-wishlist-item-quantity">
+    <span>{{ 'sylius.ui.qty'|trans }}</span>
+</div>
diff --git a/src/Resources/views/WishlistDetails/index/content/form/sections/items/head/selectAll.html.twig b/src/Resources/views/WishlistDetails/index/content/form/sections/items/head/selectAll.html.twig
@@ -0,0 +1,3 @@
+<div class="bb-wishlist-item-select">
+    <input type="checkbox" id="toggle-checkboxes" class="form-check-input">
+</div>
diff --git a/src/Resources/views/WishlistDetails/index/content/header.html.twig b/src/Resources/views/WishlistDetails/index/content/header.html.twig
@@ -1,8 +1,31 @@
 {% set wishlist = hookable_metadata.context.wishlist %}
+{% if sylius.channel is not null %}
+    {% set wishlists = findAllByAnonymousAndChannel(sylius.channel) %}
+{% else %}
+    {% set wishlists = findAllByAnonymous() %}
+{% endif %}
 
 <h1 class="ui header">
     <i class="circular heart icon"></i>
     <div class="content bb-wishlist-header">
         {{ wishlist.name }}
     </div>
 </h1>
+
+{% if wishlists|length > 1 %}
+{% else %}
+    <div class="middle aligned column">
+        <button id="create_new_wishlist_button" class="ui right floated primary  button"
+                data-bb-wishlist-add="add-another-wishlist"
+                data-bb-wishlist-add-url="{{ path('bitbag_sylius_wishlist_plugin_shop_locale_wishlist_create_new_wishlist') }}"
+                data-bb-wishlist-add-title="{{ 'bitbag_sylius_wishlist_plugin.ui.wishlist_modal_add_title'|trans }}"
+                data-bb-wishlist-add-perform="{{ 'bitbag_sylius_wishlist_plugin.ui.wishlist_modal_add_perform'|trans }}"
+                data-bb-wishlist-add-cancel="{{ 'bitbag_sylius_wishlist_plugin.ui.wishlist_modal_add_cancel'|trans }}"
+                data-bb-wishlist-add-error="{{ 'bitbag_sylius_wishlist_plugin.ui.wishlist_modal_add_error'|trans }}"
+        >
+            {{ 'bitbag_sylius_wishlist_plugin.ui.add_another_wishlist'|trans }}
+        </button>
+        <input type="hidden" data-bb-csrf="{{ csrf_token('some-name') }}"/>
+    </div>
+{% endif %}
+<div class="ui hidden divider"></div>
diff --git a/tests/Application/config/packages/twig_hooks.yaml b/tests/Application/config/packages/twig_hooks.yaml
