For standard opencart behavior, after adding the product in cart, user needs to click to update button manually for quantity update. For sample, please refer to http://demo.opencart.com/. However, I would like to change to when I change the quantity, the cart info can be refreshed immediately. I've tried following code but it doesn't work:
For catalog/view/theme/default/template/checkout/cart.tpl, I updated:
button type="submit" data-toggle="tooltip" title="" class="btn btn-primary">
i class="fa fa-refresh">/button>
(don't know why I cannot paste the code properly on the above line. I've removed some < to make it show)
to
<button type="button" data-toggle="tooltip" title="<?php echo $button_update; ?>" class="btn btn-primary" onchange="cart.update('<?php echo $product['key']; ?>', '<?php echo $product['quantity']; ?>');"><i class="fa fa-refresh"></i></button>
In catalog/view/javascript/common.js
There is a function
var cart = {
//skip some lines for other function
'update': function(key, quantity) {
$.ajax({
url: 'index.php?route=checkout/cart/edit',
type: 'post',
data: 'key=' + key + '&quantity=' + (typeof(quantity) != 'undefined' ? quantity : 1),
dataType: 'json',
beforeSend: function() {
$('#cart > button').button('loading');
},
complete: function() {
$('#cart > button').button('reset');
},
success: function(json) {
// Need to set timeout otherwise it wont update the total
setTimeout(function () {
$('#cart > button').html('<img src="image/catalog/content/cart/quote-icon.png" alt="quote"><span class="badge badge-giftu rounded-x">' + json['totallines'] + '</span>');
}, 100);
if (getURLVar('route') == 'checkout/cart' || getURLVar('route') == 'checkout/checkout') {
$('#cart > ul').load('index.php?route=common/cart/info ul li');
} else {
$('#cart > ul').load('index.php?route=common/cart/info ul li');
}
}
});
},
}
I tried if I change to cart.remove under the on.change function, it works. However, it doesn't work for cart.udpate. Is there anyone know what is the issue of triggering the ajax update issue?
I myself had such a problem solved it like this
Old code (i have custom them):
<input type="text" name="quantity[<?php echo $product['key']; ?>]" value="<?php echo $product['quantity']; ?>" size="1" class="form-control"/>
<span class="input-group-btn">
<button type="submit" data-toggle="tooltip" title="<?php echo $button_update; ?>" class="btn btn-primary"><i class="fa fa-refresh"></i></button>
<button type="button" data-toggle="tooltip" title="<?php echo $button_remove; ?>" class="btn btn-danger"
onclick="cart.remove('<?php echo $product['key']; ?>');"><i class="fa fa-times-circle"></i></button>
New Code (fixed) look on input and Remove(button type="button" If he also does not work)
<input type="text" name="quantity[<?php echo $product['cart_id']; ?>]" value="<?php echo $product['quantity']; ?>"
size="1" class="form-control"/>
<span class="input-group-btn">
<button type="submit" data-toggle="tooltip" title="<?php echo $button_update; ?>"
class="btn btn-primary"><i class="fa fa-refresh"></i></button>
<button type="button" data-toggle="tooltip" title="<?php echo $button_remove; ?>" class="btn btn-danger"
onclick="cart.remove('<?php echo $product['cart_id']; ?>');"><i class="fa fa-times-circle"></i></button>
There was a problem that incorrectly gave the notation for the fields it was necessary to put the key in the cart_id
Related
My code is
<div class="flex-shrink-1 " id="request_btn<?= $contact['id'] ?>">
<button data-request-to="<?= $contact['id'] ?>" data-request-from="<?= $_SESSION['id'] ?>" class="btn btn-sm btn-primary send_request" >Send Request
</button>
</div>
<div class="flex-shrink-1 " id="del_request<?= $contact['id'] ?>">
<button data-request-to="<?= $contact['id'] ?>" data-request-from="<?= $_SESSION['id'] ?>" class="btn btn-sm btn-danger del_request" style="display:none;">Reject Request
</button>
</div>
I want to use in JavaScript
document.getElementById("del_request[int_values]").setAttribute('style','display:none');
document.getElementById("del_request[int_values]").removeAttribute('style');
and
document.getElementById("send_request[int_values]").setAttribute('style','display:none');
document.getElementById("send_request[int_values]").removeAttribute('style');
I hope you will understand, How can I add send_request[int_values] in javascript
you can do something like
var a = [int_values] // for multiple values, can be taken as input of a function
var elementId = "send_request" + a ;
document.getElementById(elementId)
I am getting "Uncaught ReferenceError is not defined" error when I am going to call the updateinventory() function from the appended update button. I don't know what is the problem.
<script type="text/javascript">
$("i").click(function() {
var id = this.id;
var product_code = $('#pr_code'+id).val();
var user_id = $('#user_id'+id).val();
var qty = $('#qtyspan_'+id).text();
$('#qtyspan_'+id).css('display', 'none');
$('#'+id).css('display', 'none');
$('#simplyupdate'+id).append('<div id="updateinventorydiv'+id+'" class="input-group" style="width: 227px;"><div class="form-group"><input type="hidden" id="pr_coding" value="'+id+'"/><input value="'+qty+'" type="text" class="form-control input-sm"></div><span class="input-group-btn"><button onclick="updateinventory('+product_code+','+user_id+','+id+')" class="btn btn-success btn-sm" type="button">Update</button><button id="canceldiv_'+id+'" class="btn btn-danger btn-sm" type="button">cancel</button></span></div>');
});
function updateinventory(product_code,user_id,outlet_id) {
alert(product_code);
}
</script>
PHP file: This is the PHP code where I have created 3 hidden inputs to get the ids in JavaScript.
for ($t = 0; $t < count($outletData); ++$t) {
$outlet_id = $outletData[$t]->id;
$outlet_name = $outletData[$t]->name;
?>
<div class="row" style="padding-top: 5px; padding-bottom: 5px;">
<div class="col-md-3">
<?php echo $outlet_name; ?>
</div>
<div class="col-md-9" id="simplyupdate<?php echo $t; ?>">
<?php
$invQty = 0;
$invQtyData = $this->Constant_model->getDataTwoColumn('inventory', 'product_code', $code, 'outlet_id', $outlet_id);
if (count($invQtyData) > 0) {
$invQty = $invQtyData[0]->qty;
}
?>
<span id="qtyspan_<?php echo $t; ?>"><?php echo $invQty; ?></span>
<input type="hidden" id="pr_code<?php echo $t; ?>" value="<?php echo $code; ?>" />
<input type="hidden" id="user_id<?php echo $t; ?>" value="<?php echo $user_role; ?>" />
<input type="hidden" id="outlet_id<?php echo $t; ?>" value="<?php echo $outlet_id; ?>" />
<i class="fa fa-pencil" id="<?php echo $t; ?>"></i>
</div>
</div>
<?php
}
?>
The issue is the updateinventory arguments not beeing quoted.
It should be:
<button onclick="updateinventory(\''+product_code+'\',\''+user_id+'\',\''+id+'\')" class="btn btn-success btn-sm" type="button">Update</button>
Notice the backslashes \ to escape them... Pretty complicated. So beyond that, here is a better way to achieve the same. You use jQuery... So do not use the inline onclick=....
Give your button a class... Say update. Then use delegation on it, since it is appended (dynamically created).
About the product_code, user_id and id, first store it in some data attributes and on button click, retreive the values using .data().
I made the changes below... Untested ;) Try it.
$("i").click(function() {
var id = this.id;
var product_code = $('#pr_code'+id).val();
var user_id = $('#user_id'+id).val();
var qty = $('#qtyspan_'+id).text();
$('#qtyspan_'+id).css('display', 'none');
$('#'+id).css('display', 'none');
$('#simplyupdate'+id).append('<div id="updateinventorydiv'+id+'" class="input-group" style="width: 227px;"><div class="form-group"><input type="hidden" id="pr_coding" value="'+id+'"/><input value="'+qty+'" type="text" class="form-control input-sm"></div><span class="input-group-btn"><button data-productcode="'+product_code+'" data-userid="'+user_id+'" data-id="'+id+'" class="btn btn-success btn-sm update" type="button">Update</button><button id="canceldiv_'+id+'" class="btn btn-danger btn-sm" type="button">cancel</button></span></div>');
});
$(document).on("click",".update",function(){
var product_code = $(this).data("productcode");
console.log(product_code);
});
This is my code
<?php
if(isset($_POST['taskBtnn'])){
$responseCode =200;
if($responseCode == 200){?>
<script>
function uniqueId(id){
var e = document.getElementById(id);
e.innerHTML="approved";
}
</script>
<?php }?>
This is my button
<button type="submit" name="taskBtnn" id="<?php echo $btn1; ?>" value="<?php echo $catData['id'];?>" class="btn btn-info btn-sm togglebtn" onclick="uniqueId(<?php echo $btn1; ?>)">Active</button>
First, I applied that if a button is click then it shows loading time after that its innerHTML change to approved.
Here is my code for loading time
<script>
$(document).ready(function(){
$(document).on("click", ".btn", function(){
$(this).html("<i class='fa fa-spinner fa-spin'></i> <i class='fa fa-spinner fa-spin'></i><i class='fa fa-spinner fa-spin'></i>");
});
});
</script>
Now, I am trying to change the button innerHTML when it gets responseCode 200, but my code is not working..
Any help will be highly appreciated.
I have three sections in my working code:
a PHP file,
a jQuery code section which contains an AJAX function which requests,
another PHP file.
The response is a HTML section which should be prepended to a DIV inside the first PHP file (from where AJAX was requested using the jQuery section in the <script> tag inside the <head> section of the PHP file.
My query is while AJAX is prepending dynamically the HTML successfully in the desired DIV element id="content", the other click events targeted with response HTML element tags are not working dynamically.
What could be the reason?
$(".update_button").click(function (){
var updateval = $("#update").val();
var cate = $("#selectcategory").val();
var up = $("#uploadvalues").val();
if (up)
{
var uploadvalues = $("#uploadvalues").val();
}
else
{
var uploadvalues = $(".preview:last").attr('id');
}
var X = $('.preview').attr('id');
if (X)
{
var Z = X + ',' + uploadvalues;
}
else
{
var Z = 0;
}
var dataString = 'update=' + updateval + '&Category=' + cate + '&uploads=' + Z;
if ($.trim(updateval).length == 0 || $("#selectcategory").val() === "")
{
if ($.trim(updateval).length == 0)
{
alert('Please Enter SOME TEXT!');
}
else if ($("#selectcategory").val() === "")
{
alert('Choose a Category from the list!');
}
}
else
{
$.ajax({
type: "POST",
url: $.base_url + "message_ajax.php",
data: dataString,
cache: false,
success: function (html)
{
$("#flash").fadeOut('slow');
$(".teacherpost").prepend(html);
$("#update").val('').focus();
$("#selectcategory").val('');
$('#preview').html('');
$('#uploadvalues').val('');
$('#photoimg').val('');
$(".decoration").hide();
}
});
}
return false;
});
HTML prepended from AJAX resposne:
<div class="post-description">
<div class="stats">
<div class="st_like_share">
<a class="Like" href="javascript:void(0)" id='like<?php echo $msg_id;?>' title='<?php echo $like_status;?>' rel='<?php echo $like_status;?>' data='<?php echo $shareKey; ?>'><i class="glyphicon glyphicon-star" style="color:#F16522;"></i><?php echo $like_count; ?></a>
<?php } else { ?>
<a class="Like" href="javascript:void(0)" id='like<?php echo $msg_id;?>' title='<?php echo $like_status;?>' rel='<?php echo $like_status;?>' data='<?php echo $shareKey; ?>'><i class="glyphicon glyphicon-star" ></i><?php echo $like_count; ?></a>
<?php } ?>
<a href="javascript:void(0)" class="stat-item remark" data-id="<?php
echo $msg_id;?>" title='Give your Remarks on it'>
<i class="fa fa-comments-o icon"></i><?php echo $remark_count; ?>
</a>
<a href="javascript:void(0)" class="stdelete stat-item" data-id="<?php echo $omsg_id;?>" rel="" title="Delete Post">
</a>
<?php }
?>
</div>
</div>
</div>
<div class="post-footer" id="post-footer-<?php echo $msg_id;?>">
<textarea name="comment" class="form-control add-comment-input" id="ctextarea<?php echo $omsg_id;?>" style="width:100%;" placeholder="Add a remark here..."></textarea>
<span class="input-group-btn">
<input type="submit" value="Remark" name="Remark" id="<?php echo $omsg_id;?>" rel="<?php echo $msg_id;?>" class="btn btn-info pull-right Remark_button">
<!--<input type="submit" id="" value="Send" class="btn btn-default go-chat pull-right ">-->
</span>
<?php if($remark_count>0) { ?>
<ul class="comments-list" id="commentload<?php echo $msg_id;?>">
<?php include('comments_load.php'); ?>
</ul>
<?php } ?>
</div>
</div>
jQuery which is not working on the AJAX responded HTML code:
/*Remark Load */
$(".stat-item.remark").on("click", function( e ) {
var post_footer_id = "#post-footer-"+$(this).data('id');
$(post_footer_id).slideToggle();
});
Dynamically this is not working, but when I refresh the page this jQuery works fine.
Try like this
$(document).on('click', '.stat-item.remark', function(){
var post_footer_id = "#post-footer-"+$(this).data('id');
$(post_footer_id).slideToggle();
});
$.ajax({
type: "POST",
url: $.base_url + "message_ajax.php",
data: dataString,
cache: false
})
.done((data) => {
//on success code here
})
.fail((jqXhr) => {
//on failure code here
//jqXhr.responseJSON
});
I am working with Opencart 2.0 and I am trying to get the quantity field to work from the category page as well as the product pages. I managed to do this fine previously with version 1.5 but the code has changed a lot since.
With Opencart V 1.5 I used the solution provided by Siven Sadiyan (http://siven76.com/2013/04/29/opencart-add-a-quantity-box-on-product-list-pages/) who's solution worked beautifully, and just required a tweak to common.js and category.tpl and I was able to apply this to various other pages too such as search results and modules.
I have been unable so far to modify this to suit Opencart version 2.0+ as the code and terms have changed. I have tried several extensions but there seems to be little working solutions at the moment except for hard coding it and manually, and so far it is not going well for me! All I am looking for is functionality and I am not worried about the layout.
The common.js file has changed since the solution to the previous version of Opencart and I know it involves the following code (ps, scroll to top is removed from the below code but only one line has changed from the original):
// Cart add remove functions
var cart = {
'add': function(product_id, quantity) {
jQuery.ajax({
url: 'index.php?option=com_mijoshop&route=checkout/cart/add&format=raw&tmpl=component',
type: 'post',
data: 'product_id=' + product_id + '&quantity=' + (typeof(quantity) != 'undefined' ? quantity : 1),
dataType: 'json',
beforeSend: function() {
jQuery('#cart > button').button('loading');
},
success: function(json) {
jQuery('.alert, .text-danger').remove();
jQuery('#cart > button').button('reset');
if (json['redirect']) {
location = json['redirect'];
}
if (json['success']) {
jQuery('#content_oc').parent().before('<div class="shopnotification"><i class="fa fa-check-circle"></i> ' + json['success'] + '<button type="button" class="close" data-dismiss="alert">×</button></div>');
jQuery('#cart-total,#cart > a > span').html(json['total']);
jQuery('.shopnotification').fadeIn(1000).delay(3000).fadeOut(1500);
jQuery('#cart > ul,#module_cart > ul').load('index.php?option=com_mijoshop&route=common/cart/info&format=raw&tmpl=component ul li');
}
}
});
},
The second file is category.tpl code (which I presume when successfully changed can be altered in other areas):
<div class="button-group">
<button type="button" onclick="cart.add('<?php echo $product['product_id']; ?>');"><i class="fa fa-shopping-cart"></i> <span class="hidden-xs hidden-sm hidden-md"><?php echo $button_cart; ?></span></button>
<button type="button" data-toggle="tooltip" title="<?php echo $button_wishlist; ?>" onclick="wishlist.add('<?php echo $product['product_id']; ?>');"><i class="fa fa-heart"></i></button>
<button type="button" data-toggle="tooltip" title="<?php echo $button_compare; ?>" onclick="compare.add('<?php echo $product['product_id']; ?>');"><i class="fa fa-exchange"></i></button>
</div>
Anyone with a solution for this it would be appreciated! I will post back if I get any luck myself but I'm low on coffee after a long head scratch!
Thank you Xyph3r on Opencart forums, your old post re version 1.5 gave me clues to an alternative that works great for Opencart version 2! Link to my clues: http://forum.opencart.com/viewtopic.php?f=20&t=99990
For others, this is what I did, and it can be adapted into a vqmod or ocmod so updates don't overwrite this but here are the basics:
Category.tpl:
Find the line:
<div class="button-group">
<button type="button" onclick="cart.add('<?php echo $product['product_id']; ?>');"><i class="fa fa-shopping-cart"></i> <span class="hidden-xs hidden-sm hidden-md"><?php echo $button_cart; ?></span></button>
Change this to:
<input type="text" value="1" size="2" class="item-<?php echo $product['product_id']; ?>" />
<div class="button-group">
<button type="button" value="<?php echo $button_cart; ?>" onclick="addQtyToCart('<?php echo $product['product_id']; ?>');"><i class="fa fa-shopping-cart"></i> <span class="hidden-xs hidden-sm hidden-md"><?php echo $button_cart; ?></span></button>
At the bottom of the file, add the following lines before the echo footer so the end of the file looks like this:
<script type="text/javascript"><!--
function addQtyToCart(product_id) {
var qty = $('.item-' + product_id).val();
if ((parseFloat(qty) != parseInt(qty)) || isNaN(qty)) {
qty = 1;
}
cart.add(product_id, qty);
}
//--></script>
<?php echo $footer; ?>
Hope this helps others. Note this only puts the quantity field above the existing buttons add to cart, wish list and compare, it won't look pretty so that's all down to you and your style (theme)!