Cart - Use cart attributes to collect more information

TyW
Community Manager
Community Manager
413 40 1107

Cart attributes are custom form fields that let you collect additional information from your customers on the cart page. The information that you collect will display in a note on the customer's order in the admin. For example, if you want to ask customers how they heard about your store, then you can add an How did you hear about us? drop-down selection question to the cart.

 

Tip: Cart attributes are different from order notes and line item properties. Order notes, which are available in every free Shopify theme, let you capture special instructions on how to prepare and deliver an order. Line item properties are used to record customization information about specific products in an order. Line item properties are specified directly on the product page.

Sectioned themes and non-sectioned themes

 

The steps for this tutorial differ depending on whether you are using a sectioned or a non-sectioned theme. A sectioned theme is a newer theme that lets you drag and drop to arrange the layout of your store's pages.

 

To figure out whether your theme supports sections, go to the theme's Edit code page. If there are files in the Sections directory, you are using a sectioned theme. Non-sectioned themes were released before October 2016, and do not have files in the Sections directory.

 

If you are using a sectioned theme, then click the Sectioned themes button and follow the instructions. If you are using an older, non-sectioned theme, then click the Non-sectioned themes button and follow the instructions.

 

 

TyW | Online Community Manager @ Shopify 
 - Was my reply helpful? Click Like to let me know! 
 - Was your question answered? Mark it as an Accepted Solution
 - To learn more visit the Shopify Help Center or the Shopify Blog

Replies 44 (44)
antonio111
New Member
1 0 0

Hi all,

I am having the same issue described in this thread on "not capturing and displaying cart information in the notification mails and order". This actually occurs rarely, like once every15-20 orders, but it is still painfully I have automated the capturing of order delivery date into order tag.

I will report here how I have included a datepicker to capture order delivery date. I hope it could be of help and maybe you could give me a hint on why sometimes the date is not captured in the orders.

In the Snippet folder, the delivery-date.liquid file contains:

  {{ '//code.jquery.com/ui/1.9.2/themes/base/jquery-ui.css' | stylesheet_tag }}
 
 
  <div style="width:300px; clear:both;">
    <p>
      <label for="date">Choose delivery date:</label>
      <input required id="date" type="text" readonly='true' name="attributes[date]" value="{{ cart.attributes.date }}" />
      <span style="display:block" class="instructions"> We do not ship on Sundays and holidays.</span>
    </p>
  </div>
 
  <script>
    window.onload = function() {
      if (window.jQuery) {
        let $ = window.jQuery;
        
        var unavailableDates = ["19/03/2021", "01/04/2021", "02/04/2021", "03/04/2021", "01/05/2021", "03/05/2021", "04/05/2021", "15/05/2021", "17/05/2021", "12/10/2021", "01/11/2021", "09/11/2021", "06/12/2021", "8/12/2021", "25/12/2021"];
     
        function noSundaysOrHolidays(date) {
          var day = date.getDay();
          var showDay = true;
          
          if (day != 0) {
            var string = jQuery.datepicker.formatDate('dd/mm/yy', date);
            showDay= (unavailableDates.indexOf(string) == -1);
            return [showDay];
          } else {
            return [day != 0, ''];
          }
        }
        
        $(function() {
          $("#date").val('');
          $("#date").datepicker({
            firstDay: 1,
            minDate: +2, 
            maxDate: '+60',
            dateFormat: 'DD d MM yy' ,
 
            beforeShowDay: noSundaysOrHolidays,
            beforeShow : function(){
var dateTime = new Date();
var hour = dateTime.getHours();
                var day = dateTime.getDay();
if(hour>=18){
$(this).datepicker( "option", "minDate", "+3" );
}
                    if(day == 5 && hour>=18){
$(this).datepicker( "option", "minDate", "+4" );
}
            }
          });
        }); 
 
      }
    }
    
  </script>

So, the delivery date is captured in the variable attributes[date].  The delivery-date.liquid snippet goes into the cart-template.liquid --> {% render 'delivery-date' %}

The required declaration did not prevent customers from proceeding to checkout without having selected a date. In order to cope with this issue I have added to file theme.js (at the end of the file) the following code:

// This code makes mandatory the choice of delivery date
$(document).ready(function() {
$('body').on('click', '[name="checkout"], [name="goto_pp"], [name="goto_gc"]', function() {
      if ($('#date').val() == '' || $('#date').val() === undefined)
      {
           alert("You must choose one of the available dates for delivery.");
           return false;
       } else {
           $(this).submit();
       }
});
});

In the Notification section (in Settings), I have added the following to Order Confirmation template:

<h4>Fecha de entrega:</h4>
{{ attributes.date }}

So given the previous steps, in Order notes an "additional details" section appears where the date (and delivery time even though I have not included it in the code above).

antonio111_0-1621843551989.png

However, as I said before, once every 15-20 orders this information does not appear and I do not have an explanation for this.

Anyone has a clue or could give some help?

Kind regards!

 

Jason
Shopify Expert
10873 190 2178

Ignoring the code for the moment, first run through the customer journey for purchasing.


Do you have accelerated gateways in place that might skip your custom data logic? 
Do you have the option to buy directly from the product page?

Those could be ways to quickly skip your custom logic.

★ I jump on these forums in my free time to help and share some insights. Not looking to be hired, and not looking for work. http://freakdesign.com.au ★
CescaTether1
New Member
1 0 0

Matt, did you find an answer to this? I too have put in the code, the drop down box is working but I can't see where I can find what customers are selecting? Thank you.

jrc8173
Shopify Partner
3 0 0

Change the input from attributes[yourname] to properties[yourname] and {{cart.attributes[yourname]}} to {{properties[yourname]}} this will show up in AJAX and Regular carts make sure it's added inside the product form and for ease of use above add to cart input.

If you are still not seeing it in AJAX cart make sure your ajax cart template has the following code 

                 {{#properties}}
                    {{#each this}}
                      {{#if this}}
                        <span class="someclass">{{@key}}: {{this}}&nbsp;<br></span>
                      {{/if}}
                    {{/each}}
                  {{/properties}}

 and that the theme.js file has some variation of this var someVariable = cartItem.properties  

 

hope8
New Member
1 0 0

Hello! When a customer selects a shipping date it shows up as "Shipping-Date" on the shopify order. Is there a way to edit the text to say "Delivery-Date" instead?

Screen Shot 2022-04-06 at 3.50.29 PM.png