Example of currency dropdown inside PopUp

2016-10-11 currency, popup, responsive

Previously i released a tutorial about creating responsive popup currency selection. In this guide i will show you how to create a similar popup - but with a little different currency selection feature. An example of this feature you can find below (screenshot). As you can see, it displays dropdown with currency selection. Just click on the dropdown to roll out list of all available currencies. After you will select the currency - you will change the currency in the shop. Sounds great.

currency selection dropdown

 

Create popup with currency dropdown selection

Whole guide, exactly as previous tutorial is based on PrestaShop popup addon. So to make it work in the way as i show on example i strongly suggest to use this module. You can of course use some other plugins, but I can't guarantee that everything will work properly.


What popup workflow we want - what kind of popup what we want to create, and where and when popup will appear 

- everyone who will visit your shop for the first time 
- everywhere, no matter what page customer will open - module will spawn this popup

- only one time, module will not spawn popup again 
- customer will be obligue to select currency to close the popup 


Configuration of the popup

So, we already know what we want to create and now it's time to create a popup with settings described below. Let's open module configuration page, and go to "add new popup" section. Fill popup creation form with these informations:

Name Currency selection (in fact you can use own, it appears only in back office)
Active Yes
Test mode No
Display popup again after: 36000000
PopUp border 10
PopUp border color FFFFFF
PopUp background (window) FFFFFF
PopUp overlay color (background) 000000
PopUp overlay opacity 0.9
Disable default "close button" YES
Disable "click anywhere" to close YES
Appearance delay 0
Popup width 670
Popup height 345

 

Create popup contents

Okay, so we defined basic settings related to popup. Now it's time to fill it out with some contents. As screenshot above shows we want to create popup with white background + some dots that imitates the world map. To create this kind of block we will use div html tag, and to place text "select your currency" and select dropdown - we will use table. Below you can find code. 

<div class="whiteMap">
<table class="table-responsive">
<tbody>
<tr>
<td class="first">
<h2>Select your<br />currency</h2>
</td>
<td class="second"><select onchange="setCurrency($(this).val()); hideThisPopup();">
<option>-- select --</option>
<option value="1">(EUR) Euro</option>
<option value="2">(PLN) Zloty</option>
<option value="3">(GBP) Pound</option>
</select></td>
</tr>
</tbody>
</table>
</div>

Highlighted code creates selection options that are available in dropdown. You have to create this part manually based on your shop configuration. Value param inside each <option> is equal to currency ID. And pattern for <option> element looks like:

<option value="CURRENCY_ID">VISIBLE TEXT</option>

Where:

  • CURRENCY_ID - is an ID number of currency
  • VISIBLE TEXT - is a text that will appear inside dropdown

 

Please create as many <option> items as you want. To get ID of currency - go to localization > currencies section. You can find there list of all currencies in your shop (so you have to create as much <option> in your code). Here is the example:
currency selection localization

Based on this screenshot you will have to create code like this:

<option>-- select --</option>
<option value="1">(GBP) Pound</option>
<option value="2">(PLN) Zloty</option>


Css styles for html code we used

Now it's time to add some css styles to this code, so at the end of the popup's contents put this code with css styles attached below. And in fact: that's all. Now your popup will look like popup from screenshot that i attached at the begining of this tutorial.

<style>
.whiteMap {
display:block;
width:670px;
height:345px;
background:url('//i.imgur.com/F9ACGE3.png') center no-repeat;
}

.whiteMap table {
width:100%;
height:100%;
}

.whiteMap table td {
text-align:center;
vertical-align: middle;
}

.whiteMap table td.first h2 {
font-size:38px;
}

.whiteMap table td.first {
width:50%;
}

.whiteMap table td.second select {
width:60%;
}

.whiteMap table td.second {
width:50%;
}
</style>

 

 

 

author milos myszczuk
Article by Milosz Myszczuk PrestaShop expert, official PrestaShop community moderator. PHP developer, specialist in relative and spatial databases management, GIS Analyst, CEO & founder of VEKIA interactive agency. Read more about VEKIA company
If you like my articles and want much more valuable tips, feel free to send me donation
1.4 version 1.4.11 1.6 404 addon admin advertise ahref ajax alpha animation api app application authentication back office backup badge banner basics block bootstrap button cache carrier cart catalog category certificate changelog chat class clear client clip cms code colors columns comments configuration contact container content controller cookie counter country coupon css csv currency customer dashboard database debug default delete delivery desktop developer device disable discount displayNav displayTop download dynamic editor effect empty encrypt engine error exchange exclude export facebook faceshop fade fancoupon fancybox fanpage fatal feature feed field file fix fixed font footer free friendly url front ftp full gallery generate gift global godaddy google google+ gray grid groupon header help hide highlight homefeatured homepage hook hosting hover howto htaccess html html5 ID image import include input instagram installation integration iPhone issue javascript jquery kgb knowhow languages law left likebox link list livingsocial loading log login logo loyality mail mailing maintenance manufacturer marketing marquee mcrypt menu meta mobile modification module movie moving multilanguage multiupload must have mysql news newsletter notification number open graph order override page password performance PHP phpmyadmin picture pinterest plugin popup post prestashop prestashop 1.0 prestashop 1.1 prestashop 1.2 prestashop 1.3 prestashop 1.4 prestashop 1.5 price rules problem product profile promotion proslider purifier quantity query quick tip random rates register reinsurance release reporting reset responsive restore results ribbon rich text right sales search security seo service shadow share shipping shop shopmania slider smarty social networks SQL SSL statistics stock store style subcategory superuser support switcher tab tablet tag tax template text theme tinyMCE tips and tricks tpl tracking translations tree trends trigger tumblr tutorial twitter update upgrade upload variables video visits voucher vulnerability web2print wide widget width window wishlist wysiwyg youtube zip zopim