I'm quite new to shopify, liquid and all that comes with it.
I try to implement predective search on shopify and I just don't know why I'm not even getting the alert of the Ajax call that is in the following code. I put it in my "theme.liquid" file right above the closing body tag. I assume if it would work, there should be the alert right when opening the page, no? Goki is a vendor, many products are shown when I search for it on my page. My code looks like this:
<script>
jQuery.getJSON("/search/suggest.json", {
"q": "goki",
"resources": {
"type": "product",
"limit": 4,
"options": {
"unavailable_products": "last",
"fields": "title,product_type,variants.title"
}
}
}).done(function(response) {
var productSuggestions = response.resources.results.products;
if (productSuggestions.length > 0) {
var firstProductSuggestion = productSuggestions[0];
alert("The title of the first product suggestion is: " + firstProductSuggestion.title);
}
});
</script>
Any help would be very very much appreciated! Thank you!
I solved it. I created an own variable AjaxData with all the 'resources' parameter before entering the JQuery call. There I don't use the variable to create the url, it's just used to define param in the call, not to change the url. -that's the trick
Related
This is my first attempt at using an AJAX GET to pull data and it is really causing me a nightmare. I have used POST loads of times and assumed accessing the data would be the same basic process, but no matter what I try I always end up with "Undefined".
This is the code I have been trying to make the GET work in my script;
$(document).ready(function() {
$.ajax({
type: "GET",
url: "/buytoken/public/api/stage?secret=***************",
cache: false,
dataType: "json",
success : function(response){
var len = response.length;
for(var i=0; i<len; i++){
var sold = response[i].progress;
}
alert(sold);
}
});
});
This is then what the response should be;
{
"success": true,
"response": {
"ico": "running",
"total": "8,000,000",
"total_amount": "800,000",
"sold": "1,599,300",
"sold_amount": "159,930",
"progress": 20,
"price": "0.1",
"start": "2022-02-28 00:01:00",
"end": "2022-05-31 00:01:00",
"timezone": "Europe/London",
"min": "500",
"max": "4000000",
"soft": "400000",
"soft_amount": "40,000",
"hard": "800000",
"hard_amount": "80,000"
}
}
The script that I am trying to access is on the same webserver.
It is coming from a third-party piece of software that we are running on the site. The documentation states "Application provides some specific internal live data in JSON"
So, we should be getting JSON back.
I need to access just two pieces of data "sold_amount" and "progress" which I want to load into variables in the Success callback.
I really would be grateful if somebody could explain or better still show me how this is supposed to work because I am really banging me head against the wall on this.
Also, if I need to add any extra bits like error handling then please point that out.
Thanks to anybody who responds to this..
Im creating ajax calls to an elasticsearch server inside a "for" loop. The problem Im facing is that,the responses are not coming in proper sequence, (that is in the order which the clients are generated using for loop). How to make the calls and response synchronous? .
You could do something like this:
$(document).ready(function(){
function extendFuncChain(url, callback) {
func_chain_list.push(function() {
$.ajax({
url : url,
type: 'GET',
contentType:"application/json"
}).done(function(data) {
console.debug(data);
callback();
});
});
}
var func_chain_list = [function() {}];
for(var i=1; i<=4; i++) {
var url = "http://localhost:9200/test_index/doc/" + i;
var callback = func_chain_list.pop();
extendFuncChain(url, callback);
}
func_chain_list.pop()();
});
To test it I set up a simple index with 4 documents like this:
DELETE /test_index
PUT /test_index
POST /test_index/doc/_bulk
{"index":{"_id":1}}
{"name": "doc1"}
{"index":{"_id":2}}
{"name": "doc2"}
{"index":{"_id":3}}
{"name": "doc3"}
{"index":{"_id":4}}
{"name": "doc4"}
Then when I put the javascript in a web page and load it, I get this output in the console (I expanded the last one):
Hopefully you can see how to generalize this to do what you need. The call to extendFuncChain is important, because of the way closures work in JS, and it won't work if you take that out.
I have 2 APIs which I want to use simultaneously, API1 and API2.
API2 deliver news feeds to API1, while API1 handles all the content in a list form. This means that if any list in API1 is clicked on, it will it will retrieve the the news feeds from API2 using an ID that has been defined.
Who can help me out here? I am stuck. The screenshot of my code is here: http://i1159.photobucket.com/albums/p637/Apulo_Cosmas/2API.jpg
Thanks so much.
Per the Sencha documentation here (under Digging In): http://docs.sencha.com/touch/2-0/#!/guide/first_app
You need to add a listener and a detail panel to your configuration, using this code (reference to contentId is not needed, you just need to pull the description property -- which contains the content -- from the original feed):
detailCard: {
xtype: 'panel',
scrollable: true,
styleHtmlContent: true
},
listeners: {
itemtap: function(nestedList, list, index, element, post) {
this.getDetailCard().setHtml(post.get('description'));
}
}
It might be easier if you manually listen to your list (which is fetched from API 1) itemtap event.
In your controller, there's should be something like:
refs: {
bloglist: 'blog list'
},
control: {
bloglist: {
itemtap: 'fetchAPI2'
}
},
fetchAPI2: function (list,index,target,record){
id = record.get('contentId'); //this is your id for using API2.
Ext.data.JsonP.request({
scope: this,
url: API2_URL,
callbackKey: 'callback',
params: {your params for API2 here},
callback: function(success,result) {
// whatever you want to do here
}
});
}
Ok, I am semi-new to ExtJS, and I am building a program that has "inputs" that are listed in a grid, and in my DB these inputs can be linked to "symptoms".
I am trying to create a function that will take in the id of the input and grab all of the symptoms from the database that are linked to that symptom, and list them in a field set.
It works fine when I click on an input that is only linked to one symptom, but if the input is linked to more than one symptom, then the error says.. "invalid property id"
This is what I have for my function.
function listSymptoms(inputID){
Ext.Ajax.request({
url: "../../inc/project4.php?list=symptoms",
reader: new (Ext.data.JsonReader)({
root: "symptoms",
inputid: "id"
}),
params: {
inputid: inputID
},
method: "POST",
success: function (f, a){
var jsonData = Ext.util.JSON.decode(f.responseText);
symptomsFieldSet.body.update(jsonData.data.name);
},
failure: function (f,a){
Ext.Msg.alert('There was a problem opening your message.');
}
});
}
I have the inputID for the function being passed in when the user clicks on one of the inputs that are held inside the grid.
I believe that my problem has something to do with this line..
symptomsFieldSet.body.update(jsonData.data.name);
I am just stumped on how to handle this. Do I need to create a data store like I have for grids? Or is there an easier way to do this?
ANY help is appreciated! thanks in advance.
I think you need to rethink the structure of your JSON response object. You can send this in your JSON response to your request. If you are using Ext.util.Ajax calls instad of a form, you'll need to decode this JSON response string using the util method Ext.util.JSON.decode(). Check out the API Documentation
{
success: true,
msg: {text: 'this can be used for error message handling' },
data : [
{id:1,
chiefComplaint: 'head hurts',
symptoms: [
{symptomID: '740.1', text: 'Headache'},
{symptomID: '12352135'. text: 'and so on'}
}
]
]
}
I have 3 page with different concept/layout/animation.
I'm using prototype & script.aculo.us
I have this in my navigation:
<ul>
<li>PAGE1</li>
<li>PAGE2</li>
</ul>
and this is in my js:
windows.location.hash: 'web';
function showPage() {
startloading();
var url: '/localhost/page2'+web;
new Ajax.Updater('maincontent', 'page2', { method: 'get' });
finishloading();
}
the question & problem is:
Why in windows location hash is still: /localhost/page1/#page2 with or without if I use var url?
All the animation in page 2 doesn't work, because I didn't put the header, but if put I it, I got double header and still the animation won't work either.
Can anybody give me the solution?
Thank you very much.
In your code
var url: '/localhost/page2'+web;
line throws error so hash cannot be changed. Fix it to
var url = '/localhost/page2'+web;
then it should work.
The correct way to update your hash is:
window.location.hash = '#'+yourValue;
Hard to tell what exactly you're trying to do with your function but there's a few things that are clearly a bit wrong.
function showPage(var) {
startloading();
var url: '/localhost/page'+var;
new Ajax.Updater('maincontent', url, { method: 'get' });
finishloading();
}
depending on what you're actually doing its fairly likely you would probably want something more like this:
function showPage(var) {
var url = '/localhost/page'+var;
new Ajax.Updater('maincontent', url, { method: 'get' ,
onCreate: function(){
startloading();
},
onComplete: function(){
finishloading();
}
});
}
Thats complete guesswork though, if you can provide more detail i can help more.