Publication croisée de produits de Virtumart 3. Lazy Load - chargement paresseux d'images pour Virtumart. Ajouter une charge différée manuellement

Description

De nombreux utilisateurs ont constaté à quel point le téléchargement standard d'images de produits sur VirtueMart peut être gênant. Les images ne peuvent être téléchargées qu'une par une, vous devez sélectionner plusieurs options, remplir 3 champs de texte et attendre que la page se recharge... Il vous faudra beaucoup de temps pour télécharger toutes les images des produits Virtuemart. De plus, ces images doivent d’abord être trouvées quelque part et téléchargées ou photographiées par vous-même. Bien entendu, vous pouvez embaucher un indépendant qui effectuera tout le travail de routine à votre place. Mais en moyenne, l'ajout d'un produit vous coûtera entre 15 et 40 roubles. En le multipliant par le nombre de produits dont vous avez besoin, vous obtiendrez un montant très décent (1 500 à 4 000 roubles pour 100 produits) !

Mais il existe une alternative plus abordable !

Attention! Le 1er décembre 2015, Google a désactivé l'API gratuite de recherche d'images, avec laquelle ce composant fonctionnait auparavant. Désormais, les recherches d'images sont effectuées via le service shareware Google Custom Search Engine. Avec son aide, vous pouvez effectuer 100 demandes par jour. Le compteur de requêtes est réinitialisé à 11h00, heure de Moscou. Les requêtes supplémentaires par jour sont désormais fournies par Google sur une base payante - 5 USD pour 1 000 requêtes. Pour vous identifier dans le service Google Custom Search Engine, vous devrez obtenir une clé API (Instructions).

Capacités des composants :
  • Vous pouvez utiliser le téléchargement multiple (c'est-à-dire que vous pouvez télécharger plusieurs images à la fois) depuis votre ordinateur en un seul clic.
  • Le composant recherche des images de produits dans Google en fonction des noms de produits ou de « Article + Fabricant ».
  • Vous pouvez marquer vous-même les images de produits appropriées.
  • Vous pouvez télécharger un produit à la fois ou effectuer une recherche par lots sur tous les produits VirtueMart sélectionnés.
  • Possibilité d'ajouter un filigrane à toutes les images téléchargées.
  • Création automatique d'images miniatures selon les tailles spécifiées dans les paramètres.
  • Vous pouvez sélectionner par lots les premières images (vous préciserez vous-même le numéro) de la liste pour chaque produit.
  • La possibilité de rechercher à l'aide d'un mot-clé supplémentaire des produits qui n'avaient pas d'images appropriées en fonction du seul nom.
  • Suppression par lots ou unique des images de produits déjà téléchargées.
  • Vous pouvez filtrer les produits et les catégories, en ne laissant que ceux qui n'ont pas d'image.
  • La possibilité de rechercher et de télécharger automatiquement des images de produits. Le composant sélectionnera tous les produits ou catégories qui n'ont pas d'images. Ensuite, il recherchera le nombre d'images spécifié et les téléchargera sur votre site Web dans le dossier images/stories/virtuemart/product (pour les produits) et images/stories/virtuemart/category (pour les catégories). Il créera des vignettes en fonction des tailles spécifiées dans les paramètres et attribuera des images aux produits. Vous pourrez surveiller le processus de recherche et de téléchargement en temps réel.
  • Lorsque vous vous connectez à la zone d'administration Joomla, le panneau d'accès rapide indique combien de produits n'ont pas d'image. De cette façon, vous pouvez facilement surveiller la situation dans la boutique Virtuemart.
  • Possibilité d'utiliser un serveur proxy pour rechercher des images.
  • Captures d'écran

    Vidéo

    Historique des changements

    Attention! Les mises à jour s'effectuent via le gestionnaire d'extensions Joomla standard dans l'onglet "Mises à jour"

    04/07/2019 (v 2.5.0) 1) Le filtre de catégories a été étendu : vous pouvez désormais sélectionner plusieurs catégories, ainsi qu'un mode d'exclusion de catégories
    2) Pour les images trouvées et existantes, la possibilité d'afficher l'image en taille réelle a été ajoutée
    3) Pour les images existantes, la possibilité de modifier l'ordre dans lequel les images sont affichées par glisser-déposer a été ajoutée
    4) Dans les paramètres généraux, l'option "Renommer les fichiers téléchargés depuis le PC" a été ajoutée

    17/11/2017 (v 2.4.0) ajout de la prise en charge du téléchargement d'images PNG avec un arrière-plan transparent

    10/4/2017 (v 2.3.0) le chemin d'enregistrement des images de produits et de catégories est désormais issu des paramètres de la VM

    29/06/2017 (v 2.2.0) dans le mode de recherche "Catégories", le chemin complet de la catégorie, y compris les catégories parentes, est désormais affiché.

    20/12/2016 (v 2.1.1), le champ « Recherche sur le domaine uniquement » a été ajouté aux paramètres du composant. Si vous précisez un domaine dans ce champ, la recherche d'images s'effectuera uniquement sur le site précisé

    13/02/2016 (v 2.1.0) Ajout d'un filtre de produits par disponibilité des stocks

    28/01/2016 (v 2.0.1) L'algorithme de construction d'une liste de catégories pour les filtres a été optimisé. Si vous avez un très grand nombre de catégories sur votre site, la page avec une liste de produits/catégories s'ouvrira désormais beaucoup plus rapidement.

    4.12.2015 (v 2.0) Attention ! Le 1er décembre 2015, Google a désactivé l'API gratuite pour la recherche d'images. Désormais, les recherches d'images sont effectuées via le service shareware Google Custom Search Engine. Avec son aide, vous pouvez effectuer 100 demandes par jour. Le compteur de requêtes est réinitialisé à 11h00, heure de Moscou. Les requêtes supplémentaires par jour sont désormais fournies par Google sur une base payante - 5 USD pour 1 000 requêtes. Pour vous identifier dans le service Google Custom Search Engine, vous devrez obtenir une clé API (Instructions).

    5.09.2015 (v 1.8) positionnement amélioré du filigrane :
    a) Ajout de la possibilité de sélectionner des unités d'indentation - pourcentages ou pixels
    b) Le remplissage du filigrane n'est désormais pas défini pour les bords inférieur et droit du filigrane, mais par rapport à son centre. Cela vous permettra de centrer facilement la position du filigrane en réglant le remplissage droit et inférieur à 50 %
    c) Ajout de la possibilité de sélectionner l'angle de rotation du filigrane
    d) Ajout d'un contrôle de cohérence entre la taille du filigrane et l'image principale. Si l'une des dimensions linéaires du filigrane dépasse la taille correspondante de l'image principale, le filigrane sera automatiquement réduit.

    02/09/2015 (v 1.7) ajout d'une fonction permettant de vérifier la présence d'une image pour les produits et les catégories. Si l’image jointe s’avère inexistante ou illisible, la pièce jointe sera supprimée.

    04/07/2015 (v 1.6) Ajout d'une interface de recherche et de téléchargement automatiques en masse d'images. Ajout de la possibilité de rechercher par la combinaison "Fabricant + Article"

    06/04/2015 (v 1.5) ajout d'un filtre par noms de produits et de catégories.

    27/04/2015 (v 1.4) ajout de la possibilité de rechercher des images via un serveur proxy.

    11/11/2014 (v 1.3) ajout de la possibilité d'ajouter un filigrane aux images téléchargées. Pour ce faire, vous devez saisir l'URL de l'image en filigrane au format PNG dans les paramètres.

    Le 9/11/2014 (v 1.2) a ajouté la possibilité de rechercher et de télécharger automatiquement des images selon un calendrier. A cet effet, un onglet a été ajouté dans les paramètres du composant "Recherche et téléchargement automatiques". Sur cet onglet, vous devez sélectionner le nombre d'images que vous souhaitez rechercher pour chaque produit ne comportant pas d'images. Après cela, il ne vous reste plus qu'à ajouter le travail au planificateur Cron (dans votre panneau de contrôle d'hébergement)

    6.11.2014 (v 1.1) a ajouté la possibilité de télécharger plusieurs images depuis votre ordinateur

    Compatibilité
    • PHP 5.4 et supérieur
    • MySQL 5.5
    • Joomla 2.5 - 3.9
    • VirtueMart 2 - 3

    Version Joomla

    Licence

    Plugin de chargement différé des photos de produits dans Joomshopping et Virtuemart. Avec lui, les pages du catalogue se chargeront beaucoup plus rapidement grâce à l'effet de chargement progressif des images.

    Plugin pour le chargement différé des photos de produits

    Joomla 1.5 - 2.5, 3.x + JoomShopping, Virtuemart 1.x - 2.x

    pour 400 roubles.

    Support technique et mises à jour gratuites pendant 1 an. Licence de domaine

    Possibilités

    Tout le monde a vu comment, dans de nombreuses boutiques en ligne modernes, les photos des produits n'apparaissent pas immédiatement, mais au fur et à mesure que vous faites défiler la page. La question naturelle est : pourquoi ? Qu'est-ce que cela donne ? Et la réponse est simple : cela vous permet de réduire le temps de chargement des pages. De plus, la vitesse de chargement du site est importante non seulement pour l'utilisateur, mais également pour les moteurs de recherche : la vitesse de chargement des pages est prise en compte lors du classement des sites dans les résultats de recherche.

    Le plugin utilise le plugin jQuery lazyload bien connu. La signification de son travail est que lors du chargement de la page, seules les images visibles sur le premier écran sont chargées. Au lieu de toutes les autres images ci-dessous, un petit « stub » est placé. Le navigateur considère que la page est chargée et lorsque vous faites défiler la page, les images sont chargées à la place des espaces réservés. Je vais vous donner les résultats d'un petit test. Sur mon site Internet, j'ai affiché 96 produits par page et mesuré la vitesse de chargement des pages. Sans plugin - 4,5 sec. Avec le plugin - 0,99 sec. Tirez vos propres conclusions.

    Paramètres

    Le plugin est conçu pour Joomla 1.5 et 2.5, 3.x. Traite uniquement les photos des produits Virtumart et Joomshopping (photos comportant le mot « produit » dans le chemin). Pour que tout fonctionne, il vous suffit d'installer et de publier le plugin.

    Quelques limitations - le plugin utilise jQuery. De plus, jQuery lui-même n'est pas chargé dans le plugin - je suppose que jQuery est déjà utilisé sur votre site. Si vous n'avez pas jQuery, cela ne sert probablement à rien de charger jQuery uniquement pour cet effet.

    Deuxièmement, si vous disposez de la ligne Virtuemart 1.1.* et que le script show_image_in_imgtag.php est utilisé lors de l'affichage des photos de produits, le plugin ne fonctionnera pas non plus. Vous pouvez vérifier en regardant l'adresse de la photo du produit dans la catégorie sur votre site Web - ce script sera dans l'adresse. Par exemple - src ="/components/com_virtuemart/show_image_in_imgtag.php?filename=resized%2FBody_4f1e6a7cba9a3_90x90.jpg&newxsize=90&newysize=90&fileout= " . Conseils gratuits - débarrassez-vous de ces conneries - le script met une charge énorme sur le serveur.

    Troisièmement, le plugin n'est pas adapté aux appareils mobiles

    Vous pouvez augmenter la vitesse de chargement des pages de différentes manières :

    • mise en cache
    • compression de fichiers CSS et JS
    • optimisation des images

    Dans cet article, nous analyserons ce dernier point en détail et montrerons quels résultats peuvent être obtenus.

    Lorsque vous utilisez le chargement paresseux pour les images, le poids de la page diminue, donc la page commence à se charger plus rapidement.

    Le principe de fonctionnement est simple : les images sont chargées dynamiquement dès qu'elles entrent dans le champ de vision de l'utilisateur. Par exemple, le navigateur n'a pas besoin de télécharger immédiatement toutes les photos des produits d'une catégorie, il suffit de télécharger et d'afficher les images de plusieurs produits qui apparaissent sur le premier écran. Si de nombreux produits sont affichés sur la page, cela accélérera considérablement le chargement.

    Il existe 2 façons d'intégrer la charge paresseuse dans Virtumart :

    • manuellement, en apportant quelques modifications au modèle
    • en utilisant un plugin qui vous permettra d'ajouter du lazyload pour toutes les images du site
    Ajouter une charge différée manuellement

    Il existe de nombreux scripts qui peuvent être utilisés pour intégrer le chargement paresseux dans un site Web. J'utilise echo.js. La version compressée du script ne pèse que 2 Ko. Un exemple de travail peut être vu sur cette page.

    Connectons le script à la page de catégorie. Sur d'autres pages, à mon avis, il ne sert à rien d'utiliser le chargement paresseux. Si vous devez ajouter un chargement paresseux pour toutes les images du site, il est préférable d'utiliser le plugin LLFJ - Lazy Load pour Joomla ! , qui sera discuté dans la section suivante.

    Alors, copions les fichiers de script dans le dossier de modèles /templates/template_name/echo/ .

    Remplaçons le code d'affichage de l'image dans la catégorie.

    Pour Virtumart 3

    Dans le fichier /components/com_siteblayouts/products.php nous remplacerons

    < a title = " " href = " " >