Orocommerce Frontend: How to modify add-to-shoppinglist-button?

Hi there,

could not find my thread from today morning …? May be I missed to finalize it correctly, though I have to apologize in advance, if this would be a duplicate (please delete it then).

My aim is, to modify add-to-shoppinglist-buttons on frontend for loggedIn users in the following way (examples should illustrate my goal):
– remove action ‘delete’ from buttons of a specific product-category
– add some custom action to buttons from products, which are in current shoppinglist
– rename buttons und actions depending on their product properties
– colorize buttons depending on their product properties

It is a little bit tricky, because buttons are rendered in different ways:
1) calling a page, displaying psome products (list, grid …)
2) Ajax-Refreshing a product item including its add-to-shoppinglist-button after clicking this button

I did not find the appropriate approach to solve this in my custom bundle (nothing in docs?).

Could you be so kind, and give me some recommendation, how to start?

Thanks a lot.

Kind regards from Germany
Frank

Topic

[Hryhorii HrebiniukParticipant]

Hello,

As far as I understood, it all can be done over layout update. Here’s the example how to add custom button in depends on product properties:
https://github.com/oroinc/orocommerce/blob/a711616/src/Oro/Bundle/RFPBundle/Resources/views/layouts/blank/oro_product_frontend_product_view/layout.yml#L14-L21

To remove button, use “@remove” action for a block, with condition
https://github.com/oroinc/platform/blob/d9c2a22/src/Oro/Bundle/LayoutBundle/Resources/doc/layout_update.md#actions
https://github.com/oroinc/platform/blob/d9c2a22/src/Oro/Bundle/LayoutBundle/Resources/doc/layout_update.md#conditions

But these actions might not be sufficient. Have asked my colleague to provide you expanded answer.

With best regards from Ukraine

[FrankParticipant]

Hi Hryhorii,

thanks for your suggestion. I tried to use it, but, however stucks as at the beginning. Layout is one thing – data delivered to the layout the other. I think, my problem is a data problem … ?!

To find a solution for a real case, let us work with the following
(see screeshot-links on snaggy below):

# Starting point in MyCustomShoppingListBundle:
Product-entity has a custom property, for example ‘COLOR’, which may be equal ‘yellow’ or ‘blue’.
A shopping list can contain only yellow products, or blue ones.
So, everytime a guest-user adds a product to shopping list, my script is checking the product color first, and creates a new shopping list automatically, if there does not yet exist a shopping list with the given color.
That means, multiple shopping lists are allowed for a guest user. The maximum of shipping lists is identical to the number of colors allowed – in our example 2.

# Real situation:
A guest user has created 2 shoppinglists (No 52 [yellow products], and No 54 [blue products]), current one is No 52.
Shopping list widget shows 2 shopping lists 52, 54.
Shopping list buttons in the product grid have actions add/remove to/from 52/54.

# The goal is:

1. to modify a product’s shopping-list button as follows:

a. The product is of yellow color, and not in one of the 2 shopping lists contained

> Button actions
Now: – ‘Add to 52’
– ‘Add to 54’
To: – ‘Add to 52’ – 54-action must be removed, as a yellow product can be added to 52 only!

b. The product is of yellow color, and has been added to 52 shopping list earlier

> Button actions
Now: – ‘Remove from 52’
– ‘Add to 54’
To: – ‘Remove from 52’ – 54-action must be removed, as a yellow product can be added to 52 only!

c. The product is of blue color, and has been added to 54 shopping list earlier

> Button actions
Now: – ‘Add to 52’
– ‘Add to 54’
To: – ‘Add to 52’ – 54-action must be removed, as a yellow product can be added to 52 only!

2. to show the correct (colored) ‘IS-IN-SHOPPINGLIST’ div-container in the product tile of a grid.

Now: – div-container is green, and shown for current shopping list 52, only
To: – div-container should be shown,
not only for current shopping list (52 – yellow div-container),
but also, if the product is in the other shopping list (54 – blue div-container)

Both goals are depending how the data flows into the layout.

An additional problem for me is, that the shopping list buttons are rendered once again after page has been loaded, or after add-to-shopping-cart event.
I think this is done by
OroShoppingListBundle/Resources/public/js/app/views/product-add-to-shopping-list-view.js
However, if I delete all the code from product-add-to-shopping-list-view.js using an empty
define(function(require) { ‘use strict’; return; }) function loading page-loading and rerendering still works fine.
That means at least rerendering after page loading is driven by another script then the mentioned one.
(I am still very weak in Javascript OO.)

# Lst not least the ‘NOW’-screenshots:
https://snag.gy/LAfSPy.jpg
https://snag.gy/BlRW5H.jpg
https://snag.gy/J54RGV.jpg

Hope, this not too much .. (is always boring).

Would be very happy for any help!

Kind regards to the Ukraine from Germany
Frank

[FrankParticipant]

Hello Oro-Team,

what I found out meanwhile (please correct me, if this is not true):

Rendering of the AddToShopping-List-Buttons is realized in several layers:
On page-load:
1) ‘Draft’
2) Some JS-Adjustment with respect to product-properties (productShoppingLists)
3) Final JS-Rendering according to productGrid.
After AddToShoppingListButton-Click/ or changing current ShoppingList-Status:
4) JS-Rendering ProductGrid incl. ShoppingListWidget and Buttons

Scripts, playing a role in these steps are:
a) OroShoppingListBundle/Layout/DataProvider/CustomerUserShoppingListsProvider::
getShoppingLists(),
which is called 7 times!!!
b) OroShoppingListBundle/Resources/views/ShoppingList/Frontend/buttons.html.twig
c) OroShoppingListBundle/Resources/views/layouts/blank/imports/shopping_list_buttons.html.twig
OroShoppingListBundle/Resources/views/layouts/blank/imports/shopping_list_buttons.yml
d) OroShoppingListBundle/Resources/public/js/app/views/product-add-to-shopping-list-view.js

QUESTIONS:
1) Could you be so kind, and give me some more informations about those scripts, how they are playing together (I think, I have listed not all necessary)?
2) Do I have to prepare data-supply for the AddToShoppingListButtons for all 4 layers above seperately, or can I handle this on one place, in a central manner? How I can do this?

Thanks a lot
Kind regrads
Frank

 

 

 

 

[Author]

Replies