Adding multiple fixes to the promoted products.
This commit is contained in:
parent
9068f7c5b7
commit
4c63bc6f1d
@ -41,6 +41,10 @@
|
||||
de programas de software libre para llevar a cabo cualquier
|
||||
uso alternativo al para el que se diseñó.</p>
|
||||
|
||||
<p>Es probable que para entrar en EDL tengas que hacer short
|
||||
de un cable USB de D+ con - para forzar EDL, asegurate de estar dispuesto
|
||||
a hacer eso antes de comprar.</p>
|
||||
|
||||
<p>Antes de comprar, por favor lee
|
||||
<a href="https://wiki.postmarketos.org/wiki/Zhihe_series_LTE_dongles_(generic-zhihe)">
|
||||
el artículo de la wiki de
|
||||
|
109
js-src/index.js
109
js-src/index.js
@ -19,6 +19,33 @@ const cookies = document.cookie.split("; ").map((cookie) => {
|
||||
return acc;
|
||||
}, {});
|
||||
|
||||
function addEventListernerExpandDescriptionProducts() {
|
||||
const searchResults = document.querySelectorAll('div.search-result');
|
||||
for (const result of searchResults) {
|
||||
const a = result.querySelector('div.row-title-url-image a');
|
||||
if (a === null) {
|
||||
continue;
|
||||
}
|
||||
if (!a.href) {
|
||||
continue;
|
||||
}
|
||||
const askUrl = a.href + '.json';
|
||||
const content = result.querySelector('div.search-result-content');
|
||||
const expand = result.querySelector('div.search-result-content a.expand');
|
||||
if (expand === null) {
|
||||
continue;
|
||||
}
|
||||
expand.addEventListener('click', (event) => {
|
||||
event.preventDefault();
|
||||
fetch(askUrl).then(async (res) => {
|
||||
const json = await res.json();
|
||||
content.innerHTML = json.description;
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
function startSuggestions() {
|
||||
const searchInputs = document.querySelectorAll('div.fake-text-box input');
|
||||
const port = _port()
|
||||
@ -64,6 +91,7 @@ document.addEventListener("DOMContentLoaded", function () {
|
||||
}
|
||||
});
|
||||
startSuggestions();
|
||||
addEventListernerExpandDescriptionProducts();
|
||||
let focusSearch = document.body.querySelector('nav.mobile-shortcuts div.search input');
|
||||
if (focusSearch === null) {
|
||||
focusSearch = document.body.querySelector('div.search input');
|
||||
@ -375,91 +403,12 @@ function onSearchChange() {
|
||||
}
|
||||
history.pushState({}, '', url);
|
||||
searchResults.innerHTML = await res.text();
|
||||
addEventListernerExpandDescriptionProducts();
|
||||
searchResults.scrollTo(0, 0);
|
||||
})
|
||||
search.focus()
|
||||
}
|
||||
|
||||
function showResults(searchResults, searchObjects) {
|
||||
searchResults.innerHTML = "";
|
||||
for (let searchObject of searchObjects) {
|
||||
const searchResultContainer = document.createElement('div')
|
||||
searchResultContainer.classList.add('search-result')
|
||||
const rowTitleUrlImageDiv = document.createElement('div');
|
||||
rowTitleUrlImageDiv.classList.add('row-title-url-image');
|
||||
const columnTitleUrl = document.createElement('div');
|
||||
columnTitleUrl.classList.add('column-title-url');
|
||||
const img = document.createElement('img')
|
||||
const title = document.createElement('b')
|
||||
const url = document.createElement('a')
|
||||
const content = document.createElement('p')
|
||||
|
||||
title.innerText = searchObject.title
|
||||
let port = window.location.port;
|
||||
if (port !== '') {
|
||||
port = ':' + port
|
||||
}
|
||||
if (searchObject.url.match(/^\//)) {
|
||||
searchObject.url = window.location.protocol
|
||||
+ "//" + window.location.hostname
|
||||
+ port
|
||||
+ searchObject.url
|
||||
}
|
||||
let urlImage = searchObject.urlImage;
|
||||
if (urlImage !== null && urlImage.match(/^\//)) {
|
||||
urlImage = window.location.protocol
|
||||
+ "//" + window.location.hostname
|
||||
+ port
|
||||
+ urlImage
|
||||
}
|
||||
if (urlImage !== null) {
|
||||
img.alt = ""
|
||||
img.src = urlImage
|
||||
}
|
||||
|
||||
url.href = searchObject.url
|
||||
url.innerText = searchObject.url
|
||||
content.innerText = searchObject.content
|
||||
|
||||
if (urlImage !== null) {
|
||||
rowTitleUrlImageDiv.appendChild(img)
|
||||
}
|
||||
|
||||
columnTitleUrl.appendChild(title);
|
||||
let vendor = searchObject.vendor;
|
||||
let hasVendor;
|
||||
if (vendor !== null) {
|
||||
const vendorP = document.createElement('p');
|
||||
vendorP.classList.add('product-vendor');
|
||||
vendorP.innerText = `Enlace promocionado de ${vendor}`;
|
||||
columnTitleUrl.appendChild(vendorP);
|
||||
hasVendor = true;
|
||||
}
|
||||
columnTitleUrl.appendChild(url)
|
||||
if (hasVendor) {
|
||||
const callToAction = document.createElement('a');
|
||||
callToAction.classList.add('search-button-buy-now');
|
||||
callToAction.innerText= `Compralo ahora en ${vendor}`;
|
||||
callToAction.href = searchObject.url;
|
||||
columnTitleUrl.appendChild(callToAction);
|
||||
}
|
||||
|
||||
rowTitleUrlImageDiv.appendChild(columnTitleUrl)
|
||||
|
||||
searchResultContainer.appendChild(rowTitleUrlImageDiv)
|
||||
content.classList.add('search-result-content');
|
||||
searchResultContainer.appendChild(content)
|
||||
searchResults.appendChild(searchResultContainer)
|
||||
}
|
||||
}
|
||||
|
||||
function noResults(searchResults) {
|
||||
searchResults.innerHTML = ""
|
||||
const p = document.createElement('p')
|
||||
p.innerText = 'No se han encontrado resultados, todavía, vamos a trabajar para encontrar resultados a esta busqueda, repitela en unos días.'
|
||||
searchResults.appendChild(p)
|
||||
}
|
||||
|
||||
function onExitSearch(event, firstUrl) {
|
||||
event.preventDefault();
|
||||
const searchOverlay = document.querySelector('div.search-overlay');
|
||||
|
@ -56,6 +56,7 @@ sub startup ($self) {
|
||||
$r->get('/stats')->to('Metrics#stats');
|
||||
$r->get('/product/:slug')->to('Product#direct_buy');
|
||||
$r->get('/producto/:slug')->to('Product#direct_buy');
|
||||
$r->get('/producto/<:slug>.json')->to('Product#get_data');
|
||||
$r->get('/search.json')->to('Search#search');
|
||||
$r->get('/search.html')->to('Search#search_user');
|
||||
$r->get('/farmacia-guardia.json')->to('FarmaciaGuardia#current');
|
||||
|
@ -30,4 +30,13 @@ sub direct_buy($self) {
|
||||
$self->redirect_to( $product->{url} );
|
||||
return;
|
||||
}
|
||||
|
||||
sub get_data($self) {
|
||||
my $products = BurguillosInfo::Products->new->Retrieve;
|
||||
my $slug = $self->param('slug');
|
||||
my $product = $products->{$slug};
|
||||
return $self->render(
|
||||
json => $product
|
||||
);
|
||||
}
|
||||
1;
|
||||
|
@ -67,13 +67,13 @@ div.warning-aliexpress {
|
||||
text-decoration: none;
|
||||
font-weight: bold; }
|
||||
div.warning-aliexpress div.buttons a.buy {
|
||||
color: #445e45;
|
||||
color: #5C25A0;
|
||||
background: #a9d9ab;
|
||||
border-color: #749d72; }
|
||||
border-color: transparent; }
|
||||
div.warning-aliexpress div.buttons a.back {
|
||||
color: grey;
|
||||
color: #732EC8;
|
||||
background: #ff958c;
|
||||
border-color: #ed574b; }
|
||||
border-color: transparent; }
|
||||
|
||||
div.tooltip-search-promo::after {
|
||||
content: " ";
|
||||
@ -247,22 +247,27 @@ body {
|
||||
margin: 30px;
|
||||
margin-left: 30px;
|
||||
margin-left: 10px;
|
||||
border: solid 3px #116fa8;
|
||||
padding: 20px;
|
||||
border-radius: 10px;
|
||||
background: #3e9dc2;
|
||||
color: aliceblue;
|
||||
background: #717ab9;
|
||||
color: white;
|
||||
font-weight: bold;
|
||||
text-decoration: none; }
|
||||
body div.search-overlay div.search-results div.search-result p.product-vendor {
|
||||
font-size: 10px;
|
||||
color: cornflowerblue; }
|
||||
body div.search-overlay div.search-results div.search-result p.search-result-content {
|
||||
body div.search-overlay div.search-results div.search-result div.search-result-content {
|
||||
background: aliceblue;
|
||||
width: fit-content;
|
||||
padding: 20px;
|
||||
margin-left: 90px;
|
||||
margin-right: 20px; }
|
||||
body div.search-overlay div.search-results div.search-result div.search-result-content a.expand {
|
||||
color: white;
|
||||
background: #717ab9;
|
||||
text-decoration: none;
|
||||
border-radius: 10px;
|
||||
padding: 10px; }
|
||||
body div.search-overlay div.bounding-search-bar {
|
||||
position: fixed;
|
||||
top: calc(100% - 74px);
|
||||
|
@ -95,14 +95,14 @@ div.warning-aliexpress {
|
||||
text-decoration: none;
|
||||
font-weight: bold;
|
||||
&.buy {
|
||||
color: #445e45;
|
||||
color: #5C25A0;
|
||||
background: #a9d9ab;
|
||||
border-color: #749d72;
|
||||
border-color: transparent;
|
||||
}
|
||||
&.back {
|
||||
color: grey;
|
||||
color: #732EC8;
|
||||
background: #ff958c;
|
||||
border-color: #ed574b;
|
||||
border-color: transparent;
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -315,11 +315,10 @@ body {
|
||||
margin: 30px;
|
||||
margin-left: 30px;
|
||||
margin-left: 10px;
|
||||
border: solid 3px #116fa8;
|
||||
padding: 20px;
|
||||
border-radius: 10px;
|
||||
background: #3e9dc2;
|
||||
color: aliceblue;
|
||||
background: #717ab9;
|
||||
color: white;
|
||||
font-weight: bold;
|
||||
text-decoration: none;
|
||||
}
|
||||
@ -327,12 +326,21 @@ body {
|
||||
font-size: 10px;
|
||||
color: cornflowerblue;
|
||||
}
|
||||
p.search-result-content {
|
||||
div.search-result-content {
|
||||
background: aliceblue;
|
||||
width: fit-content;
|
||||
padding: 20px;
|
||||
margin-left: 90px;
|
||||
margin-right: 20px;
|
||||
p {
|
||||
}
|
||||
a.expand {
|
||||
color: white;
|
||||
background: #717ab9;
|
||||
text-decoration: none;
|
||||
border-radius: 10px;
|
||||
padding: 10px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
File diff suppressed because one or more lines are too long
@ -1,6 +1,6 @@
|
||||
<div class="buttons">
|
||||
<img src="<%=$product->{img}%>" alt=""/>
|
||||
<a class="buy" href="<%=$product->{url}%>">Comprar ahora</a>
|
||||
<a class="buy" href="<%=$product->{url}%>">Visita Aliexpress para saber más</a>
|
||||
% if (defined $referer) {
|
||||
<a class="back" href="<%=$referer%>">Volver atrás</a>
|
||||
% }
|
||||
|
@ -33,13 +33,18 @@
|
||||
% if (defined $vendor) {
|
||||
<p class="product-vendor">Enlace promocionado de <%=$vendor%></p>
|
||||
% }
|
||||
<a href="<%=$url%>"><%=$base_url.$url%></a>
|
||||
<a href="<%=$base_url.$url%>"><%=$base_url.$url%></a>
|
||||
% if (defined $vendor) {
|
||||
<a class="search-button-buy-now" href="<%=$url%>">Compralo ahora en <%=$vendor%></a>
|
||||
<a class="search-button-buy-now" href="<%=$url%>">Visita <%=$vendor%> para saber más...</a>
|
||||
% }
|
||||
</div>
|
||||
</div>
|
||||
<p class="search-result-content"><%=$content%></p>
|
||||
<div class="search-result-content">
|
||||
<p><%=$content%></p>
|
||||
% if (defined $vendor) {
|
||||
<a href="#" class="expand">Expande la descripción</a>
|
||||
% }
|
||||
</div>
|
||||
</div>
|
||||
% }
|
||||
<p>Burguillos Info ©2022-<%=$year%> Sergio Iglesias</p>
|
||||
|
Loading…
Reference in New Issue
Block a user