Ajouter au Panier utiliser AJAX dans Shopify

Par défaut, lorsque vous ajoutez un produit à un panier de Shopify, il va vous rediriger vers la page du Panier. Ce que je veux faire, c'est qu'il ajoute au panier sans rafraichissement de la page.

Shopify fournit des instructions sur comment faire ici: http://docs.shopify.com/support/your-website/themes/can-i-use-ajax-api, mais je suis assez familier avec l'AJAX, donc c'est de me donner un peu de difficulté.

Ils fournissent un fichier JavaScript (http://cdn.shopify.com/s/shopify/api.jquery.js?a1c9e2b858c25e58ac6885c29833a7872fcea2ba) avec certaines fonctions, le principe étant:

//-------------------------------------------------------------------------------------
//POST to cart/add.js returns the JSON of the line item associated with the added item.
//-------------------------------------------------------------------------------------
Shopify.addItem = function(variant_id, quantity, callback) {
  var quantity = quantity || 1;
  var params = {
    type: 'POST',
    url: '/cart/add.js',
    data: 'quantity=' + quantity + '&id=' + variant_id,
    dataType: 'json',
    success: function(line_item) { 
      if ((typeof callback) === 'function') {
        callback(line_item);
      }
      else {
        Shopify.onItemAdded(line_item);
      }
    },
    error: function(XMLHttpRequest, textStatus) {
      Shopify.onError(XMLHttpRequest, textStatus);
    }
  };
  jQuery.ajax(params);
};

et

//---------------------------------------------------------
//POST to cart/add.js returns the JSON of the line item.
//---------------------------------------------------------
Shopify.addItemFromForm = function(form_id, callback) {
    var params = {
      type: 'POST',
      url: '/cart/add.js',
      data: jQuery('#' + form_id).serialize(),
      dataType: 'json',
      success: function(line_item) { 
        if ((typeof callback) === 'function') {
          callback(line_item);
        }
        else {
          Shopify.onItemAdded(line_item);
        }
      },
      error: function(XMLHttpRequest, textStatus) {
        Shopify.onError(XMLHttpRequest, textStatus);
      }
    };
    jQuery.ajax(params);
};

Je ne suis vraiment pas positif, qui est le meilleur à utiliser pour ce que je suis en train de faire, donc j'ai essayé les deux.
Tout d'abord, j'ai essayé d'arranger mon produit soumettre le formulaire comme ceci:

<form action="/cart/add" method="post" class="clearfix product_form" data-money-format="{{ shop.money_format }}" data-option-index="{{ option_index }}" id="product-form-{{ product.id }}">
    //yadda yadda
    <input type="submit" name="add" value="Add to Cart" id="add-to-cart" class="action_button" onclick="return false; Shopify.addItem({{variant.id}}, 1, 'okay')"/>
</form>

Où j'ai juste ajouté le onclick="return false; Shopify.addItem({{variant.id}}, 1, 'okay')" à l'entrée (return false pour empêcher la redirection et le Shopify.addItem fonction pour ajouter l'élément via Ajax.) Aucune de ces choses fonctionnent réellement.

J'ai aussi essayé:

<form action="/cart/add" method="post" class="clearfix product_form" data-money-format="{{ shop.money_format }}" data-option-index="{{ option_index }}" id="product-form-{{ product.id }}">
    //yadda yadda
    <input type="submit" name="add" value="Add to Cart" id="add-to-cart" class="action_button" onclick="Shopify.addItemFromForm({{variant.id}}, 'okay')"/>
</form>

Cela aussi semble avoir aucun effet.

Ils fournissent une page de démonstration pour leur Ajax ici: http://mayert-douglas4935.myshopify.com/pages/api

Et quand j'ai essayer de le copier le code de leurs Shopify.addItemFromForm exemple, il me donne cette alerte d'erreur lorsque j'essaie de l'ajouter au panier: Panier d'Erreur(400): Nous n'avons pas été en mesure d'ajouter cet article à votre panier, car aucune ID variante a été transmise à nous. (request_id: 864f24c82d1bfbae4542a9603674861e)"

Ce que je fais mal? Suis-je utiliser le mauvais fonctions? Suis-je passer les mauvais arguments? J'ai essayé différentes variantes de la ci-dessus pour les 2 jours maintenant, et je n'ai pas fait de notables progrès. Toute aide est grandement appréciée.


Mise à jour
Résolu avec un peu de bricolage et de Steph réponse. Le code a fonctionné:

{% if product.options.size > 1 %}
       <a onclick="Shopify.addItem($('#product-select-{{ product.id }} option:selected').val(), 1); return false" href="#">Add Item</a>
      {% elsif product.options.size == 1 and (product.variants.size > 1 or product.options[0] != "Title") %}
       <a onclick="Shopify.addItem($('#product-select-{{ product.id }} option:selected').val(), 1); return false" href="#">Add Item</a>
      {% else %}
       <a onclick="Shopify.addItem({{ product.variants.first.id }}, 1); return false" href="#">Add Item</a>
      {% endif %}

Deux premières conditions de vérifier si le produit a des options, le cas échéant, obtenir la variante de la valeur de l'option sélectionnée. Le reste est pour les éléments sans options, et {{ product.variants.first.id }} obtient la variante correcte id.

OriginalL'auteur damon | 2013-12-17