Magento 2
How to use Point Of Sale for Magento
According to Google a great part of retail sales are influenced by the web, but the majority is made in shops from local retailers to the big chains.
The Point Of Sale extension for Magento 2 will increase awareness of all your stores by allowing you to highlight them on a customized Google Map which is then placed on any page of your website.
This map uses HTML5 code which helps the customer by providing, on the same web page, their current position, and a route map to their nearest point of sale.
Specific information relative to each point of sale can be easily customized from the Magento 2 back-office. For example, opening times, postal, and website addresses.
STEP 1: Manage your Points of Sale
First of all, you need to create your points of sale. For this, from Magento 2 backoffice, go to:
SalesPoint Of SaleManage POS / WH
Add your points of sale
With Point of Sale, you can manage as many warehouses or points of sale as you want from the backend of Magento 2.
To configure your points of sale, click on Create New Point Of Sale / Warehouse.
If the button is not displayed, you can check that permissions have been assigned for that user in:
SalesPermissions
General information
Each POS must have at least a name, a code, an order of display, longitude and latitude coordinates.
Other information is additional, however, we recommend you to fill in a maximum of fields to be able to reuse them in the Google Map display.
- Code (internal use)
This is a unique identification code used in the back-office of Magento 2 for each point of sale. This code is also used by Google Addresses to identify points of sale if data files are exported to a Google Places account. - Name
This is the name that appears on the front-office of your website in Google Maps. It can be a shop sign or help to localize the point of sale, eg. «USA Washington Store». - Type of display
The type of display defines whether a point of sale is visible or not in Google Maps:
Warehouse = invisible on the Gmap/checkout
Point of Sale = visible on the Gmap/checkout - Visible on store locator
Display the point of sale in the store locator. - Order of display
This is the order of display on the Google Map.
- Latitude & Longitude
This information is essential to allow the point of sale to be displayed in Google Maps. You can find this information with Google Maps.
Address & Hours
All the details specified in Address & Hours appear in the information section when a customer selects a particular point of sale. You must fill in:
- Address (lines 1&2)
Street number, street name, floor number... - City, Postal code, State
The state code is essential if data files are exported to a Google Places account. - Country
The country allows customers to filter the point of sale search results. - Main phone
The telephone number is essential if data files are exported to a Google Places account. - Email
It is the email to contact the website. - Image
This is the image associated with a point of sale eg. the shop front, the logo etc... The image appears in the information section when a customer selects this particular point of sale. The image can be a .jpeg, .gif or .jpg file. - Description
This is a description of the point of sale. The description appears in the information section when a customer selects this particular POS. - Hours
The opening hours can be shown for each point of sale. You can set lunch hours as well.
- Days off
You can list all the days off. Each date must be on a new line formatted as follows:
yyyy-mm-dd
Note that you can also add hours off. Each date and hour must be on a new line formatted as follows:
yyyy-mm-dd HH:ii-HH:ii
In the case where there are several breaks during the day, you'll need to add one line per break time, for example:
2019-02-25 14:00-15:002019-02-25 18:30-19:30
Store views selection
A point of sale can be linked to one or more store views. Only the points of sale that are linked to at least one store view are then displayed for customers in Google Maps.
Customer group selection
You must then select in the Customer Group Selection tab, the customer group(s) that will be able to see the point of sale.
Frontend
You have the possibility to define a display that is specific to the POS/WH for the Store Locator and the Store Page.
Store Locator
In the Store Locator page, you can use the global store description, or use a specific one for the POS/WH.
If you choose to use a template specific to the POS/WH, you have the possibility to add variables to the description.
Store Page
You can also enable a unique Store page for the POS/WH.
If you do, you can define your own URL key for the store page:
italy-store
You'll then be able to access the store page from:
https://www.yourstore.com/italy-store
For the Store Page, you can use the global page content template, or use a specific one for the POS/WH.
If you choose to use a template specific to the POS/WH, you have the possibility to add variables to the content.
Available variables
You can use below variables in the templates:
- {{code}}
The point of sale code - {{name}}
The point of sale name - {{phone}}
The point of sale phone number - {{email}}
The point of sale email address - {{address_1}}, {{address_2}}, {{city}}, {{state}}, {{country}}, {{zipcode}}
The point of sale address - {{hours}}
The point of sale opening hours - {{description}}
The point of sale description - {{image}}
The point of sale image - {{link}}
Link to the point of sale page - {{google_map}}
The Google map with the targeted point of sale
Note that you can't use the Google map variable in the Store locator description template. - {{additional_attribute_code}}
All custom attributes that you have configured:
See how to configure your own attributes
Additional information
For each store, you can define your own attributes in order to customize the store page as you want.
For this, go to:
SalesPoint Of SalePOS / WH Attributes
Click on Add a new attribute.
This works the same way than product attributes.
The attribute can be:
- text: simple input
- textarea: multi-line input
- wysiwyg: HTML input
Note that the attribute code will be generated automatically from the attribute label.
Once saved, a notification displays and the attribute is listed in the grid.
Once created, the attributes will be displayed in the Additional information tab of each point of sale.
Then, they can be used in the description template for the store locator and in the template for the point of sale page.
Import and export a CSV file
Import
To import a CSV file, click on Import a CSV file. You can then click on Browse to upload your file in Magento 2 (your file must be a CSV file).
Once you have chosen your file, click on Import file.
A message is displayed and notifies that the POS/WH have been imported in:
SalesPoint of SaleManage POS / WH
Export
To export a CSV file, it is quite easy, you need to click on Export a csv file, and you will be able to download a CSV file that includes all information about the points of sale you've just created or imported.
Configure the display of your points of sale
In order to edit the display of your points of sale in the Google map, go to:
StoresSettingsConfigurationWyomindPoint Of Sale
Add your Google API key
There you will be able to add your API key in the Google API key field.
Indeed, Google is now asking an API key to display the Google map. If you don't have an API key yet, check our faq to know how to get your own key.
Edit the location configuration
You can totally configure the location:
- Number of POS to display according to the distance
Note that 0 means unlimited. - Display the distance from the customer location to the store in the store title
You can add the distance to the store from the customer location. - Display the duration from the customer location to the store in the store title
You can add the time it takes from the customer location to go to the store. - Unit systems for the distance
Choose between Metric or Imperial.
Edit the store description
You can change the display of your points of sale and even add some PHP code.
For example, let's say you want to display the phone number in red. You'll just need to add in the Store description template field:
<span style="color:red"> {{phone}} </span>
Edit the store page
You can also change the display of your store page and add PHP code as well.
Edit the time format
You have the possibility to change the format of the date. For example, for 2:30 AM, use:
h:i A
For more details, you can refer to the below table: 
Configure the meta tags
You can configure the meta tags and control the SEO for the stores and store locator pages from the Settings tab in
StoresSettingsConfigurationWyomindPoint Of Sale
Point of sale
You can define meta tags for the store page:
- Page meta title
Configure the meta title for the store page. - Page meta keywords
Add meta keywords for the store page. - Page meta description
Configure the meta description for the store page. - Page meta robots
Define meta robots for the store page:
NO INDEX, NO FOLLOW
NO INDEX, FOLLOW
INDEX, FOLLOW
INDEX, NO FOLLOW
Store locator
You can define meta tags for the store locator page:
- Page meta title
Configure the meta title for the store locator page. - Page meta keywords
Add meta keywords for the store locator page. - Page meta description
Configure the meta description for the store locator page. - Page meta robots
Define meta robots for the store locator page:
NO INDEX, NO FOLLOW
NO INDEX, FOLLOW
INDEX, FOLLOW
INDEX, NO FOLLOW
Configure the layout update
You can configure the layout for the store locator page from the Settings tab in
StoresSettingsConfigurationWyomindPoint Of Sale
Store locator layout update
You can define the layout for the store locator page.
STEP 2: Configure the Point of Sale map
The Point Of Sale extension allows you to configure the point of sale map and to add it on any page of your Magento 2 website.
Add the Point of Sale map to any CMS page
You can easily add the Point of Sale map to any CMS page saved in the Magento 2 back-office in:
ContentElementsPages
Add the following code in the Layout Update XML field in the Design tab of the CMS page concerned:
<referenceContainer name="content">
<block
class="Wyomind\PointOfSale\Block\PointOfSale"
name="pointofsale"
template="Wyomind_PointOfSale::pointofsale.phtml"
/>
</referenceContainer>
Click on Save page.
Now the Point of Sale map must be displayed on the CMS page you have chosen. By default, it is displayed at the bottom of the page.
Change the position of the Point of Sale map in the CMS page
In order to display the map at the top of the page, go in the Design tab of the CMS page and add before='-' in the block item of the Layout update XML field:
<referenceContainer name="content">
<block
class="Wyomind\PointOfSale\Block\PointOfSale"
name="pointofsale"
template="Wyomind_PointOfSale::pointofsale.phtml"
before="-"
/>
</referenceContainer>By default, the map is displayed at the bottom of the page.
Customize the Point of Sale map
The template which allows the Point of Sale map to display is easy to modify with basic PHP and HTML skills.
- The Point of Sale template is found, by default, in:
app/code/Wyomind/Pointofsale/view/frontend/pointofsale.phtml - All the CSS styles and associated images required to display the Point Of Sale map are in:
app/code/Wyomind/Pointofsale/view/frontend/web - To translate the words on the Point Of Sale map you can either use the on-line Magento translation tool or copy and translate the translation files available in:
app/code/Wyomind/Pointofsale/i18n/en_US.csv
This Magento extension is really functional easy to use and good looking. You can add and customize easily your point of sales and geolocalize they on a map. You can also add custom attribute to the point of sales in order to enrich the descriptions.
Easy to install and setup, fast and efficient support. The process was straightforward: install the extension, configure it, capture all our POSs info and then launch it. We use point of sale to manage and show our physical location of shops and with the help of it we could be able to receive a continuous stream of customers from our website to our stores. Considering feature point of view, it would have been better if nearest store could have been fetched based on the current location automatically in the POS dropdown instead of Google Map in checkout. This extension is great to use and support service is EXCELLENT. They answered immediately all our doubts,
We use point of sale to manage and show our physical location of shops and with the help of it we could be able to receive a continuous stream of customers from our website to our stores
Installation facile et rapide. Révision accessible des feuilles de styles pour adapter à notre charte. Le support est rapide et efficace. Nous avons demandé la prise en charge des accents utf8 et avons reçu la mise à jour le jour même. bravo et merci !
A nice simple extension to add the stockists of our jewellery to our brand's website. Customers can go to the stockist finder page and then extension will find their location from their device and then show them the nearest outlet to buy our products. Easy to configure and it is possible to enter plenty of details about each individual stockist such as opening hours, shop logo, email address etc.
The process was straightforward: install the extension, configure it, capture all our POSs info and then launch it. The only changes we need to make were to adapt the PHTML template files and embed them in a popup, it couldn't be easier. :)
Nice design, responsive, easy to install and setup and like always, fast and efficient support. You can customize fields with CSS I would have liked to find functions like: - coordinates engine search (like in Google Maps for Wordpress) - easier set up of business hours of points of sale (even if CSV import is available). Manual entry is not possible. You must enter time with a [select] field and check a box to enable the display of the time for the selected day. - 1 or 2 more fields for additional information about the point of sale. To bad! the [description] field doesn't accept CSS For all this, I would have accepted to pay more.