Intégrez vos propres éléments d'image (widgets) (exemple sur le widget d'informations sur la boutique)

Hier, j'ai rencontré le problème de la création d'un widget à partir de Informations sur la boutique à installer Un portail d'évaluation pour les boutiques en ligne, que nous utilisons via le Association des marchands pouvoir utiliser.

Malheureusement, il n'y a pas de plugin pour cela via le Shopware Store. Les codes devaient donc être placés manuellement.

Pour ce faire, j'ai d'abord configuré le widget d'informations sur la boutique dans le backend du site.

Intégrez vos propres éléments d'image (widgets) (exemple sur le widget d'informations sur la boutique)

Après cela, le code est disponible un peu plus profondément.

Intégrez vos propres éléments d'image (widgets) (exemple sur le widget d'informations sur la boutique)

À l'étape suivante, j'ai inséré ce code dans le pied de page. Démarrez votre programme ftp (par exemple Filezilla) et recherchez :

/Thèmes/Front-end/Votre nom de thème/interface/index

À ce stade, je suppose que vous utilisez déjà votre propre thème, sinon vos modifications ne seraient pas mises à jour en toute sécurité. Sinon, Shopware fournit cette documentation :

Apporter des modifications au modèle

Intégrez vos propres éléments d'image (widgets) (exemple sur le widget d'informations sur la boutique)

Je crée toujours une copie de sauvegarde du fichier actuel avant d'apporter des modifications et j'ajoute la date actuelle au nom.

Insérez le code ci-dessus avec un éditeur de texte (par exemple Notepad++).

Intégrez vos propres éléments d'image (widgets) (exemple sur le widget d'informations sur la boutique)

Le widget s'affiche maintenant dans la partie inférieure de votre boutique en ligne Shopware. Bien sûr, ça n'a pas l'air génial. Par conséquent, les informations sur la boutique fournissent un petit extrait de code qui place fermement ce widget en bas à droite :

Écran @media only et (min-width : 768px) { div#shopauskunft_widget { display : block ; position : fixe ; droite : 10px ; bas : 10px ; }}

Mais qu'en faire ?

Un fichier CSS supplémentaire peut être spécifié dans le backend Showare. Téléchargez d'abord un nouveau fichier CSS avec le code ci-dessus via ftp.

Intégrez vos propres éléments d'image (widgets) (exemple sur le widget d'informations sur la boutique)

Il ne vous reste plus qu'à indiquer à Shopware 5 que ce fichier doit être utilisé. Pour ce faire, vous allez dans le backend Paramètres/Gestionnaire de thèmes...

Intégrez vos propres éléments d'image (widgets) (exemple sur le widget d'informations sur la boutique)

... choisissez votre thème et cliquez sur Configurer le thème.

Sous l'onglet Configuration...

Intégrez vos propres éléments d'image (widgets) (exemple sur le widget d'informations sur la boutique)

… entrez votre fichier css sous "Autres fichiers CSS":

<link href=“/themes/Frontend/Votre nom de thème/frontend/_public/src/css/shopauskunft.css?template=itintime_170425&is_preview=on" media="all" rel="stylesheet" type="text/css" />

Videz maintenant le cache de la boutique et compilez le thème.

Effacer le cache de Shopware 5

Et voilà… votre widget a fière allure ! 🙂

Intégrez vos propres éléments d'image (widgets) (exemple sur le widget d'informations sur la boutique)

Le widget RBA des informations sur la boutique est toujours nécessaire pour envoyer les e-mails d'évaluation. Je vais vous montrer comment le configurer dans ce post:

Installer le widget RBA à partir des informations de la boutique dans Shopware 5