Cart - Use cart attributes to collect more information

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!

 

0 Likes
Jason
Shopify Expert
10414 164 2060

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 to help and share some insights. Not looking to be hired, and not looking for work.

Don't hand out staff invites or give admin password to forum members unless absolutely needed. In most cases the help you need can be handled without that.


★ http://freakdesign.com.au ★
0 Likes
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.

0 Likes
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  

 

0 Likes