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

English Shopify Shopify Design
1

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 -%}

Please choose a school to support with your purchase:


{%- 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

2

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

3

Shopify’s ui generator might help you out:

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

4

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 -%}
            
                            

  

  

            

          {%- endif -%}
5

Hi, I simplified the select to this:

Then I removed the novalidate attribute in the tag

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.

6

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

Captura2.JPG
Captura2.JPG281×133 6.32 KB

7

You can try adding oninvalid=“this.setCustomValidity(‘Add your customized message here’)” inside the

1 Like
8

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:

Promotora

9

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.

Promotora

1 Like
10

Thank you! this works smoothly!!

1 Like
11

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.

12

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.

13

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" -%} 

{%- endif -%}
14

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" -%} 
        
                        
                        

                        

                        
                        

                        

                    
                    {% endif %}
                  {% endfor %}
15

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?

16

@Coralee

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

17

@Alan15

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

18

@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:


  

    

      # {{ 'cart.general.title' | t }}
      
        {{ 'cart.general.continue_shopping' | t }}
      
    

    

    

    

  

  
    # {{ 'cart.general.title' | t }}
    

{{ 'cart.general.empty' | t }}

    
      

{{ 'cart.general.cookies_required' | t }}

    

    {{ 'general.404.link' | t }}{% include 'icon-arrow-right' %}
  

{% 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 %}
19

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
Capture.JPG1345×732 72.3 KB

20

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.