bloatfish social proof notifications user guide · social proof notifications can be used to show...
TRANSCRIPT
Copyright © 2020. Orhan Cakici.
BLOATFISH
SOCIAL PROOF NOTIFICATIONS
USER GUIDE
Written by Orhan Cakici
Copyright © 2020. Orhan Cakici.
1. Description
Social Proof Notifications can be used to show how lively and interactive your store is through the actions of
other customers. You can show how popular and in demand your products are by displaying notifications of
how many visitors are viewing a product at the same time and how many products you have sold.
The notifications will create a sense of urgency to visitors, seeing how popular a product is will create a fear of
missing out. In return this will increase your conversion rate, customer engagement and showing potential
customers your brand and products can be trusted. Social Proof Notifications can be a very valuable
marketing tool for new and growing businesses to attract new customers.
Live Notification
Shows how many customers are viewing the same product at the same time.
Viewed Notification
Shows how many customers have viewed the same product. By default the extension is configured to display
number of visitors who viewed a product in the past 24 hours.
Orders Notification
Shows how many orders have been placed. By default the extension is configured to show number of orders
placed for a product in the past 48 hours.
This extension is very non-developer friendly to use, it comes with default configuration options so you don’t
have to mess around with the settings to get it to work, all you need to do is enable the module and each
notification type you want to display. There are extensive range of options that you can use to change the
style and display behavior of each notification type, they are very easy to understand through descriptive
descriptions on the extension’s configuration page and through this user guide.
You don’t have to sign up for any external services that charge expensive monthly subscriptions for similar
social proof experiences. You only need to purchase this extension once and all future updates are free. This
extension is self-contained, customer information gathered is only stored on your site's Magento database
and is not shared with any other services.
2. Features
● Show your most popular and purchased products through the actions of others and help increase your
conversion rate.
● Basic and advanced CSS support for non-developers, style each notification as you like via the
extension’s admin page.
● Extensive range of configuration options for each notification type, this includes layout, content,
animation, styling and conditions.
● No need to sign up for external services.
● Developer friendly and extendable through the use of service contracts.
Copyright © 2020. Orhan Cakici.
3. Enabling and accessing the Extension
After you have successfully installed the extension and flushed the cache, you will need to enable it.
3.1. Enable the Extension
From the admin backend,
select Stores > Configuration.
The Social Proof Notifications Extension is located under the
“BLOATFISH EXTENSIONS” tab.
Copyright © 2020. Orhan Cakici.
Select “Yes” for field Enable Module. The General section has useful information regarding the extension, the
current version you have installed and the latest version available.
3.2. Access the Extension
The location where the extension
resides has changed as of version
1.3.0. You can now access the
extension from Stores >Social Proof
Notifications.
Copyright © 2020. Orhan Cakici.
This is the main page of the extension, it lists the type of Notifications the extension providers and which
pages they’re available in. As of version 1.3.0, Notifications (Live, Viewed & Orders) are available on the
Catalog Product page.
If you want to edit the configurations of the notifications on the “Catalog Product” page, click on the “Edit”
button under the column “Action”. By default, all Notifications on a page type (in this case Catalog Product)
are disabled.
3.3. Enable Notifications
To enable Notifications on the Catalog Product Page, expand the Notifications section and then expand each
section labelled as Live, Viewed & Orders.
You decide which Notification types you want to enable, after making changes make sure to save and clear all
invalidated cache types.
Copyright © 2020. Orhan Cakici.
4. Layout
Visit a product page, after the page loads you will see the Notifications you have enabled appear (if the
defined conditions for each notification is true) fixed to the bottom right of the page. This is the location where
notifications are styled and positioned to appear by default.
You change the position of where Notifications appear on a product page, as of version 1.2.0 there are five
positions:
• Fixed to Window (Fixed to the browser window, will always remain in the same position on the
page no matter where you scroll and is above everything)
• Fixed to Media (Fixed to “Media” container)
• Fixed to Info Main (Fixed to “Info Main” container)
• Price After (Appended after the “Price” container)
• AddToCart After (Appended after the “AddToCart” container)
Copyright © 2020. Orhan Cakici.
Layout > Position
Fixed to Media
Notifications are fixed within the “Media” container
Copyright © 2020. Orhan Cakici.
Fixed to Info Main
Notifications are fixed within the “Info Main” container
The positions of “Price After” and “AddToCart After” is different depending on your theme and product type.
Below are screenshots of every default product type supported in Magento 2 Open Source, they highlight on a
product page where these positions are designated in the default Magento 2 Luma theme. If you’re using a
heavily modified theme where the location of layout blocks/containers are radically different from the Luma
theme, the position you might select could be different from the one shown on the screenshots, its best you
test on a development environment before applying on live.
If you’re a developer or know your way around the Magento 2 codebase you can change where the
Notifications are outputted. More information on how to do this can be found in the Magento 2 docs.
Copyright © 2020. Orhan Cakici.
Configurable Product
Simple Product
ADDTOCART AFTER
PRICE AFTER
ADDTOCART AFTER
PRICE AFTER
Copyright © 2020. Orhan Cakici.
Bundled Product
Grouped Product
ADDTOCART AFTER
PRICE AFTER
ADDTOCART AFTER
PRICE AFTER
Copyright © 2020. Orhan Cakici.
Downloadable Product
Virtual Product
ADDTOCART AFTER
PRICE AFTER
ADDTOCART AFTER
PRICE AFTER
Copyright © 2020. Orhan Cakici.
5. Styles
You can change or extend the built-in styles through the extension's configurations or through your theme.
There are two “Edit Mode” options to choose from to make changes to the default styles, those are “Basic”
and “Advanced”.
5.1. Basic Styles
Using basic styles is the least customizable option but the safest method for those who are not familiar with
CSS syntax.
You can change the following color options for Notifications:
● Text
● Background
● Border
Social Proof Notifications uses the Pickr Javascript color picker library to power the picking functionality. Click
on the square block next to a “Color” option to activate the color picker. You can select the color you like by
using the sliders, or you can enter a HEX/RGBA value. Once you’re happy with your changes click on the
“Save” button.
Copyright © 2020. Orhan Cakici.
Entering a HEX value will automatically convert it to a RGBA value as seen in the text field next to the color
picker box, this is the color model used on the frontend.
5.2. Advanced Styles
Using the advanced styles option will give you more control over the styles of your Notifications, without
having to make changes through your theme’s stylesheets. It is highly recommended that you have basic
CSS syntax knowledge, or any invalid changes you make will result in your Notifications not appearing on the
frontend.
There are five CSS editor fields for Notification styles:
● Parent Container - The parent container which contains all Notification types.
● All Notifications - Applied to each Notification.
● Live Notifications - Only applied to Live Notifications
● Viewed Notifications - Only applied to Viewed Notifications
● Orders Notifications - Only applied to Order Notifications
Copyright © 2020. Orhan Cakici.
Each CSS editor field represents a CSS ruleset, you won’t be able to edit/remove the first or last line in a
ruleset as it is crucial for a valid CSS syntax. The first line is a selector which targets the element the styles
will be applied to. You can only make changes or additions to existing CSS declarations between the first and
last lines. You can read more about CSS syntax from the W3School website. The CSS editors are powered
by the CodeMirror Javascript library.
The CSS editor fields don’t display all the styles that are applied on the frontend, there are some required
styles which you cannot modify or remove as its essential for the powering of the Notifications. With new
features added, the required styles get updated with each new release. As of now required styles cannot be
personalised through the extension’s configuration.
Copyright © 2020. Orhan Cakici.
Below is a code output of the required styles used on the frontend:
#bloatfish-socialproofnotifications-container { pointer-events: none; } #bloatfish-socialproofnotifications-container > * { opacity: 0; } #bloatfish-socialproofnotifications-container .text { width: 100%; } #bloatfish-socialproofnotifications-container .icon { max-width: none; margin-right: 10px; } #bloatfish-socialproofnotifications-container .container-inner { display: flex; align-items: center; } .catalog-product-view .product-info-main, .catalog-product-view .product.media { position: relative; } #bloatfish-spn-product-fixed-window #bloatfish-socialproofnotifications-container { position: fixed; } #bloatfish-spn-product-fixed-media #bloatfish-socialproofnotifications-container, #bloatfish-spn-product-fixed-infomain #bloatfish-socialproofnotifications-container { position: absolute; } #bloatfish-spn-product-price-after #bloatfish-socialproofnotifications-container, #bloatfish-spn-product-addtocart-after #bloatfish-socialproofnotifications-container { position: static; } @keyframes socialProofNotificationsFadeIn { from { opacity: 0; } to { opacity: 1; } } @keyframes socialProofNotificationsFadeOut { from { opacity: 1; } to { opacity: 0; } }
Copyright © 2020. Orhan Cakici.
6. Animation
You can specify the speed, duration and delay options for each Notification type through the extension's
configurations. Currently the only supported animation type is linear fade in and fade out.
Speed
Set Notification show/hide speed (in seconds). The higher the value the slower a Notification fades in and
fades out.
Show
Show Notification(s) x seconds after they've been loaded on a product page. You can set a single value to
apply to all Notifications or a value for each Notification separated by a comma. Notifications are in the order
of Live, Viewed, Orders.
For example, entering "2" will show all Notifications after 2 seconds. Entering "0" will all Notifications instantly
after they're loaded. You can also set a value for each Notification. For example, entering "2,4,6" will show
Live Notification after 2 seconds, Viewed Notification after 4 seconds and Orders Notification after 6 seconds.
Duration
The length of time in seconds Notifications are visible.
For example, entering "4" will display all Notifications for 4 seconds and then fade out. If you have entered in
the "Show" field a value of "0", then all Notifications will appear immediately (0 seconds) after being loaded
and stay visible for the length of time specified in this field. Set value to "0" to always show.
7. Notification Configurations
All Notifications
Minimum Count
Show Notification if count is over the set minimum. Setting the value as "0" will not set a minimum threshold.
Icon
Upload image to use as an icon. Supported file types: jpg, jpeg, gif, png, svg.
Copyright © 2020. Orhan Cakici.
CSS Styles
Styles will be applied to the Live/Viewed/Orders Notification.
Live Notification
Singular Display Text
Set the singular text you want to display if count is one. The only allowed digit is "1".
Plural Display Text
Set the plural text you want to display if count is more than one.
{{count}} placeholder will be rendered as the actual count.
Viewed Notification
Period
Set the period of time (hour) a product was viewed. Minimum value is "1" hour, maximum value "168" hours.
The default value is "24" hours. The Viewed Notification will show how many visitors viewed a product in the
past 24 hours.
Orders Notification
Period
Period of time (hour) orders were placed. Minimum value is "1" hour, maximum value "168" hours.
The default value is "48" hours. The Orders Notification will show how many orders were placed for a product
in past 48 hours.
Live & Viewed Notifications
Minus Current User
When a visitor views a product, they are added to the count total, setting this config to "Yes" will minus 1 from
the count total.
Viewed & Orders Notification Configurations
Singular Display Text
Set the singular text you want to display if count is one.
{{period}} placeholder will be rendered as the period value set in the field "Period".
The only allowed digit is "1".
Plural Display Text
Set the plural text you want to display if count is more than one.
{{count}} placeholder will be rendered as the actual count.
{{period}} placeholder will be rendered as the period value set in the field "Period".
Copyright © 2020. Orhan Cakici.
8. CLI Commands
The extension adds a custom CLI command, below is an output of its usage and available arguments.
Usage:
socialproofnotifications:catalog-product:count <type> <product_id> [<period>]
Arguments:
type Notification type: [live|viewed|orders]
product_id Product ID
period Period in time(hours) a product was viewed [default: 24]
You can use this command to show count for a notification type on a product page, it can be used for
debugging purposes.
9. Limitations
As of version 1.0.0, the Orders Notification does not work on product type “Grouped”, this is because the
product type is made up of multiple products.
10. Notice
The Notification icons supplied with this extension were created by me and were based on similar designs
found on the web.
11. Feedback
I’m a lone developer who created this extension, it started off with the desire to learn Magento 2 but it quickly
became something much bigger. I have many more ideas I wish to incorporate into this extension and expand
it into something more dynamic, I would like to hear all your feedback and feature requests. I will try to answer
all your questions within 24 hours.
Developers are welcome to make additions to the extension to suit their needs. I plan on maintaining this
extension until Magento 2 sunsets and will be tested against every Magento 2 minor and patch versions to
check for compatibility.
Email: [email protected]
Website: orhanc.dev