[1.7.8.11] Question bête

lnasay · March 28

Hello,

Je voulais savoir si il existe un module pour faire apparaître dans le back-office à côté de commande une bulle rouge avec à l'intérieur le nombre des nouvelles commandes, une notification quoi, mais à côté du menu commande ☺️

Merci

kidestok · March 28

Order Notifications on the Favicon

v1.0.0 - par PrestaShop

kidestok · March 28

kidestok · March 28

https://addons.prestashop.com/en/emails-notifications/41965-favicon-notifications-in-the-back-office.html

lnasay · March 28

Hello 😊 oui j'ai déjà le module, mais moi je voulais à côté dans le menu où y'a écrit commandes, un peu à la manière quand on reçoit un commentaire dans le blog y'a un notif dans un rond rouge, sinon je peux le faire mais je pensais qu'il existait déjà un module comme ça.

Merci quand même, je vais récupérer le code du module notification favicon et m'en servir pour le faire alors.

lnasay · March 30

Hello,

J'ai réussi à faire ce que je voulais mais y'a un petit problème j'ai l'impression qu'on peut pas avoir 2 fois la même variable sur la même page, soit celui du menu fonctionne ou bien soit celle de la notification toolbar marche mais les 2 en même temps non 😐, je comprends pas.

code

      {* Notifications *}
      {if $show_new_orders }
        <ul class="header-list component">
          <li id="notification" class="dropdown">
            <a href="javascript:void(0);" class="notification dropdown-toggle notifs">
              <span id="total_notif_number_wrapper dawnmenu" class="notifs_badge hide">
                <span id="total_notif_value">0</span>
              </span>
            </a>
      {/if}

Si quelqu'un à une idée 🤐

Edited March 30 by lnasay (see edit history)

lnasay · March 30

Je sais pas comment faire pour que les deux fonctionnent en même temps 🤔

Mediacom87 · March 30

il y a 59 minutes, lnasay a dit :

Si quelqu'un à une idée 🤐

Un ID est unique, s'il y a deux ID, seul le premier est "visible".

il y a 59 minutes, lnasay a dit :

Je sais pas comment faire pour que les deux fonctionnent en même temps 🤔

Il faut réécrire le JavaScript du module pour s'appuyer sur des class et non id.

lnasay · March 30

Hello Mediacom87 merci je vais regarder c'est mieux si les deux fonctionnent bien 🤗

lnasay · March 30

Voilà j'ai réussi le résultat est trop beau, j'ai ajouté une animation flip du badge 😁

Merci Mediacom 87

      {if $show_new_orders }
          <id="notification" class="dropdown">
              <span id="total_notif_number_wrapper" class="notifs_badge hide dawnmenu"><br>
              Nouvelles commandes 
                <span id="total_notif_valuemenu" class="flipo">0</span>
              </span>
      {/if}
            
            
            
            
            
            -----------------------------
            
                var notifCount = parseInt(json.order.total) + parseInt(json.customer.total) + parseInt(json.customer_message.total);
      if (notifCount > 0) {
        $("#total_notif_number_wrapper").removeClass('hide');
        $('#total_notif_value').text(notifCount);
		$('#total_notif_valuemenu').text(notifCount);

      } else {
        $("#total_notif_number_wrapper").addClass('hide');
      }
    }
  });
}

Edited March 30 by lnasay (see edit history)

kidestok · March 30

Salut Inasay,

je voudrais bien le faire aussi...

Peux tu me dire tout ce que tu as modifié?

je suis un 1.7.5.1

Merci

gregory

lnasay · March 31

Hello je te donne les explications ce soir 😊

kidestok · March 31

44 minutes ago, lnasay said:

Hello je te donne les explications ce soir 😊

merci

bonne journée

lnasay · March 31

De rien, au cas où tu sais pas c'est quoi la balise href de toutes les commandes ça peut être sympa de rajouter le lien en cliquant dessus.

J'ai amélioré le css

#ordernotifc {
  padding:14px 0 12px;
  padding:0.875rem 0 0.75rem;
  margin:29.008px 0 0 15.008px;
  margin:1.813rem 0 0 0.938rem;
  font-size: 12px;
  font-size: 0.75rem;
  border-top:1px solid #bbcdd2;
  align-items: center;
  color: #bebebe;
  animation-duration: .9s;
  animation-timing-function: cubic-bezier(.10, .10, 1, 0);
}
@-webkit-keyframes slideInLeft {
  from {
    -webkit-transform: translate3d(-100%, 0, 0);
    transform: translate3d(-100%, 0, 0);
    visibility: visible; }
  to {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0); } }
@keyframes slideInLeft {
  from {
    -webkit-transform: translate3d(-100%, 0, 0);
    transform: translate3d(-100%, 0, 0);
    visibility: visible; }
  to {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0); } }
.slideInLeft {
  -webkit-animation-name: slideInLeft;
  animation-name: slideInLeft; }

@-webkit-keyframes flipInY {
  from {
    -webkit-transform: perspective(400px) rotate3d(0, 1, 0, 90deg);
    transform: perspective(400px) rotate3d(0, 1, 0, 90deg);
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in;
    opacity: 0; }
  40% {
    -webkit-transform: perspective(400px) rotate3d(0, 1, 0, -20deg);
    transform: perspective(400px) rotate3d(0, 1, 0, -20deg);
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in; }
  60% {
    -webkit-transform: perspective(400px) rotate3d(0, 1, 0, 10deg);
    transform: perspective(400px) rotate3d(0, 1, 0, 10deg);
    opacity: 1; }
  80% {
    -webkit-transform: perspective(400px) rotate3d(0, 1, 0, -5deg);
    transform: perspective(400px) rotate3d(0, 1, 0, -5deg); }
  to {
    -webkit-transform: perspective(400px);
    transform: perspective(400px); } }
@keyframes flipInY {
  from {
    -webkit-transform: perspective(400px) rotate3d(0, 1, 0, 90deg);
    transform: perspective(400px) rotate3d(0, 1, 0, 90deg);
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in;
    opacity: 0; }
  40% {
    -webkit-transform: perspective(400px) rotate3d(0, 1, 0, -20deg);
    transform: perspective(400px) rotate3d(0, 1, 0, -20deg);
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in; }
  60% {
    -webkit-transform: perspective(400px) rotate3d(0, 1, 0, 10deg);
    transform: perspective(400px) rotate3d(0, 1, 0, 10deg);
    opacity: 1; }
  80% {
    -webkit-transform: perspective(400px) rotate3d(0, 1, 0, -5deg);
    transform: perspective(400px) rotate3d(0, 1, 0, -5deg); }
  to {
    -webkit-transform: perspective(400px);
    transform: perspective(400px); } }
.flipInY {
  -webkit-backface-visibility: visible !important;
  backface-visibility: visible !important;
  -webkit-animation-name: flipInY;
  animation-name: flipInY; }


.hide2 {
  display: none;
}
.icodanger {
  display: flex;
  float: left;
  margin-right: 5px;
  position: relative;
  font-size: 1.188rem;
  color: #fff;
}
#total_notif_number_wrapper_dawnmenu {
  padding-left: 0.625rem;
}
#total_notif_valuemenu {
  display: inline-block;
  padding:0 0.18rem;
  line-height: 0.75rem;
  color: #fff;
  vertical-align: middle;
  background:#6bf146;
  border:2px solid #fff;
  border-radius:0.625rem;
  font-size:0.625rem;
  animation: flipInY 2s infinite linear; 
}
#menunotiforder {
  margin-top: 5px;
}
.mea {
  text-decoration:none !important;
  color: #bebebe!important;
}

Quote

js

---

    var notifCount = parseInt(json.order.total) + parseInt(json.customer.total) + parseInt(json.customer_message.total);
      if (notifCount > 0) {
        $("#total_notif_number_wrapper").removeClass('hide');
        $("#ordernotifc").removeClass('hide2');
        document.getElementById('ordernotifc').setAttribute('style', 'animation-name: slideInLeft;');

        $('#total_notif_value').text(notifCount);
        $('#total_notif_valuemenu').text(notifCount);

      } else {
        $("#total_notif_number_wrapper").addClass('hide');
        $("#ordernotifc").addClass('hide2');
      }
    }
});
}

tpl

<div class="link-levelone has_submenu">
                            <div id="ordernotifc"><div class="icodanger">⚠</div>
                      <div id ="menunotiforder">
{if $show_new_orders }
          <id="notification" class="dropdown">
              <span id="total_notif_number_wrapper_dawnmenu" class="notifs_badge hide">
                Nouvelles commandes <span id="total_notif_valuemenu" class="flipo">0</span>
              </span>
              </div>
      {/if}
        </div>
          </div>

lnasay · March 31

kidestok · March 31

10 minutes ago, lnasay said:

De rien, au cas où tu sais pas c'est quoi la balise href de toutes les commandes ça peut être sympa de rajouter le lien en cliquant dessus.

J'ai amélioré le css

#ordernotifc {
  padding:14px 0 12px;
  padding:0.875rem 0 0.75rem;
  margin:29.008px 0 0 15.008px;
  margin:1.813rem 0 0 0.938rem;
  font-size: 12px;
  font-size: 0.75rem;
  border-top:1px solid #bbcdd2;
  align-items: center;
  color: #bebebe;
  animation-duration: .9s;
  animation-timing-function: cubic-bezier(.10, .10, 1, 0);
}
@-webkit-keyframes slideInLeft {
  from {
    -webkit-transform: translate3d(-100%, 0, 0);
    transform: translate3d(-100%, 0, 0);
    visibility: visible; }
  to {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0); } }
@keyframes slideInLeft {
  from {
    -webkit-transform: translate3d(-100%, 0, 0);
    transform: translate3d(-100%, 0, 0);
    visibility: visible; }
  to {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0); } }
.slideInLeft {
  -webkit-animation-name: slideInLeft;
  animation-name: slideInLeft; }

@-webkit-keyframes flipInY {
  from {
    -webkit-transform: perspective(400px) rotate3d(0, 1, 0, 90deg);
    transform: perspective(400px) rotate3d(0, 1, 0, 90deg);
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in;
    opacity: 0; }
  40% {
    -webkit-transform: perspective(400px) rotate3d(0, 1, 0, -20deg);
    transform: perspective(400px) rotate3d(0, 1, 0, -20deg);
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in; }
  60% {
    -webkit-transform: perspective(400px) rotate3d(0, 1, 0, 10deg);
    transform: perspective(400px) rotate3d(0, 1, 0, 10deg);
    opacity: 1; }
  80% {
    -webkit-transform: perspective(400px) rotate3d(0, 1, 0, -5deg);
    transform: perspective(400px) rotate3d(0, 1, 0, -5deg); }
  to {
    -webkit-transform: perspective(400px);
    transform: perspective(400px); } }
@keyframes flipInY {
  from {
    -webkit-transform: perspective(400px) rotate3d(0, 1, 0, 90deg);
    transform: perspective(400px) rotate3d(0, 1, 0, 90deg);
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in;
    opacity: 0; }
  40% {
    -webkit-transform: perspective(400px) rotate3d(0, 1, 0, -20deg);
    transform: perspective(400px) rotate3d(0, 1, 0, -20deg);
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in; }
  60% {
    -webkit-transform: perspective(400px) rotate3d(0, 1, 0, 10deg);
    transform: perspective(400px) rotate3d(0, 1, 0, 10deg);
    opacity: 1; }
  80% {
    -webkit-transform: perspective(400px) rotate3d(0, 1, 0, -5deg);
    transform: perspective(400px) rotate3d(0, 1, 0, -5deg); }
  to {
    -webkit-transform: perspective(400px);
    transform: perspective(400px); } }
.flipInY {
  -webkit-backface-visibility: visible !important;
  backface-visibility: visible !important;
  -webkit-animation-name: flipInY;
  animation-name: flipInY; }


.hide2 {
  display: none;
}
.icodanger {
  display: flex;
  float: left;
  margin-right: 5px;
  position: relative;
  font-size: 1.188rem;
  color: #fff;
}
#total_notif_number_wrapper_dawnmenu {
  padding-left: 0.625rem;
}
#total_notif_valuemenu {
  display: inline-block;
  padding:0 0.18rem;
  line-height: 0.75rem;
  color: #fff;
  vertical-align: middle;
  background:#6bf146;
  border:2px solid #fff;
  border-radius:0.625rem;
  font-size:0.625rem;
  animation: flipInY 2s infinite linear; 
}
#menunotiforder {
  margin-top: 5px;
}
.mea {
  text-decoration:none !important;
  color: #bebebe!important;
}

tpl

<div class="link-levelone has_submenu">
                            <div id="ordernotifc"><div class="icodanger">⚠</div>
                      <div id ="menunotiforder">
{if $show_new_orders }
          <id="notification" class="dropdown">
              <span id="total_notif_number_wrapper_dawnmenu" class="notifs_badge hide">
                Nouvelles commandes <span id="total_notif_valuemenu" class="flipo">0</span>
              </span>
              </div>
      {/if}
        </div>
          </div>

La balise href est un attribut utilisé principalement dans la balise <a> (lien hypertexte) en HTML. Il sert à définir l’URL de destination vers laquelle l’utilisateur sera redirigé lorsqu’il clique sur le lien.

exemple <a href="https://www.google.com">Aller sur Google</a>

kidestok · March 31

1 minute ago, kidestok said:

La balise href est un attribut utilisé principalement dans la balise <a> (lien hypertexte) en HTML. Il sert à définir l’URL de destination vers laquelle l’utilisateur sera redirigé lorsqu’il clique sur le lien.

exemple <a href="https://www.google.com">Aller sur Google</a>

dans orders.tpl

<a href="{$link->getAdminLink('AdminOrders')}&id_order={$order.id_order}" title="Voir la commande">
Voir la commande #{$order.id_order}
</a>

lnasay · March 31

Bon y'aura pas de version avec lien car j'ai l'impression qu'il prend seulement en compte le click de fermeture et pas celui du lien 😭après je sais pas si ça vaut le coup d'ajouter encore un script juste pour un lien.

Edited March 31 by lnasay (see edit history)

lnasay · March 31

J'ai trouvé 😚

kidestok · March 31

genial

kidestok · March 31

51 minutes ago, lnasay said:

J'ai trouvé 😚

genial

kidestok · March 31

6 hours ago, lnasay said:

De rien, au cas où tu sais pas c'est quoi la balise href de toutes les commandes ça peut être sympa de rajouter le lien en cliquant dessus.

J'ai amélioré le css

#ordernotifc {
  padding:14px 0 12px;
  padding:0.875rem 0 0.75rem;
  margin:29.008px 0 0 15.008px;
  margin:1.813rem 0 0 0.938rem;
  font-size: 12px;
  font-size: 0.75rem;
  border-top:1px solid #bbcdd2;
  align-items: center;
  color: #bebebe;
  animation-duration: .9s;
  animation-timing-function: cubic-bezier(.10, .10, 1, 0);
}
@-webkit-keyframes slideInLeft {
  from {
    -webkit-transform: translate3d(-100%, 0, 0);
    transform: translate3d(-100%, 0, 0);
    visibility: visible; }
  to {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0); } }
@keyframes slideInLeft {
  from {
    -webkit-transform: translate3d(-100%, 0, 0);
    transform: translate3d(-100%, 0, 0);
    visibility: visible; }
  to {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0); } }
.slideInLeft {
  -webkit-animation-name: slideInLeft;
  animation-name: slideInLeft; }

@-webkit-keyframes flipInY {
  from {
    -webkit-transform: perspective(400px) rotate3d(0, 1, 0, 90deg);
    transform: perspective(400px) rotate3d(0, 1, 0, 90deg);
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in;
    opacity: 0; }
  40% {
    -webkit-transform: perspective(400px) rotate3d(0, 1, 0, -20deg);
    transform: perspective(400px) rotate3d(0, 1, 0, -20deg);
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in; }
  60% {
    -webkit-transform: perspective(400px) rotate3d(0, 1, 0, 10deg);
    transform: perspective(400px) rotate3d(0, 1, 0, 10deg);
    opacity: 1; }
  80% {
    -webkit-transform: perspective(400px) rotate3d(0, 1, 0, -5deg);
    transform: perspective(400px) rotate3d(0, 1, 0, -5deg); }
  to {
    -webkit-transform: perspective(400px);
    transform: perspective(400px); } }
@keyframes flipInY {
  from {
    -webkit-transform: perspective(400px) rotate3d(0, 1, 0, 90deg);
    transform: perspective(400px) rotate3d(0, 1, 0, 90deg);
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in;
    opacity: 0; }
  40% {
    -webkit-transform: perspective(400px) rotate3d(0, 1, 0, -20deg);
    transform: perspective(400px) rotate3d(0, 1, 0, -20deg);
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in; }
  60% {
    -webkit-transform: perspective(400px) rotate3d(0, 1, 0, 10deg);
    transform: perspective(400px) rotate3d(0, 1, 0, 10deg);
    opacity: 1; }
  80% {
    -webkit-transform: perspective(400px) rotate3d(0, 1, 0, -5deg);
    transform: perspective(400px) rotate3d(0, 1, 0, -5deg); }
  to {
    -webkit-transform: perspective(400px);
    transform: perspective(400px); } }
.flipInY {
  -webkit-backface-visibility: visible !important;
  backface-visibility: visible !important;
  -webkit-animation-name: flipInY;
  animation-name: flipInY; }


.hide2 {
  display: none;
}
.icodanger {
  display: flex;
  float: left;
  margin-right: 5px;
  position: relative;
  font-size: 1.188rem;
  color: #fff;
}
#total_notif_number_wrapper_dawnmenu {
  padding-left: 0.625rem;
}
#total_notif_valuemenu {
  display: inline-block;
  padding:0 0.18rem;
  line-height: 0.75rem;
  color: #fff;
  vertical-align: middle;
  background:#6bf146;
  border:2px solid #fff;
  border-radius:0.625rem;
  font-size:0.625rem;
  animation: flipInY 2s infinite linear; 
}
#menunotiforder {
  margin-top: 5px;
}
.mea {
  text-decoration:none !important;
  color: #bebebe!important;
}

tpl

<div class="link-levelone has_submenu">
                            <div id="ordernotifc"><div class="icodanger">⚠</div>
                      <div id ="menunotiforder">
{if $show_new_orders }
          <id="notification" class="dropdown">
              <span id="total_notif_number_wrapper_dawnmenu" class="notifs_badge hide">
                Nouvelles commandes <span id="total_notif_valuemenu" class="flipo">0</span>
              </span>
              </div>
      {/if}
        </div>
          </div>

re,

quels sont les fichiers que tu a modifié et dans quel dossiers...

Merci

lnasay · April 1

Hello

Dans le dossier racine JS notification.js et nav.tpl dans les dossier theme admin default, et theme.css 😊

je termine dessus et je t'explique bien comment faire.

lnasay · April 1

Edited April 1 by lnasay (see edit history)

lnasay · April 1

J'essaye de poster le code et j'ai ça :

Pourquoi le forum me bloque 😪

Sorry, you have been blocked

You are unable to access prestashop.com

je comprends pas

Edited April 1 by lnasay (see edit history)

lnasay · April 1

Impossible de poster les code, en tout cas merci à Grégory et Media87com

Voilà tout fonctionnent super bien le liens et la gestion des notifications mais seulement pour les commandes car c'était mon but 😁

y'a des jolis effets de transitions

kidestok · April 1

Salut Inasay,

Peux tu me joindre le code via mon adresse mail.

[email protected]

en te remerciant

Gregory

lnasay · April 1

je t'envoie les fichiers 😁

kidestok · April 1

59 minutes ago, lnasay said:

je t'envoie les fichiers 😁

merci

c'est quoi ton site?

lnasay · April 2

Hello petit update pour plus avoir la notification fantôme ⚠Nouvelles commandes 0 au chargement du back-office.

Sur le notifications.js il faut ajouter display:block , et supprimer les codes avec hides2 suivre le bon code en bas :

var notifCount = parseInt(json.order.total) + parseInt(json.customer.total) + parseInt(json.customer_message.total);
if (notifCount > 0) {
$("#total_notif_number_wrapper").removeClass('hide');
$("#total_notif_number_wrapper_dawnmenu").removeClass('hide');
document.getElementById('ordernotifc').setAttribute('style', 'display:block;animation-name: slideInLeft;');

$('#total_notif_value').text(notifCount);
$('#total_notif_valuemenu').text(notifCount);

} else {
$("#total_notif_number_wrapper").addClass('hide');
$("#total_notif_number_wrapper_dawnmenu").removeClass('hide');

et sur le theme.css il faut ajouter display:none;

#ordernotifc {
padding:14px 0 12px;
padding:0.875rem 0 0.75rem;
margin:29.008px 0 0 15.008px;
margin:1.813rem 0 0 0.938rem;
font-size: 12px;
font-size: 0.75rem;
border-top:1px solid #bbcdd2;
align-items: center;
color: #bebebe;
display:none;
animation-duration: .9s;
animation-timing-function: cubic-bezier(.10, .10, 1, 0);
}

Maintenant on peut supprimer

.hide2{

display:none

}

et tout devient parfait Enjoy 😉

Edited April 2 by lnasay (see edit history)

kidestok · April 2

1 hour ago, lnasay said:

Hello petit update pour plus avoir la notification fantôme ⚠Nouvelles commandes 0 au chargement du back-office.

Sur le notifications.js il faut ajouter display:block , et supprimer les codes avec hides2 suivre le bon code en bas :

var notifCount = parseInt(json.order.total) + parseInt(json.customer.total) + parseInt(json.customer_message.total);
if (notifCount > 0) {
$("#total_notif_number_wrapper").removeClass('hide');
$("#total_notif_number_wrapper_dawnmenu").removeClass('hide');
document.getElementById('ordernotifc').setAttribute('style', 'display:block;animation-name: slideInLeft;');

$('#total_notif_value').text(notifCount);
$('#total_notif_valuemenu').text(notifCount);

} else {
$("#total_notif_number_wrapper").addClass('hide');
$("#total_notif_number_wrapper_dawnmenu").removeClass('hide');

et sur le theme.css il faut ajouter display:none;

#ordernotifc {
padding:14px 0 12px;
padding:0.875rem 0 0.75rem;
margin:29.008px 0 0 15.008px;
margin:1.813rem 0 0 0.938rem;
font-size: 12px;
font-size: 0.75rem;
border-top:1px solid #bbcdd2;
align-items: center;
color: #bebebe;
display:none;
animation-duration: .9s;
animation-timing-function: cubic-bezier(.10, .10, 1, 0);
}

Maintenant on peut supprimer

.hide2{

display:none

}

et tout devient parfait Enjoy 😉

Salut

Peut on mettre le css dans custon.css au lieu de modifié theme.css?

lnasay · April 2

Je pense que OUI si tu l'as déclaré dans le JSON du thème Admin 😁

#ordernotifc {
padding:14px 0 12px;
padding:0.875rem 0 0.75rem;
margin:29.008px 0 0 15.008px;
margin:1.813rem 0 0 0.938rem;
font-size: 12px;
font-size: 0.75rem;
border-top:1px solid #bbcdd2;
align-items: center;
color: #bebebe;
display:none;
animation-duration: .9s;
animation-timing-function: cubic-bezier(.10, .10, 1, 0);
}
@-webkit-keyframes slideInLeft {
from {
-webkit-transform: translate3d(-100%, 0, 0);
transform: translate3d(-100%, 0, 0);
visibility: visible; }
to {
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0); } }
@keyframes slideInLeft {
from {
-webkit-transform: translate3d(-100%, 0, 0);
transform: translate3d(-100%, 0, 0);
visibility: visible; }
to {
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0); } }
.slideInLeft {
-webkit-animation-name: slideInLeft;
animation-name: slideInLeft; }

@-webkit-keyframes flipInY {
from {
-webkit-transform: perspective(400px) rotate3d(0, 1, 0, 90deg);
transform: perspective(400px) rotate3d(0, 1, 0, 90deg);
-webkit-animation-timing-function: ease-in;
animation-timing-function: ease-in;
opacity: 0; }
40% {
-webkit-transform: perspective(400px) rotate3d(0, 1, 0, -20deg);
transform: perspective(400px) rotate3d(0, 1, 0, -20deg);
-webkit-animation-timing-function: ease-in;
animation-timing-function: ease-in; }
60% {
-webkit-transform: perspective(400px) rotate3d(0, 1, 0, 10deg);
transform: perspective(400px) rotate3d(0, 1, 0, 10deg);
opacity: 1; }
80% {
-webkit-transform: perspective(400px) rotate3d(0, 1, 0, -5deg);
transform: perspective(400px) rotate3d(0, 1, 0, -5deg); }
to {
-webkit-transform: perspective(400px);
transform: perspective(400px); } }
@keyframes flipInY {
from {
-webkit-transform: perspective(400px) rotate3d(0, 1, 0, 90deg);
transform: perspective(400px) rotate3d(0, 1, 0, 90deg);
-webkit-animation-timing-function: ease-in;
animation-timing-function: ease-in;
opacity: 0; }
40% {
-webkit-transform: perspective(400px) rotate3d(0, 1, 0, -20deg);
transform: perspective(400px) rotate3d(0, 1, 0, -20deg);
-webkit-animation-timing-function: ease-in;
animation-timing-function: ease-in; }
60% {
-webkit-transform: perspective(400px) rotate3d(0, 1, 0, 10deg);
transform: perspective(400px) rotate3d(0, 1, 0, 10deg);
opacity: 1; }
80% {
-webkit-transform: perspective(400px) rotate3d(0, 1, 0, -5deg);
transform: perspective(400px) rotate3d(0, 1, 0, -5deg); }
to {
-webkit-transform: perspective(400px);
transform: perspective(400px); } }
.flipInY {
-webkit-backface-visibility: visible !important;
backface-visibility: visible !important;
-webkit-animation-name: flipInY;
animation-name: flipInY; }

.icodanger {
display: flex;
float: left;
margin-right: 5px;
position: relative;
font-size: 1.188rem;
color: #fff;
}
#total_notif_number_wrapper_dawnmenu {
padding-left: 0.625rem;
}
#total_notif_valuemenu {
display: inline-block;
padding:0 0.18rem;
line-height: 0.75rem;
color: #fff;
vertical-align: middle;
background:#6bf146;
border:2px solid #fff;
border-radius:0.625rem;
font-size:0.625rem;
animation: flipInY 2s infinite linear;
}
#menunotiforder {
margin-top: 5px;
}
.mea {
text-decoration:none !important;
color: #bebebe!important;
}

Edited April 2 by lnasay (see edit history)

lnasay · April 2

Le js

/**
 * Copyright since 2007 PrestaShop SA and Contributors
 * PrestaShop is an International Registered Trademark & Property of PrestaShop SA
 *
 * NOTICE OF LICENSE
 *
 * This source file is subject to the Open Software License (OSL 3.0)
 * that is bundled with this package in the file LICENSE.md.
 * It is also available through the world-wide-web at this URL:
 * https://opensource.org/licenses/OSL-3.0
 * If you did not receive a copy of the license and are unable to
 * obtain it through the world-wide-web, please send an email
 * to [email protected] so we can send you a copy immediately.
 *
 * DISCLAIMER
 *
 * Do not edit or add to this file if you wish to upgrade PrestaShop to newer
 * versions in the future. If you wish to customize PrestaShop for your
 * needs please refer to https://devdocs.prestashop.com/ for more information.
 *
 * @author    PrestaShop SA and Contributors <[email protected]>
 * @copyright Since 2007 PrestaShop SA and Contributors
 * @license   https://opensource.org/licenses/OSL-3.0 Open Software License (OSL 3.0)
 */
$(document).ready(function () {
  if (youEditFieldFor) {
    $('.translatable span.hint').append(`<br /><span class="red">${youEditFieldFor}</span>`);
  }

  $('.notification.dropdown-toggle').on('click', function () {
    $(this).parent().toggleClass('open');
    updateEmployeeNotifications();
  });

  $(document).on('click', function (e) {
    if (!$(e.target).closest('#notification').length && $('#notification').hasClass('open')) {
      $('#notification').removeClass('open');
      getPush();
    }
  });

  $('.notifications .nav-link').on('shown.bs.tab', function () {
    updateEmployeeNotifications();
  });

  // call it once immediately, then use setTimeout
  if (parseInt(show_new_orders) || parseInt(show_new_customers) || parseInt(show_new_messages)) {
    getPush();
  }
});

function updateEmployeeNotifications() {
  $.post(
    admin_notification_push_link,
    {
      type: $('.notifications .nav-item.active a').data('type')
    }
  );
}

function renderOrderNotification(value) {
  const query = `tab=AdminOrders&token=${token_admin_orders}&vieworder&id_order=${value.id_order}`;
  const carrier = value.carrier !== '' ? ` - ${value.carrier}` : '';
  return `
    <a class="notif" href="${baseAdminDir}index.php?${query}">
      #${value.id_order} - ${from_msg}&nbsp;<strong>${value.customer_name}</strong> (${value.iso_code})
      <strong class="pull-right">${value.total_paid}</strong>${carrier}
    </a>
  `;
}

function renderCustomerNotification(value) {
  const company = value.company !== '' ? ` (${value.company})` : '';
  return `
    <a class="notif" href="${value.customer_view_url}">
      #${value.id_customer} - <strong>${value.customer_name}</strong>${company} - ${customer_name_msg} ${value.date_add};
    </a>
  `;
}

function renderMessageNotification(value) {
  const query = `tab=AdminCustomerThreads&token=${token_admin_customer_threads}&viewcustomer_thread&id_customer_thread=${value.id_customer_thread}`;
  const company = value.company !== '' ? ` (${value.company})` : '';
  return `
    <a class="notif" href="${baseAdminDir}index.php?${query}">
      <span class="message-notification-status ${value.status}">
        <i class="material-icons">fiber_manual_record</i> ${value.status}
      </span>
       - <strong>${value.customer_name}</strong> ${company}
       - <i class="material-icons">access_time</i> ${value.date_add}
    </a>
  `;
}

function renderNotifications(panelId, data, renderFn) {
  var panel = $('#' + panelId);
  var tabCounter = panel.closest('#notification').find(`a[href="#${panelId}"] .notif-counter`);
  if (data.total > 0) {
    var html = data.results.map(renderFn).join('')
    panel.removeClass('empty').children('.notification-elements').html(html);
    tabCounter.text(` (${data.total})`).data('nb', data.total);
  } else {
    panel.addClass('empty').children('.notification-elements').empty();
    tabCounter.text('');
  }
}

function getPush() {
  $.ajax({
    type: 'POST',
    headers: { "cache-control": "no-cache" },
    url: `${admin_notification_get_link}&rand=${new Date().getTime()}`,
    cache: false,
    dataType: 'json',
    success: function (json) {
      setTimeout(getPush, 120000);
      if (!json) {
        return;
      }

      // Add orders notifications to the list
      renderNotifications('orders-notifications', json.order, renderOrderNotification);

      // Add customers notifications to the list
      renderNotifications('customers-notifications', json.customer, renderCustomerNotification);

      // Add messages notifications to the list
      renderNotifications('messages-notifications', json.customer_message, renderMessageNotification);

      var notifCount = parseInt(json.order.total) + parseInt(json.customer.total) + parseInt(json.customer_message.total);
      if (notifCount > 0) {
        $("#total_notif_number_wrapper").removeClass('hide');
		$("#total_notif_number_wrapper_dawnmenu").removeClass('hide');
		document.getElementById('ordernotifc').setAttribute('style', 'display:block;animation-name: slideInLeft;'); 

        $('#total_notif_value').text(notifCount);
		$('#total_notif_valuemenu').text(notifCount);

      } else {
        $("#total_notif_number_wrapper").addClass('hide');
		$("#total_notif_number_wrapper_dawnmenu").removeClass('hide');
      }
    }
  });
}

lnasay · April 2

Maintenant comme ça fonctionne super bien faudrait qu'un admin change le titre question bête en notification des commandes menu 😁

Tu as eu les fichiers par mail ? car je te les ai envoyé de ma messagerie perso en .ru et des fois ça passe pas bien sur certain domaine 🙃

kidestok · April 2

29 minutes ago, lnasay said:

Maintenant comme ça fonctionne super bien faudrait qu'un admin change le titre question bête en notification des commandes menu 😁

Tu as eu les fichiers par mail ? car je te les ai envoyé de ma messagerie perso en .ru et des fois ça passe pas bien sur certain domaine 🙃

oui bien tout reçu, mais pas eu le temps de faire.

C'est quoi le nom de ton site Lna.

lnasay · April 2

Hello 😊

😅😁J'ai pas vraiment de boutique à moi, je fais plutôt pour les commerçants, je serai incapable de m'en occuper trop de chose à faire et gérer dedans 😅

Edited April 2 by lnasay (see edit history)

kidestok · April 2

1 hour ago, lnasay said:

Hello 😊

😅😁J'ai pas vraiment de boutique à moi, je fais plutôt pour les commerçants, je serai incapable de m'en occuper trop de chose à faire et gérer dedans 😅

Ok merci a toi et à bientôt Lna 😉

bon courage

Gregory

lnasay · April 3

De rien 😁

Stephane2406 · April 12

Bonjour,

C'est pas mal ça, il faudrait faire de même pour voir le nombre de mises à jours et alertes à côté du menu Modules 😁

lnasay · April 15

Hello Stéphane oui c'est possible 🥰 quand j'aurai le temps je vais voir la fonction au quotidien est super sympa et j'ai ajouté des effets super cools.

Designbyrhino · April 15

Hello,

Bon je réponds avec mon ancien compte (c'est un bronx à se connecter entre addon, presta et ici, google ou moi on doit avoir du mal à gérer les mdp avec le même mail).

Oui cette alerte visuelle en direct sur le main board serait géniale

J'ai récemment passé mon PS en 1.7.8.11 (Enfin Mediacom87 l'a fait lol), et je suis déçu que dans les fiches produit, PS n'ait pas ajouté une flèche à changer les déclinaisons suivantes, on l'a en haut à droite mais il en manque une en bas près des visuels des miniatures, car maintenant il faut scroller, avant je m'en sortais avec un plein écran, mais ce n'est plus le cas la disposition s'est agrandie.

Inasay envoie des screens des effets que t'as ajouté ^^

lnasay · April 15

C'est des effets de slide et de flip, 😂, regarde le css plus haut tu vas comprendre, pour ton problème je pense que c'est pas difficile à ajouter 😊, demande à media si il peut te le faire.

Edited April 15 by lnasay (see edit history)

Designbyrhino · April 15

Lol bien vu, mais non ce genre de truc généralement je m'en occupe, je le sollicite pour les gros travaux, swap de serveur hébergeur, et upgrade complet.

Mais je vais regarder tout ça tranquillement. merci ^^

lnasay · April 15

Oui c'est pas compliqué ^^

[1.7.8.11] Question bête

Recommended Posts

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment