Immagine sullo shop 
Auteur : Roberto M.Salve a tutti. Recentemente KoolAsim ha postato quello che secondo lui era il codice da inserire nel blog affinchè potesse esserci una immagine sotto la stiky-bar o header. Il codice funziona perfettamente e mi chiedevo se la procedura può essere ripetuta nella pagina E-Commerce ricerca al passo 3 e, in caso di positive risultanze, qual'è il reale identificatore ID. Intanto tiriamo giù il codice di KoolAsim per il BLOG che è il seguente:▼
<script>
$( document ).ready(function() { //K>;
/** immagine extra x corpo del blog responsive by KolAsim **/
imgK = 'https://www.styleinaction.it/images/banne2r.jpg'
divK = '<div id = "divK" style = "position:relative;z-index:0;left:0px;'+
'width:100%;height:auto;background-color:rgb(253,245,155);">'+
'<img src = " '+ imgK+' " width="100%"></div>';
$("#imBlogPage").prepend(divK);
}); //K<<;
</script>
Come vedete pesca l'immagine su un percorso assoluto e funziona comme nella pagina che POSTO. Quindi la domanda è se si può fare una cosa del genere anche sulla pagina E-Commerce ricerca al passo 3 ossia QUESTA
Ringrazio per l'attenzione.
... prova con questa variante al mio codice che avevo inventato per altri scopi ma di concetto universale:
<script>
$( document ).ready(function() { //K>;
/** immagine extra x corpo cartserach WSx5 responsive by KolAsim **/
imgK = 'https://www.styleinaction.it/images/banne2r.jpg'
divK = '<div id = "divK" style = "position:absolute;z-index:0;left:0px;'+
'width:100%;height:auto;background-color:rgb(253,245,155);">'+
'<img src = " '+ imgK+' " width="100%"></div>';
$("#im-cartsearch-container").prepend(divK);
resizeK()
}); //K<<;
$(window).on('resize', function() {//K2>;
resizeK()
})//K2<<;
function resizeK(){//K3>;
imgHK = $("#divK").height()
$(".filter-sidebar,.items-container,#imFooter").css("position","relative").css("top",imgHK);
}//K3<<;
</script>
.
ciao
.
scusa Roberto per l'intromissione ma visto l'argomento chiedevo a KolAsim
volendo aggiungere un border-radius: 20px all'immagine dello script?
... x bordo tondo e grigio modifica questa stringa così:
'<img src = " '+ imgK+' " width="100%" style = "border-radius:20px;border:solid 4px silver"></div>';
... essendo una pagina elaborata dal PHP forse sarebbe utile applicare un ritardo di un paio di secondi...
.
ciao
.
Auteur
Allora Kol intanto sempre un grazie grandissimo. Per il resto Il codice funziona solo che diminuendo la risoluzione quando arriva ai 480px la lente di ingrandimento, che dovrebbe far uscire a sx la lista di ricerca, non funziona !!!Come se fosse bloccata.
Auteur
Aggiungo che necessita di un paio di secondi di ritardo. INfatti ogni volta che la lancio devo forzare la cache con CTRL-R
Auteur
Niente! ho notato che ad ogni avvio dello shop bisogna forzare manualmente con CTRL-R per far comparire l'immagine sopra lo shop altrimenti viene vista dietro. In attesa ho ripristinato le condizioni originarie della pagina senza codice.
ciao Roberto hai provato anche con un ritardo?
ora io non sono KolAsim che è un maestro, ma sbirciando i suoi codici forse potresti provare qualcosa del genere, naturalmente mi correggerà lui eventuali errori di sintassi sul codice
<script>
$( document ).ready(function() { //K>;
/** immagine extra x corpo cartserach WSx5 responsive by KolAsim **/
imgK = 'https://www.styleinaction.it/images/banne2r.jpg'
divK = '<div id = "divK" style = "position:absolute;z-index:0;left:0px;'+
'width:100%;height:auto;background-color:rgb(253,245,155);">'+
'<img src = " '+ imgK+' " width="100%"></div>';
$("#im-cartsearch-container").prepend(divK);
resizeK()
}); //K<<;
$(window).on('resize', function() {//K2>;
setTimeout(function(){ //K4>
fullscreenK()
}, 1000); //K4<<
resizeK()
})//K2<<;
function resizeK(){//K3>;
imgHK = $("#divK").height()
$(".filter-sidebar,.items-container,#imFooter").css("position","relative").css("top",imgHK);
}//K3<<;
</script>
Auteur
Ciao Giancarlo. intanto grazie anche a te. Si funziona come funzionava anche il codice di kolasim ma ci sono due problemi e puoi contstarlo anche da te con una prova in locale su un qualsiasi tuo progetto. Il primo: l'immagine si pone dietro il container dello shop. Bisogna fisicamente fare ctrl-R per farlo stare dove dovrebbe stare ossia prima del container dello shop. Il secondo problema è che simulando la chiusura verso i device mobili sull'ultimo breack-point da 480PX non esce la barra di ricerca.Sembra come bloccata. In attesa che si possa risolvere a fronte dei due problemi segnalati, la pagina in esame è stata ripristinata alle condizioni originarie ossia senza il codice suggerito....per il mnt.
Ciao Roberto si facendo un test in locale ho visto delle anomalie:
PROBLEMA FOOTER
Auteur
Pare proprio che lo shop non digerisca codice extra.
credo sia da ritoccare il codice per adattarlo, se può essere d'aiuto per Kol io posso mettere online la pagina su una directory di test, oppure fai tu Roberto come credi.
Auteur
Giancarlo se non ti pesa magari crea una directory test dato che il mio sito come il tuo sono attualmente operativi.
Cero Roberto nessun problema, ecco la pagina test online:
https://www.giancarloweb.it/GW-test/cartsearch/index.html
Auteur
Bene non ci rimane che attendere le valutazioni di Kolasim.
ciao, ... sono rientrato da poco, ed effettivamente ho notato il problema che hai segnalato, ma che non si verifica nella doversa struttura di Giancarlo......
... ... allora puoi provare con questo mio storico codice per div_custom che non dovrebbe interferire con le funzioni della lente...
... l'altezza del banner è relativa allo luce fissa di 100px (98px) attualmente disponibili e dovrebbe presentarsi abbastanza bene, e c'è un ritardo di due secondi (2000ms):
<script>
$( document ).ready(function() { //K>;
/** immagine extra x corpo cartserach WSx5 responsive by KolAsim **/
imgK = 'https://www.styleinaction.it/images/shopbanner1.jpg'
divK = '<div id = "divK" style = "background: url('+imgK+');background-position: center center;'+
'background-repeat: no-repeat; background-size: cover ; position:absolute;'+
'width:100%;height:98px;top:-98px"></div>';
setTimeout(function(){//K1>;
$("#im-cartsearch-container").prepend(divK);
}, 2000); //K1<<;
}); //K<<;
</script>
.
... prova e nel caso fatti/fatevi sentire...
.
ciao a tutti
.
Ciao Kol sempre grazie, ho inserito il nuovo codice alla pagina linkata sopra ora l'immagine è dentro l'header non so se è corretto, io pensavo dovesse essere sotto all'header tipo il blog.
Auteur
Seguo.In effetti scompare il menu. Kol per intenderci dovrebbe andare tutto come vedi NELL'ESEMPIO
Te l'ho messo per non farti ritornare al primo post. La pagine test rimane quella di Giancarlo web.
ciao Giancarlo, la struttura della tua pagina è diversa da quella di Roberto, infatti mi sono basato sulla sua pagina secondo quanto detto prima: l'altezza del banner è relativa allo luce fissa di 100px (98px) attualmente disponibili.
ciao Roberto, ... vedi se puoi fare la prova online, magari va bene per te...
...
... ci risentiamo...
.......................................
... ps. per Giancarlo, ... prova a togliere il codice per poter valutare la struttura vergine, così domani potrei dargli un'occhiata......
.
ciao
ok Kol, aggiornato sito senza codici, stesso link, grazie a domani.
Auteur
Ciao KolAsim. Funziona tutto! Ho dovuto giocare con le altezze e nei prossimi gg metto una immagine più adatta. L'unica cosa che non va (ripeto... se non si può non fa nulla magari mi gioco una immagine come grafico...) è che il banner non si ridimensiona alle risoluzioni più basse ma ripeto, lavorando di grafica posso trovare un compromesso. Grazie come sempre - CODICEBYKOLASIM
Seguo con interesse l'evolversi per Giancarlo.
ciao Roberto, ho visto velocemente il tuo esempio e pare funzionare molto bene...
-----------------------------------------
ciao Giancarlo. ... pur avendo refreshato mi si presenta sempre il codice, ... comunque credo di aver capito lo stesso il problema...
... sostituisci il codice con questa variante, dove puoi impostare i valori reali di altezza dell'header e quelle che vuoi assegnare in altezza al banner:
<script>
$( document ).ready(function() { //K>;
/** immagine extra x corpo cartserach WSx5 responsive by KolAsim **/
imgK = 'https://www.styleinaction.it/images/shopbanner1.jpg'
headerHK = 56; // 56 = altezza header;
bannerHK = 100 ; // altezza assegnata al banner;
//---------------------------------------------
divK = '<div id = "divK" style = "background: url('+imgK+');background-positionX: center center;'+
'background-repeat: no-repeat;background-position: center center; background-size: cover ;'+
' position:absolute;width:100%;height:'+bannerHK+'px;border-radius:20px;top:-'+bannerHK+'px"></div>';
setTimeout(function(){//K1>;
$("#im-cartsearch-container").append(divK);
$("#im-cartsearch-container").wrap('<div id ="wrapK" style = "position:relative;'+
'width:100%;height:100%;top:'+(bannerHK+2)+'px"></div>'); // +2 = margine da header;
$(" #im-cartsearch-container").css("padding","0px").css("margin","0px")
$("#imFooter").css("position","relative").css("top", bannerHK+"px");
$("#imFooterBg").css("bottom",-bannerHK+"px");
}, 2000); //K1<<;
}); //K<<;
</script>
..............
cao a tutti
.
WOW!!! Super KolAsim
... ho visto, ... grazie anche a te per la partecipazione ... ciao ...
Auteur
Azz....scusate ma ho clikkato sull'ultimo post come utile ma è venuto un segno di mano rosso non è che ho combinato qualcosa come a dire non utile? Non sia mai.
@Roberto ..
quando la manina diventa rossa, significa che hai dato l'utile... ricliccandola torna verde e lo togli... (quindi se è verde non hai dato l'utile, se è rossa si...)
a proposito di "utile"...
sta proprio bene l'immagine sia nel blog, ma specialemente nella ricerca ecommerce... peccato che non li usi ... comunque bell'idea Roberto !
Lo STAFF dovrebbe considerare di mettere questa opzione nel programma
Auteur
Secondo me una bella immagine vale più di mille parole e grazie a kolasim avevo in precedenza maturato l'idea per il blog poi come al solito, sempre avvelenato di novità, mi sono chiesto se era possibile farlo pure sullo store e kolasim ci ha dato il tocco finale. Incomedia dovrebbe prendere spunto da queste situazioni e metterle in atto a favore dei suoi clienti ma lo capiranno mai????