page.tear-sheet.liquid

{% layout 'tear_sheet' %}
<!-- USES "tear_sheet.liquid" TEMPLATE AS HTML LAYOUT FOR TEAR SHEET -->

<style>

/* ALWAYS REMOVE ADMIN/PREVIEW BAR WHILE LOGGED IN */
  #admin-bar-iframe {
    display: none !important;
  }
  #preview-bar-iframe {
    display: none !important;
  }

/* SETUP PAGE FOR PRINT */
  @page {
    size: auto;
    margin: 0 auto;
    overflow: hidden;
    @page :footer {
        display: none
    }
  
    @page :header {
        display: none
    }
  }
  
  @media print {
    html {
      max-height: 100%;
      overflow: hidden;
    }
    html, body {
      width: 100%;
      height: 100%;
      margin: 0 auto;
      display: block;
      text-align: center;
      overflow: hidden;
    }
    #print-info {
      margin: auto;
      display: flex;
      justify-content: center;
      align-items: center;
      height: 100%;
      overflow: hidden;
      word-wrap: break-word;
      text-overflow: ellipsis;
      flex-direction: column;
    }
    .title {
      padding: 0 20px 0 0;
    }

  }
  
/* SETUP DOCUMENT ELEMENTS */
  html {
    height: 11in;
    width: 8.5in;
    margin: 0 auto;
  }
  
  main {
    /* Change to whatever font you want to use. Google Fonts imported in 'Layout' */
    font-family: Montserrat, Calibri, sans-serif;
    text-align: center;
    padding: 20px 10px;
    max-height: 99vh;
    margin: auto;
  }
  
  .logo-div {
    position: -webkit-sticky;
  	position: sticky;
  }
  
  .logo {
    /* USE CODE BELOW IF LOGO IS AN SVG AND IT'S WHITE OR SUPER LIGHT TO INVERT COLORS */
    /* filter: invert(1) saturation(0) !important; */
    max-width: 150px;
    max-height: 200px;
    margin: 20px auto;
	display: -webkit-block;
  	display: block;
  }

  .feat {
    height: 300px;
    max-width: 550px;
    position: static;
    margin: 0 auto;
  }

  .title {
    font-size: 20px;
    margin-bottom: 35px;
    font-weight: 200;
    position: relative;
    width:100%;
  }

  .price {
    font-size: 15px;
    font-weight: 200;
    position: static;
  }

  .desc {
    margin: 0 auto;
    font-size: 13px;
    font-weight: 200;
    text-align: center;
    position: static;
    width: 70vw;
    max-width: 70%;
    max-height: 50%;
    overflow: hidden;
    word-wrap: break-word;
    text-overflow: ellipsis;
  }

  .sku, .barcode {
    font-size: 14px;
  }

  .sku {
    margin-bottom: 5px;
  }

  footer {
    width: 100%;
    text-align: center;
    font-weight: medium;
    font-size: 12px;
    bottom: 0;
    left: 0;
    position: fixed;
    margin: 0 auto;
  }

  .logo-break {
    height: 60;
  }
  .feat-break {
    height: 50px !important;
  }

  #header: {
    height: 14%;
    height: 14vh;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  
  #print-info {
    margin: auto;
    display: grid;
    columns: 1;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 80%;
    height: 80vh;
    overflow: hidden;
    word-wrap: break-word;
    text-overflow: ellipsis;
    flex-direction: column;
  }

  #foot {
    height: 5%;
    height: 5vh;
  }

</style>

<section>

<!-- Logo (or header) goes here... -->
  <div id="header">
    <!-- Enter the pathway to the logo you'd like to use in "src" -->
    <!-- You can use a URL, call it from your assets, etc. Read Shopify Liquid documentation for more information -->    
    <!-- You can replace this space with a Text Header if no logo available -->
    <img class="logo" alt="Store Logo" id="logo" src="https://cdn.shopify.com/s/files/1/0439/2868/2653/files/gravy_logo.png?v=1675744129">

    <!-- Add space between logo and printed info -->
    <div class="logo-break" id="logo-break"></div>
  </div>
   
<!-- Product information goes here... -->
  <div id="print-info">
  <!-- PRODUCT IMAGE -->
    <img class="feat" id="sheet-image">
    <!-- SPACING -->
      <div class="feat-break" id="feat-break"></div>
  <!-- PRODUCT TITLE -->
    <div class="title" id="sheet-title"></div>
  <!-- PRODUCT SKU -->
    <div class="sku" id="sheet-sku"></div>
  <!-- PRODUCT BARCODE -->
    <div class="barcode" id="sheet-barcode"></div>
  <!-- PRODUCT PRICE -->
     <div class="price" id="sheet-price"></div>
  <!-- PRODUCT DESCRIPTION -->
     <div class="desc" id="sheet-desc"></div>
  </div>

<!-- Footer (usually Contact Information) goes here... -->
  <footer class="foot" id="foot">420 Address St., Anywhere, USA &nbsp;. &nbsp;555.555.5555 &nbsp;. &nbsp;your@email.com</footer>

</section>

<script>
 
  
//////// GET ELEMENTS ////////
 
  // PRODUCT ID
    console.log(prodIdUrl)
   
 
    // GET TITLE
      const sheetTitleId = "title" + prodId;
      const sheetTitle = localStorage.getItem(sheetTitleId)
      console.log(sheetTitle)
 
    // GET DESCRIPTION
      const sheetDescId = "description" + prodId;
      const sheetDesc = localStorage.getItem(sheetDescId)
      console.log(sheetDesc)
 
    // GET IMAGE
      const sheetImgId = "image" + prodId;
      const sheetImg = localStorage.getItem(sheetImgId)
      console.log(sheetImg)
 
    // GET PRICE
      const sheetPriceId = "price" + prodId;
      const sheetPrice = localStorage.getItem(sheetPriceId)
      console.log(sheetPrice)
 
    // GET SKU
      const sheetSkuId = "sku" + prodId;
      const sheetSku = localStorage.getItem(sheetSkuId)
      console.log(sheetSku)
 
    // GET BARCODE
      const sheetbarcodeId = "barcode" + prodId;
      const sheetbarcode = localStorage.getItem(sheetbarcodeId)
      console.log(sheetbarcode)
 
 
 
//////// SET ELEMENTS ////////
 
    // SET TITLE
      document.getElementById('sheet-title').innerHTML = sheetTitle
 
    // SET DESCRIPTION
      if(sheetDesc) {
      	document.getElementById('sheet-desc').innerHTML = sheetDesc
      }
 
    // SET IMAGE
      document.getElementById('sheet-image').src = sheetImg
 
    // SET PRICE
      if (sheetPrice === "$0.00") {
        // You can comment this out and add anything you want, but this is for items that appear "FREE"
        // when they might actually just not be priced yet.
        document.getElementById('sheet-price').innerHTML = "PLEASE INQUIRE FOR PRICING" 
      } else {
        document.getElementById('sheet-price').innerHTML = sheetPrice}
 
    // SET SKU
      document.getElementById('sheet-sku').innerHTML = sheetSku
 
   // SET BARCODE
      document.getElementById('sheet-barcode').innerHTML = sheetbarcode
 
     
      
      
//////// PRINT WINDOW ////////
      
   var printed = false

   function printPage() {
     window.print();
     printed = true;  // Set `printed` to 'true'
   }

  function printTearSheet() {
    window.onload = printPage()
    if (printed === true) { // Checks that printPage() has printed the page...
      setTimeout(function () {
        // Wait 500ms to close
        // Fires after Print Preview is exited
        window.close(); }, 500);
    }
  }


  ////////////////////////////
  // PRINT TEAR SHEET CODE ///
  ////////////////////////////
  
  
  // Waits 500ms then PRINT when Document is ready
  // Recommended to ensure styles and info are loaded...
  
    setTimeout(function () { docReady(printTearSheet()) },500) // COMMENT OUT THIS LINE TO PREVENT PRINTING AND TEST STYLES
  
  
  // Wait for ALL resources to load..
    function docReady(e) {
      document.addEventListener("load", e); 
    }  


//////////////////////////
// BROWSER CONDITIONALS //
////////////////////////// 

// Modify as needed...
// See `if (isSafari === true)...` conditionals to make changes based on broswer

  // Opera 8.0+
  var isOpera = (!!window.opr && !!opr.addons) || !!window.opera || navigator.userAgent.indexOf(' OPR/') >= 0;
 
  // Firefox 1.0+
  var isFirefox = typeof InstallTrigger !== 'undefined';
 
  // Safari 3.0+ "[object HTMLElementConstructor]"
  var isSafari = /constructor/i.test(window.HTMLElement) || (function (p) { return p.toString() === "[object SafariRemoteNotification]"; })(!window['safari'] || (typeof safari !== 'undefined' && window['safari'].pushNotification));
 
  // Internet Explorer 6-11
  var isIE = /*@cc_on!@*/false || !!document.documentMode;
 
  // Edge 20+
  var isEdge = !isIE && !!window.StyleMedia;
 
  // Chrome 1 - 79
  var isChrome = !!window.chrome && (!!window.chrome.webstore || !!window.chrome.runtime);
 
  // Edge (based on chromium) detection
  var isEdgeChromium = isChrome && (navigator.userAgent.indexOf("Edg") != -1);
 
  // Blink engine detection
  var isBlink = (isChrome || isOpera) && !!window.CSS;
 
  if (isSafari === true) {
    console.log('safari')
    document.getElementById('logo').style.paddingTop = '0px';
    document.getElementById('logo').style.paddingBottom = '30px';
    document.getElementById('print-info').style.paddingTop = '30px';
    document.getElementById('sheet-image').style.maxHeight = '350px';
    document.getElementById('sheet-desc').style.maxWidth = '70%';
    document.getElementById('sheet-desc').style.fontSize = '12px';
    document.style.padding = '0px';
  } else {
    console.log('not safari')
    document.getElementById('foot').style.paddingBottom = '10px';
  }
  
// BOOLEAN VARIABLES
  isFirefox
  isChrome
  isSafari
  isOpera
  isIE
  isEdge
  isEdgeChromium
  isBlink
 
   // Genius coding by Grävy Design Co. // @gravyhtx
</script>