[Résolu] LISE et Calendrier des disponibilités

Note de ce sujet :
  • Moyenne : 0 (0 vote(s))
  • 1
  • 2
  • 3
  • 4
  • 5
#1
Citation :#~~~~~ DEBUT BLOC A NE PAS SUPPRIMER ~~~~~
#~ Version du CMS: 2.1.2
#~ Url du site :
#~ Hébergeur / Soft : OVH Perso
#~ Informations Système :
#~~~~~ FIN BLOC A NE PAS SUPPRIMER ~~~~~

Bonjour,

Avant de me lancer dans la construction d'un nouveau site, je fais un rapide état des lieux des modules à adapter.

Je souhaite faire une liste de produits avec un calendrier des disponibilités. Sur base des forums, je pensais partir sur ListIt2 (devenu LISE) et JSAvailability (plus mis à jour).

- Que pensez-vous de cette solution ?
- Pensez-vous possible d'adapter un multidate picker (backend) et un multidate calendar (frontend), comme pouvais le faire JSAvailability, sur LISE ?
- Avez-vous une meilleure piste à suivre ?

D'avance merci !
CMSMS : Version 2.1.2 (nouveaux sites)
Local : WampServer
Serveur : OVH Perso (généralement)
#1
Citation :#~~~~~ DEBUT BLOC A NE PAS SUPPRIMER ~~~~~
#~ Version du CMS: 2.1.2
#~ Url du site :
#~ Hébergeur / Soft : OVH Perso
#~ Informations Système :
#~~~~~ FIN BLOC A NE PAS SUPPRIMER ~~~~~

Bonjour,

Avant de me lancer dans la construction d'un nouveau site, je fais un rapide état des lieux des modules à adapter.

Je souhaite faire une liste de produits avec un calendrier des disponibilités. Sur base des forums, je pensais partir sur ListIt2 (devenu LISE) et JSAvailability (plus mis à jour).

- Que pensez-vous de cette solution ?
- Pensez-vous possible d'adapter un multidate picker (backend) et un multidate calendar (frontend), comme pouvais le faire JSAvailability, sur LISE ?
- Avez-vous une meilleure piste à suivre ?

D'avance merci !
CMSMS : Version 2.1.2 (nouveaux sites)
Local : WampServer
Serveur : OVH Perso (généralement)
#2
Finalement, j'ai d'utilisé une méthode purement LISE. N'ayant pas l'habitude de ce module, je n'y avais pas pensé directement. Désolé du dérangement Big Grin

Ainsi, j'ai créé deux listes LISE : une liste de produits (avec les champs descriptifs souhaités) et une liste des réservation (avec le champs date et la liste des produits). Par après, il suffit d'afficher la liste des produits en faisant appel aux dates de réservation propres à chaque produit.

Voici le détail des étapes effectuées :

Installation du module LISE
Création des deux instances LISE (LISEProduits et LISEReservations)
Définition des champs de LISEProduits
- Catégories | type Catégories
- Description | type Zone de texte
- Photo | type Envoi de fichier
- ...
Définition des champs de LISEReservations
- Produit| type Elément d'une instance LISE :p Important
- Instance : LISEProduits
- Identifiant : title
- Sub Type : Menu déroulant
- Date | type Sélectionner une date + heure
- Format Type : Date Format
Création du gabarit de sommaire Calendrier dans LISEReservations
Le gabarit de sommaire Calendrier de LISEReservations reprend les liens vers les scripts (JS) nécessaires pour construire le calendrier et construit la variable eventArray reprenant les dates de réservation seulement du produit demandé.
Code :
[== Indéfini ==]
<div class="cal1"></div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.8.3/underscore-min.js"></script>
<script src="http://momentjs.com/downloads/moment-with-locales.js"></script>
<script src="uploads/calendar/clndr.js"></script>

<script>
var calendars = {};
$(document).ready( function() {
moment.locale('fr');
var eventArray = [

{foreach from=$items item=i}
{if $i->fielddefs.produit.value == $item->title}
{literal}{{/literal}
  date: '{$i->fielddefs.date.value|date_format:"%Y-%m-%d"}'
{literal}},{/literal}
{/if}
{/foreach}

];
calendars.clndr1 = $('.cal1').clndr({
        events: eventArray,
        clickEvents: {
            click: function (target) {
                console.log('Cal-1 clicked: ', target);
            },
            today: function () {
                console.log('Cal-1 today');
            },
            nextMonth: function () {
                console.log('Cal-1 next month');
            },
            previousMonth: function () {
                console.log('Cal-1 previous month');
            },
            onMonthChange: function () {
                console.log('Cal-1 month changed');
            },
            nextYear: function () {
                console.log('Cal-1 next year');
            },
            previousYear: function () {
                console.log('Cal-1 previous year');
            },
            onYearChange: function () {
                console.log('Cal-1 year changed');
            },
            nextInterval: function () {
                console.log('Cal-1 next interval');
            },
            previousInterval: function () {
                console.log('Cal-1 previous interval');
            },
            onIntervalChange: function () {
                console.log('Cal-1 interval changed');
            }
        },
        multiDayEvents: {
            singleDay: 'date',
            endDate: 'endDate',
            startDate: 'startDate'
        },
        showAdjacentMonths: true,
        adjacentDaysChangeMonth: false
    });

    // Bind all clndrs to the left and right arrow keys
    $(document).keydown( function(e) {
        // Left arrow
        if (e.keyCode == 37) {
            calendars.clndr1.back();
        }

        // Right arrow
        if (e.keyCode == 39) {
            calendars.clndr1.forward();
        }
    });
});
</script>
Ajout du calendrier à la fin du gabarit de détail Liste dans LISEProduits
Code :
[== Indéfini ==]
...
        {/foreach}
    </div>
    {/if}
        
        <div id="calendrier">{LISEReservations template_summary="calendrier"}</div>

    <div id="retour"><a href="{$return_url}" class="return-link">Retour</a>{* or use {$return_link} to create link tag *}</div>
</div>
<!-- item //-->
Insérer la liste de produits dans une page de contenu
Code :
[== Indéfini ==]
{LISEProduits action='category'}

L'exemple est basé sur le calendrier jquery CLNDR.js, d'autres calendriers peuvent évidemment être utilisés. Cool
CMSMS : Version 2.1.2 (nouveaux sites)
Local : WampServer
Serveur : OVH Perso (généralement)
#2
Finalement, j'ai d'utilisé une méthode purement LISE. N'ayant pas l'habitude de ce module, je n'y avais pas pensé directement. Désolé du dérangement Big Grin

Ainsi, j'ai créé deux listes LISE : une liste de produits (avec les champs descriptifs souhaités) et une liste des réservation (avec le champs date et la liste des produits). Par après, il suffit d'afficher la liste des produits en faisant appel aux dates de réservation propres à chaque produit.

Voici le détail des étapes effectuées :

Installation du module LISE
Création des deux instances LISE (LISEProduits et LISEReservations)
Définition des champs de LISEProduits
- Catégories | type Catégories
- Description | type Zone de texte
- Photo | type Envoi de fichier
- ...
Définition des champs de LISEReservations
- Produit| type Elément d'une instance LISE :p Important
- Instance : LISEProduits
- Identifiant : title
- Sub Type : Menu déroulant
- Date | type Sélectionner une date + heure
- Format Type : Date Format
Création du gabarit de sommaire Calendrier dans LISEReservations
Le gabarit de sommaire Calendrier de LISEReservations reprend les liens vers les scripts (JS) nécessaires pour construire le calendrier et construit la variable eventArray reprenant les dates de réservation seulement du produit demandé.
Code :
[== Indéfini ==]
<div class="cal1"></div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.8.3/underscore-min.js"></script>
<script src="http://momentjs.com/downloads/moment-with-locales.js"></script>
<script src="uploads/calendar/clndr.js"></script>

<script>
var calendars = {};
$(document).ready( function() {
moment.locale('fr');
var eventArray = [

{foreach from=$items item=i}
{if $i->fielddefs.produit.value == $item->title}
{literal}{{/literal}
  date: '{$i->fielddefs.date.value|date_format:"%Y-%m-%d"}'
{literal}},{/literal}
{/if}
{/foreach}

];
calendars.clndr1 = $('.cal1').clndr({
        events: eventArray,
        clickEvents: {
            click: function (target) {
                console.log('Cal-1 clicked: ', target);
            },
            today: function () {
                console.log('Cal-1 today');
            },
            nextMonth: function () {
                console.log('Cal-1 next month');
            },
            previousMonth: function () {
                console.log('Cal-1 previous month');
            },
            onMonthChange: function () {
                console.log('Cal-1 month changed');
            },
            nextYear: function () {
                console.log('Cal-1 next year');
            },
            previousYear: function () {
                console.log('Cal-1 previous year');
            },
            onYearChange: function () {
                console.log('Cal-1 year changed');
            },
            nextInterval: function () {
                console.log('Cal-1 next interval');
            },
            previousInterval: function () {
                console.log('Cal-1 previous interval');
            },
            onIntervalChange: function () {
                console.log('Cal-1 interval changed');
            }
        },
        multiDayEvents: {
            singleDay: 'date',
            endDate: 'endDate',
            startDate: 'startDate'
        },
        showAdjacentMonths: true,
        adjacentDaysChangeMonth: false
    });

    // Bind all clndrs to the left and right arrow keys
    $(document).keydown( function(e) {
        // Left arrow
        if (e.keyCode == 37) {
            calendars.clndr1.back();
        }

        // Right arrow
        if (e.keyCode == 39) {
            calendars.clndr1.forward();
        }
    });
});
</script>
Ajout du calendrier à la fin du gabarit de détail Liste dans LISEProduits
Code :
[== Indéfini ==]
...
        {/foreach}
    </div>
    {/if}
        
        <div id="calendrier">{LISEReservations template_summary="calendrier"}</div>

    <div id="retour"><a href="{$return_url}" class="return-link">Retour</a>{* or use {$return_link} to create link tag *}</div>
</div>
<!-- item //-->
Insérer la liste de produits dans une page de contenu
Code :
[== Indéfini ==]
{LISEProduits action='category'}

L'exemple est basé sur le calendrier jquery CLNDR.js, d'autres calendriers peuvent évidemment être utilisés. Cool
CMSMS : Version 2.1.2 (nouveaux sites)
Local : WampServer
Serveur : OVH Perso (généralement)
#3
Merci beaucoup pour ta démonstration Smile
N'hésite pas à nous faire découvrir tes autres solutions maison.

Tu peux utiliser une manière plus rapide d'écrire des accolades échappées :
{literal}{{/literal} -> {ldelim}
{literal}}{/literal} -> {rdelim}
#3
Merci beaucoup pour ta démonstration Smile
N'hésite pas à nous faire découvrir tes autres solutions maison.

Tu peux utiliser une manière plus rapide d'écrire des accolades échappées :
{literal}{{/literal} -> {ldelim}
{literal}}{/literal} -> {rdelim}
#4
Merci bien. J'applique cette correction. Wink
CMSMS : Version 2.1.2 (nouveaux sites)
Local : WampServer
Serveur : OVH Perso (généralement)
#4
Merci bien. J'applique cette correction. Wink
CMSMS : Version 2.1.2 (nouveaux sites)
Local : WampServer
Serveur : OVH Perso (généralement)


Atteindre :


Utilisateur(s) parcourant ce sujet : 1 visiteur(s)