Point of sale - extension for Magento
According to Google: «This year 46% of retail sales will be influenced by the web, but 90% of all retail sales will be effected in shops - from local retailers to the big chains».
The Point of Sale extension will increase awareness of all your retail outlets by allowing you to highlight them on a customized Google Map which is then placed on any page of your Magento site.
This map uses HTML5 code which helps the customer by providing, on the same webpage, their current position, and a route map to their nearest retail outlet.
Specific information relative to each retail outlet is easily customizable from the Magento back-office, eg. 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, go to:
SalesPOS / WAREHOUSESManage POS / Warehouses
Add your points of sale
With Point of Sale, you can manage as many warehouses or points of sale as you want in the backend of Magento.
To configure your points of sale, click on Add one POS / Warehouse.
General information
Each POS must have at least a name, a code, an order of display, a latitude, and longitude. Other information is additional, however, we recommend you to fill in a maximum of fields.
You will also be able to reuse these fields in the Google map display.
- Code (internal use)
This is a unique, back-office identification code 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 web-site in Google Maps. It can be a shop sign or used help to localize the point of sale, for example, «USA Washington Store». - Visible in store locator on CMS page
Display the point of sale in the store locator available from the CMS page. - 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 their 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 also define lunchtime hours for each day. - Days off
You can list all the days off. Each date must be on a new line formatted as follows:
yyyy-mm-ddNote 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
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.
Import and export a CSV file
Import
To import a CSV file, click on Import a CSV file. You can then browse and upload your file in Magento. (Your file must be a CSV file).
Once you have chosen your file, click on Import file.
You can click on Back to see the points of sale that have been added or go to:
SalesPOS / WarehousesManage POS / Warehouses
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.
Use the mass actions
You can delete and change the Store locator for several stores at a time. For this, select the stores you want to edit/delete and from the Actions dropdown select:
- Delete
- Change Store Locator
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:
SystemConfigurationWyomindPOS / Warehouses
You'll also be able to edit the store description template as well as the time format.
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 for 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 Store description template
Also, you'll be able to change the position of the information and add some PHP code.
For example, let's say you want to display the phone number in red. You'll just need to add:
<span style="color:red"> {{phone}} </span>
To see your points of sale in the map, go to http://www.yourwebsite.com/pointofsales.
Edit the Time format to display
You can also edit the time format. For example, to write 2:30 AM, use:
h:i A
For more details, you can refer to the below table:
STEP 2: Configure the Point of Sale map
Add the Point of Sale map to the CMS page
Add the Point of Sale map to any CMS page saved in the Magento back-office. Go to:
CMSPages
Add the following code in the Layout Update XML field in the Design tab of the CMS page concerned:
<action method="addItem">
<type>skin_css</type>
<name>pointofsale/css/pointofsale.css</name>
</action>
<reference name="head">
<action method="addItem">
<type>skin_css</type>
<name>pointofsale/css/pointofsale.css</name>
</action>
<action method="addItem">
<type>skin_js</type>
<name>pointofsale/js/pointofsale.js</name>
</action>
</reference>
<reference name="content">
<block type="pointofsale/pointofsale" name="pointofsale"
template="pointofsale/pointofsale.phtml">
</block>
</reference>
Click on Save page.
Now your Point of Sale map must be displayed on the CMS page you have chosen. By default, it is displayed on 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, you just need to add before='-' in the block item in the "layout update XML" field of the Design tab of the CMS page :
<action method="addItem">
<type>skin_css</type>
<name>pointofsale/css/pointofsale.css</name>
</action>
<reference name="head">
<action method="addItem">
<type>skin_css</type>
<name>pointofsale/css/pointofsale.css</name>
</action>
<action method="addItem">
<type>skin_js</type>
<name>pointofsale/js/pointofsale.js</name>
</action>
</reference>
<reference name="content">
<block type="pointofsale/pointofsale" name="pointofsale" template="pointofsale/pointofsale.phtml" before='-'>
</block>
</reference>
By default the map is displayed at the bottom of the page.
Add the Point of Sale map to any 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/design/frontend/default/default/template/ pointofsale/pointofsale.phtml - All the CSS styles and associated images required to display the Point of Sale map are:
skin/frontend/default/default/pointofsale/. - To translate the wording on the Point of Sale map either use the on-line Magento translation tool or, copy and translate the translation files available in:
app/locale/en_US/Wyomind_ pointofsale.csv