Announcement

Collapse
No announcement yet.

Datepicker - stopping it being editable and autofilled in Checkout Page 0

Collapse
X
 
  • Filter
  • Time
  • Show
Clear All
new posts

    Datepicker - stopping it being editable and autofilled in Checkout Page 0

    I am posting this here because I seem to be blocked from the Drilpine Forum - "You cannot read posts in this forum." "... do not have the permissions..."

    Anyway

    There is a post on the forum about stopping the User Defined date selected by Datepicker being editable in the Shopping Cart.

    My client uses the User Defined field in Checkout Page 0 for his Datepicker as he is selling perishable goods and only deapatches certain days.

    His problem was that people would select the available days on Datepicker then edit them as they wished, giving a day that delivery is no available on.

    Further when they placed a subsequent order the Datepicker field remembered a previously entered date and then continued with that even though it was not an available delivery day.

    I solved the problem by editing the Both Addresses User Defined Field thus - the delivery side is hidden as there are only one delivery date options regardless of delivery address:

    Code:
    <tr>
    <td>
    <actinic:block if="%3cactinic%3avariable%20name%3d%22InvoicePrompt014Required%22%20%2f%3e" /><span class="actrequired"></actinic:block>
    <Actinic:Variable Name="InvoicePrompt014"/>
    <actinic:block if="%3cactinic%3avariable%20name%3d%22InvoicePrompt014Required%22%20%2f%3e" />*</span></actinic:block>
    </td>
    <td id="nooneedits" class="InvoiceField">
    <input type="text" id="datepicker" name="INVOICEUSERDEFINED" size="20" maxlength="255" value="00-00-0000" >
    </td>
    <actinic:block if="%3cactinic%3avariable%20name%3d%22InvoicePrompt016Visible%22%20%2f%3e">
    <td id="nooneedits" class="DeliverField">
    <actinic:block if="%3cactinic%3avariable%20name%3d%22DeliverPrompt013Visible%22%20%2f%3e"><input type="hidden" id="datepicker" name="DELIVERUSERDEFINED" size="20" maxlength="255" value="00-00-0000" ></actinic:block>
    </td>
    </actinic:block>
    </tr>
    <script>
    $(function() {
    // disable input fields
    $( "#nooneedits input" ).prop('readonly', true);
    $( "#nooneedits input" ).attr("autocomplete", "off");
    });
    </script>
    Thank you.
    Jonathan Chappell
    Website Designer
    SellerDeck Website Designer
    Actinic to SellerDeck upgrades
    Graphicz Limited - www.graphicz.co.uk

    #2
    Hi, Jonathan

    I've checked again and the Datepicker forum is available to anyone and you don't need to be logged in to see it.
    Here's the post regarding Use on Checkout with General User Definable 3


    DatePicker can be activated on the checkout to work on one of the user definable fields. Here's how to use it on General User Definable 3.

    Go to Design / Text / Web Site (cont) / General Information / General User Definable 3. Check "Show" and set "Current Value" to something like "When do you want it to ship". Set "Required" as appropriate for your site.

    Go to Design / Library / Layouts / Checkout Prompt / General User Definable 3 RWD.
    Replace all code there with the following:

    Code:
    <fieldset>
    <div class="checkout-field-label">
    <label for="GENERALUSERDEFINED"><actinic:block if="%3cactinic%3avariable%20name%3d%22GeneralPrompt002Required%22%20%2f%3e"><span class="actrequired"></actinic:block><Actinic:Variable Name="GeneralPrompt002"/><actinic:block if="%3cactinic%3avariable%20name%3d%22GeneralPrompt002Required%22%20%2f%3e">* </span></actinic:block></label>
    </div>
    <div class="checkout-field-input">
    <input class="dpdate" readonly type="text" name="GENERALUSERDEFINED" size="40" maxlength="255" value="<Actinic:Variable Name="GeneralUserDefined"/>"
    data-dformat="<actinic:variable name="DatepickerDateFormat" />"
    data-sdate="<actinic:variable name="DatepickerStartDate" />"
    data-edate="<actinic:variable name="DatepickerEndDate" />"
    />
    </div>
    </fieldset>


    This will use the settings in Settings / Site Options / Prompts / DatePicker.

    Tested on SD 2018.
    Norman - www.drillpine.biz
    Edinburgh, U K / Bitez, Turkey

    Comment


      #3
      Thank you Norman, hope you are OK? As you commented publicly I will post my reply here in case it helps anyone else. Please note I have tried different browsers, different IP address via IPN and a new identity and always the same result:



      Click image for larger version

Name:	drillpineforumnogo.jpg
Views:	173
Size:	73.9 KB
ID:	552489
      Jonathan Chappell
      Website Designer
      SellerDeck Website Designer
      Actinic to SellerDeck upgrades
      Graphicz Limited - www.graphicz.co.uk

      Comment


        #4
        Very weird Jonathan. Is it only Datepicker that you are having trouble with?
        Norman - www.drillpine.biz
        Edinburgh, U K / Bitez, Turkey

        Comment


          #5
          Indeed it is only the Datepicker section. I have clicked on a few other sections and they all let me post.
          Jonathan Chappell
          Website Designer
          SellerDeck Website Designer
          Actinic to SellerDeck upgrades
          Graphicz Limited - www.graphicz.co.uk

          Comment


            #6
            If it helps - I can view any of the forums without logging in.

            Comment


              #7
              Client running Datepicker in v18 Swift v2 reports that the Datepicker date appears in the Shopping Cart as a Select field with options and these ARE selectable by the customer despite the variable 'DatePickerNoCartEdit' being set to 'True'.

              Click image for larger version

Name:	datepickerselect.jpg
Views:	48
Size:	80.8 KB
ID:	556454

              Fortunately https://stackoverflow.com comes up with the solutions.

              Give the containing form an ID: in 'View Cart Bulk Area RWD'
              Code:
              <form id="checkoutOform" method="post" action="<actinic:variable name="OnlineScriptURL" value="Cart Manager Script URL" />" <actinic:variable value="Google Analytics Form Tag" name="GoogleAnalyticsMarkup" /> onsubmit="return ValidateCartNameDetails();">
              I made up checkoutOform - you can make up your own if you wish.

              In 'Cart Product Details With Thumbnails RWD' find around line 51 '<Actinic:XMLTEMPLATE NAME="DateLine">'

              Code:
              <Actinic:XMLTEMPLATE NAME="DateLine">
              <div class="item"></div>
              <div class="item">
              <Actinic:Variable Name="PromptLabel"/>
              <Actinic:Variable Name="PromptValue"/>
              </div>
              </Actinic:XMLTEMPLATE>
              Change it so it looks like:

              Code:
              <Actinic:XMLTEMPLATE NAME="DateLine">
              <div class="item"></div>
              <div id="nooneedits" class="item">
              <Actinic:Variable Name="PromptLabel"/>
              <Actinic:Variable Name="PromptValue"/>
              <style>
              #nooneedits option {display:none;}
              #nooneedits select::-ms-expand {
              display: none;
              }
              #nooneedits select {
              -webkit-appearance: none;
              -moz-appearance: none;
              text-indent: 0;
              /*text-overflow: '';*/
              cursor:none;
              border: 0px solid #fff;
              padding: 0;
              background:none;
              }
              #nooneedits {border-bottom: 1px solid #808080;}
              </style>
              <script>
              $(function() {
              // disable select fields
              $('#nooneedits option:not(:selected)').attr('disabled', 'disabled')
              
              $('#checkoutOform').on('submit', function() {
              $('#nooneedits').prop('disabled', false);
              });
              $('#nooneedits select').change(function(){
              var text = $(this).find('option:selected').text()
              var $aux = $('<select/>').append($('<option/>').text(text))
              $(this).after($aux)
              $(this).width($aux.width())
              $aux.remove()
              }).change()
              });
              </script>
              </div>
              </Actinic:XMLTEMPLATE>
              The css removes the drop down arrow and the cursor and the border and background styling.

              The javascript does two things:
              • Makes the non selected options disabled then removes the disabled tag on submit so the values get passed on.
              • Makes the width of the select box fit the content
              Click image for larger version

Name:	datepickerselectfixed.jpg
Views:	30
Size:	69.2 KB
ID:	556455

              And there you go. Grateful thanks to the contributors on:

              https://stackoverflow.com/questions/...select-element
              and
              https://stackoverflow.com/questions/...lect-an-option

              Any issues please reply here. Posted in good faith without warranty.



              Jonathan Chappell
              Website Designer
              SellerDeck Website Designer
              Actinic to SellerDeck upgrades
              Graphicz Limited - www.graphicz.co.uk

              Comment

              Working...
              X