Adding multiple fixes to the promoted products.

This commit is contained in:
sergiotarxz 2025-01-13 23:22:05 +01:00
parent 9068f7c5b7
commit 4c63bc6f1d
9 changed files with 82 additions and 101 deletions

View File

@ -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

View File

@ -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');

View File

@ -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');

View File

@ -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;

View File

@ -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);

View File

@ -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

View File

@ -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>
% }

View File

@ -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>