Integreer je eigen afbeeldingselementen (widgets) (voorbeeld op de winkelinformatie widget)

Gisteren stond ik voor het probleem van het maken van een widget van Winkel informatie installeren Een beoordelingsportal voor online winkels, die we gebruiken via de Vereniging van Kooplieden te kunnen gebruiken.

Hiervoor bestaat helaas geen plugin via de Shopware Store. De codes moesten dus handmatig geplaatst worden.

Om dit te doen, heb ik eerst de winkelinformatie-widget in de backend van de site geconfigureerd.

Daarna is de code wat dieper beschikbaar.

In de volgende stap heb ik deze code in de voettekst ingevoegd. Start je ftp-programma (bijvoorbeeld Filezilla) en zoek naar:

/Thema's/Frontend/UwThemanaam/frontend/index

Op dit moment ga ik ervan uit dat je al je eigen thema gebruikt, anders zouden je wijzigingen niet update-veilig zijn. Anders biedt Shopware deze documentatie:

Breng wijzigingen aan in de sjabloon

Ik maak altijd een reservekopie van het huidige bestand voordat ik wijzigingen aanbreng en voeg de huidige datum toe aan de naam.

Voeg de bovenstaande code in met een teksteditor (bijv. Notepad++).

Nu wordt de widget weergegeven in het onderste gedeelte van uw Shopware online shop. Zo geweldig ziet het er natuurlijk niet uit. Daarom biedt winkelinformatie een klein codefragment dat deze widget rechtsonder stevig plaatst:

@media alleen scherm en (min. breedte: 768px) { div#shopauskunft_widget { display: block; positie: vast; rechts: 10px; onderkant: 10px; }}

Maar wat ermee te doen?

Een extra css-bestand kan worden opgegeven in de Showare-backend. Upload eerst een nieuw css-bestand met bovenstaande code via ftp.

Nu hoef je Shopware 5 alleen maar te vertellen dat dit bestand gebruikt moet worden. Hiervoor ga je naar de backend Instellingen / Themabeheer...

... kies je thema en klik op Thema configureren.

Onder het tabblad Configuratie...

… vul je css-bestand in onder “Andere CSS-bestanden”:

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

Leeg nu de winkelcache en compileer het thema.

Et voila... je widget ziet er geweldig uit! 🙂

De RBA-widget uit winkelinformatie is nog steeds vereist om de evaluatie-e-mails te verzenden. Ik zal je laten zien hoe je het in dit bericht instelt:

Installeer de RBA-widget vanuit winkelinformatie in Shopware 5