afficher les commnade prestashop dans un calendrier

[Rdev]

bonjour,

 

je veux afficher les commandes passé pour chaque client dans un calendrier c'est à dire un planning des commande passées dans FO

 

est ce que c'est faisable est merci

 

[Timactive]

Bonjour Rdev,

Oui c'est totalement faisable me cela nécessite du développement conséquent.

Une solution sympas serait d'utiliser l'api google calendar

Créer un module Prestashop qui va se greffer au hookNewOrder ou hookValidateOrder, hookUpdateOrder.

Une page controller pour afficher le calendrier 

 

Plus je suppose plusieurs détails techniques que vous n'avez pas encore soulevé.

 

Question : dans quel contexte fonctionnel souhaitez vous cette fonctionnalité, c'est pour gérer des réservations?

Edited September 23, 2014 by Timactive (see edit history)

[Rdev]

bonjour Timactive,

 

je veux afficher les commandes dans un calendrier juste un affichage pour les clients (besoin de mon client)

 

je vais voir avec api google calendar et voir si ça donne une chose

[Rdev]

avec api google calendar c'est compliqué je vais chercher une autre solution

[Timactive]

L'utilisation de l'api google calendar n'est pas une nécessité, cependant pourriez vous expliquer quel type de date souhaitez vous présenter dans ce calendrier et dans quel contexte?

[Rdev]

je veux affichage du planning de commande comme un diagramme de gantt

comme cet exemple https://github.com/thegrubbsian/jquery.ganttView

 

mais je n'ai pas pu affiché les commandes dans ce diagramme

[Timactive]

Rdev,

 

Voici une petite demo que je viens de réaliser sur prestashop 1.6

 

 

 

TUTO

 

Vous placez les fichiers présents sur github dans le répertoire js de votre thème c'est à dire :

themes/[votretheme]/js/jganttview/jquery.ganttView.js

themes/[votretheme]/js/jganttview/date.js

themes/[votretheme]/js/jganttview/jquery.ganttView.css

themes/[votretheme]/js/jganttview/jquery-ui-1.8.4.css

 

Modifiez le fichier history.tpl en intégrant les scripts et css :

<link rel="stylesheet" type="text/css" href="{$js_dir}jganttview/jquery-ui-1.8.4.css" />
<link rel="stylesheet" type="text/css" href="{$js_dir}jganttview/jquery.ganttView.css" />
<script type="text/javascript" src="{$js_dir}jganttview/jquery.ganttView.js"></script>
<script type="text/javascript" src="{$js_dir}jganttview/date.js"></script>

Toujours dans le fichiers history.tpl parcourir  les commandes et alimenter l'objet gantData

Avec comme

date de début => la date d'ajout de la commande

date de fin => la date de livraison de la commande

 

Après tout dépend de votre besoin.

<script type="text/javascript">
var ganttData = [];


{foreach from=$orders item=order name=myLoop}
ganttData.push(
{
id: {$order.id_order}, name: "Commande {$order.reference}", series: [
{ name: "Date de la commande", start: new Date({$order.date_add|date_format:"%Y,%m,%d"}), end: new Date({$order.delivery_date|date_format:"%Y,%m,%d"}) }
]
});
console.log(ganttData);
{/foreach}
$(function () {
$("#ganttChart").ganttView({ 
data: ganttData,
slideWidth: 900,
behavior: {
onClick: function (data) { 
var msg = "You clicked on an event: { start: " + data.start.toString("M/d/yyyy") + ", end: " + data.end.toString("M/d/yyyy") + " }";
$("#eventMessage").text(msg);
},
onResize: function (data) { 
var msg = "You resized an event: { start: " + data.start.toString("M/d/yyyy") + ", end: " + data.end.toString("M/d/yyyy") + " }";
$("#eventMessage").text(msg);
},
onDrag: function (data) { 
var msg = "You dragged an event: { start: " + data.start.toString("M/d/yyyy") + ", end: " + data.end.toString("M/d/yyyy") + " }";
$("#eventMessage").text(msg);
}
}
});


// $("#ganttChart").ganttView("setSlideWidth", 600);
});
</script>

history.tpl : Ajouter la div qui va inclure le diagramme 

<div id="ganttChart"></div>
<br/><br/>
<div id="eventMessage"></div>

evenMessage est un bloc qui va afficher les évènements sur le schéma, click, drag, ....

 

 

[Rdev]

merci un grand merci pour ce tuto

 

mais il y a un petit problème, les dates ne sont pas correctes, une commande est passée en septembre et dans le gantt il affiche octobre, il y a un décalage dans les mois

[Timactive]

Bizarre, pouvez vous afficher le code source de la page, et me transmettre juste la partit qui alimente l'object ganttData.

[Rdev]

voici les données

[{"id":"28","name":"","series":[{"name":"","start":"new Date(2014,09,20)","end":"new Date(2014,09,20)"}]}]
[{"id":"32","name":"","series":[{"name":"","start":"new Date(2014,09,23)","end":"new Date(2014,09,23)"}]}]
[{"id":"33","name":"","series":[{"name":"","start":"new Date(2014,09,23)","end":"new Date(2014,09,23)"}]}]
[{"id":"34","name":"","series":[{"name":"","start":"new Date(2014,09,23)","end":"new Date(2014,09,23)"}]}]
[{"id":"35","name":"","series":[{"name":"","start":"new Date(2014,09,23)","end":"new Date(2014,09,23)"}]}]
[{"id":"36","name":"","series":[{"name":"","start":"new Date(2014,09,23)","end":"new Date(2014,09,23)"}]}]
[{"id":"37","name":"","series":[{"name":"","start":"new Date(2014,09,23)","end":"new Date(2014,09,23)"}]}]
[{"id":"73","name":"","series":[{"name":"","start":"new Date(2014,09,18)","end":"new Date(2014,09,18)"}]}]
[{"id":"91","name":"","series":[{"name":"","start":"new Date(2014,09,22)","end":"new Date(2014,09,22)"}]}]

[Timactive]

Rdev, tu ne devrais pas avoir de guillemets entre new Date(2014,09,20).

Pourquoi avoir choisi cette librairie, je vois quel n'a pas été mis à jour depuis 4 ans.

J'ai trouvé celles-ci :

https://github.com/robicch/jQueryGantt

ou

http://taitems.github.io/jQuery.Gantt/

Vous pouvez appliquer exactement le même principe indiqué plus haut, essayez de voir si les guillemets résolvent votre premier problème.

[Had]

BOnjour,

 

Le sujet m'interesse également ! Mais je cherche plutot à afficher un calendrier comme celui ci dans le backoffice, ce qui permettrait à l'admin d'avoir une vision globale du temps de traitement des commandes.

 

Une piste ?

[Had]

up