Category: Langage et développement


Bonjour à vous,

Après de longues heures de travail, le module colissimo flexibilité a été dompté et maîtrisé. Login art vous propose d’intégrer colissimo à votre e-commerce (site marchand) en développement spécifique.

colissimoImg

N’hésitez pas à nous consulter.

Publicités

Vous avez installé la version Prestashop 1.4.7 et vous rencontrez un problème lors de la personnalisation (envoi d’images par les internautes pour personnaliser un produit) : l’image n’est pas transférée au serveur.

Login Art vous propose la résolution des deux sources d’erreurs à l’origine du problème.

Nous ne sommes en aucun cas responsable de l’utilisation des codes transmis. Faites une sauvegarde des fichiers d’origine avant toute manipulation.

Le premier problème porte sur l’utilisation de la méthodologie AJAX pour le transfert des images.

Le second problème implique l’utilisation de variables de configuration pour la création des miniatures.

Problème AJAX

Allez dans le fichier js pour modifier le fonctionnement

/themes/prestashop/js/product.js

Attention, si vous utilisez un thème personnalisé, recherchez le fichier dans le dossier de votre thème

/themes/mon_theme_XXX/js/product.js

Allez à la fonction « saveCustomization ».

Commentez l’ensemble de la fonction et placer le code suivant :

function saveCustomization()
{
//v1.4.6
$('#quantityBackup').val($('#quantity_wanted').val());
customAction = $('#customizationForm').attr('action');
$('body select[id^="group_"]').each(function() {
customAction = customAction.replace(new RegExp(this.id + '=\\d+'), this.id +'='+this.value);
});
$('#customizationForm').attr('action', customAction);
$('#customizationForm').submit();
}

L’upload se fait avec rechargement de la page de l’article et non plus via ajax.

Problème des variables de configuration

Allez au niveau du fichier « /controlers/ProductController.php ». Recherchez la fonction « pictureUpload » qui traite l’image envoyée en upload.

Si vous faites le die sur les dimensions utilisées pour créer la mini, vous constaterez qu’il s’agit des valeurs maximales attendues pour un envoi d’image par l’internaute.

Ces valeurs sont définies dans le back office (préférences > produits > largeur / hauteur).

die( 'dim : '.(int)(Configuration::get('PS_PRODUCT_PICTURE_WIDTH')).'x'.(int)(Configuration::get('PS_PRODUCT_PICTURE_HEIGHT')));

Code originel :

if ($error OR (!$tmpName = tempnam(_PS_TMP_IMG_DIR_, 'PS') OR !move_uploaded_file($file['tmp_name'], $tmpName)))
return false;
// Original file
elseif (!imageResize($tmpName, _PS_UPLOAD_DIR_.$fileName))
$this->errors[] = Tools::displayError('An error occurred during the image upload.');
// A smaller one
elseif (!imageResize($tmpName, _PS_UPLOAD_DIR_.$fileName.'_small', (int)(Configuration::get('PS_PRODUCT_PICTURE_WIDTH')), (int)(Configuration::get('PS_PRODUCT_PICTURE_HEIGHT'))))
$this->errors[] = Tools::displayError('An error occurred during the image upload.');
elseif (!chmod(_PS_UPLOAD_DIR_.$fileName, 0777) OR !chmod(_PS_UPLOAD_DIR_.$fileName.'_small', 0777))
$this->errors[] = Tools::displayError('An error occurred during the image upload.');
else
$cart->addPictureToProduct((int)($this->product->id), $indexes[$fieldName], $fileName);

Code de remplacement :

if ($error OR (!$tmpName = tempnam(_PS_TMP_IMG_DIR_, 'PS') OR !move_uploaded_file($file['tmp_name'], $tmpName)))
 return false;
 // Original file
 elseif (!imageResize($tmpName, _PS_UPLOAD_DIR_.$fileName))
 $this->errors[] = Tools::displayError('An error occurred during the image upload.');
 // A smaller one
 elseif (!imageResize($tmpName, _PS_UPLOAD_DIR_.$fileName.'_small', 100, 100))
 $this->errors[] = Tools::displayError('An error occurred during the image upload.');
 elseif (!chmod(_PS_UPLOAD_DIR_.$fileName, 0777) OR !chmod(_PS_UPLOAD_DIR_.$fileName.'_small', 0777))
 $this->errors[] = Tools::displayError('An error occurred during the image upload.');
 else
 $cart->addPictureToProduct((int)($this->product->id), $indexes[$fieldName], $fileName);

Toute l’équipe Login art vous souhaite un bon e-commerce avec Prestashop 1.4.7, en espérant que ces codes vous éviteront des heures de galère.

Include ou Require ?

Ces deux instructions sont très similaires, elles ont pour but d’inclure une page de n’importe quelle extension dans votre page PHP.

La différence entre ces deux fonctions réside dans le fonctionnement des messages d’erreur. include enverra simplement un « Warning » et vous dira que la page n’existe pas à l’endroit demandé, mais interprétera le reste du code, si celui-ci est valide. Quant à require, le simple fait que la page à inclure soit absente provoquera le blocage complet de la page, même si le reste du code est valide. Il enverra une erreur fatale au lieu d’un warning.

Il existe des variantes de ces deux fonctions, include_once et require_once, qui incluront une seule fois la page externe, et qui ignoreront toute instruction de ré-inclusion de cette même page. Le principe des messages d’erreurs est le même que celui de include et require.

https, SSH, SSL… ne vous disent rien? Ce sont pourtant des éléments de sécurisation essentiels. Comment les données sont-elles sécurisées?

Comment savoir si une page est sécurisée?

Il y a deux signes qui prouvent qu’une page est sécurisée, c’est-à-dire que personne en dehors de vous (le client) et le site (le serveur) ne peut accéder à vos données ni aux « données » echangées, comme le code de carte bancaire par exmple.

Le premier signe est le suivant :

On remarque que contrairement à d’habitude, le début de l’adresse n’est pas http mais https (le « s » signifie « secure », ou « sécurisé »). Le deuxième signe est le petit cadenas situé à droite de la barre d’adresse dans IE, en bas à droite dans Firfox, en haut à droite dans Safari.

Protocoles de sécurité

Avant de commencer, il y a un peu de vocabulaire à connaître. Quand vous envoyez une information à un site, vous êtes le client et le site est le serveur.

Même s’il existe beaucoup de protocoles de sécurisation, le largement plus répandu est SSL : « SSL » signifie « Secure Socket Layer » . Lorsque le client demande à envoyer de l’information au serveur :

Le protocole SSL : divise, compresse, signe cryptographiquement les données de sorte que le serveur accepte les données. Puis chiffre une code et réalise l’envoie.

De son côté le serveur déchiffre les données, vérifie la signature cryptographique, décompresse les données et rassemble les paquets de données pour obtenir des données reconstituées.

Le protocole SSL est compatible avec les nombreuses extensions:  HTTP (https), FTP (ftps, envoi de fichier sécurisé) et bien d’autres. Il peut même créer ce qu’on appelle un tunnel SSL pour le POP3, c’est-à-dire que quand vous envoyez un message (via le serveur POP3, le serveur de messagerie) il isole le message lorsqu’il passe sur internet de sorte que personne ne peut y accéder, tandis que sans sécurité, le message est accessible, donc le compte de l’expéditeur aussi : vous êtes facilement piratable.

Cependant, attention : le petit cadenas et SSL ne garantissent QUE LE TRANSPORT de l’information. Après, un programme malveillant peut très bien détourner l’information sur votre ordinateur avant l’envoi (par exemple, avec votre code de carte bancaire, même si la page est sécurisée, un keylogger (logiciel enregistrant tout ce que vous tapez au clavier) peut très bien intercepter l’information avant son transfert) ou bien après son arrivée (si le site n’est pas assez sécurisé, un logiciel pirate peut facilement s’y infiltrer et trouver le code enregistré dans les archives)

 De la même manière que quelqu’un peut se faire passer pour un agent de police, les pirates du web peuvent faire apparaître le cadenas sur leur site alors que ce sont des truands. Si vous voyez un site avec une adresse douteuse, des prix vraiment trop bas, et une présentation négligée (même bonne c’est possible !) et dont vous n’avez jamais entendu parler, prenez un minimum de précautions. Contactez au préalable le vendeur et faite une brève recherche sur le web.

Le CSS est la partie mise en forme du contenu d’une page internet (gras, souligné, centré, couleur de texte…) Le CSS2 est en place depuis mai 98. Mais cette année, le passage à CSS3 est prévu.

CSS3 va apporter de nombreuses nouveautés au web, d’autant plus que le HTML 5 sortira dans la même période.

Parmi les quelque 30 nouvelles fonction de CSS3 déclarées à ce jour, voici les plus importantes :


*Gestion de l’opacité : les graphistes en ont rêvé : CSS3 gèrera l’opacité des images .png (24 bits), ce qui permettra de faire des sites beaucoup plus créatifs.

*Bords arrondis, colorés : Il sera possible de faire des bords arrondis avec une simple propriété border-radius ou bien même colorés sans avoir à modifier l’image au préalable.

*Arrière-plan multiple : Plus besoin d’imbriquer les images que vous voulez superposer pour faire un arrière-plan, grâce aux valeurs multiples utilisables dans CSS3, quelques lignes de code et vous obtenez un arrière plan multiple.

*Ombre derrière le texte : Une balise très courte produit une ombre derrière votre paragraphe : avec text-shadow: 2px 2px 2px #000;, on obtient :

* text-overflow-props : avec cette balise, quand vous avez un texte trop long pour cette case à insérer, le texte apparaît en abrégé dans la case. Quand vous passez votre souris sur la case, le texte apparaît en entier : c’est très pratique lorsqu’il s’agit de mettre une grande quantité de phrase ou, par exemple, de série de prix ou de dimensions à côté d’autant de photos.



Cet article n’est qu’un extrait des nouvelles fonctionnalités de CSS3, de nombreuses très utiles n’ont même pas encore été révélées. De  nouvelles seront sûrement bientôt annoncées !

Le HTML 5 fait beaucoup parler de lui en ce moment. La mise à jour du HTML 4.01 utilisé pour l’instant est attendue par beaucoup de programmeurs. Qu’y-a-t-il de nouveau dans ce langage?

Le HTML 5 est une amélioration du langage HTML  4.01, langage actuellement utilisé pour les pages internet.

Il est en cours de création par W3C, le « World Wide Web Consortium », ou « Organisation mondiale du Web ». Cette organisation non commerciale a pour but de faire en sorte que même  avec le temps, les nouvelles technologies restent copmpatibles avec celles actuellement utilisées. On prévoit la sortie de ce code fin 2010.

Ce langage comptera beaucoup de nouveautés. Par exemple, au niveau format du code, la fermeture de nombre de balises sera implicite (ex : <optgroup>, <option>, <tr> n’ont pas besoin de balises </optgroup>, </option>, </tr> pour que l’ordinateur les sache fermées). Mieux encore : Les balises <html>, <head>, <body>, <thead>, <tfoot> et <tbody> n’ont même pas besoin d’être déclarées : elle sont totalement implicites.W3C

Une nouvelle balises importante est <!doctype html> (<!DOCTYPE html> marche aussi, la casse n’est pas importante). Elle permet d’éviter un rendu en mode de compatibilité des navigateurs.

Côté graphisme de la page, de nouvelles balises ont fait leur apparition : par exemple, <article> </article> insère une citation dans un texte et indique sa source. Très pratique pour les articles de presse, blogs…

Exemple d’utilisation :

<article>
<p><a href="https://loginart.wordpress.com/">
La balise article permet d'insérer un bloc de citation<a><br/>
En effet, Login Art confirme que Article insérera une citation sur un site.</p>
</article>

On peut aussi retenir <header> et <footer> qui insèrent très facilement respectivement un en-tête ou un pied de page, ainsi que <dialog>...</dialog> qui définit un dialogue.

Exemple :

<dialog>
<dt> Pierre
<dd> Salut ! Comment ça va ?
<dt> Marion
<dd> Bien, et toi?
<dt> Pierre
<dd> Super ! J'ai gagné de tournoi de badminton !
<dt> Marion
<dd> Je sais je suis venue te regarder... Bravo !
</dialog>

Pour terminer avec les exemples de balises, <draggable> rend un élément déplaçable en cliquer-glisser, et <figure> permet de lier une image ou une vidéo avec sa légende, avec cette mise en forme :

<figure>
<img src="/images/mer_soir.jpg" />
<legend>C'est si beau la mer le soir !</legend>
</figure>

Ce n’est qu’un extrait des nouveautés inclues dans le HTML 5, d’autres ont été révélées sur le web, et d’autres encore ne sont pas encore dévoilées, ni même déjà créées. Il faut attendre la fin de cette année pour en savoir plus !