OP-551: Wishlist index view

src/Form/Type/AddProductsToCartType.php

@@ -54,6 +54,7 @@ public function buildForm(FormBuilderInterface $builder, array $options): void
                 ])
                 ->add('selected', CheckboxType::class, [
                     'required' => false,
+                    'label' => false,
                 ]);
         });
     }

src/Resources/assets/shop/js/WishlistVariantPrice.js

@@ -1,3 +1,4 @@
+//TODO adjust this to work with the new wishlist view
 export class WishlistVariantPrice {
     constructor(node) {
         if (node === null || !node.nodeType) throw new Error("The first parameter must be a NodeElement");

src/Resources/assets/shop/scss/pages/wishlist-details/_item.scss

@@ -76,11 +76,5 @@
             align-items: center;
             justify-content: center;
         }
-
-        > * {
-            span {
-                color: $lightgray;
-            }
-        }
     }
 }

src/Resources/config/config.yml

@@ -1,2 +1,3 @@
 imports:
     - { resource: "@BitBagSyliusWishlistPlugin/Resources/config/services.xml" }
+    - { resource: "@BitBagSyliusWishlistPlugin/Resources/config/twig_hooks/**/*.yaml" }

src/Resources/config/twig_hooks/shop/wishlist/index.yaml

@@ -0,0 +1,83 @@
+sylius_twig_hooks:
+    hooks:
+        'bitbag_sylius_wishlist_plugin.wishlist.index':
+            content:
+                template: "@BitBagSyliusWishlistPlugin/WishlistDetails/index/content.html.twig"
+                priority: 0
+
+        'bitbag_sylius_wishlist_plugin.wishlist.index.content':
+            header:
+                template: "@BitBagSyliusWishlistPlugin/WishlistDetails/index/content/header.html.twig"
+                priority: 100
+            form:
+                template: "@BitBagSyliusWishlistPlugin/WishlistDetails/index/content/form.html.twig"
+                priority: 90
+
+        'bitbag_sylius_wishlist_plugin.wishlist.index.content.form':
+            form:
+                template: "@BitBagSyliusWishlistPlugin/WishlistDetails/index/content/form/sections.html.twig"
+                priority: 0
+
+        'bitbag_sylius_wishlist_plugin.wishlist.index.content.form.sections':
+            items:
+                template: "@BitBagSyliusWishlistPlugin/WishlistDetails/index/content/form/sections/items.html.twig"
+                priority: 100
+            actions:
+                template: "@BitBagSyliusWishlistPlugin/WishlistDetails/index/content/form/sections/actions.html.twig"
+                priority: 90
+
+        'bitbag_sylius_wishlist_plugin.wishlist.index.content.form.sections.actions':
+            collective_actions:
+                template: "@BitBagSyliusWishlistPlugin/WishlistDetails/index/content/form/sections/actions/collectiveActions.html.twig"
+                priority: 100
+            global_actions:
+                template: "@BitBagSyliusWishlistPlugin/WishlistDetails/index/content/form/sections/actions/globalActions.html.twig"
+                priority: 90
+
+        'bitbag_sylius_wishlist_plugin.wishlist.index.content.form.sections.items':
+            head:
+                template: "@BitBagSyliusWishlistPlugin/WishlistDetails/index/content/form/sections/items/head.html.twig"
+                priority: 100
+            body:
+                template: "@BitBagSyliusWishlistPlugin/WishlistDetails/index/content/form/sections/items/body.html.twig"
+                priority: 90
+
+        'bitbag_sylius_wishlist_plugin.wishlist.index.content.form.sections.items.head':
+            select_all:
+                template: "@BitBagSyliusWishlistPlugin/WishlistDetails/index/content/form/sections/items/head/selectAll.html.twig"
+                priority: 100
+            image:
+                template: "@BitBagSyliusWishlistPlugin/WishlistDetails/index/content/form/sections/items/head/image.html.twig"
+                priority: 90
+            price:
+                template: "@BitBagSyliusWishlistPlugin/WishlistDetails/index/content/form/sections/items/head/price.html.twig"
+                priority: 80
+            quantity:
+                template: "@BitBagSyliusWishlistPlugin/WishlistDetails/index/content/form/sections/items/head/quantity.html.twig"
+                priority: 70
+            actions:
+                template: "@BitBagSyliusWishlistPlugin/WishlistDetails/index/content/form/sections/items/head/actions.html.twig"
+                priority: 60
+
+        'bitbag_sylius_wishlist_plugin.wishlist.index.content.form.sections.items.body':
+            checkbox:
+                template: "@BitBagSyliusWishlistPlugin/WishlistDetails/index/content/form/sections/items/body/checkbox.html.twig"
+                priority: 100
+            image:
+                template: "@BitBagSyliusWishlistPlugin/WishlistDetails/index/content/form/sections/items/body/image.html.twig"
+                priority: 90
+            name:
+                template: "@BitBagSyliusWishlistPlugin/WishlistDetails/index/content/form/sections/items/body/name.html.twig"
+                priority: 80
+            variant:
+                template: "@BitBagSyliusWishlistPlugin/WishlistDetails/index/content/form/sections/items/body/variant.html.twig"
+                priority: 80
+            price:
+                template: "@BitBagSyliusWishlistPlugin/WishlistDetails/index/content/form/sections/items/body/price.html.twig"
+                priority: 70
+            quantity:
+                template: "@BitBagSyliusWishlistPlugin/WishlistDetails/index/content/form/sections/items/body/quantity.html.twig"
+                priority: 60
+            remove:
+                template: "@BitBagSyliusWishlistPlugin/WishlistDetails/index/content/form/sections/items/body/remove.html.twig"
+                priority: 50

src/Resources/config/twig_hooks/shop/wishlist/layout.yaml

@@ -0,0 +1,13 @@
+sylius_twig_hooks:
+    hooks:
+        'sylius_shop.base.header.content':
+            wishlist_header:
+                template: "@BitBagSyliusWishlistPlugin/_wishlist_header.html.twig"
+                priority: 150
+
+# TODO find the right way to extend product box's content
+#sylius.shop.product.index.box:
+#            blocks:
+#                content:
+#                    template: "@BitBagSyliusWishlistPlugin/Product/Box/_content.html.twig"
+#                    priority: 10

src/Resources/views/Product/Box/_content.html.twig

@@ -1,4 +1,4 @@
-{% import "@SyliusShop/Common/Macro/money.html.twig" as money %}
+{% import "@SyliusShop/shared/macro/money.html.twig" as money %}
 
 <div class="ui fluid card">
     <a href="{{ path('sylius_shop_product_show', {'slug': product.slug, '_locale': product.translation.locale}) }}"

src/Resources/views/WishlistDetails/index.html.twig

@@ -1,96 +1,9 @@
 {% extends '@SyliusShop/shared/layout/base.html.twig' %}
 
-{% import '@SyliusShop/shared/messages.html.twig' as messages %}
+{% set prefixes = ['bitbag_sylius_wishlist_plugin.wishlist'] %}
 
 {% block title %}{{ 'bitbag_sylius_wishlist_plugin.ui.your_wishlist'|trans }} | {{ parent() }}{% endblock %}
 
 {% block content %}
-    <h1 class="ui header">
-        <i class="circular heart icon"></i>
-        <div class="content bb-wishlist-header">
-            {{ wishlist.name }}
-        </div>
-    </h1>
-    {% 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">
-                <i class="icon remove"></i>{{ 'bitbag_sylius_wishlist_plugin.ui.clear_wishlist'|trans }}
-            </a>
-        </div>
-
-        <div class="ui hidden divider"></div>
-
-        {{ form_start(form, { attr: { class: 'bb-wishlist ui form', id: "wishlist_form" } }) }}
-
-        <div class="ui stackable" id="wishlist">
-
-            <div class="bb-wishlist-item">
-                <div class="bb-wishlist-item-select">
-                    <input type="checkbox" id="toggle-checkboxes" class="bb-wishlist-item-select-checkbox">
-                </div>
-                <div class="bb-wishlist-item-image">
-                    <span>{{ 'sylius.ui.item'|trans }}</span>
-                </div>
-                <div class="bb-wishlist-item-price">
-                    <span>{{ 'sylius.ui.unit_price'|trans }}</span>
-                </div>
-                <div class="bb-wishlist-item-quantity">
-                    <span>{{ 'sylius.ui.qty'|trans }}</span>
-                </div>
-                <div class="bb-wishlist-item-actions">
-                    <span>{{ 'sylius.ui.actions'|trans }}</span>
-                </div>
-            </div>
-
-            {% for itemForm in form.items %}
-                {% include "@BitBagSyliusWishlistPlugin/WishlistDetails/_item.html.twig" %}
-                <input type="hidden" name="wishlist_collection[items][{{ loop.index - 1 }}][variant]" value="{{ itemForm.vars.data.wishlistProduct.variant.id }}"/>
-            {% endfor %}
-
-            <div class="bb-wishlist-actions">
-                {% include "@BitBagSyliusWishlistPlugin/WishlistDetails/_collectiveActions.html.twig" %}
-                {% include "@BitBagSyliusWishlistPlugin/WishlistDetails/_globalActions.html.twig" %}
-            </div>
-            <input type="hidden" data-bb-csrf="{{ csrf_token('some-name') }}"/>
-        </div>
-
-        {{ form_row(form._token) }}
-        {{ form_end(form, {'render_rest': false} ) }}
-    {% else %}
-        <div class="ui one column stackable grid">
-            <div class="column">
-                {{ messages.info('bitbag_sylius_wishlist_plugin.ui.your_wishlist_is_empty'|trans) }}
-            </div>
-            <a href="{{ path('bitbag_sylius_wishlist_plugin_shop_locale_wishlist_import_from_csv') }}">
-                <button type="button" class="ui secondary button bb-wishlist-actions-import-button" {{ sylius_test_html_attribute('wishlist-import-from-csv') }}>
-                    <i class="cart icon"></i>
-                    {{ 'bitbag_sylius_wishlist_plugin.ui.import_from_csv'|trans }}
-                </button>
-            </a>
-        </div>
-    {% endif %}
-
+    {% hook 'index' with { _prefixes: prefixes, wishlist, form } %}
 {% endblock %}

src/Resources/views/WishlistDetails/index/content.html.twig

@@ -0,0 +1,6 @@
+{% set wishlist = hookable_metadata.context.wishlist %}
+{% set form = hookable_metadata.context.form %}
+
+<div class="container mt-4 mb-5">
+    {% hook 'content' with { wishlist, form } %}
+</div>

src/Resources/views/WishlistDetails/index/content/form.html.twig

@@ -0,0 +1,28 @@
+{% import '@SyliusShop/shared/messages.html.twig' as messages %}
+
+{% set wishlist = hookable_metadata.context.wishlist %}
+{% set form = hookable_metadata.context.form %}
+
+{% 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">
+            <i class="icon remove"></i>{{ 'bitbag_sylius_wishlist_plugin.ui.clear_wishlist'|trans }}
+        </a>
+    </div>
+
+    <div class="ui hidden divider"></div>
+
+    {% hook 'form' with { wishlist, form } %}
+{% else %}
+    <div class="ui one column stackable grid">
+        <div class="column">
+            {{ messages.info('bitbag_sylius_wishlist_plugin.ui.your_wishlist_is_empty'|trans) }}
+        </div>
+        <a href="{{ path('bitbag_sylius_wishlist_plugin_shop_locale_wishlist_import_from_csv') }}">
+            <button type="button" class="ui secondary button bb-wishlist-actions-import-button" {{ sylius_test_html_attribute('wishlist-import-from-csv') }}>
+                <i class="cart icon"></i>
+                {{ 'bitbag_sylius_wishlist_plugin.ui.import_from_csv'|trans }}
+            </button>
+        </a>
+    </div>
+{% endif %}

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} ) }}

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>