i would like to reuse parts of the url in the content of the webpage
as example domain.com/specialist/brand/location/
where i want to reuse "brand" multiple times in the content of the webpage and also "location" multiple times in the content of the webpage.
first i tried it with variables url/?specialist=brand&bezorgen=city
but this does not work with the following method, because it renders them only once
i've tried the
<script>
const queryString = window.location.search;
const urlParams = new URLSearchParams(queryString);
const specialist = urlParams.get('specialist');
const bezorgen = urlParams.get('bezorgen');
document.getElementById("specialist").innerHtml = specialist;
document.getElementById("bezorgen").innerHtml = bezorgen;
</script>
and in the html
<span id=specialist></span>
<span id=bezorgen></span>
What would be the fastest way to get this working
technology = twig and js
Thanks in advance
edit
I must be a total noob but how do i get the actual url?
and
document.getElementById("location").innerHTML = {% set location %}${components[1]}{% endset %}
;
renders ${components[1]} in the file instead of the actual part of the url
CodePudding user response:
Twig
As you are using a custom framework I'd suggest you to mimick the app.request.get
behavior that is available in Symfony
.
First create a class that delivers the same logic
Request.php
class Request {
public function __construct() {}
public function get($key) {
return isset($_GET[$key]) ? $_GET[$key] : null;
}
public function post($key) {
return isset($_POST[$key]) ? $_POST[$key] : null;
}
public function url() {
$http = 'http'.(isset($_SERVER['HTTPS']) && $_SERVER['HTTPS'] === 'on' ? 's': '');
return $http.'://'.$_SERVER['HTTP_HOST'].$_SERVER['REQUEST_URI'];
}
}
Register the class in twig
The easiest way to add an instance of the Request
class is just to add it as a global
<?php
...
$twig->addGlobal('app', [ 'request' => new Request(), ]);
Access the class inside a template
<p>this {{ app.request.get('brand') }} bike is pretty awesome and we can deliver this at {{ app.request.get('location') }}. This {{ app.request.get('brand') }} is really trustworthy</p>
mandatory note
Please be aware it is possible that clients will try to inject/generate unsafe output. However twig
will prevent this as long as you don't mark the content as safe with e.g. the filter raw
CodePudding user response:
Javascript
The problem with your javascript is probably because you are creating elements with the same id over and over again, which is why only the first element with the correct id will be replaced correctly
An easy solution would be to switch to classes
var foo = 'foo';
var bar = 'bar';
document.querySelectorAll('.foo').forEach(span => {
span.innerHTML = foo;
});
document.querySelectorAll('.bar').forEach(span => {
span.innerHTML = bar;
});
span {
display: block;
}
span span {
margin: 10px 0 0 0;
}
span.foo {
color: red;
}
span.bar {
color: green;
}
<span ></span>
<span ></span>
<span ></span>
<span ></span>
<span ></span>
<span ></span>
CodePudding user response:
I might be misunderstanding, but the OP seems to ask two things: (1) how to extract info from the url -- either from within the path or the query, (2) how to alter the dom with that info.
Looking at (1), you can get a lot of information from the expression new URL(window.location.href);
// using the path
// these window-named vars to simulate the browsers' window global
let windowA = {
location: {
href: "http://example.com/specialist/mybrand/mylocation"
}
};
const urlA = new URL(windowA.location.href);
console.log(urlA.pathname.split('/').slice(-2));
// using the query
let windowB = {
location: {
href: "http://example.com/specialist/?brand=mybrand&location=mylocation"
}
};
const urlB = new URL(windowB.location.href);
const params = [urlB.searchParams.get('brand'), urlB.searchParams.get('location')]
console.log(params);
Looking at (2), the OP code looks fine, except the div's ids need to be placed in quotes...
let _window = {
location: {
href: "http://example.com/specialist/mybrand/mylocation"
}
};
const url = new URL(_window.location.href);
const components = url.pathname.split('/').slice(-2);
document.getElementById("brand").innerHTML = `<h1>${components[0]}</h1>`;
document.getElementById("location").innerHTML = `<h1>${components[1]}</h1>`;
<!-- notice the quoted id expressions -->
<div id="brand"></div>
<div id="location"></div>
CodePudding user response:
twig only solution: https://www.url.com/service/bikespecialist/trek/amsterdam/
{% set brand %}{{ request.url| split('/', 7)[5]| trim('/') }}{% endset %}
{% set location %}{{ request.url| split('/', 7)[6]| trim('/') }}{% endset %}
in the text
this {{ brand }} bike is awesome, come and buy it at {{ brand }} {{ location }}
To all who replied, many thanks! this problem had me bugged for the last couple weeks
and in the case of no brand or location in the url
{% set band %}{{ request.url| split('/', 7)[5]| trim('/') |capitalize }}{% endset %}
{% if brand is empty %}
{% set brand %}qualitybikes {% endset %}
{% endif %}
{% set loation %}{{ request.url| split('/', 7)[6]| trim('/') |capitalize }}{% endset %}
{% if location is empty %}
{% set location %}entire country {% endset %}
{% endif %}