Shopify Ajax Cart / Basic Jquery - ajax

I'm trying to do the shopping cart featured here:
https://www.chubbiesshorts.com/
Specifically, I'm trying to figure out the AJAX Cart. My goal is to be able to allow the customers to add/subtract/manually enter the quantity and have it update the cart live (without the page reloading).
I've been able to construct everything except that feature. What exactly do I need to learn to make this happen? I'm willing to test, learn, do the work myself. I just literally have no idea where to start.
Apparently Shopify has an AJAX cart API, and the theme I built my store off of, already has the AJAX cart enabled.
I guess that just means I need to learn how to call these functions and execute them.

The AJAX Cart API page links to a laboratory page which links to the current api.jquery.js which is what some themes base their cart updates on.
If you put that file into an editor and format it you'll find it reads pretty well. You can also use Chrome's developer tools to view and pretty print the file.
Unfortunately this is not an event based api so if , for example you override Shopify.onCartUpdate you'll remove whatever the theme was expecting that to do.
However if your theme does what you want on a cart change but you want to supply an alternate way change what is in the cart (note example only works without line attributes:
$.ajax({
url:'/cart/update.js',
method:'POST',
dataType:'json',
contentType: "application/json",
data:JSON.stringify({updates:{
variant_id_to_add:1,
variant_id_to_remove:0,
variant_id_to_update:3
}})} ).
then(function(cart){
Shopify.onCartUpdate(cart);
});

Related

How to load custom post data into a sidebar using ajax?

I have a list of custom posts, and I want to have a sidebar, wherein the information associated with a post selected from the list to load.
If you insist on using ajax to do this then you will need an API for your WordPress site to call back into. Take a look at http://wp-api.org/. It won't necessarily be easy, but you should be able to get it setup and running and then put a piece of JavaScript in a widget to make the call and display the data.
Be careful, that plugin is under active development.
IMO, it would be easier to do this without ajax. Off the top of my head I would say that you could define a shorttag in your functions.php file and then put it in your widget. If the widget appears on a page with a post, pick up the post id, fetch the meta data, and display it.
Cheers!
=C=

Load custom page between place-order-click and thank-you-page

I'm currently trying to integrate Econda tracking in the one page checkout process of a magento webshop with the special requirement that the tracking which is normaly done on the thank-you-page already is done once the customer clicks the place-order-button (between button click and redirect to payment provider or thank-you-page). The tracking code itself is dynamically created by an magento extension and injected as html into the phtml file of the thank-you-page. By loading that phtml the information is sent. Also the order in magento must exists before the tracking code can be injected (means place order button must already be clicked).
Currently I'm trying to create an "invisible" phtml, which is loaded once the customer clicks place-order-button and which contains the tracking code. This page should be shown for some seconds and then forward/redirect to either the payment provider or the thank-you-page. This is where I'm totally lost.
I have an observer on the event that is fired once the order is complete/saved. This observer calls an action within my model. But the model can not load/show a phtml.
How can I load a custom phtml-file once the customer clicks the place-order-button, show this phtml for some seconds, and then dynamically forward to either payment provider or thank-you-page?
The Cart Success page, by its very nature is the place that you should be putting any e-commerce tracking Javascript or markup.
It's the very first thing to be delivered to the browser once all the necessary order processing has gone on in the back end. Delivering them to an interim page for only a few seconds seems cumbersome and ultimately inefficient. It's possible, but it's bad practice.
Do you have any particular reason why the success page is insufficient? I can't seem to find that in your question.
Loading a new block into your success page is an easy process. Learn some more about Layouts and Templates (Maybe try Alan Storm's tutorial here) and use this method.
There would be two more options:
You could add your tracking to the on click event of your button
You could use server side tracking using the econda PHP SDK
Here's how you can add tracking to click events
<script type="text/javascript">
function trackIt() {
window.emosPropertiesEvent({
siteid: "my-site.de",
content: "CONTENT-LABEL"
});
}
</script>
<tag onclick="trackIt();">content</tag>
Be careful using click event tracking in links, it will not work if your page unloads before the tracking event was send.
I could not find the english version of the econda PHP SDK documentation, so sorry, here are the German docs: https://support.econda.de/display/INDE/PHP-Helferklasse
As already mentioned, your thank-you page is the best place to add tracking. An additional reason is, that normally you want to track if a customer really ordered or not. Payment pages are common problems, so it makes no sense to add "order successful" tracking calls before.

Load content via ajax in plone page

I'm working on a website which has been developed in plone. Now I'm facing an issue, I would like to load certain content from a template via an ajax call on normal Plone page(on some event trigger).
Do I need to create any python script??If yes where has it to be placed? and moreover how do I integrate it with TAL(I guess that would be needed) but I'm not sure how.
Could anyone guide me on this with necessary pointers/docs that I should look into?It would of great help to come over my issue and get things rolling.
Thanks,
Avinash
In the "Plone Developer Documentation" there's a section for Javascripting in Plone that perfectly fits your needs
Your question is a bit vague:
From your question, it seems that you just want your ajax call to return html to populate data on the page somewhere then?
Also, it sounds like you want to do the development TTW in the ZMI? Most developers would would use an add-on product and return your ajax response.
However, you can do it TTW with page templates just fine.
Create the new page template
populate it with the template code that gives you the desired output when called within the context of content on a site. For example, http://mysite.com/plone/page/my-template
in your javascript, use a url that in the ajax call: $.ajax({url: 'http://mysite.com/plone/page/my-template', success: function(data){ $('#content').append(data);}})
It's not really anything special to do ajax within plone--just use the tools available and piece it together.

Ajax generated content, crawling and black listing

My website uses ajax.
I've got a user list page which list users in an ajax table (with paging and more information stuff...).
The url of this page is :
/user-list
User list is created by ajax. When the user click on one user, he is redirected to a page which url is : /member/memberName
So we can see here that ajax is used to generate content and not to manage navigation (with the # character).
I want to detect bot to index all pages.
So, in ajax I want to display an ajax table with paging and cool ajax effetcs (more info...) and when I detect a bot I want to display all users (without paging) with a link to the member page like this :
JohnBob...
Do you think I can be black listed with this technique ? If you think so, could you please provide an alternative solution by keeping these clean urls and without redeveloping the user-list (without ajax) ?
Google support a specification to make AJAX crawlable:
http://code.google.com/web/ajaxcrawling/docs/specification.html
I did an experiment and it works:
http://seo-website-designer.com/SEO-Ajax-Google-Solution
As this is a Google specification, you won't get penalised (unless you abuse it).
Saying that, only Google support it at the moment (AFAIK).
Also, I believe following the concept of Progressive Enhancement is a better approach. That is, create a working html website then make the JavaScript enhance it
Maybe use the urls with an onclick to trigger your AJAX scripting? Like
Some URL
I don't think Google would punish you for this, you primarily use JScript, but you do provide a fall back for their bot, so your site doesn't get any less accessible.
EDIT
Ok, I misunderstood. Then my guess would be you basically have two options:
1. Write a different part of your site where bots end up, or,
2. Rewrite your current site to for example always give a 'full' page, with an option to only get, say, the content div. Then you can get only the content with JavaScript, but bots will always get a nice page.

Magento Ajax cart - the correct way

I have created an Ajax cart in magento although it is a little hacky. It's not in a module or that. All I'm doing is using a script in the root of app that initialise mage and works with it.
What would be the correct way in implementing this? Ie how can I get my Ajax calls to interact wiu magento through a my module?
You should define a module, first and foremost. Once you've done that, you need to create controllers and actions such that they return the data you're looking for, but not the frame of the page. Since you get to define layout of the page, this shouldn't be too bad.
At that point, wiring the JS to the new actions should be as simple as changing URLs to your new, cleaner URLs.

Resources