Changing Minimal Theme: Cart Notes Button to Always Pressed

Solved
ConsumerProduct
Excursionist
18 0 3

I'm having a hard time changing the Minimal theme to fit my needs. In my checkout cart, I need the customers to be able to leave a note for customization. I do not want them to have to click on a Text Button before seeing the note box. Is there any way around this?

I put this bit of code at the end of my CSS but it still requires the button press.

.input-full {
border: 1px solid black;
}

 

This is the troubled section...

<button type="button" class="text-link cart__note-add">
CLICK HERE TO INSERT YOUR CUSTOM TEXT
</button>

0 Likes
Propero
Shopify Partner
685 80 117

This is an accepted solution.

@ConsumerProduct ,

You can remove the entire button code and replace that with this and check

<label for="CartNote">Special instructions</label>
<textarea name="note" id="CartNote">{{ cart.note }}</textarea>
- Was my reply helpful? Click Like to let me know!
- Was your question answered? Click Accept as Solution

To hire: email us at shopify@propero.in

Skype : lokendra.panwar1
ConsumerProduct
Excursionist
18 0 3

Thank you so much for your quick assistance! I really appreciate it! 

0 Likes
Kporter
New Member
5 0 0

Hello, 
Can you assist me in placing this code in the correct spot? I'm assuming it will need to be placed in the cart.liquid template but I'm not sure where. I have the "cart notes" enabled in my theme. Thanks!

0 Likes
Propero
Shopify Partner
685 80 117

Please paste the above code where the 'cart note' appears, you may do some trial and error and see the output for the right placement. Other wise just paste the code here and we can suggest line number

 

- Was my reply helpful? Click Like to let me know!
- Was your question answered? Click Accept as Solution

To hire: email us at shopify@propero.in

Skype : lokendra.panwar1
0 Likes
Raisa_27
New Member
7 0 0

@Propero Can you please advise where to put the code. Thank you! 

{% comment %}

This is your /cart template.

{% endcomment %}
<div id="CartSection" data-section-id="{{ section.id }}" data-section-type="cart-template" data-notes-enable="{{ section.settings.cart_notes_enable }}">
{% if cart.item_count > 0 %}

<form action="/cart" method="post" novalidate class="cart">

<div class="section-header">
<h1 class="section-header__title">{{ 'cart.general.title' | t }}</h1>
</div>

<div class="cart__row medium-down--hide cart__header-labels">
<div class="grid--full">
<div class="grid__item post-large--one-half push--post-large--one-half">
<div class="grid--full">
<div class="grid__item one-third medium-down--one-third">
<span class="h4">{{ 'cart.label.price' | t }}</span>
</div>
<div class="grid__item one-third medium-down--one-third text-center">
<span class="h4">{{ 'cart.label.quantity' | t }}</span>
</div>
<div class="grid__item one-third medium-down--one-third text-right">
<span class="h4">{{ 'cart.label.total' | t }}</span>
</div>
</div>
</div>
</div>
</div>

{% comment %}
Loop through products in the cart
{% endcomment %}
{% for item in cart.items %}
<div class="cart__row">
<div class="grid--full cart__row--table-large">

<div class="grid__item post-large--one-half">
<div class="grid">

<div class="grid__item one-third">
<a href="{{ item.url | within: collections.all }}">
{% unless item.image == blank %}
{% capture img_id %}ProductImage-{{ item.id }}{% endcapture %}
{% capture wrapper_id %}ProductImageWrapper-{{ item.id }}{% endcapture %}
{%- assign img_url = item.image | img_url: '1x1' | replace: '_1x1.', '_{width}x.' -%}
{% include 'image-style' with image: item.image, width: 210, height: 245, wrapper_id: wrapper_id, img_id: img_id %}
<div id="{{ wrapper_id }}" class="cart__image-wrapper supports-js">
<div style="padding-top:{{ 1 | divided_by: item.image.aspect_ratio | times: 100}}%;">
<img id="{{ img_id }}"
class="cart__image lazyload"
data-src="{{ img_url }}"
data-widths="[40, 65, 90, 120, 150, 180, 360, 480, 600]"
data-aspectratio="{{ item.image.aspect_ratio }}"
data-sizes="auto"
alt="{{ item.title | escape }}">
</div>
</div>
{% else %}
<p><img src="{{ item | img_url: 'medium' }}" alt="{{ item.title | escape }}"></p>
{% endunless %}

<noscript>
<p><img src="{{ item | img_url: 'medium' }}" alt="{{ item.title | escape }}"></p>
</noscript>
</a>
</div>

<div class="grid__item two-thirds">
<a href="{{ item.url }}" class="h5">
{{ item.product.title }}
</a>
{% unless item.variant.title contains 'Default' %}
<br>
<small>{{ item.variant.title }}</small>
{% endunless %}

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

For more info on line item properties, visit:
- http://docs.shopify.com/support/your-store/products/how-do-I-collect-additional-information-on-the-p...
{% endcomment %}
{% assign propertySize = item.properties | size %}
{% if propertySize > 0 %}
{% for p in item.properties %}
{% assign first_character_in_key = p.first | truncate: 1, '' %}
{% unless p.last == blank or first_character_in_key == '_' %}
<br>
{{ p.first }}:

{% comment %}
Check if there was an uploaded file associated
{% endcomment %}
{% if p.last contains '/uploads/' %}
<a href="{{ p.last }}">{{ p.last | split: '/' | last }}</a>
{% else %}
{{ p.last }}
{% endif %}

{% endunless %}
{% endfor %}
{% endif %}

<a href="/cart/change?line={{ forloop.index }}&amp;quantity=0" class="cart__remove">
<small>{{ 'cart.general.remove' | t }}</small>
</a>
</div>

</div>
</div>

<div class="grid__item post-large--one-half">
<div class="grid--full cart__row--table-large">

<div class="grid__item one-third">
<span class="cart__mini-labels">{{ 'cart.label.price' | t }}</span>
<span class="h5">{{ item.price | money }}</span>
</div>

<div class="grid__item one-third text-center">
<label for="updates_{{ item.key }}" class="cart__mini-labels">{{ 'cart.label.quantity' | t }}</label>
<input type="number" class="cart__quantity-selector" name="updates[]" id="updates_{{ item.key }}" value="{{ item.quantity }}" min="0" aria-label="{{ 'cart.label.quantity' | t }}">
</div>

<div class="grid__item one-third text-right">
<span class="cart__mini-labels">{{ 'cart.label.total' | t }}</span>
<span class="h5">
{% if item.original_line_price != item.line_price %}
<small class="cart-item__original-price"><s>{{ item.original_line_price | money }}</s></small>
{% endif %}
{{ item.line_price | money }}
</span>
{% if item.original_line_price != item.line_price %}
{% for discount in item.discounts %}
<small class="cart-item__discount">
{{ discount.title }}
</small>
{% endfor %}
{% endif %}
</div>

</div>
</div>

</div>
</div>
{% endfor %}

<div class="cart__row">
<div class="grid">
{% comment %}
Optional, add a textarea for special notes
- Your theme settings can turn this on or off. Default is on.
- Make sure you have name="note" for the message to be submitted properly
{% endcomment %}
{% if section.settings.cart_notes_enable %}
{% assign noteSize = cart.note | size %}
<div class="grid__item post-large--five-twelfths">
<button type="button" class="text-link cart__note-add{% if noteSize > 0 %} is-hidden{% endif %}">
{{ 'cart.label.add_note' | t }}
</button>
<div class="cart__note{% if noteSize > 0 %} is-active{% endif %}">
<label for="CartSpecialInstructions">{{ 'cart.general.note' | t }}</label>
<textarea name="note" class="input-full" id="CartSpecialInstructions">{{ cart.note }}</textarea>
</div>
</div>
{% endif %}
<div class="grid__item text-right{% if section.settings.cart_notes_enable %} post-large--seven-twelfths{% endif %}">
<p class="cart__subtotal">
<span class="cart__subtotal-title">{{ 'cart.general.subtotal' | t }}</span>
<span class="h5 cart__subtotal-price">{{ cart.total_price | money }}</span>
{% if cart.total_discounts > 0 %}
{% assign savings = cart.total_discounts | money %}
<small class="cart-subtotal__savings">{{ 'cart.general.savings_html' | t: price: savings }}</small>
{% endif %}
</p>

{%- capture taxes_shipping_checkout -%}
{%- if shop.taxes_included and shop.shipping_policy.body != blank -%}
{{ 'cart.general.taxes_included_and_shipping_policy_html' | t: link: shop.shipping_policy.url }}
{%- elsif shop.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 -%}

<p class="cart__policies"><em>{{ taxes_shipping_checkout }}</em></p>

{% comment %}
Continue shopping button
{% endcomment %}
<a class="btn btn--secondary" href="/collections/all">{{ 'cart.general.continue_shopping' | t }}</a>

<button type="submit" name="update" class="btn btn--secondary update-cart">{{ 'cart.general.update' | t }}</button>
<button type="submit" name="checkout" class="btn">{{ 'cart.general.checkout' | t }}</button>

{% if additional_checkout_buttons %}
<div class="cart__additional_checkout">{{ content_for_additional_checkout_buttons }}</div>
{% endif %}
</div>
</div>

</div>

</form>

{% else %}
{% comment %}
The cart is empty
{% endcomment %}
<h2>{{ 'cart.general.title' | t }}</h2>
<p class="cart--empty-message">{{ 'cart.general.empty' | t }}</p>
<div class="cart--cookie-message">
<p>{{ 'cart.general.cookies_required' | t }}</p>
</div>
<p class="cart__continue-btn">{{ 'cart.general.continue_browsing_html' | t }}</p>
{% endif %}
</div>

 

{% schema %}
{
"name": {
"de": "Warenkorb-Seite",
"en": "Cart page",
"es": "Página de carrito",
"fr": "Page du panier",
"it": "Pagina del carrello",
"ja": "カートページ",
"pt-BR": "Página do carrinho"
},
"settings": [
{
"type": "checkbox",
"id": "cart_notes_enable",
"label": {
"de": "Bestellhinweis aktivieren",
"en": "Enable order notes",
"es": "Habilitar notas de pedido",
"fr": "Activer les notes de commande",
"it": "Abilita le note sugli ordini",
"ja": "注文メモを有効にする",
"pt-BR": "Habilite observações sobre o pedido"
}
}
]
}
{% endschema %}

0 Likes