Quantity Selector Not Carrying Over To Cart Page

Solved
FairTrade4
Tourist
10 1 2

Hello Shopify Community,

I am hoping someone might be able to help with this issue. Using the Mr. Parker Shopify Theme.

We have added the quantity selector and Add To Cart sections on the Collection pages, but I am having trouble getting the quantity selector to carry over the quantity amount to the cart page.

I copied the quantity selector section over from the product page, but seems I am missing something.

Here is the code that is currently on the Collection page for the form section:

{% assign call_to_action = 'products.product.add_to_cart' | t %}
{% form 'product', product, id: "AddToCartForm", class: "product_form", data-product-form:product_form_config, data-product-id: product.id %}
{% render 'product-json', product: product, section_id: section.id %}


{% if product.options.size > 1 %}
<div class="select" {% if product.variants.size == 1 or section.settings.product_variants == 'swatches' %}style="display: none;"{% endif %}>
<select id="{{ section.id }}-product-select-{{ product.id }}" name='id'>
{% for variant in product.variants %}
<option value="{{ variant.id }}" {% if variant == current_variant %}selected="selected"{% endif %}>
{{ variant.title }} - {{ variant.price | money }}
</option>
{% endfor %}
</select>
</div>
{% elsif product.options.size == 1 and product.variants.size > 1 %}
<div class="select" {% if product.variants.size == 1 or section.settings.product_variants == 'swatches' %}style="display: none;"{% endif %}>
<label>{{ product.options[0] }}</label>
<select id="{{ section.id }}-product-select-{{ product.id }}" name='id'>
{% for variant in product.variants %}

<option data-sku="{{ variant.sku }}" value="{{ variant.id }}" {% if variant == current_variant %}selected="selected"{% endif %}>
{{ variant.title }} - {{ variant.price | money }}
</option>
{% endfor %}
</select>
</div>
{% if section.settings.product_variants == 'swatches' %}
{% for option in product.options_with_values %}
{% render 'swatch',
option: option,
product: product,
color_swatch_style: section.settings.color_swatch_options,
current_variant: current_variant %}
{% endfor %}
{% endif %}
{% else %}

<div class="what-is-it">
{% if product.options.first != 'Title' %}
<label>{{ product.options.first }}:</label>
{% for variant in product.variants %}
<span class="it-is">{{ variant.option1 | escape }}</span>
{% endfor %}
{% endif %}
</div>
<div class="product-variants"></div><!-- product variants -->
<input type="hidden" id="{{ variant.id }}" name="id" data-sku="{{ variant.sku }}" value="{{ product.variants[0].id }}" />
{% endif %}

{% if section.settings.show_sku %}
<div class="clear"></div>
<div class="sku">
<label style="line-height: 1.6em; display: inline-block;">{{ 'customer.order.details.sku' | t }}:</label> <span class="variant_sku">{{ current_variant.sku }}</span>
</div><div class="clear"></div>
{% endif %}

<div class="product-add">
<div class="quantity">


<input id="quantity" min="1" type="number" name="updates[{{ item.id }}]" id="updates_{{ item.variant.id }}" value="{{ item.quantity }}" onfocus="this.select();" />

</div>
{% if section.settings.show_quantity %}
<label for="quantity">{{ 'products.product.quantity' | t }}</label>
<input min="1" type="number" id="quantity" name="quantity" value="1" />
{% endif %}
<input type="submit" name="button" class="add clearfix AddtoCart{% if section.settings.show_payment_button %} secondary-button{% endif %}" value="{{ call_to_action }}" {% unless current_variant.available %}disabled{% endunless %} />
{% if section.settings.show_payment_button %}
{{ form | payment_button }}
{% endif %}

</div>

{% endform %}

 

Any help would greatly be appreciated.

Thanks in advance,

Todd

0 Likes
FairTrade4
Tourist
10 1 2

I was wondering if anyone had any solutions? Or can direct me to a similar issue where it was resolved?

This is a bit frustrating and was hoping that somebody could help before I reach out to a professional developer.

Thanks,

Todd

0 Likes
Ninthony
Shopify Partner
1712 242 660

I don't quite understand. You want a quantity selector on the cart page? Or you just want the quantity of the line items displayed with their item on the cart page. I'm not familiar with the theme, but I assume that would be default behavior. Can you post a link to your store and a screenshot of what you'd like?

If my solution helped you, please like and accept as solution!
If you'd like to make any edits to your store, please send me a personal message and we can discuss what you'd like to accomplish :D
0 Likes
FairTrade4
Tourist
10 1 2

Hi Ninthony,

Thanks for jumping in. Basically, we have added the Quantity and Add To Cart form on the Collections page. This will be a Wholesale website and many of our vendors do not need to read about the product as they are very familiar with them already.

The issue is, when you add a quantity to the box, like 5 or 6, that amount does not carry over to the Cart page. The Cart page only shows "1".

So, yes, we just want the quantity of the line items displayed with their item on the cart page. I have included a screenshot.

The site is not active yet, here is a link: https://swahili-wholesale.myshopify.com. Password: bluvah

I think it's simple fairly simple, but I am not able to get it to work properly.

Thanks again,

Toddswahili-collection-page-cart-1.jpg

0 Likes
Ninthony
Shopify Partner
1712 242 660

So wherever you added that HTML, go to the input element that is your quantity. It's name is set to "updates[]", that is incorrect. Just change the name to be "quantity":

<input id="quantity" min="1" type="number" name="updates[]" value="" onfocus="this.select();">

//change that to this:

<input id="quantity" min="1" type="number" name="quantity" value="" onfocus="this.select();">
If my solution helped you, please like and accept as solution!
If you'd like to make any edits to your store, please send me a personal message and we can discuss what you'd like to accomplish :D
0 Likes
FairTrade4
Tourist
10 1 2

Hi Ninthony,

Thank you for your help. I have made the changes and the same results though. This is what I currently have now in that section:

<div class="product-add">
<div class="quantity">
<input id="quantity" min="1" type="number" name="quantity[{{ item.id }}]" id="quantity_{{ item.variant.id }}" value="{{ item.quantity }}" onfocus="this.select();" />
</div>

{% if section.settings.show_quantity %}
<label for="quantity">{{ 'products.product.quantity' | t }}</label>
<input min="1" type="number" id="quantity" name="quantity" value="1" />

{% endif %}
<input type="submit" name="button" class="add clearfix AddtoCart{% if section.settings.show_payment_button %} secondary-button{% endif %}" value="{{ call_to_action }}" {% unless current_variant.available %}disabled{% endunless %} />
{% if section.settings.show_payment_button %}
{{ form | payment_button }}
{% endif %}

{% endform %}
</div>

Maybe I missed something?

Again, any further help would be very much appreciated.

0 Likes
Ninthony
Shopify Partner
1712 242 660

This is an accepted solution.

Just change it to:

<input id="quantity" min="1" type="number" name="quantity" id="quantity_{{ item.variant.id }}" value="{{ item.quantity }}" onfocus="this.select();" />

 

Get rid of the "[{{ item.id }}]" portion in the name and you should be good. I just changed it to quantity and added 8 of one of your products to the cart and it carried over.

If my solution helped you, please like and accept as solution!
If you'd like to make any edits to your store, please send me a personal message and we can discuss what you'd like to accomplish :D
0 Likes
FairTrade4
Tourist
10 1 2

This is an accepted solution.

Hi Again Ninthony,

That worked! Thanks so much for your help, I really appreciate it.

I am learning, slowly, Shopify liquid code, but not quite there yet, so thank you very much again!

Let's mark this one resolved!

0 Likes
Ninthony
Shopify Partner
1712 242 660

You marked your own post as the solution lol ~_^ -- that's fine though. I'm glad it helped. Have a good one.

If my solution helped you, please like and accept as solution!
If you'd like to make any edits to your store, please send me a personal message and we can discuss what you'd like to accomplish :D
0 Likes
FairTrade4
Tourist
10 1 2

I hit the wrong Accepted Solution and have added it to your replay with the code. Thanks again.

0 Likes