Cart attributes works sometimes, and sometimes not...

silver1
New Member
6 0 0

Hi,

I am using cart attributes to collect additional information from my customers.

What puzzles me is that on some of the orders that come in, all the attributes gets pushed through to my email confirmation and my order pages on shopify -  and other times - it doesn't.... I even have a required text field in my cart and it still only comes through sometimes...

I think the problem is the quantity field I'm removing...

I have to remove the Quantity field from my cart, because I am selling packages of 100 CDs, 200 CDs, etc. and the price is different depending on quantity, so my customers got confused when they picked a quantity in the product dropdowns and were then again asked to put in quantity in the cart. (Does this make sense?)

Here is the code I've altered using CSS to hide the Quantity field and headline in the cart table:

 

<table class="items">
        <colgroup>
          <col class="checkout-image" />
          <col class="checkout-info" />
          <col class="checkout-price" />
          <col class="checkout-quantity" style="display:none" />
          <col class="checkout-totals" />
          <col class="checkout-delete" />
        </colgroup>
    
        <thead>
          <tr class="top-labels">
            <th class="empty">&nbsp;</th>
            <th>Item</th>
            <th>Price</th>
            <th style="display:none">Quantity</th>
            <th>Total</th>
            <th class="empty">&nbsp;</th>
          </tr>
        </thead>

And I put a display:none in here as well.

 

{% for item in cart.items %}
          <tr class="item {{ item.product.handle }}">
            <td>
              <a href="{{ item.product.url }}">
                <img src="{{ item.product.featured_image | product_img_url: 'thumb' }}"  alt="{{ item.product.title }}" />
              </a>
            </td>
            <td> <a href="{{ item.product.url }}">{{ item.title }}</a></td>
            <td>{{ item.price | money }}</td>            
            <td style="display:none"> <input class="text quantity" type="text" size="4" id="updates_{{ item.id }}" name="updates[{{ item.id }}]" value="{{ item.quantity }}" class="replace" /> </td>
            <td>{{ item.line_price | money }}</td>
            <td><a class="btn remove-from-cart" href="/cart/change?id={{ item.id }}&quantity=0">Remove</a></td>
          </tr>
          {% endfor %}

 

What do I have to do to make this work? Attributes need to come through all the way to my orders and the "Quantity" option needs to be removed from the cart.

Thank you.

-silver

http://www.atomicdisc.com

 

 

0 Likes
francesmarie
New Member
2 0 0

Hello! Is there someone who fixed this? My code stopped working on mobile but is working on desktop.

Shopify support wasn't able to help with this. I followed this tutorial: https://shopify.dev/tutorials/customize-theme-add-date-picker-for-delivery-dates

Please help! Thank you very much 

 

  {{ '//code.jquery.com/ui/1.9.2/themes/base/jquery-ui.css' | stylesheet_tag }}
  <script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.9.2/jquery-ui.min.js" defer="defer"></script>
  <script>
  $(document).ready(function(){
      $(document).on('change', 'input[type="radio"]', function(e){
          e.preventDefault();
          var selected_radio_value = $("input[name=optradiomobile]:checked").val();
          if(selected_radio_value == 'first')
  	    {
            	$('#scheduleDivMobile').css('display', 'none');
                $('#scheduleDivMobile :input').attr("disabled", "disabled");
                $(".cart--terms :input").removeAttr("disabled");
            	$(".cart--terms label").css("color", "black");
                $(".cart--terms label").css("color", "black");
                $("#emptywarningmobile").css("display","none");
  		}
          else if(selected_radio_value == 'second')
        {
            $('#scheduleDivMobile').css("display", "block");
            $('#scheduleDivMobile :input').removeAttr("disabled");
            $('#scheduleDivMobile :input').required = true;
          
          	 $(document).on('change', '#scheduleDivMobile :input', function(e){
            var valueDate = document.getElementById("dateMobile").value;
            var valueTime = document.getElementById("timeMobile").value;
            if(!valueDate || !valueTime){
              $(".cart--terms :input").attr("disabled", "disabled");
             // $(".cart--terms label").css("color", "red"); 
              $("#emptywarningmobile").css("display","block");
              
            }else if(valueDate && valueTime){
               $(".cart--terms :input").removeAttr("disabled");
               $(".cart--terms label").css("color", "black");
               $("#emptywarningmobile").css("display","none");
            	
            }
          });
          
          var valueDate = document.getElementById("dateMobile").value;
          var valueTime = document.getElementById("timeMobile").value;
            if(!valueDate || !valueTime){
              $(".cart--terms :input").attr("disabled", "disabled");
             // $(".cart--terms label").css("color", "red");
              $("#emptywarningmobile").css("display","block");
              
            }else if(valueDate && valueTime){
               $(".cart--terms :input").removeAttr("disabled");
               $(".cart--terms label").css("color", "black");
               $("#emptywarningmobile").css("display","none");
            }
        }
        
      });
    
    $(document).on('change', '#timeMobile', function(e){
         // e.preventDefault();
          var minTime = document.getElementById("timeMobile").min;
          var maxTime = document.getElementById("timeMobile").max;
          var inputtedTime = document.getElementById("timeMobile").value;
      if(inputtedTime < minTime || inputtedTime > maxTime){
        $("#warning").css("display", "block");
        document.getElementById("timeMobile").value = "";
      }else{
        $("#warning").css("display", "none");
      }
    });
    
    var today = new Date();
    var maxDate = new Date();
    var dd = today.getDate();
    var dd2 = maxDate.getDate()+14;
    var mm = today.getMonth()+1; 
    var mm2 = maxDate.getMonth()+1;
    var yyyy = today.getFullYear();
    if(dd2 > 31){
      dd2 = dd2 - 31;
      mm2 = mm2 + 1;
    }
     if(dd<10){
            dd='0'+dd
        } 
     if(mm<10){
            mm='0'+mm
     } 
     if(dd2<10){
            dd2='0'+dd2
        } 
     if(mm2<10){
            mm2='0'+mm2
     } 

		today = yyyy+'-'+mm+'-'+dd;
        maxDate = yyyy+'-'+mm2+'-'+dd2;
    document.getElementById("dateMobile").setAttribute("min", today);
    document.getElementById("dateMobile").setAttribute("max", maxDate);
  });
</script>
  <br>
  <div style="width: 100%; margin: auto;">
    <input type="radio" name="optradiomobile" value="first" checked>Deliver ASAP&nbsp;&nbsp;&nbsp;</input>
    <input type="radio" name="optradiomobile" value="second">Schedule Delivery</input>
  </div>
  <div style="width:auto; float:right; margin: auto; padding: auto; display: none;" id="scheduleDivMobile">
    <br>
    <p>
       <label for="date" style="text-align: center;">All scheduled orders need to be prepaid via credit card and are non-refundable.</label> <br>
        <span>
        <label for="dateMobile">Delivery Date: </label>
        <input id="dateMobile" type="date" name="attributes[Scheduled Date Mobile]" placeholder="MM/DD/YYYY" value="{{ cart.attributes.date }}" style="width:90%; overflow: hidden;" disabled/>
      <br>  
      <label for="timeMobile">Delivery Time: (10:00AM to 9:00PM only) </label>
        <input id="timeMobile" type="time" name="attributes[Scheduled Time Mobile]" min="10:00" max="21:00" value="{{ cart.attributes.date }}" style="width:90%; overflow: hidden;" disabled/>
      </span>
    </p>
    <p id="warning" style="color: red; display: none;">Invalid time. Please enter again.</p> <br>
     <p id="emptywarningmobile" style="display: none; color: red;"> Please enter the date and time of the delivery before proceeding.</p>  <br>
  </div>
  <script>
    window.onload = function() {
      if (window.jQuery) {
        let $ = window.jQuery;

        $(function() {
          $("#date").datepicker({
            minDate: +0, 
            maxDate: '+2W',
          });
        });
      }
    }
  </script>

 

 

0 Likes