- Afficher les dates dans la vignette pour le modèle Agenda
Lorsque votre agenda n'a que peu de manifestations par date (ex: widget utilisé pour 1 structure : opéra, musée...) la présentation peut être problématique :
Vous pourriez utiliser un gabarit "Liste" au lieu du gabarit "Agenda", mais dans ce cas une manifestation qui se déroule plusieurs jours n'apparaîtra qu'une fois.
Pour remédier à ce problème vous pouvez conserver le gabarit "Agenda" et ajouter le code JS personnalisé suivant dans l'onglet "Avancé" de votre modèle ou de votre widget :
setInterval(presentDates,1000) ;
function presentDates() {
var childs = document.getElementsByClassName('results_agenda')[0].children ;
var date = null ;
for ( var i = 0 ; i < childs.length ; i++ )
{
if ( childs[i].classList.contains('presentDates') ) return ;
childs[i].className += ' presentDates' ;
if ( typeof childs[i].children[0] !== 'undefined' && childs[i].children[0].localName == 'h2' )
date = childs[i].children[0].innerText ;
else if ( childs[i].localName == 'a' )
childs[i].getElementsByClassName('town')[0].innerHTML = date ;
}
var dates = document.getElementsByClassName('full w_bg_2 mbs') ;
for ( let i = 0 ; i < dates.length ; i++ )
dates[i].style.display = 'none' ;
}
presentDates() ;
- Afficher l'ouverture en dessous du titre dans une offre
=> 
Javascript personnalisé :
setInterval(dateOffre,1000) ;
function dateOffre() {
var widgit_event_details = document.getElementById('widgit_event_details') ;
if ( widgit_event_details === null ) return ;
var openings = widgit_event_details.getElementsByClassName('openings') ;
if ( openings.length == 0 ) return ;
var opening = openings[0] ;
if ( opening.classList.contains('dateOffre') ) return ;
opening.className += ' dateOffre' ;
var txt = opening.getElementsByTagName('p')[0].innerHTML ;
opening.style.display = 'none' ;
widgit_event_details.getElementsByClassName('widgit_title')[0].innerHTML += '<br /><em>'+txt+'</em>' ;
}
- Personnalisation du nombre d’objets par page
Le nombre d'objets par page est actuellement limité à 20. Il y a la possibilité d'augmenter le nombre d'objets par page.
Dans la partie widget, dans l’onglet Avancé » puis le bloc « JavaScript personnalisé » :
Vous copiez/coller les éléments ci-dessous, en veillant à modifier l’id_widget = 123 ci-dessous en rouge par l'identifiant de votre widget que vous retrouvez dans l’url de votre widget, comme ici :
var id_widget = 123 ;
var nb_par_page = 200 ;
var lien = document.getElementsByClassName('show_batch_1') ;
var href = 'https://widgets.apidae-tourisme.com/refresh.js?widget[id]='+id_widget+'&widget_query[batch_number]=0&widget_query[batch_size]='+nb_par_page ;
lien[0].href = href ;
lien[0].setAttribute('data-w-href',href) ;
lien[0].click() ;
- Afficher les objets liés des itinéraires
Les objets liés peuvent remonter dans le détail des fiches si vous avez choisi l'option dans les champs à afficher dans le paramétrage de votre modèle de widget et widget :
Toutefois seules les fiches présentes dans les sélections seront exportées et disponibles, ce qui signifie qu'il faut prévoir une autre sélection incluant les objets liés de vos itinéraires.
En repartant de votre sélection itinéraire dans Apidae, modifiez votre filtre web et cliquez sur "afficher les objets liés du résultats" :
Vous lancez la recherche et l'enregistrez dans votre projet web widget en la nommant objets liés par exemple. Cette sélection ne servira pas pour créer un modèle de widget en particulier mais permettra juste que les objets liés soient bien présents dans la plateforme de widgets :
- Masquer l'affichage du tarif "à partir de" dans la vignette
Par défaut les tarifs des restaurants et des hébergements s'affichent dans la vignette avec la mention "A partir de". Lorsqu'on décide d'afficher plusieurs types d'objets ensemble, cette notion de tarif n'est plus forcément adaptée :
Il est possible de retirer cette information, en rajoutant ceci dans le code CSS personnalisé de votre widget :
#widgit p.rate { display: none; }
- Remonter en haut du widget lorsqu'on ouvre le détail d'une offre
var container = document.querySelector("#widgit");
container.addEventListener("widgit:details", function() {
document.getElementById("widgit").scrollIntoView({behavior: "smooth"});
});- Résoudre un problème de police qui se chevauche
Plus le site Internet où est installé le widget est ancien et plus la CSS peut être perturbée comme ici :
div#widgit .grid {
letter-spacing:normal !important;
word-spacing:normal !important;
}- Ne pas afficher le volet des filtres sur le côté gauche du widget
Pour y remédier, inclure le code suivant dans l'onglet "Avancé" de votre widget, dans la partie "Code javascript personnalisé" :
div#widgit_wrapper button#toggle_filters { display:none ; }
div#widgit_wrapper div.widgit_filters { display:none ; }
Commentaires
6 commentaires
Merci pour ce code très intéressant.
Je cherche un code pour augmenter le nombre de résultats par page qui est actuellement limité à 20. Avez-vous une idée ?
D'avance merci !
Bonjour Florence,
Actuellement cette option n'est pas prévue sur les widgets mais vous pouvez éventuellement le modifier de façon un peu artisanale en ajoutant le code suivant dans le javascript dédié de votre widget, en remplaçant id_widget par votre identifiant de widget, et nb_par_page par le nombre d'offres à ajouter :
Bonjour la communauté !
Je souhaite savoir si il existe code JS ou une bidouille CSS pour substituer le visuel logo Apidae par défaut qui est inséré dans une fiche du widget lorsqu'elle ne comporte pas d'image ?
Merci par avance et bonne semaine à tous !
Bonjour la Communauté,
Comment puis-je faire pour afficher dans le filtre de gauche non pas le nombre de résultats par page mais le résultat global en fonction du filtre ?
Je ne m'y connais pas en Java ... et le css ne va pas m'aider sur ce coup là.
Merci pour votre aide ?
Bonjour à tous,
Je cherche une astuce pour augmenter la taille des vignettes histoire de rendre les offres plus lisibles.
Avez-vous un CSS "prêt-à-l'emploi"?
Merci!!
Moi, j'ai mis cela :
#widgit_wrapper.w_large .grid.has-gutter>* {
width: calc(129% / 4 - 10px - 0.01px);
}
#widgit .widgit_result>img {
height: 261px;
}
Mais je pense qu'il a beaucoup mieux !
Vous devez vous connecter pour laisser un commentaire.