symmetry cart - Stop customers changing quantity for certain products

greeney2k1
Shopify Partner
28 1 7

 

Hi I have an app that adds a "gift bag" to the customers cart, which is great for christmas, I have an issue though that customers are buying 1 product and then adding 10+ gift bags to cart.

I have read online that you can disable the quantity pickers for products in the cart page? 

 

Tutorial here

https://help.experiencesapp.com/en/articles/2178071-how-can-i-prevent-users-from-changing-ticket-qua...

 

I cant seem to get this to work in Symmetry if anyone can help? (original cart code below) 
I have added the code to the site and got it to pick the gift bag item and had it disabling the + button but not removing it. 

 

would be eternally grateful for any pointers in the right direction? 

Screenshow below of ideal output 

 

<div class="container fully-spaced-row" data-section-type="cart-template" data-ajax-update="true">
  {% if section.settings.show_page_title %}
    <div class="page-header" data-cc-animate>
      <h1 class="majortitle">{{ 'cart.general.title' | t }}</h1>
    </div>
  {% endif %}

  {% if cart.items == empty %}
    <div class="fully-spaced-row align-centre" data-cc-animate>
      <p>{{ 'cart.general.empty' | t }}</p>
    </div>
  {% else %}
    <form action="{{ routes.cart_url }}" method="post" id="cartform">
      <div class="cart-item-list content-divider">
        <div class="cart-item-list__head" data-cc-animate>
          <div class="cart-item-list-heading cart-item-list-heading--product">{{ 'cart.label.product' | t }}</div>
          <div class="cart-item-list-heading cart-item-list-heading--price">{{ 'cart.label.price' | t }}</div>
          <div class="cart-item-list-heading cart-item-list-heading--quantity">{{ 'cart.label.quantity' | t }}</div>
          <div class="cart-item-list-heading cart-item-list-heading--total">{{ 'cart.label.total' | t }}</div>
        </div>
        <div class="cart-item-list__body">
          {% for item in cart.items %}
            <div class="cart-item product-{{ item.product.handle }}" data-cc-animate>
              {%- comment -%}
              Determining the handle of the collection that was last seen for the 'continue shopping' link.
              {%- endcomment -%}

              {%- if forloop.first -%}
                {%- capture collection_url -%}{{ item.product.collections.first.url }}{%- endcapture -%}
                {%- if collection_url == empty or collection_url contains '/frontpage' -%}{%- capture collection_url -%}{{ routes.all_products_collection_url }}{%- endcapture -%}{%- endif -%}
              {%- endif -%}

              <div class="cart-item__column cart-item__image" id="cart-item-image-{{ item.id }}">
                <a href="{{ item.url }}">
                  {% render 'responsive-image', image: item.image, max_height: 100 %}
                </a>
              </div>

              <div class="cart-item__not-image">
                <div class="cart-item__column cart-item__description">
                  <div>
                    <a class="name" href="{{ item.url }}">{{ item.product.title }}</a>
                    <div class="small-text">
                      {% if item.product.variants.size > 1 %}
                      <div class="variant">{{ item.variant.title }}</div>
                      {% endif %}

                      {%- for p in item.properties -%}
                        {% unless p.last == blank %}
                          <div class="line-item-property">{{ p.first }}:
                            {% if p.last contains '/uploads/' %}
                            <a href="{{ p.last }}">{{ p.last | split: '/' | last }}</a>
                            {% else %}
                            {{ p.last }}
                            {% endif %}
                          </div>
                        {% endunless %}
                      {%- endfor -%}

                      {% if item.selling_plan_allocation %}
                        <div class="subscription-description">{{ item.selling_plan_allocation.selling_plan.name }}</div>
                      {% endif %}

                      {% if section.settings.show_backorder_text == true %}
                        {% render 'backorder', product: item.product, variant: item.variant %}
                      {% endif %}

                      {% if settings.prod_pre_order_label_show and item.product.template_suffix == 'preorder' %}
                        <div class="price-label price-label--preorder">{{ 'products.product.preorder' | t }}</div>
                      {% endif %}
                    </div>
                  </div>
                </div>

                <div class="cart-item__column cart-item__price">
                  {% if item.original_line_price > item.final_line_price %}
                    <div class="struck-out-price"><span class="theme-money">{{ item.original_price | money }}</span></div>
                  {% endif %}
                  <div><span class="theme-money">{{ item.final_price | money }}</span></div>

                  {% render 'unit-price', variant: item %}

                  {% if item.line_level_discount_allocations.size > 0 %}
                    <ul class="cart-discount-list">
                    {% for discount_allocation in item.line_level_discount_allocations %}
                      <li class="cart-discount">
                        <div class="cart-discount__label">
                            <span class="cart-discount__icon">{% render 'icon-label' %}</span>
                            <span class="cart-discount__title">{{ discount_allocation.discount_application.title }}</span>
                        </div>
                        <div class="cart-discount__amount theme-money">{{ discount_allocation.amount | money }}</div>
                      </li>
                    {% endfor %}
                    </ul>
                  {% endif %}
                </div>

                {% if item.variant.inventory_management == 'shopify' and item.variant.inventory_policy == 'deny' and item.variant.inventory_quantity <= item.quantity %}
                  {% assign can_increase = false %}
                {% else %}
                  {% assign can_increase = true %}
                {% endif %}
                <div class="cart-item__column cart-item__quantity">
                  <div class="quantity buttoned-input">
                    <a id="updates_dec_{{ forloop.index }}" class="notabutton quantity-down {% if item.quantity < 2 %}unusable{% endif %}" href="{{ routes.cart_change_url }}?line={{ forloop.index }}&quantity={{ item.quantity | minus: 1 }}" aria-label="{{ 'cart.label.decrease' | t | escape }}">{% render 'svg-minus' %}</a>
                    <input
                      class="cart-item__quantity-input"
                      type="text"
                      size="2"
                      id="updates_{{ forloop.index }}"
                      name="updates[]"
                      value="{{ item.quantity }}"
                      data-initial-value="{{ item.quantity }}"
                      data-line="{{ forloop.index }}"
                      {% if item.variant.inventory_management == 'shopify' and item.variant.inventory_policy == 'deny' %}data-max="{{ item.variant.inventory_quantity }}"{% endif %}
                      aria-label="{{ 'cart.general.quantity' | t | escape }}" />
                    <a id="updates_inc_{{ forloop.index }}" class="notabutton quantity-up {% unless can_increase %}unusable{% endunless %}" href="{{ routes.cart_change_url }}?line={{ forloop.index }}&quantity={{ item.quantity | plus: 1 }}" aria-label="{{ 'cart.label.increase' | t | escape }}">{% render 'svg-plus' %}</a>
                  </div>
                  <a class="remove" onclick="return confirm('{{ 'cart.general.confirm_remove' | t }}')" href="{{ routes.cart_change_url }}?line={{ forloop.index }}&quantity=0">
                    {{ 'cart.general.remove' | t }}
                    {% render 'svg-x' %}
                  </a>
                </div>

                <div class="cart-item__column cart-item__total" data-line="{{ forloop.index }}">
                  {% if item.original_line_price != item.final_line_price %}
                    <div class="theme-money struck-out-price">{{ item.original_line_price | money }}</div>
                    <span class="theme-money">{{ item.final_line_price | money }}</span>
                  {% else %}
                    <span class="theme-money">{{ item.final_line_price | money }}</span>
                  {% endif %}
                </div>
              </div>
            </div>
          {% endfor %}
        </div>
      </div>

      <div class="checkout-subtotal-container spaced-row" data-cc-animate>
        <div class="flexible-layout">
          <div class="checkout-subtotal-container__left column column--half">
            {% if section.settings.enable_cart_notes %}
              <div class="checkout-note">
                <label for="note">{{ 'cart.label.note' | t }}</label>
                <div class="textareawrapper"><textarea id="note" name="note">{{ cart.note }}</textarea></div>
              </div>
            {% endif %}

            {% if section.settings.show_shipping_calculator %}
              <button class="notabutton" data-toggle-shipping data-toggle-html="{{ 'cart.shipping_calculator.button_hide' | t | escape }}">{{ 'cart.shipping_calculator.button_show' | t }}</button>
              {% render 'shipping-calculator', default_country: section.settings.shipping_calculator_default_country %}
            {% endif %}
          </div>

          <div class="checkout-subtotal-container__right column column--half">
            {%- if cart.cart_level_discount_applications != blank -%}
              <ul class="cart-discount-list">
                {%- for discount_application in cart.cart_level_discount_applications -%}
                  <li class="cart-discount cart-discount--inline">
                    <span class="cart-discount__label">
                        <span class="cart-discount__icon">{% render 'icon-label' %}</span>
                        <span class="cart-discount__title">{{ discount_application.title }}</span>
                    </span>
                    <span class="cart-discount__amount theme-money">{{ discount_application.total_allocated_amount | money }}</span>
                  </li>
                {%- endfor -%}
              </ul>
            {%- endif -%}
            <h2 class="subtotal h2-style">
              {{ 'cart.general.subtotal' | t }}:
              <span class="theme-money">
                {%- if settings.cart_currency_code_enabled -%}
                  {{- cart.total_price | money_with_currency -}}
                {%- else -%}
                  {{- cart.total_price | money -}}
                {%- endif -%}
              </span>
            </h2>

            {%- if section.settings.show_tax_and_shipping -%}
              {%- capture taxes_shipping_checkout -%}
                {%- if cart.taxes_included and shop.shipping_policy.body != blank -%}
                  {{ 'cart.general.taxes_included_and_shipping_policy_html' | t: link: shop.shipping_policy.url }}
                {%- elsif cart.taxes_included -%}
                  {{ 'cart.general.taxes_included_but_shipping_at_checkout' | t }}
                {%- elsif shop.shipping_policy.body != blank -%}
                  {{ 'cart.general.taxes_and_shipping_policy_at_checkout_html' | t: link: shop.shipping_policy.url }}
                {%- else -%}
                  {{ 'cart.general.taxes_and_shipping_at_checkout' | t }}
                {%- endif -%}
              {%- endcapture -%}

              <div class="cart-policies">{{ taxes_shipping_checkout }}</div>
            {%- endif -%}

            {% if section.settings.cart_terms_page != blank %}
              <div class="termsagreement">
                <input type="checkbox" id="terms" />
                <label for="terms">{{ 'cart.terms.agreement_html' | t: terms_url: section.settings.cart_terms_page }}</label>
              </div>
            {% endif %}

            <div class="checkout-col">
              <div class="checkout-buttons">
                <span class="update-cart-container">
                  <input type="submit" class="notabutton" name="update" value="{{ 'cart.general.update' | t }}" /> {{ 'cart.general.or' | t }}
                </span>

                <input type="submit" class="button button--large" id="update-cart" name="checkout" value="{{ 'cart.general.checkout' | t }}" />

                {% if section.settings.show_additional_checkout_buttons and additional_checkout_buttons and section.settings.cart_terms_page == blank %}
                <div class="additional-checkout-buttons">
                  {{ content_for_additional_checkout_buttons }}
                </div>
                {% endif %}
              </div>

              <a class="continue-shopping" href="{{ collection_url }}">{{ 'cart.general.continue' | t }}</a>
            </div>
          </div>
        </div>
      </div>
    </form>
  {% endif %}
</div>


{% schema %}
  {
    "name": "Cart page",
    "class": "page-section-spacing",
    "settings": [
      {
        "type": "checkbox",
        "id": "show_page_title",
        "label": "Show page title",
        "default": true
      },
      {
        "type": "checkbox",
        "id": "enable_cart_notes",
        "label": "Enable cart notes",
        "default": true
      },
      {
        "type": "checkbox",
        "id": "show_tax_and_shipping",
        "label": "Show tax status and shipping policy link",
        "default": true
      },
      {
        "type": "url",
        "id": "cart_terms_page",
        "label": "Terms and Conditions link",
        "info": "Additional checkout buttons will be hidden when cart terms are shown"
      },
      {
        "type": "checkbox",
        "id": "show_additional_checkout_buttons",
        "label": "Show additional checkout options",
        "default": true,
        "info": "Display other gateways and quick checkout buttons. [Read more](https://help.shopify.com/en/manual/payments/accelerated-checkouts)"
      },
      {
        "type": "checkbox",
        "id": "show_backorder_text",
        "label": "Show backorder text",
        "default": true,
        "info": "Only shows for products which use Shopify inventory tracking and are available to purchase when out of stock."
      },
      {
        "type": "header",
        "content": "Shipping rates calculator"
      },
      {
        "type": "checkbox",
        "id": "show_shipping_calculator",
        "label": "Show",
        "default": false
      },
      {
        "type": "text",
        "id": "shipping_calculator_default_country",
        "label": "Default country selection",
        "default": "United States"
      },
      {
        "type": "paragraph",
        "content": "If your customer is logged-in, the country in his default shipping address will be selected. If you are not sure about the spelling to use here, refer to your first checkout page dropdown."
      }
  ]
  }
{% endschema %}

Screenshot 2022-08-21 at 21.jpg

Replies 0 (0)