Any products that have the tag NoQuantity will have the qty selector removed for the cart. This works but I have found that the selector re-appears if I change the quantity of another item int he cart and only when I refresh the page does it dissappear again. I am asuming that there is some sort of AJAX causing this?
Can any advise how to get around this or suggest a better way of doing it?
Liquid executes once server side. If you are using AJAX then you need to use JavaScript to make the QTY selectors disappear.
What I would do is add a data attribute to the input field like so:
{% if item.product.tags contains 'NoQuantity' %}
{% endif %}
Then find the code that handles qty selector event and add code that will check for this data attribute and you can simply use a CSS class like “hidden” to hide/remove the selectors.
That code wasn’t quite what I was expecting to see. This looks like your cart template or a part of it. Not sure if you can attach files in private messages but send a copy of your assets/theme.js pretty sure there’s click handlers for the qty inputs. Otherwise what’s doing the AJAX call right?
Many (most) themes rebuild entire cart when line item quantity is changed with Ajax. And there are themes (some versions of Supply for example), which has handlebars template in code, but they actually do not use it (at least, by default :). What’s your theme, BTW?
And no, you can’t modify the cart template this way – handlebars template does not have/process actual cart data in it, it’s a template which is updated by theme javascript .
It works like this – theme JS code receives cart Json from the server. This Json data is parsed, and a new JS data object is created, which is then passed to handlebars library together with the template. Library replaces placeholders in the template with the info from the data object and resulting HTML is output to the page.
Unfortunately, this would not quite work for you because cart item returned with Ajax has no direct access to product tags.
Your best option would probably be to modify JS code to pull the actual cart page rendered with liquid via Ajax and rebuild your drawer/popup cart based on this. Some themes do it (Supply, for example).
I don’t know for sure it is using Ajax I’m just making an assumption as I don’t notice the page reload and because of the behaviour with the qty select reappearing.
So each qty input has unique id, which we can use to hide it via CSS.
If we generate a list of CSS rules, they will still apply and hide some of the qty inputs even after Ajax updates, just need to put it outside the cart form. Something like this:
Will produce code like this, which will effectively hide those unwanted inputs and their labels.
Yep, since this CSS is outside the form, its effect survives the cart page change via Ajax. And since each qty input has uniq identifier, we can target them knowing the line item id.
it’s nice to have more than one way to tackle the problem.
If you dont mind I have another question. I have put a custom add to cart on my shopping cart page, so far I have only been able to do this by hard coding it.
is there a way I can add some code to dynamically create it? that way if any varients change later i wont have to re-code the page.
I litterally have the varients and an add to cart button. No qty selector or images.
So in short is there some code where I can specify the product id and the code take care of the rest?
Generally, it’s possible, for example, you can add a theme setting to select a product, then on the cart page pull this product variants and add them to a form. Would need more details and some research on how to better implant it into your theme, not something the theme has provisions for. Probably a bit too substantial for a quick-and-simple forum fix.
Ok no probs. I’ll do some digging around the code on the product liquid page and see if I can use that and inject the product I’d variable some how
Thanks again
