-1
Hello
I’m trying to create a city selector for the user to select the city and according to the city, go to the specific page, but I don’t even know how to search about it
I did everything in wordpress, I mounted a popup and in this popup I put an iframe, where in this iframe has a dropdown menu to select the city, but when selecting the city, the page is inside the iframe
I mean, I don’t think iframe is the best option in this case.
What would be the best way to do this in wordpress?
0
As you did not give many details I will do something basic, but it will serve. Just you adapt later.
We can work with Páginas Estáticas in the Wordpress, this will allow us to create, change or delete the page through the admin panel.
First we will create our archive at the root of the theme. wp-content/themes/SEU-TEMA/cities.php
Inside this file we will add the code below:
/**
* Template Name: Choose City
*/
That one Template Name indicates to the Wordpress this, is a template page. So we can choose in the admin panel.
In the same file, we will add the base code. Here you can do it your way.
I picked up a layout to test: https://bootsnipp.com/snippets/8Mlzr . Since it’s just a demonstration and there’s not much detail, I’m going to do something very basic.
Commented code:
<?php
/**
* Template Name: Choose City
* Layout Author: https://bootsnipp.com/snippets/8Mlzr
*/
?>
<!DOCTYPE hml>
<html>
<head>
<title>Title of the document</title>
<style>
@import "https://fonts.googleapis.com/css?family=Source+Sans+Pro:400,600";
*,
*::before,
*::after {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
html, body {
height: 100%;
width: 100%;
}
a {
color: #FFF;
text-decoration: none;
}
a:hover {
text-decoration: none;
}
body {
padding: 0px;
margin: 0;
font-family: "Source Sans Pro", sans-serif;
background: #644cad;
background: -moz-linear-gradient(left, #644cad 0%, #4426a8 100%);
background: -webkit-linear-gradient(left, #644cad 0%, #4426a8 100%);
background: linear-gradient(to right, #644cad 0%, #4426a8 100%);
-webkit-font-smoothing: antialiased;
}
h2 {
margin-top: 0px;
color: #4d5c6e;
font-weight: 400;
}
p {
color: #72879e;
font-size: 16px;
line-height: 24px;
}
.blur {
-webkit-filter: blur(5px);
-moz-filter: blur(5px);
-o-filter: blur(5px);
-ms-filter: blur(5px);
filter: blur(5px);
}
.flex {
min-height: 100vh;
display: flex;
align-items: center;
justify-content: center;
}
.modalcontainer {
display: none;
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
background-color: rgba(0, 0, 0, 0.5);
}
.modalcontainer.active {
display: block;
}
.modal {
display: none;
position: relative;
width: 600px;
height: 330px;
background-color: #FFF;
overflow: initial;
opacity:0;
}
.modal.active {
display: block;
}
.modal .content {
padding: 30px;
}
.modal .close {
font-family: "Source Sans Pro", sans-serif;
cursor: pointer;
color: #FFF;
width: 50px;
height: 50px;
text-align: center;
line-height: 50px;
position: absolute;
right: 0;
color: #999;
font-size: 40px;
}
.modal .close span {
transform: rotate(45deg);
display: block;
}
.modal .buttons {
width: 600px;
position: absolute;
bottom: 0;
height: 50px;
background-color: #FFF;
}
.modal .buttons a {
width: 50%;
height: 50px;
line-height: 50px;
text-align: center;
float: left;
background-color: #EEE;
color: #4d5c6e;
transition: 0.3s;
text-transform: uppercase;
font-weight: bold;
}
.modal .buttons a:hover {
background-color: #e1e1e1;
}
.modal .buttons a:nth-of-type(2) {
float: right;
color: #FFF;
background-color: #00c06d;
}
.modal .buttons a:nth-of-type(2):hover {
background-color: #00a75f;
}
.modalbttn {
background-color: #24252A;
padding: 12px 25px;
text-transform: uppercase;
border-top: 1px solid rgba(255, 255, 255, 0.2);
border-bottom: 1px solid rgba(0, 0, 0, 0.2);
box-shadow: 0 10px 20px rgba(0, 0, 0, 0.19), 0 6px 6px rgba(0, 0, 0, 0.23);
border-radius: 4px;
}
.modalbttn:hover {
background-color: #2b2c32;
}
.wrapper-dropdown-3 {
/* Size and position */
position: relative;
width: 200px;
margin: 0 auto;
padding: 10px;
/* Styles */
background: #fff;
border: 1px solid rgba(0,0,0,0.15);
box-shadow: 0 1px 1px rgba(50,50,50,0.1);
cursor: pointer;
outline: none;
}
.wrapper-dropdown-3:after {
content: "";
width: 0;
height: 0;
position: absolute;
right: 15px;
top: 50%;
margin-top: -3px;
border-width: 6px 6px 0 6px;
border-style: solid;
border-color: #000 transparent;
}
.wrapper-dropdown-3 .dropdown {
/* Size & position */
position: absolute;
top: 100%;
left: 0;
right: 0;
padding:0;
margin:0;
/* Styles */
background: white;
border: 1px solid rgba(0,0,0,0.17);
font-weight: normal;
-webkit-transition: all 0.5s ease-in;
-moz-transition: all 0.5s ease-in;
-ms-transition: all 0.5s ease-in;
-o-transition: all 0.5s ease-in;
transition: all 0.5s ease-in;
list-style: none;
/* Hiding */
opacity: 0;
pointer-events: none;
}
.wrapper-dropdown-3 .dropdown li a {
display: block;
padding: 10px;
text-decoration: none;
color: #000;
border-bottom: 1px solid #e6e8ea;
box-shadow: inset 0 1px 0 rgba(255,255,255,1);
-webkit-transition: all 0.3s ease-out;
-moz-transition: all 0.3s ease-out;
-ms-transition: all 0.3s ease-out;
-o-transition: all 0.3s ease-out;
transition: all 0.3s ease-out;
}
.wrapper-dropdown-3 .dropdown li i {
float: right;
color: inherit;
}
.wrapper-dropdown-3 .dropdown li:first-of-type a {
border-radius: 7px 7px 0 0;
}
.wrapper-dropdown-3 .dropdown li:last-of-type a {
border: none;
border-radius: 0 0 7px 7px;
}
/* Hover state */
.wrapper-dropdown-3 .dropdown li:hover a {
background: #f3f8f8;
}
/* Active state */
.wrapper-dropdown-3.active .dropdown {
opacity: 1;
pointer-events: auto;
}
/* No CSS3 support */
.no-opacity .wrapper-dropdown-3 .dropdown,
.no-pointerevents .wrapper-dropdown-3 .dropdown {
display: none;
opacity: 1; /* If opacity support but no pointer-events support */
pointer-events: auto; /* If pointer-events support but no pointer-events support */
}
.no-opacity .wrapper-dropdown-3.active .dropdown,
.no-pointerevents .wrapper-dropdown-3.active .dropdown {
display: block;
}
.form-control {
display: block;
width: 100%;
height: 34px;
padding: 6px 12px;
font-size: 14px;
line-height: 1.42857143;
color: #555;
background-color: #fff;
background-image: none;
border: 1px solid #ccc;
border-radius: 4px;
-webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,.075);
box-shadow: inset 0 1px 1px rgba(0,0,0,.075);
}
</style>
</head>
<body>
<div class="flex">
<div class="modalcontainer">
<div class="flex">
<div class="modal">
<div class="content">
<h2>Escolha sua cidade</h2>
<!-- Captura e exibe o conteúdo da página -->
<?php the_post(); the_content(); ?>
</div>
</div>
</div>
</div>
</div>
<script>
/* Captura a instância do LocalStorage ou SessionSotrage, caso não encontre, define nulo */
const localStorage = window.localStorage || sessionStorage || null;
/* Caso o valor seja nulo, exibe um erro no Console. */
if (localStorage == null) {
throw Error("LocalStorage not found");
}
/* Captura o elemento .modalContainer (Overlay) */
const modalContainer = document.querySelector(".modalcontainer")
/* Captura o elemento .modal (Onde exibe as cidades) */
const modal = document.querySelector(".modal");
/* Captura o select da cidade. (Obrigatório) */
const city = document.querySelector("#city");
/* Exibe o modal com uma animação do tipo FadeIn */
function displayCities() {
modalContainer.style.display = "block";
modal.style.display = "block";
let anim = setInterval( () => {
let op = new Number(modal.style.opacity || 0)
modal.style.opacity = op+.01
modalContainer.style.opacity = op+.01
if (op >= 1) {
clearInterval(anim)
}
}, 15)
city.addEventListener("change", (e) => {
localStorage.setItem("city", e.target.value)
location.href = e.target.value;
});
}
/**
* (Opcional)
* Verifica se a cidade já foi definida, caso já tenha sido
* redireciona o usuário, caso contrário exibe as cidades
*
* Caso opte por não utilizar essa função, basta substituir
* o código abaixo por "displayCities();"
*/
if (! localStorage.getItem("city") ) {
displayCities();
} else {
location.href = localStorage.getItem("city");
}
</script>
</body>
</html>
To register cities is very simple. Just go to the admin panel > Pages > Add New
Click on the option Texto and use the code below as an example:
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor.
Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.
<select id="city" class="form-control" name="city">
<option>Selecione uma cidade</option>
<option value="https://www.ilhaboipeba.org.br/pousadasmorere.html">Moreré, Ilha de Boipeba (BA)</option>
<option value="http://loucosporpraia.com.br/praia-de-jericoacoara-ceara/">Praia de Jericoacoara, Jijoca de Jericoacoara (CE)</option>
<option value="http://www.diariodepernambuco.com.br/app/46,15/2017/02/23/interna_turismo,690904/bainha-do-sancho-em-fernando-de-noronha-ganha-titulo-de-melhor-praia.shtml">Baía do Sancho, Fernando de Noronha (PE)</option>
<option value="https://viagemeturismo.abril.com.br/atracao/praia-patacho/">Praia do Patacho, São Miguel dos Milagres (AL)</option>
<option value="https://viagemeturismo.abril.com.br/atracao/baia-dos-porcos/">Baía dos Porcos, Fernando de Noronha (PE)</option>
<option value="https://www.feriasbrasil.com.br/pe/portodegalinhas/">Porto de Galinhas, Ipojuca (PE)</option>
<option value="http://www.pipa.com.br/pt-br/">Praia de Pipa, Tibau do Sul (RN)</option>
<option value="http://www.portalcanoaquebrada.com.br">Canoa Quebrada (CE)</option>
</select>
To add new cities, just add new elements option setting in the attribute value, the link to the page.
Forcing the user to choose the city:
To force the user to choose their city, simply add the code below in your file where the header.
<script>
/* Captura a instância do LocalStorage ou SessionSotrage, caso não encontre, define nulo */
const localStorage = window.localStorage || sessionStorage || null;
/* Caso o valor seja nulo, exibe um erro no Console. */
if (localStorage == null) {
throw Error("LocalStorage not found");
}
if (! localStorage.getItem("city") ) {
/* Adicione aqui o link permanente da página */
location.href = "https://www.example.com/cities/"
}
</script>
I’ll test, and return here.
Browser other questions tagged javascript html wordpress
You are not signed in. Login or sign up in order to post.
Predente memorize the city by
Cookiesor directly onDB?– RpgBoss
You want the page inside the iframe to go to the main page?
– Sam
Ask the question the code in the iframe you are using. You need to know how you are doing it, otherwise you can’t guess.
– Sam
I don’t intend to memorize, it would just be a link to go to the specific city, the city pages are all ready. , the code I’m using in the selector, is this https://pastebin.com/jba0zizG , and insert an iframe into the "Layred Poup" plugin to display an iframe of that page, using the following code <iframe src="myURL" width="100%" height="100%" frameborder="0" scrolling="no"></iframe > forgive me the mistakes and etc.. I’m new here, I don’t usually post in forums Thanks for the help.
– Rafael Medeiros