QuickReorder (optional)

Owned by Marta Siewierska-Stańczak
Dec 15, 2022
3 min read

https://github.com/magesuite/quick-reorder

This module introduces an easier way of reordering the whole last order or a selection of products from the previous orders. Both functionalities are available for logged-in users.

 

Installation

This module is optional

composer require "creativestyle/magesuite-quick-reorder" ^2.0.0

Admin settings

Latest purchased products

Admin settings for this functionality can be found in: Stores -> Configuration -> MageSuite -> Quick Reorder, in Latest purchased products tab.

Settings:

Name

Value

Note

Name

Value

Note

Show Latest Products Purchased in Customer Area

 Yes/No 

 

When enabled latest products purchased will be shown in customer area.

Display products from orders with status

Canceled/Closed/Complete/Pending/Processing  etc.

Select multiple statuses by pressing Ctrl button while selecting

Product count

Number

Number of products to display in the slider. When set to 0 it will display all products that were ever bought by customer.

 

Reorder banner

Admin settings for this functionality can be found in: Stores -> Configuration -> MageSuite -> Quick Reorder, in Reorder banner tab.

Settings:

Name

Value

Note

Name

Value

Note

Show Reorder Banner for Logged In Users

 

When enabled reorder banner will be shown at the top of page for logged in users.

Reorder Banner hide time

 

Set time in days to hide reorder banner after user closed it

Backend

Backend documentation is not yet prepared.

 

Frontend

Latest purchased products

The component is rendered at the top of the User Area pages. It reuses templates of CC headline and products-carousel components.

 

Customization:

Headline text can be customized via XML in: MageSuite_QuickReorder/layout/customer_account_index.xml

<argument xsi:type="string" name="headline_text" translate="true">Recently ordered products</argument>

Styling

Styling is provided in theme-creativeshop: theme-creativeshop/src/MageSuite_QuickReorder/web/css/latest-purchased-products.scss The module is optional and its styles must be imported in a child theme, in customer.ts entry

import 'MageSuite_QuickReorder/latest-purchased-products';

 

Reorder banner

The quick reorder banner is a small, sticky bar at the top of the page, It is generated by the script after customerData is fetched. The script for this feature is located in magesuite-quick-reorder/view/frontend/web/js/reorder-banner-widget.js and it introduce magesuite.reorderBanner widget.

The widget had the following options:

 

Reorder banner can be initialized only if:

  • the user has not closed the banner recently (with threshold set in days in the Admin panel, the default is 7)

  • the banner was not clicked during the current session.

If reorder banner can be initialized reorder-banner data is fetched from customerData, and the template (reorder-banner.html) filled with data is prepended to .page-wrapper.  When the banner is about to be shown for the first time in a current session there is a delay and a sliding animation to catch the user's attention.  The banner is not animated again anymore because it can be too annoying to the user. In the localStorage magesuite-reorder-banner-shown entry is set in order to store information that the banner was already shown with animation. Timeout is set to wait until assets are loaded and the browser is ready to display the transition smoothly.

Click on the X icon closes the banner and it is not shown it again in the current session - magesuite-reorder-banner-close entry is set in localStorage.

Hitting the reorder button submits reorder form and adds products to the cart. Then magesuite-reorder-banner-used entry is set and the banner is not shown the banner again (f.e. in the cart, on any PDP).

 

Styling

Styling is provided in theme-creativeshop: theme-creativeshop/src/MageSuite_QuickReorder/web/css/reorder-banner.scss The module is optional and its styles must be imported in a child theme, in customer.ts entry

 

Â