Lazy Load - chargement retardé des photos de produits. Lazy Load - chargement paresseux d'images pour Virtumart Ajout d'un produit complexe

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, ajouter un produit vous coûtera de 15 à 40 roubles. Multipliez par le nombre de biens dont vous avez besoin, vous obtiendrez un montant très décent ( 1500 - 4000 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 :

  1. 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.
  2. Le composant recherche des images de produits dans Google en fonction des noms de produits ou de « Article + Fabricant ».
  3. Vous pouvez marquer vous-même les images de produits appropriées.
  4. Vous pouvez télécharger un produit à la fois ou effectuer une recherche par lots sur tous les produits VirtueMart sélectionnés.
  5. Possibilité d'ajouter un filigrane à toutes les images téléchargées.
  6. Création automatique d'images miniatures selon les tailles spécifiées dans les paramètres.
  7. 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.
  8. 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.
  9. Suppression par lots ou unique des images de produits déjà téléchargées.
  10. Vous pouvez filtrer les produits et les catégories, en ne laissant que ceux qui n'ont pas d'image.
  11. 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.
  12. 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.
  13. 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

De nombreuses personnes sont tôt ou tard confrontées à la tâche d'exporter et d'importer des marchandises dans Virtuemart. Je ne sais pas pourquoi, mais les développeurs du magasin ont décidé qu'ils pouvaient se passer de cette fonctionnalité par défaut, mais il me semble qu'ils ont commis une grosse erreur. Dans cet article, je vais essayer d'analyser le plus en détail possible toutes les capacités du composant CSVI, qui deviendra un outil indispensable pour le déchargement et le chargement de marchandises dans Virtuemart 2/3.

Dans le programme Calc, cliquez sur : Fichier → Ouvrir → Sélectionnez le fichier import.csv → Une fenêtre s'ouvrira, que nous remplirons comme suit :

Et cliquez sur le bouton « OK ». Ensuite, vous verrez un document Excel typique qui, à mon avis, ne nécessite aucun commentaire particulier. Remplissez-le avec vos données ou, par analogie, ajoutez des colonnes pour l'importation et d'autres caractéristiques du produit, par exemple « Description », « Dimensions », etc., etc.

Important!

Le fichier doit être enregistré en codage UTF-8 et délimité< и >. Pour ce faire, sélectionnez : Fichier → Enregistrer sous → Sélectionnez CSV et cochez la case « Modifier les paramètres du filtre » → Ensuite, spécifiez l'encodage UTF-8 et le séparateur de champ.< и разделить текста >. Lorsque vous définissez ces séparateurs de champs et de texte, vous ne pouvez pas utiliser ces caractères dans les titres, les descriptions, etc. Eh bien, ou comme beaucoup l'ont écrit, il est préférable d'utiliser ^ et ~. Dans ce cas, modifiez également les séparateurs dans les paramètres du composant.


L’import tant attendu d’un fichier dans le store

Sélectionnez un modèle dans la liste des modèles et cliquez sur « Charger ». Ensuite, dans le champ « Charger depuis l'ordinateur », cliquez sur Parcourir et sélectionnez le fichier à importer ; après avoir sélectionné le fichier, cliquez sur le bouton « Exécuter le script » et attendez la fin du processus.

Exporter des marchandises Virtuemart 2/3

Je suis sûr que si vous parvenez à importer des marchandises conformément à ces instructions, l'exportation de marchandises ne vous sera pas difficile. La seule chose est que lors de l'exportation, spécifiez correctement la langue de votre boutique.


Bon après-midi. Je vous demande d'écrire le coût estimé et le délai pour terminer la tâche, si cela est clair pour vous. Si vous avez des questions, posez-les.
Site Web sur Jomla3 + VirtuMart 3 (les dernières versions, si elles ne sont pas déjà disponibles, nous pouvons les mettre à jour). Adresse du site Internet : sur lai nsant ehni ka dot RF (sans espaces).
CSVI 6 (composant de chargement de données à partir de documents tableurs) est déjà installé sur le site. Cependant, nous avons des problèmes pour l'utiliser. Il dit que tout est chargé, mais il ne se charge pas réellement. Maintenant, après avoir réinstallé le composant, d'autres écrivent des erreurs - quelque chose à propos de champs manquants dans les tables.
Il existe un fichier xls contenant environ 43 000 produits. Exemple de format de fichier : https://yadi.sk/i/khFLPdnnkWRE3 La difficulté est que des « champs personnalisés » sont utilisés pour les produits. Il y a des filtres sur le site, ils fonctionnent maintenant. Autrement dit, vous devez non seulement charger les produits, mais également créer des champs (le nombre de champs supplémentaires est d'environ 980, il n'y a donc aucun moyen de les créer manuellement). Également lors de la création d'éléments supplémentaires Les champs du site doivent être spécifiés manuellement comme type. Par conséquent, le type doit probablement également être saisi automatiquement dans le fichier de téléchargement avant de démarrer le téléchargement proprement dit du module complémentaire. champs sur le site (ou je peux manuellement - dites-moi simplement le format). Pour cela, vous pouvez utiliser soit un composant CSVI prêt à l'emploi, soit via phpmyadmin. Dans le second cas, vous aurez probablement besoin d'un script dans lequel vous pourrez spécifier le chemin d'accès au fichier xls et recevoir le texte de la demande à exécuter dans phpmyadmin.
Veuillez noter que dans Virtumart, le produit est stocké dans plusieurs tables. Et les photos doivent également être téléchargées. Dans le fichier xls, les chemins d'accès aux photos sont stockés dans une colonne séparée.

Il s'avère que nous pouvons le diviser en sous-tâches :
1) créez des champs personnalisés sur le site en fonction des noms de colonnes supplémentaires dans le fichier xls.
2) charger des marchandises supplémentaires. champs, photos, prix.
3) prévoir la mise à jour du prix à partir du fichier xls dans le futur (afin que seul le prix soit mis à jour lors du chargement des produits existants).
4) il existe une autre complexité. Désormais, la description du produit est un tableau avec les paramètres et leurs valeurs. Voir ci-dessous sous la photo : http://xn--80aaatpdkcrdbbe1cr3c.xn--p1ai/bathroom-furniture/acrylic-bathtub-aquanet-nord-170-cm-37-detail

Ce tableau est donc désormais inséré simplement sous forme de code HTML. Il faut que soit il soit formé à partir des valeurs du complément renseigné. paramètres du produit (nous préférons cette option, si elle n'est pas très chère), ou créez un script et générez le code HTML de ce tableau dans un fichier xls (collecté à partir des valeurs des paramètres) et chargez-le depuis la cellule comme description de le produit.
5) supprimer sur le site l'inversion de l'image du produit sur la page principale au survol (c'est désactivé quelque part, je crois).
6) il y aura une autre sous-tâche - traiter les textes des descriptions de produits via un dictionnaire de synonymes, mais c'est dans le futur - ne l'évaluez pas encore !!