I am having an issue with building an Ajax product filter in shopify. I am wanting to do a sidebar that uses tags to sort products, but not reload the page.
Here is my code, and I am getting undefined for the 3 shopify calls to just try and get the products to populate on the page. I tweaked the api url at the end to allow me to select which collection based on the page I am on. What am I doing wrong here or is there a better way to do this?
/* Product Filter Ajax */
var $products = $(".ajaxProducts");
$.ajax({
type: 'GET',
url: '/admin/api/2019-10/products.json?[ section.settings.collectionID ]',
success: function (products) {
$.each(products, function(i, product){
$products.append('<li class="grid__item grid__item--collection-template small--one-half medium-up--one-quarter">' + product.featured_image + product.title + product.price + '</li>');
});
}
});
Related
I am trying to make chat room with ajax. Till now I am able to store data in db without page load. And also able to fetch data and display onscreen using ajax. Here is what I did with ajax
$('#chat').submit(function(){
var chatmsg = $("#chatmsg").val(); //chat message from input field
var chatroomid = $("#chatroomid").val(); //hidden input field
$.ajax({
url: baseurl+'User_dash/chatmessage', //An function in ctroller which contains only insert query
type: 'post',
data: {chatmsg:chatmsg, chatroomid:chatroomid},
dataType: 'json',
success: function (argument) {
if(argument['status']){
$("#chatting").append(" <li id='"+getvalue+"'>"+argument['msg']+"</li>."); //Here I am printing chat message which resently submitted in database
}
}
},
error: function (hrx, ajaxOption, errorThrow) {
console.log(ajaxOption);
console.log(errorThrow)
}
});
return false;
});
This method with ajax is working fine. But issue I faced here is that, this display chat message only to current user. Not to other side of user whome message is being sent via chat.
To solve this issue I come up with one idea which doesn't seems to be working as I planed. Here it is how I modified my previous ajax code..
$('#chat').submit(function(){
var chatmsg = $("#chatmsg").val();
$.ajax({
url: baseurl+'User_dash/chat', //controller function which contains insert query, after that select query to fetch chat data from db and store in view
type: 'post',
data: {chatmsg:chatmsg},
dataType: 'json',
success: function (argument) {
if(argument['status']){
//Not doing anything here this time
}
},
error: function (hrx, ajaxOption, errorThrow) {
console.log(ajaxOption);
console.log(errorThrow)
}
});
return false;
});
In updated version of script I thought If I will call a controller function which is storing data in view (chat page) then It will run query and print data without page load.
But with this method, I am getting chat onscreen only after page load, although it is getting submit in db with ajax fine.
Here is controller code for my second method with ajax if needed
public function chat(){
if(!empty($_POST['chatmsg'])){
$chatdata = array('CHAT_ROOM'=>$_POST['chatroomid'],
'VENDOR'=>$this->session->userdata('USER_ID'),
'BUYER'=>49,
'MESSAGE'=>$_POST['chatmsg']
);
$this->db->insert('tbl_chat', $chatdata); //inserting data
}
$data['chatroom'] = $this->db->where('CHAT_ROOM', 1)->get('tbl_chat')->result_array(); //fetching data from db
$this->load->view('userDash/chat', $data);
}
How do I achieve to run insert and then select query and print data on screen without page load?
Where I am getting wrong?
I solved my issue earlier, What I did was, just added this jquery script which keep refreshing (every second) a certain div inside page in which I have put query to fetch chat from db and printing them.
setInterval(function(){
$("#chatting").load(location.href + " #chatting");
}, 1000);
The expectation is that $(".post-title").append(postTitle); will return the title of that post, as will postBody. Yet when I console.log these variables > undefined is returned.
$.ajax({
url: "http://api.tumblr.com/v2/blog/ohc-gallery.tumblr.com/posts?api_key=***",
dataType: 'jsonp',
success: function(res){
var postings = res.response.posts;
var postTitle = "";
var postBody = "";
$(".post-title").append(postTitle);
$(".post-body").append(postBody);
for (var i in postings){
postTitle = postings[i].title;
postBody = postings[i].body;
}
console.log("postBody: " + postBody);
}
});
Am I missing something basic regarding Javascript closures... I really don't know right now. I simply want to loop through created post data for later display.
Github JS code- https://github.com/mrcn/ohc/blob/master/js/tumblr.js
Github HTML code- https://github.com/mrcn/ohc/blob/master/index-posting.html#L82-L89
I got it. The problem was with how I intended to display this information on the website, and I had to alter the code accordingly. The idea was to display paired blog post titles and entries. The problem was all titles were appearing together, and all bodies were appearing together- not paired off respectively.
The updated code is more along the lines of --
Javascript --
//use $.each() or Array.forEach
$.each(postings, function (i, post) {
$(".post ").append("<h3>" + post.title + "</h3>" + post.body + "<br><br>");
});
}
});
HTML --
<div class="post-wrap"><!--post-wrap-->
<div class="post">
</div>
</div><!--post-wrap-->
The for..in is used to iterate over an object... posts is an array for you can use the normal for (var i=0;i<x;i++) loop or any other iteration methods like $.each() or Array.forEach()
$.ajax({
url: 'http://api.tumblr.com/v2/blog/ohc-gallery.tumblr.com/posts?api_key=***',
dataType: 'jsonp',
success: function (res) {
var postings = res.response.posts;
var postTitle = '';
var postBody = '';
//use $.each() or Array.forEach
$.each(postings, function (i, post) {
$(".post-title ").append(post.title);
$(".post-body ").append(post.body);
})
}
});
Not every post type supports title or body. You currently have three posts, two text and one photo. The photo post type only support photos and caption, which is causing the undefined.
Check the API for more details: https://www.tumblr.com/docs/en/api/v2
I've built a form with Symfony, based on a Doctrine entity. The form contains form collections. Let's say the outer form is used to create a task. Many sub-tasks can be added to this task (the form collections part).
The task-form contains a choice field "category". De sub-task forms contain choice field "subcategory". The values of the subcategory field depend on the value chosen for the category field. To achieve this, I want to update the form prototype through AJAX when a main category has been chosen.
The JS-part of this is probably not that hard, so I'm sure I'd manage that. But I've got no idea what to do on the server/Symfony side to achieve this. Any hints in the right direction would be appreciated.
You need to create a route that link to a new function(action) in the controller lets name it "ajaxGetSubCategoriesAction()"
implement it to get all the sub categories, then return them like this :
//get the category id from ajax request
$categoryID = $request->request->get('category_id');
//get all subcategories and return your result like this
return new Response(json_encode($result));
then in the twig that renders the category put a data field inside the form tag or div tag like
this data-path you get it inside the JS file to know the path of the function you created to get the subcategories.
$posturl = $formelement.data('path');
var categoryid = //get it here with from your input field.
$.ajax({
type: "POST",
url: $posturl,
async: false,
dataType: "json",
data: {
category_id: categoryid
}
}).done(function (response) {
inside response you will have all the subcategories returned from your ajaxGetSubCategories function
}
Created plugin, which showing form on shopping cart page after submit i am sending value to third party server.
jQuery.ajax({
type: 'POST',
url: 'http://www.yoursitename.com/wp-content/plugin/my-ajax.php',
How can i call woocommerce data on 'my-ajax.php'?
$subtotal = $woocommerce->cart->subtotal;
$shipping = $woocommerce->cart->shipping_total;
$orderTotal = $woocommerce->cart->total;
Above value i want to first call on my.ajax.php and then redirect page to shopping cart with some message etc.
Please help me i am really stuck here.
You'll need to start by using the $woocommerce global! You're on the right track.
function () {
global $woocommerce;
$subtotal = $woocommerce->cart->subtotal;
$shipping = $woocommerce->cart->shipping_total;
$orderTotal = $woocommerce->cart->total;
}
I have opencart. function addToCart() that adds products to cart works normal on normal pages.
I made custom page where I have just button that triggers function addtoCart(). Just normal button..
On normal page(where it works) I get normal response.
Please look at this link of images:
http://imgur.com/7M1AR1B,FKjiU05,9ggmiMR#2
Third image is actually post that works OK, second picture is RESPONSE that works OK.
First picture is empty response which I get in custom page in open cart.
Do you have an idea why is this happening?
I use function addToCart() and use hard variable FOR TEST in that custom page, which means variables are always there to pass. I use hard variables so I don't have to explain how do I pass variables back in code(it works the same, it passes everything in debug). Problem is I get that "empty" response back only on custom made page. Response: [] ...
function addToCart() {
var product_id = 79;
var quantity = 1;
$.ajax({
url: 'index.php?route=checkout/cart/add',
type: 'post',
data: 'product_id=' + product_id + '&quantity=' + quantity,
dataType: 'json',
success: function (json) {
$('.success, .warning, .attention, .information, .error').remove();
if (json['redirect']) {
location = json['redirect'];
}
if (json['success']) {
$('#notification').html('<div class="success" style="display: none;">' + json['success'] + '<img src="catalog/view/theme/default/image/close.png" alt="" class="close" /></div>');
$('.success').fadeIn('slow');
$('#cart-total').html(json['total']);
$('html, body').animate({
scrollTop: 0
}, 'slow');
}
}
});
}
Possibilities to try
Using HTTPS to NON HTTPS or vice versa
Using www to non www domain or vice versa
Using a domain that isn't the same one as the one you're using to render the page
If none of the above are the issue, you'll need to work out what the exact differences are between the requests, though my guess is it's one of the three possibilities I've listed
The problem was, that I was adding a product without 1 needed attribute, therefore I always got empty response. There is an attribute in opencart where you have to setup to which store your product belongs. If you don't set that attribute if you are programatically adding a product into the store, you will add product, but you won't be able to add it to cart.