PEW - voor de website bouwer
- Pettrie de Bondt
- Robin de Bondt
Deze pagina is bestemd voor de website bouwer, om eventueel de pagina te stylen naar de huisstijl van de klant.
Code voor op de website
<!DOCTYPE html>
<html lang="en">
<head>
<title>Autoflex PEW minimal</title>
<!-- Embedded PEW CSS here # start -->
<link href="https://pew-embed.autoflex.dev/css/app.css" rel="stylesheet" />
<!-- Embedded PEW CSS here # end -->
</head>
<body>
<!-- Embedded PEW widget here # start -->
<pew-widget>
<h1>Bezig met laden...</h1>
</pew-widget>
<!-- Embedded PEW widget here # end -->
<!-- PEW override CSS here -->
<link href="./theme-style.css" rel="stylesheet" />
<!-- Embedded PEW script here # start -->
<script src="https://pew-embed.autoflex.dev/js/app.js"></script>
<!-- Embedded PEW script here # end -->
</body>
</html>1. Aanpasbare slots t.b.v. detailpagina
In de detail pagina is het mogelijk 2 blokken tekst/code aan te passen met eigen tekst/code om beter aan te sluiten bij de eigen wensen en website.
Het gaat om de volgende blokken:
detail info
onder de prijs het formulier kunnen aanpassen.
detail contact
het vraag meer informatieblok met de foto
<!-- Embedded PEW widget here # start -->
<pew-widget>
<h1>Bezig met laden...</h1>
<template slot id="detailinfo">
<div class="card-content">
<strong>Aanvraag formulier</strong>
<form>
<label tabindex="0" class="b-checkbox checkbox">
<input tabindex="-1" type="checkbox" true-value="true" value="false">
<span class="check"></span>
<span class="control-label">Bel mij voor een afspraak</span>
</label><br/>
<label tabindex="0" class="b-checkbox checkbox">
<input tabindex="-1" type="checkbox" true-value="true" value="false">
<span class="check"></span>
<span class="control-label">Ik wil een proefrit</span>
</label>
</form>
<button type="button" class="button is-warning is-medium"
><span>Verstuur formulier</span></button
>
</div>
</template>
<template slot id="detailcontact">
<div class="card-header">
<p class="card-header-title is-size-4">
<slot name="detailcontact">
<img src="./reception.jpg" style="width: 100%;"/>
</p>
</div>
</template>
</pew-widget>
<!-- Embedded PEW widget here # end -->Binnen de <pew-widget> tag, na de <h1> tag is het template te definieren.
Alles binnen de tags:
<template slot id="detailinfo">
</template>en
<template slot id="detailcontact">
</templatewordt doorgegeven naar de detail pagina
Voor aanpassingen via template
Â
Na aanpassingen via template
2. Aanpasbare look & feel
Styling van PEW pagina’s kan doormiddel van eigen css toe te voegen aan het einde van de embed code.
<!-- PEW override CSS here-->
<link href="./theme-style.css" rel="stylesheet" />Voorbeeld van CSS
:root {
--app-font-family: sans-serif;
--app-font-color: rgb(65, 65, 65);
--app-line-height: 2;
--app-font-size: 1rem;
--primary-background-color: #1976d2;
--primary-color: #ffffff;
--warning-background-color: #red;
--warning-color: #ffffff;
--even: #f7f7f7;
--odd: #ffffff;
--header-font-size: 1.2 rem;
--title-font-size: 1rem;
}
#app {
color: var(--app-font-color);
font-family: var(--app-font-family);
font-size: var(--app-font-size);
line-height: var(--app-line-height);
}
...........
...........de kleuren en lettertypes zijn gedefinieerd in de :root class
Twee voorbeelden van CSS
Â
Standaard styling
Â
Aangepaste styling
Â
Speciale classes om onderdelen te verbergen
#app .homenav
#app .detailinfo
#app .detailcontact3. Instellingen → Opstarten PEW met grid of lijst
Door het doorgeven van een PEW-widget settings parameter bij het opstarten van de widget kan worden aangegeven of standaard de lijst of het grid getoond wordt.
<pew-widget
settings='{"showList": false}'
>showlist = false
toont het grid
default/omitted = true
toont de lijst
opstarten met lijst
opstarten met grid
Â
4. Instellingen → Forceer scroll-to-top
Het kan voorkomen bij het implementeren van PEW widget in een content management systeem zoals Wordpress dat het scrollen naar de bovenkant van de pagina wordt tegengehouden door het CMS. Als de (internet gebruiker) ergens klikt in de site, wordt de inhoud op de plaats zelf vervangen en is het daarom niet gewenst om naar boven te scrollen, maar op die plek te blijven.
Bij een lange lijst van auto’s in PEW is het wel wenselijk dat er naar de bovenkant van de detail pagina gescrolld word, zoals ook in de demo-pagina’s te zien is. Om dit in CMS systemen zoals Wordpress te bekrachtigen is het mogelijk onderstaande instelling toe te voegen aan PEW-widget settings parameter.
<pew-widget
settings='{"forceScrollTop":{"enforce": true, "amount": 100}}'
>enforce = true → betekent dat het scrollen wordt geïnitieerd
amount = 100 → getal in pixels geeft de offset aan in de browser tov. de bovenkant van de widget. Dit is vooral handig bij menubalken die in beeld blijven staan.
Gerelateerde artikelen
Â