Opencart customization: server-side script for rating - javascript

I've added a custom table into the Opencart database, where I have a field/column, called average_rating (value = null to 5).
In my (custom) template (.tpl file) I've added a code to get and show the rating of current record from database.
Here is the code within .tpl file:
<div class="form-group">
<label class="col-sm-2 control-label" for="input-average_rating"><?php echo $entry_average_rating; ?></label>
<div class="col-sm-10">
<input type="hidden" name="average_rating" value="<?php echo $average_rating; ?>" id="input-average_rating" />
<?php for ($i = 0; $i < $average_rating; $i++) { ?>
<div class="rating_hover" id="<?php echo 'r' . ($i+1) ?>" title="<?php echo $i+1 ?>" data-toggle="tooltip"><i class="fa fa-star"></i></div>
<?php } ?>
<?php for ($i = $average_rating; $i <= 4; $i++) { ?>
<div class="rating_normal" id="<?php echo 'r' . ($i+1) ?>" title="<?php echo $i+1 ?>" data-toggle="tooltip"><i class="fa fa-star"></i></div>
<?php } ?>
</div>
</div>
For the blue-stars, I use .rating_hover class, for the grey-ones: .rating_normal class (see the picture below).
All this stuff works fine. But now I want to do something I have no experience with and I would appreciate any tip concerning my question.
Question: When a mouse pointer is over a grey star, it must become blue, like the ones before it. And when clicked on a star, my hidden input must get the value of title attribute of the clicked div-element. I wouldn't like to write a client-side Javascript to do this. Could somebody give a tip on how to do this with JSON or AJAX... or somehow please?
I mean: something like this:
$('div[id=\'r*\']').onmouseover({
// for (i=$average_rating; i<=[current_id]; i++) {
// ??? document.getElementById('r[i]').style.ClassName = 'someclass';
});
Javascript-alternative works fine, but I still have problems with JSON-script:
This is how javascript works:
Inside every div-element I added following commands:
<div ... onclick="rOnClick(<?php echo ($i+1) ?>);" onmouseover="rOnMouseOver(<?php echo ($i+1) ?>);" onmouseout="rOnMouseOut(<?php echo ($i+1) ?>);" ... >
And my Javascript functions are now, as follows:
<script type="text/javascript">
function rOnMouseOver(id) {
var ar = parseInt(document.getElementById('input-average_rating').value);
if (isNaN(ar)) {
ar = 0;
}
for(i = (ar+1); i <= id; i++) {
document.getElementById('r' + i).className = 'rating_hover';
}
}
function rOnMouseOut(id) {
var ar = parseInt(document.getElementById('input-average_rating').value);
if (isNaN(ar)) {
ar = 0;
}
for(i = 1; i <= ar; i++) {
document.getElementById('r' + i).className = 'rating_hover';
}
for(i = (ar+1); i <= id; i++) {
document.getElementById('r' + i).className = 'rating_normal';
}
}
function rOnClick(id) {
document.getElementById('input-average_rating').value = id;
for(i = 1; i <= id; i++) {
document.getElementById('r' + i).className = 'rating_hover';
}
for(i = (id+1); i <= 5; i++) {
document.getElementById('r' + i).className = 'rating_normal';
}
}
</script>

Please add another css class 'rating' in all rating divs. Also you will be needed to add a different class 'rated' for existing/clicked rated value. Then add following script:
$('.rating').hover(
// Handles the mouseover
function() {
$(this).prevAll().andSelf().addClass('rating_over');
$(this).nextAll().removeClass('rating_normal');
},
// Handles the mouseout
function() {
$(this).prevAll().andSelf().removeClass('ratings_over');
$('.rated').addClass('ratings_over'); // back to rated one
}
);
$('.rating').bind('click', function() {
$('.rating').removeClass('rated');
$(this).addClass('rated');
$('#input-average_rating').val($(this).attr('title'));
});

Related

Showing price on click input type="radio"?

[Product listing with clickable inputs][1]
i'm building a webshop system, and i would like to see on the product page that if a user selects a product size, the price will be displayed of the selected size..
Only the last displayed input works when i click on it.
Product listing with size inputs: https://i.stack.imgur.com/Wo6Oq.png
<?php
$count = 0;
foreach($original_array as $order_list){
$count++;
if($order_list['aantal'] == 0 || $order_list['aantal'] == ''){
$disableValue = 'disable';
}
if($count == 2){
$checked = 'checked=""';
}
?>
<div class="sc-item">
<input type="radio" name="variatie_maat[]" value="<?=$order_list['maat'];?>" onclick="myFunction();" id="<?=$order_list['maat'];?>-maat" <?=$disableValue;?> <?=$checked;?>>
<label for="<?=$order_list['maat'];?>-maat"><?=$order_list['maat'];?></label>
<input style="display:none;" value="<?=$order_list['prijs'];?>" id="prijs-<?=$order_list['prijs'];?>" name="variatie_prijs[]">
</div>
<?php
}
?>
<script>
// Here the value is stored in new variable x
function myFunction() {
var x =
document.getElementById("prijs-<?=$order_list['prijs'];?>").value;
document.getElementById(
"price").innerHTML = x;
}
</script>
'''
Try this.
<?php
$count = 0;
foreach($original_array as $order_list){
$count++;
if($order_list['aantal'] == 0 || $order_list['aantal'] == ''){
$disableValue = 'disable';
}
if($count == 2){
$checked = 'checked=""';
}
?>
<div class="sc-item">
<input type="radio" name="variatie_maat[]" value="<?=$order_list['maat'];?>" onclick="myFunction('<?=$order_list['prijs'];?>');" id="<?=$order_list['maat'];?>-maat" <?=$disableValue;?> <?=$checked;?>>
<label for="<?=$order_list['maat'];?>-maat"><?=$order_list['maat'];?></label>
<input style="display:none;" value="<?=$order_list['prijs'];?>" id="prijs-<?=$order_list['prijs'];?>" name="variatie_prijs[]">
</div>
<?php
}
?>
<script>
function myFunction(id) {
var x = document.getElementById("prijs-" + id).value;
document.getElementById("price").innerHTML = x;
}
</script>

Carousel need to start from middle slide on page load

I have using Multi Carousel to display complete months dates in a slider. Each date some data be hide on click. When I browse to Multi Carousel clicked date is today,s date, Means active class for slides is current date.
But as slider have 30 days. so slider always start from day 1. I always need to slide it to current date by clicking next arrow.
Like today is sep-26. If you check following page you find a date slider there which is on sep-1 now. so to get sep-26 you need to slide next. http://prosport.guru/ps/game.php
I want that when page load slider should moves to current date auto. I have add auto class to current date slide but it did not work.
Following is my code for Multi Carousel.
<?php
$page2 = $_SERVER["PHP_SELF"];
$page2 = explode("/", $page2);
$page2 = $page2[count($page2) - 1];
$id_sport2 = $_GET["id_sport"];
$m = date("m");
$day = date("d");
$year = date("Y");
$dates = array();
$dates2 = array();
$tmp = array();
for ($i = 1; $i < 32; $i++) {
if ($i < 10) {
$ii = "0$i";
} else {
$ii = $i;
}
$date = "$year-$m-$ii";
//$date = date("Y-m-d", strtotime($date));
if ($i % 3 != 0) {
array_push($tmp, $date);
if ($i == 60) {
if (count($tmp != 0)) {
array_push($dates2, $tmp);
}
}
} else {
array_push($tmp, $date);
array_push($dates2, $tmp);
$tmp = array();
}
array_push($dates, $date);
}
///print_r($dates2);
?>
<div class="row" style="border:1px solid silver; background: #a0a0a0; color: white; ">
<div class="MultiCarousel" data-items="1,3,5,6" data-slide="3" id="MultiCarousel2" data-interval="1000" >
<div class="MultiCarousel-inner">
<?php
$cpt = 0;
for ($i = 0; $i < count($dates2); $i++) {
$line = $dates2[$i];
$today = date("Y-m-d");
if (empty($_GET["date"])) {
$goto = $today;
if (in_array($today, $line)) {
$active = "active";
} else {
$active = "";
}
} else {
$dt = $_GET["date"];
$goto = $dt;
if (in_array($dt, $line)) {
$active = "active";
} else {
$active = "";
}
}
for ($x = 0; $x < count($line); $x++) {
$el = $line[$x];
if (!empty($_GET["date"])) {
$dt = $_GET["date"];
if ($el == $dt) {
$color = "red";
} else {
$color = "white";
}
} else {
if ($el == $today) {
$color = "red";
} else {
$color = "white";
}
}
$href = "$page2?id_sport=$id_sport2&date=$el";
if ($x == 0) {
//echo "<div class='col-lg-1 col-xs-1'> </div>";
//echo "<div class='col-lg-10 col-xs-10'>";
}
/* echo ' <div class="col-md-4 col-xs-4 col-lg-4 ">
'.$el.'</div>';
*/
if ($x == 2) {
//echo "</div>";
}
?>
<div class="item " style="text-align:center">
<a href="<?php echo $href; ?>" >
<p class=" sportName mydate p-date" real="<?php echo $el; ?>" style="color:white; font-size: 12px; text-align: center;" >
<?php
$date = $el;
$month_name = ucfirst(strftime("%b", strtotime($date)));
$day_number = ucfirst(strftime("%d", strtotime($date)));
echo $month_name . ' ' . $day_number;
?>
</p>
</a>
</div>
<?php
}
}
echo "<input type='hidden' value='$goto' id='cd'>";
?>
</div>
<button class="btn btn-primary btn-sm leftLst" style="border-radius: 0px; top: calc(64% - 20px);"><</button>
<button class="btn btn-primary btn-sm rightLst fw" style="border-radius: 0px; top: calc(64% - 20px);">></button>
</div></div>
<script>
$(document).ready(function () {
var cd = $("#cd").val();
$(".mydate").each(function () {
var cd_tmp = $(this).attr("real");
if (cd_tmp != cd) {
//alert(cd_tmp+" is different from "+cd);
//$(".fw").click();
} else {
$(this).addClass("tag tag-danger active");
//break;
}
})
})
</script>
This jquery script will move it to the current date on page load.
$(function() {
// Get month and day, ex. "Sep 21"
var monthAndDay = new Date().toLocaleString("en-us", { month: "short" }) + ' ' + new Date().getDate();
// Locate the carousel item using month and day string
var $list = $('#MultiCarousel2 > div .item');
var $carouselToday = $('#MultiCarousel2 > div .item a p:contains('+monthAndDay+')');
var $parent = $carouselToday.closest('.item');
var index = $list.index( $parent );
var itemWidth = $list.eq(0).width();
var position = (index * itemWidth) * -1;
$('#MultiCarousel2 > div').css({"transition": "0s", "transform": "translate("+ position +"px)"});
$('#MultiCarousel2 > div').one("webkitTransitionEnd otransitionend oTransitionEnd msTransitionEnd transitionend", function() {
$(this).css({"transition": "1s ease all"})
});
});

Function not executing before .forEach

I'm having some problems showing my loading icon, before a function is executing. It seems to be showing at the same time my new elements are being appended to the DOM. I'm expecting to have many elements, so a loading icon is necessary as these new elements are being built.
A breakdown of what I want to happen
Show loading icon
Build new elements and append to DOM
Hide loading icon
Generate Dummy Elements
<div class="loader"></div>
<button>Duplicate Items</button>
<section class="grid">
<?php for ($i = 0; $i < 1000; $i++) :
$randH = rand(1, 10);
$randW = rand(1, 10);
$imgUrl = 'http://placehold.it/' . $randH . 'x' . $randW;
?>
<article class="grid__item">
<img src="<?php echo $imgUrl; ?>" height="<?php echo $randH; ?>" width="<?php echo $randW; ?>">
<p>Hello <?php echo $i; ?></p>
</article>
<?php endfor;?>
</section>
<section class="gallery></section>
Javascript Functions
let createGallery = () => {
let gridItems = document.querySelectorAll('.grid__item'),
gallery = document.querySelector('.gallery'),
gridArray = Array.prototype.slice.call(gridItems, 0);
// create new elements
gridArray.forEach((item, index) => {
let galleryItem = document.createElement('article'),
img = item.querySelector('img').attributes,
markup = {
caption: item.querySelector('p').innerHTML
},
template = `<article class="gallery__item">
<img class="gallery__item__img" src="{{src}}" height="{{height}}" width="{{width}}">
<figcaption>{{caption}}</figcaption>
</article>`;
for (let i = 0; i < img.length; i++) {
markup[img[i].nodeName] = img[i].nodeValue;
}
Object.keys(markup).forEach(function(key) {
let regEx = new RegExp('\{\{' + key + '\}\}', 'g');
template = template.replace(regEx, markup[key]);
});
galleryItem.innerHTML = template;
galleryItem.className = 'gallery__item ' + index;
gallery.appendChild(galleryItem);
})
// after all images have been added > hide loader
$('.loader').removeClass('is-active');
};
let initGallery = () => {
// show loader, before creating gallery
$('.loader').addClass('is-active');
// create new elements
createGallery();
}
let $button = document.querySelector('button');
$button.addEventListener('click', initGallery);

Sum meta values of checked inputs in wordpress loop

I try to sum values of checked inputs in wordpress loop and I have construction like:
<!--wp-loop-->
<input type="checkbox" value="<?php the_title(); ?>" id="i-<?php the_ID(); ?>">
<label for="i-<?php the_ID(); ?>"><?php the_meta(); ?></label>
<!--wp-loop-->
And I have a lot of loops in one page.
function updateTextInput() {
var allVals2 = [];
$('.taglist :checked').each(function(y) {
allVals2.push(<?php echo get_post_meta($post->ID, "price", true); ?>);
});
var total = 0;
for (var i = 0; i < allVals2.length; i++) {
total += allVals2[i] << 0;
}
$('#basket2').val(total);
}
$(function() {
$('.taglist input').click(updateTextInput);
updateTextInput();
});
and this is max that I have to do (
my only problem is: this script is not in loop and it's catch only value of last post in category and what's why it doesn't work right((

PHP and Javascript getelementbyid, how to pass on parameters

I have a Javascript function that is called many time within a while loop with <div id='c$value'>.
When calling countdown() I would need to pass on some parameters. In this case $m and $s.
How can this be done ?
window.onload = function() {
<?php
$nbcounters = 5;
for ($i = 0; $i < $nbcounters; $i++) {
echo "countdown('c$i', 0, 7);";
}
?>
}
the php code
<?php
$value = 0;
while ($value < $nbcounters) {
$m = rand(1, 3);
$s = rand(10, 20);
echo "<div id='c$value'></div><br>";
$value++;
}
?>
Thanks!

Categories

Resources