Mit diesem Wissen erhälst du den entscheidenen Vorsprung
Menü
Mit diesem Wissen erhälst du den entscheidenen Vorsprung
We are still adding more cool stuff. It will be available in few days! Please enter your email below to be notified.
69,- Euro
You will receive updates till these features are implemented!
We have two options for calling URLs
1. Redirects
2. Webhooks
You need to activate the redirect options within the option area.
You can enter the URL as an absolute (e.g. https://vollstart.de/) or relative (e.g. /page/) URI. This redirect URL will be executed on the frontend. If you do not enter a button label, then the user will be redirected to the URL immediately if the code is valid. If you enter a button label, the user need to click on the button to be forwarded.
How to build an URL for a webhook call?
We offer 5 placeholder: {USERID}, {CODE}, {CODEDISPLAY}, {IP}, {LIST}
Please be aware that the placeholders are case sensitive. The easiest way is to copy & paste the placeholder with the brackets into your URL.
Userid (empty if the user is not logged in): userid
Display-Code: NYA-ZER-TER
Code: NYAZERTER
Name of the list the code is assigned to: myList
IP of the user: 1.2.3.4
The webhook example URL:
https://vollstart.de/anotherService/{LIST}/{CODE}/?code={CODEDISPLAY}&ip={IP}
will be translated by the plugin into:https://vollstart.de/anotherService/myList/NYAZERTER/?code=NYA-ZER-TER&ip=1.2.3.4 and then the URL will be called by your wordpress server.
On option 1 (Redirect), the browser will go tohttps://vollstart.de/anotherService/myList/NYAZERTER/?code=NYA-ZER-TER&ip=1.2.3.4
On option 2 (Webhook), your server will call the URL in the backgroundhttps://vollstart.de/anotherService/myList/NYAZERTER/?code=NYA-ZER-TER&ip=1.2.3.4
You can use your own HTML input, output and trigger component for the check.
If you add the parameters (all 3 mandatory to use this feature), then the default input area will not be rendered.
[ sngmbhSerialcodesValidator inputid="" triggerid="" outputid="" ]
inputid
The component with the set HTML-ID will be used as the input element. It need to be an HTML input element.
We will access the value-parameter of it.
[ sngmbhSerialcodesValidator
inputid=""
triggerid=""
outputid=""
]
triggerid
The onclick event of the component with this HTML-ID will be replaced by our function in order to call the server validation for the code.
[ sngmbhSerialcodesValidator
inputid=""
triggerid=""
outputid=""
]
outputid
The component with the provided HTML-ID on this parameter will be used for the server answer – the output.
It cannot be empty. If you want to hide the output, hide it using css style commands.
The content of this component will be replaced by the server result after the check . We will use the innerHTML property of it, so use a DIV, SPAN, TD or similar for best results.
If you need to control the form depending on the result of the serial code check, then please consider using one or both of the additional optional parameter for your own JavaScript callback functions.
[ sngmbhSerialcodesValidator
inputid=""
triggerid=""
outputid=""
]
You can add JavaScript function names, that are called before and after the check.
Both parameters are optional and not required.
[ sngmbhSerialcodesValidator jspre="" jsafter="" ]
These parameters can be combined with the input and output parameters.
jspre
If you want to control or manipulate the input before it is sent to the server, then use this parameter.
The function will be called. The input parameter for the function will be the code.
If your function returns a value, than this returned value will be used. If nothing is returned or an empty string, then the entered code of the user will be used.
[ sngmbhSerialcodesValidator
jspre="mySerialCodePre"
jsafter=""
]
Example function
Add your JavaScript code to your page, so that it can be called from the serial code plugin. Make sure the function name your are using for the jspre-call is matching, the jspre attribute value. The input parameter is a string with the user entered code.
function mySerialCodePre(myCode) {
// console.log(myCode);
return myCode;
}
jsafter
The function will be called. The input parameter will be the result JSON object from the server.
The content differs (depending on the activated options) and can be extended in the future. Please inspect the result first, before relying on the available property.
If you want to use the result as a form controlling mechanism check for the returned property: data.valid
The data.valid === 1 is true, if the serial code was valid and unsed.
[ sngmbhSerialcodesValidator
jspre=""
jsafter="mySerialCodeAfter"
]
Example function
Add your JavaScript code to your page, so that it can be called from the serial code plugin. Make sure the function name your are using for the jsafter-call is matching, the jsafter attribute value. The input parameter is a JSON object returned from the server after the serial code was evaluated.
function mySerialCodeAfter(data) {
// console.log(data);
if (data.valid === 1) {
// do your thing
}
}
The frontend will be rendered by the Javascript file. The elements will have css classes, that you could override.
The actual used CSS file can be view here: Open the CSS file
<div id="sngmbhSerialcodesValidator">
<div class="sngmbh_container">
<div class="sngmbh_container">
<div class="sngmbh_input-group sngmbh_mb-3">
<input required="" type="text" class="sngmbh_form-control sngmbh_mb-2" data-input="sngmbhSerialcodesValidatorcode" placeholder="XXYYYZZ">
<div class="sngmbh_input-group-append">
<button type="submit" data-btn="sngmbhSerialcodesValidatorbtn" class="sngmbh_btn sngmbh_btn-primary sngmbh_mb-2">Check</button>
</div>
</div>
</div>
<div></div>
</div>
</div>
Form validation look and feel is controled by 2 css classes:
.sngmbh_is-invalid, .was-validated .sngmbh_form-control:invalid {
border-color: #dc3545;
padding-right: calc(1.5em + .75rem);
background-image: url(data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' fill='none' stroke='%23dc3545' viewBox='0 0 12 12'%3e%3ccircle cx='6' cy='6' r='4.5'/%3e%3cpath stroke-linejoin='round' d='M5.8 3.6h.4L6 6.5z'/%3e%3ccircle cx='6' cy='8.2' r='.6' fill='%23dc3545' stroke='none'/%3e%3c/svg%3e);
background-repeat: no-repeat;
background-position: right calc(.375em + .1875rem) center;
background-size: calc(.75em + .375rem) calc(.75em + .375rem);
}
.sngmbh_is-valid, .was-validated .sngmbh_form-control:valid {
border-color: #28a745;
padding-right: calc(1.5em + .75rem);
background-image: url(data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='8' height='8' viewBox='0 0 8 8'%3e%3cpath fill='%2328a745' d='M2.3 6.73L.6 4.53c-.4-1.04.46-1.4 1.1-.8l1.1 1.4 3.4-3.8c.6-.63 1.6-.27 1.2.7l-4 4.6c-.43.5-.8.4-1.1.1z'/%3e%3c/svg%3e);
background-repeat: no-repeat;
background-position: right calc(.375em + .1875rem) center;
background-size: calc(.75em + .375rem) calc(.75em + .375rem);
}
The ajax call progress is rendered dynamically with the CSS rule: „lds-dual-ring„. It will be injected if it is not defined. To overrule this look and feel, just create the CSS rule with your values.
The progress wheel (spinner) is rendered by:
<div id="sngmbhSerialcodesValidatorspinner">
<span class="lds-dual-ring"></span>
</div>
Here is the default CSS rule of the progress wheel:
.lds-dual-ring {
display:inline-block;
width:64px;
height:64px;
}
.lds-dual-ring:after {
content:" ";
display:block;
width:46px;
height:46px;
margin:1px;
border-radius:50%;
border:5px solid #fff;
border-color:#2e74b5 transparent #2e74b5 transparent;
animation:lds-dual-ring 0.6s linear infinite;
}
@keyframes lds-dual-ring {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
Copyright 2018 © Alle Rechte vorbehalten.