shrineofourladyoftheisland

22 hours ago, creedon said:

No worries.

Add the following to Settings > Advanced > Code Injection > HEADER.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

<script src="https://d1j8mu9lowy9zf.cloudfront.net/twcsl/0.1d8/twcsl.js"></script>

Add the following to Store Settings > Advanced > Page Header Code Injection for the store page.

<script>

  $( ( ) => {
  
    /*
    
      set max length for store product detail named form and labeled text fields
      
      Version       : 0.1d0
      
      SS Version    : 7.1
      
      Dependancies  : jQuery
                      
                      twcsl
      
      By            : Thomas Creedon < http://www.tomsWeb.consulting/ >
      
      */
      
    const formName = 'Inscription Form';
    
    const formFieldLabels = [
    
      /*
      
        the format of each line is a form text field label. in this context text
        field means either an input tag with type of text or textarea tag
        
        following is an example line. copy the example line below and paste
        after the example line. remove '// ' at beginning of pasted line. repeat
        for as many form field labels as you want to set the max character
        length
        
        */
        
      // '[enter form text field label here between single quotes]',
      
      'Line 1:',
      'Line 2:',
      'Line 3:',
      'Line 4: (ONLY for big bricks)',
      'Line 5: (ONLY for big bricks)',
      
      ];
      
    const skuMaxLengthMap = {
    
      /*
      
        the format of each line is a product sku and a max character length for
        for named text form fields
        
        following is an example line. copy the example line below and paste
        after the example line. remove '// ' at beginning of pasted line. repeat
        for as many product skus you want to set the max character length for
        named text form fields
        
        */
        
      // '[enter product sku here between single quotes]' : [enter text field max character length here between single quotes],
      
      'L40a' : 15,
      'L40b' : 20,
      
      };
      
    // do not change anything below, there be the borg here
    
    if ( ! twcsl.storePage.isDetail ) return; // bail if not detail
    
    const sku = Static.SQUARESPACE_CONTEXT.product.variants [ 0 ].sku;
    
    // bail if sku not defined
    
    if ( ! skuMaxLengthMap.hasOwnProperty ( sku ) ) return;
    
    // bail if no mutation observer available
    
    if ( ! ( 'MutationObserver' in window ) ) return;
    
    // begin get form field label
    
      var getFormFieldLabel = $field => {
      
        const title = $( '.title', $field )
        
          .clone ( )
          
          .children ( )
          
          .remove ( )
          
          .end ( )
          
          .text ( )
          
          .trim ( );
          
        return title;
        
        }
        
      // end get form field label
      
    // begin get form field text labeled
    
      var getFormFieldTextLabeled = ( label, $form ) => {
      
        let $it = undefined;
        
        $( '.text, .textarea', $form ).each ( function ( ) {
        
          const $this = $( this );
          
          const title = getFormFieldLabel ( $this );
          
          if ( title != label ) return true; // bail if 
          
          $it = $( 'input, textarea', $this );
          
          return false;
          
          } );
          
        return $it;
        
        }
        
      // end get form field text labeled
      
    const observer = new MutationObserver ( function ( mutations ) {
    
      $.each ( mutations, function ( ) {
      
        if ( ! this.addedNodes.length ) return; // bail if no nodes added
        
        const $e = $( this.addedNodes [ 0 ] );
        
        // bail if not dialog
        
        if ( ! $e.hasClass ( 'sqs-modal-lightbox' ) ) return;
        
        // bail if not form name
        
        if ( $( '.form-title', $e ).text ( ) != formName ) return;
        
        const $form = $( 'form', $e );
        
        let selectedVariant = $( '.product-variants' )
        
          .attr ( 'data-selected-variant' );
          
        selectedVariant = JSON.parse ( selectedVariant );
        
        const sku = selectedVariant.sku;
        
        if ( ! ( sku in skuMaxLengthMap ) ) return; // bail sku not defined
        
        $.each ( formFieldLabels, function ( i, fieldLabel ) {
        
          const $text = getFormFieldTextLabeled ( fieldLabel, $form );
          
          if ( $text === undefined ) return true; // continue if no element
          
          const maxLength = skuMaxLengthMap [ sku ];
          
          $text.attr ( 'maxLength', maxLength );
          
          let value = $text
          
            .val ( )
            
            .slice ( 0, maxLength );
            
          $text.val ( value );
          
          } ); // end each formFieldLabels
          
        } ); // end each mutations
        
      } ); // end MutationObserver
      
    // start listening for changes in body
    
    $( document.body ).each ( function ( ) {
    
      observer.observe ( this, { childList : true } );
      
      } );
      
    } );
    
  </script>

You'll need to add skus and max lengths to skuMaxLengthMap.

Just a note. The cart page allows the user to edit the form from that page and so you'll probably want a similar piece of code there to control the max length there.

Also the checkout page allows editing of the form as well. SS does not allow custom code on the checkout page. It is a security feature. So you will need to manually check the character length of each order and take corrective action for those orders that exceed the max characters.

Let us know how it goes.

Thank you so much!! This worked great!

18 hours ago, creedon said:

@shrineofourladyoftheisland

I need to be able to access the form to write the code.

Sorry about that.  The form is now there. Thank you for your patience!
https://ourladyoftheisland.squarespace.com/shop/p/praying-hands

11 minutes ago, creedon said:

@shrineofourladyoftheisland

What is the URL of the product you added the form to?

https://ourladyoftheisland.squarespace.com/shop/p/praying-hands

the duplicated form is hidden.  Do you need me to publish that?

22 minutes ago, creedon said:

@shrineofourladyoftheisland

I think it is possible but a bit tricky because of variants. When variants are present the code needs to be dynamic and adjust the max length values when the variants are selected.

I'm willing to give the code a go but before I do I suggest that you recreate the form in the form tab of the product editor.

As it is now the form you have in additional info will not attach the requested info to the product order. In other words the order and the text would come in two different emails and you'd have to link them up manually.

If you make the suggested change, let me know and I'll give the code a go.

 

Thank you so much for helping us with this.  I already replicated the form.  It was under additional information.

Would it be possible to limit the number of characters for a text line in a form? This is our website: https://ourladyoftheisland.squarespace.com/shop/p/praying-hands