Produktbewertungen mit javascript veröffentlichen

[indien-schmuckkunst]

Hallo,
Ich versuche rauszubekommen wie ich mittels javascript meine Produktbewertungen (die ich im admin Bereich verwalten kann - und die beim jeweiligen Produkt angezeigt werden) in Listenform auf einer Shoppage veröffentlichen kann. Der epages Shop Zauberdergewuerze hat so eine Lösung die ich für mich gerne hätte. Alleine ich komm nicht dahinter wie ich die Bewertungen rausbekomme.
Hat irgendwer initiale Tips wie ich das am sinnvollsten angehen kann?
Mein Shop: www.indien-schmuckkunst.de
Danke für eure Bemühungen

[fabianb]

Hallo,

da muss ich dich leider enttäuschen - der Shop ZauberderGewuerze ist ein sog. ePages Enterprise-Shops. Der Shopeigentümer hat also einer unserer Partneragenturen Geld für die inidviduelle Umsetzung des Shops gezahlt und diese Kundenbewertungen sind offenbar spezifisch eingerichtet wurden. In einem frei erhältlichen ePages Base-Shop ist dies leider nicht möglich.

Trusted Shops ist keine Option für dich?

Viele Grüße,
Fabian

[indien-schmuckkunst]

Hallo Fabian
Danke für die Infos ... ich war schon etwas verwirrt. Also mit mindest Kosten von 69 €€ für Trusted Shops..... das ist doppelt soviel wie ich für den gesamten Shop an Kosten habe.... das ist irgendwie unverhältnismäßig. Ich hab die Bewertungen und kann sie nur nicht sichtbar machen....aber 69€€ .....irgendwie fehlt da die Balance. Außerdem wäre es für epages ein leichtes die bestehenden Produktbew. nach außen sichtbar zu machen, aber das gräbt ja das Trusted Shops und ähnlichen ein wenig das Wasser ab. Mir gefällt dieses Verhalten nicht so richtig, ich ringe regelmäßig mit mir....

[Brackets]

haben sie einen google account? können sie sich einen anlegen?

https://firebase.google.com/pricing/

ich bin mal so frei und behaupte mehr als 1GB storage und 10GB/month brauchen sie nicht. damit wäre das dann "kostenlos".

der code dazu könnte ungefähr so aussehen:

in den header:

<script src="https://www.gstatic.com/firebasejs/4.8.2/firebase.js"></script>

auf der seite für die kommentare (bzw. bootstrap ist immer ne gute wahl für den header :

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmST sz/K68vbdEjh4u" crossorigin="anonymous">
<style>
#alertFormMsg {
display: none;
}
</style>
<div class="container-fluid">
<div class="jumbotron">
<div class="alert alert-success" id="alertFormMsg">
<strong>Success!</strong> Thank You for leaving a Comment!.
</div>
<form id="valueMsgForm">
<div class="form-group">
<label for="name">Name:</label>
<input id="valueMsgFormName" class="form-control" type="text" name="name" required></input>
</div>
<div class="form-group">
<label for="email">Email:</label>
<input id="valueMsgFormEmail" class="form-control" type="text" name="email" required></input>
</div>
<div class="form-group">
<label for="msg">Message:</label>
<textarea id="valueMsgFormMsg" class="form-control" type="text" name="msg" required></textarea>
</div>
<button type="submit">Submit</button>
</form>
</div>
</div>
<script>
(function($){
$(document).ready(function(){

const config = {
apiKey: "<API_KEY>",
authDomain: "<PROJECT_ID>.firebaseapp.com",
databaseURL: "https://<DATABASE_NAME>.firebaseio.com",
storageBucket: "<BUCKET>.appspot.com",
messagingSenderId: "<SENDER_ID>",
};

firebase.initializeApp(config);
const dtbRef = firebase.database().ref('msg')

document.getElementById('valueMsgForm').addEventLi stener('submit', submitForm);

// TODO: error msg + make it async

function submitForm(e){
e.preventDefault();

const name = getInputId('valueMsgFormName')
const msg = getInputId('valueMsgFormMsg')
const email = getInputId('valueMsgFormEmail')

saveMsg(name, msg, email);

document.getElementById('alertFormMsg').style.disp lay = 'block';
setTimeout(()=>{
$('#alertFormMsg').fadeOut();
}, 3000)
document.getElementById('valueMsgForm').reset();
}


function getInputId(id) {
return document.getElementById(id).value;
}

function saveMsg(name, msg, email) {
const newMsgRef = dtbRef.push();
newMsgRef.set({
name: name,
msg: msg,
email: email
})
location.reload();
}

});
})(jQuery);
</script>

für den output:
<script src="https://www.gstatic.com/firebasejs/4.8.2/firebase.js"></script>

<div class="jumbotron">
<ol id="output"></ol>
</div>
<script>
(function($){
$(document).ready(function(){

dtbRef.on('value', gotData, errData);

function gotData(data){

$('.valueMsgFormOutputItems').each(()=>{
$(e).remove();
})

const values = data.val()
const keys = Object.keys(values)
$.each(keys, (i,e) => {
let k = keys[i];
const emails = values[k].email
const msgs = values[k].msg
const names =values[k].name

$('#output').append(`
<li class="valueMsgFormOutputItems">${emails} : ${msgs} : ${names}</li>
`)
});
}
function errData(err){
console.log(err)
}

});
})(jQuery);
</script>


PS. der code ist nur als idee zu verstehen, also nicht wirklich optimiert (sprich nicht async etc.). aber wenn sie sich dafür entscheiden ist das bisschen ändern auch nicht so viel aufwand.