Need help creating a required dropdown field on the cart page (in place of cart note)

NourishAC
Visitor
3 0 0

I am looking to use Shopify but trying out a 2-week free trial to make sure it has the functionality I need. A dealbreaker for me is that I need a custom field on the cart page that is a dropdown selection and is required before customers can click "checkout". This is what I have so far in cart-template.liquid to replace the cart note:

 

{%- if section.settings.cart_notes_enable -%}
<div class="grid__item medium-up--one-half cart-note">
<p class="cart-attribute-field">
<label for="school-to-support">Please choose a school to support with your purchase:</label><br>
<select id="school-to-support" name="note">
<option value="default" {% if cart.note == 'default' %} selected="selected"{% endif %} disabled>Choose a School</option>
<option value="nopreference" {% if cart.note == 'nopreference' %} selected="selected"{% endif %}>No Preference</option>
<option value="schoola" {% if cart.note == 'schoola' %} selected="selected"{% endif %}>School A</option>
<option value="schoolb" {% if cart.note == 'schoolb' %} selected="selected"{% endif %}>School B</option>
<option value="schoolc" {% if cart.note == 'schoolc' %} selected="selected"{% endif %}>School C</option>
</select>
</p><br>
</div>
{%- endif -%}

I am by no means an expert in liquid -- this code is borrowed from elsewhere and modified to my needs so it might be a bit messy. Ideally, I would like the default option to be the disabled option "Choose a School" and customers would be required to make a selection before proceeding to the checkout page. I would rather not use an app for this functionality.

Is this possible, and if so, what do I need to change? I've been trying to add the word "required" to various places but to no avail.

 

Thanks to anyone who can shed some light on this!

Alyce

Replies 22 (22)

NourishAC
Visitor
3 0 0

One thing to add: the data collected in this field must be able to export to .csv with the rest of the order information.

Alan15
Shopify Partner
145 27 66

Shopify's ui generator might help you out:

 

https://ui-elements-generator.myshopify.com/pages/cart-attribute

Need more help? Contact me here
NourishAC
Visitor
3 0 0

Thanks Alan! This helps clean it up, but I'm still running into the issue where the first option is pre-selected for them, so they can proceed without even looking at the drop-down. I need the first option to be disabled and for them to have to pick a non-disabled option before proceeding. I hope that makes sense. Here it what it looks like now:

          {%- if section.settings.cart_notes_enable -%}
            <div class="grid__item medium-up--one-half cart-note">
                            <p class="cart-attribute__field">
  <label>Please select a school to support with your purchase:</label><br>
  <select required class="required" id="please-select-a-school-to-support-with-your-purchase" name="attributes[Please select a school to support with your purchase]">
    <option value="No Preference"{% if cart.attributes["Please select a school to support with your purchase"] == "No Preference" %} selected{% endif %}>No Preference</option>
    <option value="School 1"{% if cart.attributes["Please select a school to support with your purchase"] == "School 1" %} selected{% endif %}>School 1</option>
    <option value="School 2"{% if cart.attributes["Please select a school to support with your purchase"] == "School 2" %} selected{% endif %}>School 2</option>
    <option value="School 3"{% if cart.attributes["Please select a school to support with your purchase"] == "School 3" %} selected{% endif %}>School 3</option>
    <option value="School 4"{% if cart.attributes["Please select a school to support with your purchase"] == "School 4" %} selected{% endif %}>School 4</option>
    <option value="School 5"{% if cart.attributes["Please select a school to support with your purchase"] == "School 5" %} selected{% endif %}>School 5</option>
    <option value="School 6"{% if cart.attributes["Please select a school to support with your purchase"] == "School 6" %} selected{% endif %}>School 6</option>
  </select>
</p><br>
            </div>
          {%- endif -%}

 

Alan15
Shopify Partner
145 27 66

Hi, I simplified the select to this:

            <div class="grid__item medium-up--one-half cart-note">
                            <p class="cart-attribute__field">
  <label>Please select a school to support with your purchase:</label><br>
  <select required class="required" id="please-select-a-school-to-support-with-your-purchase" name="attributes[Please select a school to support with your purchase]">
   <option disabled selected value=""> -- please select an option -- </option>
    <option  value="No Preference"></option>
    <option value="School 1">School 1</option>
    <option value="School 2">School 2</option>
    <option value="School 3">School 3</option>
    <option value="School 4">School 4</option>
    <option value="School 5">School 5</option>
    <option value="School 6">School 6</option>
  </select>
</p><br>
            </div>

Then I removed the novalidate attribute in the <form> tag

<form action="{{ routes.cart_url }}" method="post" class="cart">

Now if you leave the dropdown unselected and hit the checkout out button it will validate the field and give a warning.

I'm not sure if the novalidate attribute is there for a reason, you might want to look into that in case removing it causes any problems elsewhere.

Need more help? Contact me here
Coralee
Visitor
3 0 0

How can I only show the dropdown for products in cart with a particular tag and skip the validate when its not showing?

 

my current code is:

{%- if cart.line_item.product_id.tag contains "Rescue Donation" -%} 
<div>
<p class="cart-attribute__field">
<label>Every pet product sold, supports an animal rescue <a href="" style="text-decoration: underline">click here for more details</a>. Coralee donates 15% of the profit made from your purchase. Choose your favourite or select no preference below, before checkout.:</label><br>
<select required class="required" id="Animal-Rescue-to-support" name="attributes[Animal Rescue to support]">
<option disabled selected value=""> -- please select an option -- </option>
<option value="No Preference">No Preference</option>
<option value="Test 1">Test 1</option>
<option value="Test 2">Test 2</option>
<option value="Test 3">Test 3</option>
<option value="Test 4">Test 4</option>
</select>
</p><br>
</div>
{%- endif -%} 

 

Alan15
Shopify Partner
145 27 66

Hi @Coralee 

I think you first need to loop through the list of tags for each item in the cart and then check if the tag equals "Rescue Donation" .

If you are using the Dawn theme, then this code should work:

              {% for tag in item.product.tags %}
                  {%- if tag == "Rescue Donation" -%} 
        
                        <div>
                        <p class="cart-attribute__field">
                        <label>Every pet product sold, supports an animal rescue <a href="" style="text-decoration: underline">click here for more details</a>. Coralee donates 15% of the profit made from your purchase. Choose your favourite or select no preference below, before checkout.:</label><br>
                        <select required class="required" id="Animal-Rescue-to-support" name="attributes[Animal Rescue to support]">
                        <option disabled selected value=""> -- please select an option -- </option>
                        <option value="No Preference">No Preference</option>
                        <option value="Test 1">Test 1</option>
                        <option value="Test 2">Test 2</option>
                        <option value="Test 3">Test 3</option>
                        <option value="Test 4">Test 4</option>
                        </select>
                        </p><br>
                        </div>
                    
                    {% endif %}
                  {% endfor %}

 

Need more help? Contact me here
Coralee
Visitor
3 0 0

Thank you for the quick reply, I've updated the code and its now not showing at all. Ive put just the products with tag,  a mix and just non tagged. I would like it to show even with the note box would I placing the code in the wrong place? also i have Hulkapps code would this be a problem?

Alan15
Shopify Partner
145 27 66

@Coralee 

It's hard to say. What Shopify theme are you using?

Need more help? Contact me here
Coralee
Visitor
3 0 0

@Alan15 

Ive looked at what theme I have this morning and I’m using the Debut theme, is this why its not working?

Alan15
Shopify Partner
145 27 66

@Coralee 

It should be the same. Are you adding the code to the cart-template.liquid file. It would look like this with the new code added:

 

<div class="page-width" data-section-id="{{ section.id }}" data-section-type="cart-template" data-ajax-enabled="{{ section.settings.cart_ajax_enable }}">

  <div {% if cart.item_count == 0 %}class="hide" {% endif %}data-cart-wrapper>
    <div class="cart-header">
      <h1 class="cart-header__title">{{ 'cart.general.title' | t }}</h1>
      <a href="{{ routes.all_products_collection_url }}" class="text-link text-link--accent">
        {{ 'cart.general.continue_shopping' | t }}
      </a>
    </div>

    <form action="{{ routes.cart_url }}" method="post" novalidate class="cart">
      <table>
        <thead class="cart__row cart__row--heading">
          <th scope="col">{{ 'cart.label.product' | t }}</th>
          <th class="text-right" scope="col">{{ 'cart.label.price' | t }}</th>
          <th class="text-right small--hide" scope="col">{{ 'cart.label.quantity' | t }}</th>
          <th class="text-right small--hide" scope="col">{{ 'cart.label.total' | t }}</th>
        </thead>
        <tbody data-cart-line-items>
          {%- for item in cart.items -%}
            <tr class="cart__row" data-cart-item data-cart-item-key="{{ item.key }}" data-cart-item-url="{{ item.url }}" data-cart-item-title="{{ item.title }}" data-cart-item-index="{{ forloop.index }}" data-cart-item-quantity="{{ item.quantity }}">
              <td class="cart__meta small--text-left" data-cart-table-cell>
                <div class="cart__product-information">
                  <div class="cart__image-wrapper">
                    <img class="cart__image{% if item.image == null %} hide{% endif %}" src="{{ item | img_url: 'x190' }}" alt="{{ item.image.alt | escape }}" data-cart-item-image>
                  </div>
                  <div>
                    <div class="list-view-item__title">
                      <a href="{{ item.url }}" class="cart__product-title" data-cart-item-title data-role="product-title">
                        {{ item.product.title }}
                      </a>
                    </div>

                    {%- assign variant_options = 'template ' | split: ' ' -%}
                    {%- if item.product.has_only_default_variant != true -%}
                      {%- assign variant_options = item.options_with_values -%}
                    {%- endif -%}
                    {%- assign property_size = item.properties | size -%}

                    <ul class="product-details{% if item.product.has_only_default_variant and property_size == 0 and item.selling_plan_allocation == nil %} hide{% endif %}" data-cart-item-details aria-label="{{ 'cart.label.product_details' | t }}">
                      {%- for option in variant_options -%}
                        <li class="product-details__item product-details__item--variant-option{% if item.product.has_only_default_variant %} hide{% endif %}" data-cart-item-option>{{ option.name }}: {{ option.value }}</li>
                      {%- endfor -%}

                      <li
                        class="product-details__item product-details__item--property
                        {% if item.selling_plan_allocation == empty %} hide {% endif %}"
                        data-cart-item-selling-plan-name
                      >
                        {{ item.selling_plan_allocation.selling_plan.name }}
                      </li>

                      {%- comment -%}
                        Optional, loop through custom product line items if available

                        Line item properties come in as having two parts. The first part will be passed with the default form,
                        but p.last is the actual custom property and may be blank. If it is, don't show it.

                        For more info on line item properties, visit:
                          - http://docs.shopify.com/support/your-store/products/how-do-I-collect-additional-information-on-the-product-page-Like-for-a-monogram-engraving-or-customization
                      {%- endcomment -%}

                      {%- assign properties = 'template ' | split: ' ' -%}
                      {%- if property_size > 0 -%}
                        {%- assign properties = item.properties -%}
                      {%- endif -%}

                      {%- for p in properties -%}
                        {% assign property_first_char = p.first | slice: 0 %}
                        <li class="product-details__item product-details__item--property
                          {%if property_size == 0 or p.last == blank or property_first_char == '_' %} hide{% endif %}" data-cart-item-property>
                          <span class="product-details__item-label" data-cart-item-property-name>{{ p.first }}: </span>

                          {%- comment -%}
                            Check if there was an uploaded file associated
                          {%- endcomment -%}
                          <span data-cart-item-property-value>
                            {%- if p.last contains '/uploads/' -%}
                              <a href="{{ p.last }}" data-role="product-upload">{{ p.last | split: '/' | last }}</a>
                            {%- else -%}
                              {{ p.last }}
                            {%- endif -%}
                          </span>
                        </li>
                      {%- endfor -%}
                    </ul>

                    <p class="cart__remove">
                      <a href="/cart/change?line={{ forloop.index }}&amp;quantity=0" class="text-link text-link--accent" aria-label="{{ 'cart.label.remove' | t: product: item.title }}" data-cart-remove data-role="product-remove">{{ 'cart.general.remove' | t }}</a>
                    </p>
                  </div>
                </div>
              </td>

              <td>
            
                         {% for tag in item.product.tags %}
                  {%- if tag == "Rescue Donation" -%} 
        
                        <div>
                        <p class="cart-attribute__field">
                        <label>Every pet product sold, supports an animal rescue <a href="" style="text-decoration: underline">click here for more details</a>. Coralee donates 15% of the profit made from your purchase. Choose your favourite or select no preference below, before checkout.:</label><br>
                        <select required class="required" id="Animal-Rescue-to-support" name="attributes[Animal Rescue to support]">
                        <option disabled selected value=""> -- please select an option -- </option>
                        <option value="No Preference">No Preference</option>
                        <option value="Test 1">Test 1</option>
                        <option value="Test 2">Test 2</option>
                        <option value="Test 3">Test 3</option>
                        <option value="Test 4">Test 4</option>
                        </select>
                        </p><br>
                        </div>
                    
                    {% endif %}
                  {% endfor %}
            
            </td>

            
              <td class="cart__price text-right">

                {%- assign hasDiscount = false -%}
                {%- if item.original_price != item.final_price -%}
                  {%- assign hasDiscount = true -%}
                {%- endif -%}

                <div data-cart-item-price>
                  <dl data-cart-item-price-list>
                    {%- comment -%}
                      Markup template for discount item
                    {%- endcomment -%}
                    <div {% unless hasDiscount %}class="hide" {% endunless %}data-cart-item-discounted-price-group>
                      <dt>
                        <span class="visually-hidden">{{ 'products.product.regular_price' | t }}</span>
                      </dt>
                      <dd>
                        <s data-cart-item-original-price>{{ item.original_price | money }}</s>
                      </dd>
                      <dt>
                        <span class="visually-hidden">{{ 'products.product.sale_price' | t }}</span>
                      </dt>
                      <dd>
                        <span class="order-discount" data-cart-item-final-price>{{ item.final_price | money }}</span>
                      </dd>
                    </div>

                    {%- comment -%}
                      Markup template for regular price item
                    {%- endcomment -%}
                    <div {% if hasDiscount %}class="hide" {% endif %}data-cart-item-regular-price-group>
                      <dt>
                        <span class="visually-hidden">{{ 'products.product.regular_price' | t }}</span>
                      </dt>
                      <dd data-cart-item-regular-price>
                        {{ item.original_price | money }}
                      </dd>
                    </div>

                    {%- comment -%}
                      Markup template for unit price
                    {%- endcomment -%}
                    <div {% unless item.unit_price_measurement %}class="hide" {% endunless %}data-unit-price-group>
                      <dt>
                        <span class="visually-hidden visually-hidden--inline">{{ 'products.product.unit_price_label' | t }}</span>
                      </dt>
                      <dd>
                        <span class="price-unit-price">
                          {%- capture unit_price_separator -%}
                            <span aria-hidden="true">/</span><span class="visually-hidden">{{ 'general.accessibility.unit_price_separator' | t }}&nbsp;</span>
                          {%- endcapture -%}
                          {%- capture unit_price_base_unit -%}
                            {%- if item.unit_price_measurement.reference_value != 1 -%}
                              {{- item.unit_price_measurement.reference_value -}}
                            {%- endif -%}
                            {{ item.unit_price_measurement.reference_unit }}
                          {%- endcapture -%}

                          <span data-unit-price>{{ item.unit_price | money }}</span>{{- unit_price_separator -}}<span data-unit-price-base-unit>{{- unit_price_base_unit -}}</span>
                        </span>
                      </dd>
                    </div>
                  </dl>
                </div>

                {%- assign itemDiscounts = 'template ' | split: ' ' -%}
                {%- if item.line_level_discount_allocations != blank -%}
                  {%- assign itemDiscounts = item.line_level_discount_allocations -%}
                {%- endif -%}

                <ul class="order-discount order-discount--list order-discount--title order-discount--cart{% if item.line_level_discount_allocations == blank %} hide{% endif %}" aria-label="{{ 'customer.order.discount' | t }}" data-cart-item-discount-list>
                  {%- for discount_allocation in itemDiscounts -%}
                    <li class="order-discount__item" data-cart-item-discount>
                      {% include 'icon-saletag' %}
                      <span data-cart-item-discount-title>
                        {{- discount_allocation.discount_application.title -}}
                      </span> (-<span data-cart-item-discount-amount>{{ discount_allocation.amount | money }}</span>)
                    </li>
                  {%- endfor -%}
                </ul>

                <div class="cart__qty medium-up--hide">
                  <label for="updates_{{ item.key }}" class="cart__qty-label" aria-label="{{ 'cart.label.quantity' | t }}" data-quantity-label-mobile>
                    {{ 'cart.label.qty' | t }}
                  </label>
                  <input id="updates_{{ item.key }}" class="cart__qty-input" type="number"
                    value="{{ item.quantity }}" min="0" pattern="[0-9]*"
                    data-quantity-input data-quantity-item="{{ forloop.index }}" data-quantity-input-mobile data-role="product-quantity-mobile">
                </div>
                <div class="cart__qty-error-message-wrapper cart__qty-error-message-wrapper--mobile hide" role="alert" data-cart-quantity-error-message-wrapper>
                  <span class="visually-hidden">{{ 'general.accessibility.error' | t }} </span>
                  {% include 'icon-error' %}
                  <span class="cart__qty-error-message" data-cart-quantity-error-message></span>
                </div>
              </td>
              <td class="cart__quantity-td text-right small--hide">
                <div class="cart__qty">
                  <label for="updates_large_{{ item.key }}" class="cart__qty-label" data-quantity-label-desktop>{{ 'cart.label.quantity' | t }}</label>
                  <input id="updates_large_{{ item.key }}" class="cart__qty-input" type="number"
                    name="updates[]" value="{{ item.quantity }}" min="0" pattern="[0-9]*"
                    data-quantity-input data-quantity-item="{{ forloop.index }}" data-quantity-input-desktop data-role="product-quantity-desktop">
                </div>
                <div class="cart__qty-error-message-wrapper cart__qty-error-message-wrapper--desktop hide" role="alert" data-cart-quantity-error-message-wrapper>
                  <span class="visually-hidden">{{ 'general.accessibility.error' | t }} </span>
                  {% include 'icon-error' %}
                  <span class="cart__qty-error-message" data-cart-quantity-error-message></span>
                </div>
              </td>
              <td class="cart__final-price text-right small--hide" data-cart-item-line-price>
                {%- comment -%}
                  Markup template for discount item
                {%- endcomment -%}
                <dl {% unless item.original_line_price != item.final_line_price %}class="hide" {% endunless %}data-cart-item-discounted-price-group>
                  <dt>
                    <span class="visually-hidden">{{ 'cart.label.regular_total' | t }}</span>
                  </dt>
                  <dd>
                    <s data-cart-item-original-price>{{ item.original_line_price | money }}</s>
                  </dd>
                  <dt>
                    <span class="visually-hidden">{{ 'cart.label.discounted_total' | t }}</span>
                  </dt>
                  <dd>
                    <span class="order-discount" data-cart-item-final-price>{{ item.final_line_price | money }}</span>
                  </dd>
                </dl >

                {%- comment -%}
                  Markup template for regular price item
                {%- endcomment -%}
                <div {% if item.original_line_price != item.final_line_price %}class="hide" {% endif %}data-cart-item-regular-price-group>
                  <span data-cart-item-regular-price>{{ item.original_line_price | money }}</span>
                </div>
              </td>
            </tr>
          {%- endfor -%}
        </tbody>
      </table>

      <div class="cart__footer">
        <div class="grid">
          {%- if section.settings.cart_notes_enable -%}
            <div class="grid__item medium-up--one-half cart-note">
              <label for="CartSpecialInstructions" class="cart-note__label small--text-center">{{ 'cart.general.note' | t }}</label>
              <textarea name="note" id="CartSpecialInstructions" class="cart-note__input" data-cart-notes>{{ cart.note }}</textarea>
            </div>
          {%- endif -%}
          <div class="grid__item text-right small--text-center{% if section.settings.cart_notes_enable %} medium-up--one-half{% endif %}">

            {%- assign cartDiscounts = 'template ' | split: ' ' -%}
            {%- if cart.cart_level_discount_applications.size > 0 -%}
              {%- assign cartDiscounts = cart.cart_level_discount_applications -%}
            {%- endif -%}
            <div{% if cart.cart_level_discount_applications.size == 0 %} class="hide"{% endif %} data-cart-discount-wrapper>
              <div class="order-discount-card-wrapper" data-cart-discount>
                {%- for discount_application in cartDiscounts -%}
                  <span class="order-discount order-discount--title order-discount--cart">
                    {% include 'icon-saletag' %}<span class="visually-hidden">{{ 'customer.order.discount' | t }}:</span><span data-cart-discount-title>{{- discount_application.title -}}</span>
                  </span>
                  <span class="order-discount order-discount--cart order-discount--cart-total">
                    -<span data-cart-discount-amount>{{ discount_application.total_allocated_amount | money }}</span>
                  </span>
                {%- endfor -%}
              </div>
            </div>

            <div class="cart-subtotal">
              <span class="cart-subtotal__title">{{ 'cart.general.subtotal' | t }}</span>
              <span class="cart-subtotal__price" data-cart-subtotal>{{ cart.total_price | money_with_currency }}</span>
            </div>

            {%- 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__shipping rte">{{ taxes_shipping_checkout }}</div>
            <div class="cart__buttons-container">
              <div class="cart__submit-controls">
                {%- unless section.settings.cart_ajax_enable -%}
                <input type="submit" name="update"
                  class="cart__submit btn btn--secondary"
                  value="{{ 'cart.general.update' | t }}">
                {%- endunless -%}
                <input type="submit" name="checkout"
                  class="cart__submit btn btn--small-wide"
                  value="{{ 'cart.general.checkout' | t }}">
              </div>

              <div class="cart__error-message-wrapper hide" role="alert" data-cart-error-message-wrapper>
                <span class="visually-hidden">{{ 'general.accessibility.error' | t }} </span>
                {% include 'icon-error' %}
                <span class="cart__error-message" data-cart-error-message></span>
              </div>

              {%- if additional_checkout_buttons -%}
                <div class="additional-checkout-buttons">{{ content_for_additional_checkout_buttons }}</div>
              {%- endif -%}
            </div>
          </div>
        </div>
      </div>
    </form>

    <p class="visually-hidden" data-cart-status
      aria-live="polite"
      role="status"
    ></p>
  </div>

  <div class="empty-page-content{% if cart.item_count > 0 %} hide{% endif %} text-center" data-empty-page-content>
    <h1>{{ 'cart.general.title' | t }}</h1>
    <p class="cart--empty-message">{{ 'cart.general.empty' | t }}</p>
    <div class="cookie-message">
      <p>{{ 'cart.general.cookies_required' | t }}</p>
    </div>
    <a href="{{ routes.root_url }}" class="btn btn--has-icon-after cart__continue-btn">{{ 'general.404.link' | t }}{% include 'icon-arrow-right' %}</a>
  </div>
</div>



{% schema %}
{
  "name": {
    "cs": "Stránka košíku",
    "da": "Side med indkøbskurv",
    "de": "Warenkorb-Seite",
    "en": "Cart page",
    "es": "Página del carrito",
    "fi": "Ostoskorisivu",
    "fr": "Page du panier",
    "it": "Pagina del carrello",
    "ja": "カートページ",
    "ko": "카트 페이지",
    "nb": "Handlekurvside",
    "nl": "Winkelwagenpagina",
    "pl": "Strona koszyka",
    "pt-BR": "Página do carrinho",
    "pt-PT": "Página do carrinho",
    "sv": "Varukorgssida",
    "th": "หน้าตะกร้าสินค้า",
    "tr": "Sepet sayfası",
    "vi": "Trang giỏ hàng",
    "zh-CN": "购物车页面",
    "zh-TW": "購物車頁面"
  },
  "settings": [
    {
      "type": "checkbox",
      "id": "cart_ajax_enable",
      "label": {
        "cs": "Povolit automatické aktualizace košíku",
        "da": "Aktivér automatisk opdatering af indkøbskurv",
        "de": "Automatische Warenkorbaktualisierungen aktivieren",
        "en": "Enable automatic cart updates",
        "es": "Habilitar las actualizaciones automáticas del carrito",
        "fi": "Ota automaattinen ostoskorin päivitykset käyttöön",
        "fr": "Activer les mises à jour automatiques",
        "it": "Abilita aggiornamenti automatici carrello",
        "ja": "自動カートの更新を有効にする",
        "ko": "자동 카트 업데이트 활성화하기",
        "nb": "Aktiver automatiske oppdateringer av handlekurven",
        "nl": "Automatische winkelwagen-updates inschakelen",
        "pl": "Włącz automatyczne aktualizacje koszyka",
        "pt-BR": "Permitir atualizações automáticas do carrinho",
        "pt-PT": "Ativar atualizações automáticas do carrinho",
        "sv": "Aktivera automatiska uppdateringar av varukorgen",
        "th": "เปิดใช้การอัปเดตตะกร้าสินค้าอัตโนมัติ",
        "tr": "Otomatik sepet güncellemelerini etkinleştir",
        "vi": "Bật cập nhật giỏ hàng tự động",
        "zh-CN": "启用购物车自动更新功能",
        "zh-TW": "啟用自動更新購物車"
      },
      "info": {
        "cs": "Aktualizuje košík hned, jak zákazník provede změny.",
        "da": "Opdaterer indkøbskurven, så snart kunden foretager ændringer",
        "de": "Aktualisiert den Warenkorb, sobald Kundenänderungen vorgenommen werden",
        "en": "Updates the cart as soon as customer changes are made",
        "es": "Actualiza el carrito tan pronto como el cliente realice cambios",
        "fi": "Päivittää ostoskorin heti, kun asiakkaan muutokset on tehty",
        "fr": "Mise à jour du panier dès que les modifications apportées aux clients ont été effectuées",
        "it": "Aggiorna il carrello appena il cliente apporta le modifiche",
        "ja": "お客様が変更されるとすぐにカートを更新します",
        "ko": "고객 변경 시 카트를 업데이트합니다.",
        "nb": "Oppdaterer handlekurven så snart kundens endringer er gjort",
        "nl": "De winkelwagen wordt bijgewerkt zodra de klant wijzigingen aanbrengt",
        "pl": "Aktualizuje koszyk, gdy tylko wprowadzone zostaną zmiany u klienta",
        "pt-BR": "Atualiza o carrinho assim que o cliente faz alterações",
        "pt-PT": "Atualiza o carrinho assim que o cliente faz alterações",
        "sv": "Uppdaterar varukorgen så snart kundändringar görs",
        "th": "อัปเดตตะกร้าสินค้าเมื่อลูกค้าได้ทำการเปลี่ยนแปลง",
        "tr": "Müşteri değişiklikleri yapıldıktan sonra sepet güncellenir",
        "vi": "Cập nhật giỏ hàng ngay khi khách hàng thay đổi",
        "zh-CN": "客户做出更改后立即更新购物车",
        "zh-TW": "在顧客進行變更時立即更新購物車"
      },
      "default": true
    },
    {
      "type": "checkbox",
      "id": "cart_notes_enable",
      "label": {
        "cs": "Povolit poznámky ke košíku",
        "da": "Aktivér bemærkninger til indkøbskurv",
        "de": "Warenkorbanmerkungen erlauben",
        "en": "Enable cart notes",
        "es": "Habilitar notas del carrito",
        "fi": "Ota tilauskommentit käyttöön",
        "fr": "Activer les notes de panier",
        "it": "Abilita note carrello",
        "ja": "カートメモを有効にする",
        "ko": "카트 참고 사항 사용",
        "nb": "Aktiver handlekurvmerknader",
        "nl": "Opmerkingen voor winkelwagen inschakelen",
        "pl": "Włącz uwagi dotyczące koszyka",
        "pt-BR": "Habilitar observações do carrinho",
        "pt-PT": "Ativar notas do carrinho",
        "sv": "Aktivera varukorgsmeddelanden",
        "th": "เปิดใช้หมายเหตุสำหรับตะกร้าสินค้า",
        "tr": "Sepet notlarını etkinleştir",
        "vi": "Bật ghi chú trong giỏ hàng",
        "zh-CN": "启用购物车备注",
        "zh-TW": "啟用購物車備註"
      },
      "default": false
    }
  ]
}
{% endschema %}

 

Need more help? Contact me here
oscarbear
Visitor
3 0 0

Hi alan15 how can i make it so that when i have multiple items in my cart that the cart attribute ( like in this post) do not keep showing up for every item added to cart. I circled it in yellow.

Capture.JPG

Alan15
Shopify Partner
145 27 66

HI @oscarbear .

If you only want to show the details once on the cart page try removing:

{% for tag in item.product.tags %}
{%- if tag == "Rescue Donation" -%} 

...

{% end if %}

{% endfor %}

from the code above.

Refer back to the earlier messages in this post, the last piece of code was to display the details for each item in the cart.

Need more help? Contact me here
kukalemon
Tourist
3 0 1

Hi Alan,

 

I am trying to create a dropdown option menu at checkout but Shopify doesn't allow me.

Do you know if there is anyway to do this without Shopify plus? 

 

Or if not, can I add a dropdown menu in the cart page?

 

Thanks a lot

Tina

KristiyanKK
Visitor
2 0 0

Hi Alan!
Is it possible the dropdown list to have search functionality so that the customer could type few characters and select what they want? In my case i would like to implement this for COD orders and having the ability for the customer to select the office they would like it delivered. 

Thanks!

kirbywhitman
Shopify Partner
1 0 0

Did you get this to work? I am looking to do the same thing so that a customer can choose from a long list (140+) of fundraiser options to be added as a cart attribute before proceeding to checkout.

AsahiV
Tourist
4 0 1

Hi! Is there a way to change the required message that comes when I create a required dropdown whit ui-elements.generator? 

 

Captura2.JPG

Alan15
Shopify Partner
145 27 66

You can try adding oninvalid="this.setCustomValidity('Add your customized message here')"  inside the <select> tag.

Something like this: <select required oninvalid="this.setCustomValidity('Add your customized message here')" id="" name="attributes[]">

Need more help? Contact me here
AsahiV
Tourist
4 0 1

Thank you! I tried this but did not work. I am new to coding so im not sure if i'm doing something wrong. This is how my code looks: 

<p class="cart-attribute__field">
<label class="promo">Promotora</label><br>
<select class="dropdown1" required class="required" oninvalid="this.setCustomValidity('¡Selecciona una promototra!')" id="promotora" name="attributes[Promotora]">
<option value="">Selecciona una promotora</option>
<option value="Ana"{% if cart.attributes["Promotora"] == "Ana" %} selected{% endif %}>Ana</option>
<option value="Alma"{% if cart.attributes["Promotora"] == "Alma" %} selected{% endif %}>Alma</option>
<option value="Alejandra"{% if cart.attributes["Promotora"] == "Alejandra" %} selected{% endif %}>Alejandra</option>
<option value="Rosario"{% if cart.attributes["Promotora"] == "Rosario" %} selected{% endif %}>Rosario</option>
<option value="Sandra"{% if cart.attributes["Promotora"] == "Sandra" %} selected{% endif %}>Sandra</option>
<option value="Ninguna"{% if cart.attributes["Promotora"] == "Ninguna" %} selected{% endif %}>Ninguna</option>
</

Alan15
Shopify Partner
145 27 66

This code below works for me. You also need to add oninput="setCustomValidity('')

This needs to be inside a form tag and the novalidate form attribute needs to be removed; the validation happens when you click the submit button, like Go to checkout, Add to Cart etc.

<p class="cart-attribute__field">
<label class="promo">Promotora</label><br>
<select class="dropdown1" required oninvalid="this.setCustomValidity('¡Selecciona una promototra!')" oninput="setCustomValidity('')" id="promotora" name="attributes[Promotora]">
<option selected value="">Selecciona una promotora</option>
<option value="Ana"{% if cart.attributes["Promotora"] == "Ana" %} selected{% endif %}>Ana</option>
<option value="Alma"{% if cart.attributes["Promotora"] == "Alma" %} selected{% endif %}>Alma</option>
<option value="Alejandra"{% if cart.attributes["Promotora"] == "Alejandra" %} selected{% endif %}>Alejandra</option>
<option value="Rosario"{% if cart.attributes["Promotora"] == "Rosario" %} selected{% endif %}>Rosario</option>
<option value="Sandra"{% if cart.attributes["Promotora"] == "Sandra" %} selected{% endif %}>Sandra</option>
<option value="Ninguna"{% if cart.attributes["Promotora"] == "Ninguna" %} selected{% endif %}>Ninguna</option>
</select>
</p>

Need more help? Contact me here
AsahiV
Tourist
4 0 1

Thank you! this works smoothly!! 

AsahiV
Tourist
4 0 1

Thanks again and I have one more question. I tried this code on the default templates of shopify and as I said yesterday it works smoothly, but when I tried on a template created on webflow and converted to shopify whit udesly it dosent works. ( It adds the dropdown but this line doesn't works: oninvalid="this.setCustomValidity('¡Selecciona una promototra!')" oninput="setCustomValidity('')"  I also removed de novalidate attribute form the form ) this is just on that template. Do you have any idea of why is not working? 

Thank you again.

Alan15
Shopify Partner
145 27 66

Hi

I've never used udesly or webflow, so I'm not sure. Probably you need to check the code generated by udesly and compare it to a regular Shopify template, see if they match up. Maybe someone else in the forum would have experience of this. Post a new question if you get know response on this thread.

Need more help? Contact me here