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/views/Common/_removeFromWishlist.html.twig

@@ -1,9 +1,9 @@
 <a
     href="{{ path('bitbag_sylius_wishlist_plugin_shop_locale_wishlist_remove_product_variant', { wishlistId: wishlist.id, variantId: variant.id }) }}"
-    class="ui circular icon button"
+    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') }}
 >
-    <i class="icon remove"></i>
+    {{ ux_icon('mdi:remove') }}
 </a>

src/Resources/views/Common/price.html.twig

@@ -0,0 +1,10 @@
+<div class="mb-2" {{ attributes }}>
+    <div>
+        <div {{ sylius_test_html_attribute('product-price', price) }}>{{ price }}</div>
+        {% if has_discount %}
+            <div {{ sylius_test_html_attribute('product-original-price', original_price) }}>
+                <del>{{ original_price }}</del>
+            </div>
+        {% endif %}
+    </div>
+</div>

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

@@ -1,4 +1,4 @@
-{% import "@SyliusShop/Common/Macro/money.html.twig" as money %}
+{% import "@SyliusCore/Common/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/body.html.twig

@@ -0,0 +1,52 @@
+{% import '@SyliusShop/shared/messages.html.twig' as messages %}
+
+{% 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">
+            <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/_item.html.twig → src/Resources/views/WishlistDetails/index/content/body/_item.html.twig

@@ -12,7 +12,11 @@
     </div>
 
     <div class="bb-wishlist-item-image">
-        {% include '@SyliusShop/Product/_mainImage.html.twig' %}
+        {{ 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>
 
     <div class="bb-wishlist-item-name">
@@ -36,7 +40,10 @@
 
     <div class="bb-wishlist-item-price">
         {% if not product.variants.empty() %}
-            {% include '@BitBagSyliusWishlistPlugin/WishlistDetails/_variantPrice.html.twig' %}
+            {{ component('sylius_shop:product:price', {
+                'variant': variant,
+                'template': '@BitBagSyliusWishlistPlugin/Common/price.html.twig'
+            }) }}
         {% endif %}
     </div>
 
@@ -53,7 +60,4 @@
     <div class="bb-wishlist-item-actions">
         {% include '@BitBagSyliusWishlistPlugin/Common/_removeFromWishlist.html.twig' %}
     </div>
-
-    {{ sonata_block_render_event('sylius.shop.product.index.after_box', {'product': product}) }}
-
 </div>

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

@@ -0,0 +1,41 @@
+{% 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">
+
+    <div class="bb-wishlist-item">
+        <div class="bb-wishlist-item-select">
+            <input type="checkbox" id="toggle-checkboxes" class="form-check-input">
+        </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/index/content/body/_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/index/content/body/_collectiveActions.html.twig" %}
+        {% include "@BitBagSyliusWishlistPlugin/WishlistDetails/index/content/body/_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} ) }}

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

@@ -0,0 +1,8 @@
+{% set wishlist = hookable_metadata.context.wishlist %}
+
+<h1 class="ui header">
+    <i class="circular heart icon"></i>
+    <div class="content bb-wishlist-header">
+        {{ wishlist.name }}
+    </div>
+</h1>

src/Resources/views/_wishlist_pdf.html.twig

@@ -1,4 +1,4 @@
-{% import "@SyliusShop/Common/Macro/money.html.twig" as money %}
+{% import "@SyliusCore/Common/Macro/money.html.twig" as money %}
 <!DOCTYPE html>
 <html>
 <head>
@@ -41,4 +41,4 @@
     </tbody>
 </table>
 </body>
-</html>
+</html>

tests/Application/config/packages/twig_hooks.yaml

@@ -16,6 +16,24 @@ sylius_twig_hooks:
             app_javascripts:
                 template: "shop/javascripts.html.twig"
 
+        '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
+            body:
+                template: "@BitBagSyliusWishlistPlugin/WishlistDetails/index/content/body.html.twig"
+                priority: 90
+
+        'bitbag_sylius_wishlist_plugin.wishlist.index.content.form':
+            form:
+                template: "@BitBagSyliusWishlistPlugin/WishlistDetails/index/content/body/form.html.twig"
+                priority: 0
+
         'sylius_shop.base.header.content':
             wishlist_header:
                 template: "@BitBagSyliusWishlistPlugin/_wishlist_header.html.twig"