cart unit prices.html

<!--

  begin cart unit prices
  
  License       : < https://tinyurl.com/s872fb68 >
  
  Version       : 0.1d0
  
  SS Versions   : 7.1, 7.0
  
  Dependencies  : jQuery
                  
                  twcsl
                  
                  cart prices sqs-money-native add
  
  Note          : the code is comprised of several tags. all are needed for the
                  full effect to work
                  
                  the effect is not active on mobile
  
  By            : Thomas Creedon < http://www.tomsWeb.consulting/ >
  
  -->
  
  <style>
  
    .twc-item-list-label--unit-price,
    .twc-item-unit-price
    
      {
      
        display : none;
        
      }
      
    @media only screen and ( pointer : coarse ) and ( min-width : 1025px ),
    screen and ( min-width : 800px ) {
    
      .twc-item-list-label--unit-price {
      
        display : inline-block;
        font-size : 16px;
        min-width : 10vw;
        text-align : right;
        vertical-align : middle;
        white-space : nowrap;
        
        }
        
      .twc-item-unit-price {
      
        display : inline-block;
        font-size : 16px;
        min-width : 10vw;
        text-align : right;
        vertical-align : middle;
        white-space : nowrap;
        
        }
        
      .item-price, /* ._26eXSmpLx */
      
      .XgjsO_M3Y /* price label */
      
        {
        
          min-width : 15vw;
          
          }
          
      }
      
    </style>
    
  <script>
  
    $( ( ) => {
    
      if ( ! twcsl.isCart ) return; // bail if not cart page
      
      const getUnitPrice = $node => {
      
        let price = $( '.item-price', $node )
        
          .text ( )
          
          .replace ( ',', '' );
          
        let quantity = $( 'input', $node ).val ( );
        
        price = Number ( price );
        
        quantity = Number ( quantity );
        
        let unitPrice = price / quantity;
        
        unitPrice = unitPrice.toFixed ( 2 );
        
        return unitPrice;
        
        };
        
      const setUnitPrice = node => {
      
        const $node = $( node );
        
        const unitPrice = getUnitPrice ( $node );
        
        $( '.twc-item-unit-price :last', $node )
        
          .text ( unitPrice );
          
        }
        
      $( `<div class="twc-item-list-label--unit-price">
      
        <span class="_3zzV1fDFF">
        
          <span>
          
            UNIT PRICE
            
            </span>
            
          </span>
          
        </div>` )
        
        .insertBefore ( '.XgjsO_M3Y' );
        
      $( '.item-price' )
      
        .before ( `<div class="twc-item-unit-price" style="visibility: visible;">
        
          <span class="sqs-money-native">
          
            </span>
            
          </div>` );
          
      $( '.qrq0lfTEB' )
      
        .each ( function ( ) {
        
          setUnitPrice ( this );
          
          } );
          
      } );
      
    </script>
    
  <!-- end cart unit price -->