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)!
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)
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.
So I am trying to create a template which will allow someone to click a button that will instantly create a template into a text area, wiping out all the data in there.
PHP:
function get_jquery_templates() {
require('MYSQLI CONNECTION');
$query = "SELECT * FROM **TEMPLATE DATABASE**";
$result = $mysqli->query($query);
echo "$(document).ready(function(){";
while($row = $result->fetch_array()) {
$category_name = $row['category_name'];
$short_name = $row['short_name'];
echo "$('#" . $short_name . "').click(function(){
$('#ckeditor').html('" . $row['template'] . "');
});\n";
}
echo "});";
}
jQuery from "View Source":
<script type="text/javascript" src="../../../../../../assets/js/jquery-1.10.2.min.js"></script> <!-- Load jQuery -->
<script>
$(document).ready(function(){
$('#test1').click(function(){
$('#ckeditor').html('Test 1');
});
$('#test2').click(function(){
$('#ckeditor').html('Test 2');
});
});</script>
HTML:
<label class="col-sm-2 control-label">Templates</label>
<div class=\col-sm-8"><input type="button" class="btn btn-default btn-xs" id="test1" value="Test 1" />
<input type="button" class="btn btn-default btn-xs" id="test2" value="Test 2" />
</div>
</div>
<div class="col-12"><textarea name="ckeditor" id="" cols="100" rows="20" class="ckeditor"></textarea>
My console via Firebug isn't showing an issue and using jFiddle is also not working.
If you are using CKEDITOR,
I think the right way to pass html string to ckeditor is using setData method, example
CKEDITOR.instances.myinstance.setData('html here');
Read More here
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
My site is fully asynchronus, most of the html gets created and destroyed on button presses and every one of them prevents navigation.
At this part I produce a form with a "rate 1 to 10" array of radioboxes, post it using jQuery.ajax() and send it to process where it's either echoed back (for now) or echo "nothing was selected.".
This is the form,
<?php
<form id="surveyForm" action="processSurvey.php" method="post">
<h3>Alimentos</h3>
<h4>Sabor</h4>
<div class="form-group">';
for ($i = 0; $i <= 10; $i++) {
echo '
<span class="lead form-options">' .'</span>
<label class="radio-inline">
<input type="radio" name="sabor" id="saborRadio'. $i .'" value="'. $i .'">'. $i.'
</label>';
}
echo '
</div>
<div class="form-group">
<button class="btn btn-default surveyForm-btn" type="submit">Enviar</button>
</div>
</form>
?>
This is the javascript:
$('body').on('click', '.surveyForm', function(){
console.log("Clicked on .surveyForm-btn");
var data = $('#surveyForm').serialize();
console.log( data );
$.ajax({
method: "POST",
url: "processSurvey.php",
data: data,
success: function(result){
console.log("Ajax call to processSurvey success");
$("#surveyForm").clearForm();
console.log(result);
console.log( data );
}
});
return false;
});
And this is the process php:
<?php
if (isset($_POST['sabor'])) // if ANY of the options was checked
echo $_POST['sabor']; // echo the choice
else
echo "nothing was selected.";
print_r($_POST);
?>
This is the console after clicking submit WITH a selected radiobox:
Clicked on #surveyForm
[EMPTY LINE]
Ajax call to processSurvey success
nothing was selected.
[EMPTY LINE]
This means the submit is successful, but the form data is empty. I've been trying to find the problem since yesterday, I'm pretty sure I'm passing the data wrong but can't find anything in google that I haven't tried.
EDIT: Added most sugestions, problem persists. Maybe the html structure is wrong? The form and the submit don't seem to be connected.
EDIT 2: I found something very strange, on the final code there seems to be an extra closing tag, like this
<form id="surveyForm" action="processSurvey.php" method="post"></form>
<h3>Alimentos</h3>
<h4>Sabor</h4>
I have no idea where is that coming from, but is defenitely the problem.
there are a lot of notes here
1- you will get confused with form id='surveyForm' and button class='surveyForm' so its better to change it a little bit to button class='surveyForm_btn'
2- I think you should serialize the form not the button
var data = $('#surveyForm').serialize(); // not .surveyForm
3- IDs must be unique
4- $("#surveyForm").clearForm(); // not .surveyForm
finally check all comments
and Its better to use
$('body').on('submit', '#surveyForm', function(){});
Edited answer:
1- please check everything after each step
<form id="surveyForm" action="processSurvey.php" method="post">
<h3>Alimentos</h3>
<h4>Sabor</h4>
<div class="form-group">
<button class="btn btn-default surveyForm-btn" type="submit">Enviar</button>
</div>
</form>
in js
$('body').on('submit', '#surveyForm', function(){
var data = $(this).serialize();
$.ajax({
method: "POST",
url: "processSurvey.php",
data: data,
success: function(result){
console.log(result);
}
});
return false;
});
in php
<?php
echo 'Connected successfully';
?>
this code will output Connected successfully in console .. if this work add your for loop and make a check again
Try to write your htm like that :
<h3>Alimentos</h3>
<h4>Sabor</h4>
<div class="form-group">
<?php
for ($i = 0; $i <= 10; $i++) {
?>
<span class="lead form-options"></span>
<label class="radio-inline">
<input type="radio" name="sabor" id="saborRadio<?=$i ?>" value="<?= $i ?>" /><?= $i?>
</label>
<?php
} ?>
</div>
<div class="form-group">
<button class="btn btn-default surveyForm-btn" type="submit">Enviar</button>
</div>
</form>