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/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>

src/Resources/views/WishlistDetails/_collectiveActions.html.twig → 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 }}

src/Resources/views/WishlistDetails/_globalActions.html.twig → 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>

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

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

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>

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>

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>

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>

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>