Module settings - basic information

The PShowAddToCart module lets you add non-intrusive, user-friendly notifications to your theme confirming that a product has been added to the cart.

Each notification has its own configuration. You can enable all notifications at once, but we recommend using just 1 chosen method.

In the module settings, 3 different methods for confirming a product has been added to the cart are available:

• Toast-type notification - "Toast Confirmation" section
• Notification as a PopUp panel - "Interactive PopUp" section
• Notification in the button - "Interactive Button" section

Notification methods

Toast Confirmation

Displays a small notification in the corner of the page with information about the added product. The notification can be closed manually or will close automatically. Setting a value in the "Time to hide toast (seconds)" field will make the notification close itself after the specified number of seconds. The customer can go to the cart by clicking the Toast

Interactive PopUp

After adding a product to the cart, a panel will slide out on the right side of the store. The panel contains a list of products and a cart summary. The customer can go directly to their cart or close the panel.

Interactive Button

This non-intrusive notification consists of interactive messages appearing directly on the "Add to cart" button. In the module settings you can choose the color of the animated gifs that will appear on the button.

The moment a product is added to the cart, the following content will appear in sequence on the button:

[ Add to cart ] > [ (i) Adding... ] > [ (i) Added ] > [ Add to cart ]

Confirmation of adding to the cart takes about 1.5 sec. Once the animation finishes, the button is ready to be clicked again.

Modifying the appearance and content of the notifications

The module settings contain a basic configuration for each notification method - you can change the colors and basic parameters.

To freely modify the appearance and content displayed in the notifications, you can edit the module's .tpl and .css files. We recommend creating the modified structure in your store's theme files:

• Toast Confirmation
• Interactive PopUp
  • The structure of the popup section's .tpl file can be modified in the file: views/templates/front/modal.tpl
• Interactive Button
  
  • The sections above can be modified in the file: views/js/front.js
  • If you want to change the loading icon to a different one, modify the file: views/templates/front/loader.tpl
• Shared CSS file
  • The shared CSS file is located at: views/css/front.css