JQuery theme issues

Highlighted
New Member
7 0 0

Hi All. A Shopify newbie, after some advice ahead of our site going live.

I have added various Cart attributes using the following resource, as we require additional information when checking out:

http://docs.shopify.com/manual/configuration/store-customization/communicating-with-customers/obtain...

The resource specifies to add a script at the bottom of cart.liquid, in order for the attributes to be saved if a customer clicks directly on Checkout (or any other link) rather than on Update.

 

I have inserted the following at the bottom of cart.liquid

       <script type="text/javascript" charset="utf-8">
//<![CDATA[
jQuery(function() {
  jQuery(window).unload(function() {
    var params = {
      type: 'POST',
      url: '/cart/update.js',
      data: jQuery('form[action="/cart"]').serialize(),
      dataType: 'json',
      async: false
    };
    jQuery.ajax(params);
  });        
});  
//]]>
</script>

And our (Minimal) theme.liquid contains the following in the header - which appears to be what is required to call JQuery:

  {{ content_for_header }}
  
  <script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.4.3/jquery.min.js"></script>
  
  {{ 'option_selection.js' | shopify_asset_url | script_tag }}
  {{ 'api.jquery.js' | shopify_asset_url | script_tag }}

  {% if template contains 'customers' %}
  {{ 'shopify_common.js' | shopify_asset_url | script_tag }}
  {{ 'customer_area.js'  | shopify_asset_url | script_tag }}
  {% endif %}
  
</head>

However, the Cart attributes are not being saved. Clicking on Update does add them to the order - so no it looks like no issues with the attribute code itself.

Would anyone be able to assist? I have looked through a few forum posts and can shed no light on this.

Many thanks.

0 Likes
Highlighted
Shopify Expert
351 0 38

in a couple places you've got two inputs with the same name, but one is hidden and the other is not.  why?

0 Likes
Highlighted
New Member
7 0 0

Hi jholl, I think I had taken this example that was on the resource page:

<p>
  <input type="hidden" name="attributes[wrapping]" value="" />
  <input id="wrapping" type="checkbox" name="attributes[wrapping]" value="yes" {% if cart.attributes.wrapping %} checked="checked"{% endif %} />
  <label for="wrapping">Please wrap the products in this order</label>
</p>

and then used in other (non-checkbox) attributes

 

thanks

0 Likes
Highlighted
Shopify Expert
351 0 38

try this; take out the hidden field for the GiftAidTitle section -- so that it's just the input like this

<input id="GiftAidTitle" type="text" name="attributes[GiftAidTitle]"{% if cart.attributes.giftaidtitle %} value="{{ cart.attributes.giftaidtitle }}"{% endif %} />

let's see what happens on that field and updates then

0 Likes
New Member
7 0 0

thanks jholl. making the change above has not had any affect. The Order Note and two attributes are still not added to the order.

 

 

0 Likes
Highlighted
Shopify Expert
351 0 38

there's an issue with the html on that input we changed -- its not closing 

0 Likes
Highlighted
New Member
7 0 0

thanks. very annoying, sorry. resolved, but issue persists

0 Likes
Highlighted
Shopify Expert
351 0 38

on just that one field, it looks to be working for me.  add in any text to that one field and then click update.  then click a link to another page, then click cart at the top.  when you come back to the cart page the text in that one input field should be what you entered first...... so with the update button it works (and now we have to fix the other cart attribute inputs)

now lets test if it works without the update button.  change the text in that one input field again to something else ("mresag" for example) - and this time, don't click update, but just click another link on the page.  Then click Cart in the header and scroll down to see if mresag is still in that text box.... (it should be)

 

So now the js is working the way it should, we just need to fix the other inputs so they are capturing and outputting the values like you want.

0 Likes
Highlighted
New Member
7 0 0

thanks for all these rapid responses. My query is how I can capture the inputs without having to rely on clicking on the Update button. I mentioned in my first post that attributes are being captured by clicking on Update.

(Even by adding prompts, you have to assume that some people will just click directly on Checkout after they have added extra information.)

I think the code I have inserted at the bottom of cart.liquid is not being applied. I believe it is something to do with JQuery not being called properly within theme.liquid, or a missing Asset, but I am not sure what exactly is needed within the theme for the code below to work?

<script type="text/javascript" charset="utf-8">
//<![CDATA[
jQuery(function() {
  jQuery(window).unload(function() {
    var params = {
      type: 'POST',
      url: '/cart/update.js',
      data: jQuery('form[action="/cart"]').serialize(),
      dataType: 'json',
      async: false
    };
    jQuery.ajax(params);
  });        
});  
//]]>
</script>

 

0 Likes
Highlighted
Shopify Expert
351 0 38

did you read all of my last post?

0 Likes