Creating tear sheet or printable product page by adding custom code.

[Lolo24]

I am looking to add a tear sheet to my product pages using custom code. From this forum: https://github.com/gravyhtx/shopify_product-tear-sheet

I have completed the first two steps but am struggling to complete the last part.

Part 1

Part 2

Part 3

Please help me make my product page printable or create a tear sheet for my products on showcase theme.

[tim]

So what's the problem -- you do not know where exactly you should put this code?

It would be difficult to tell without looking at the theme code and since Showtime is not a free theme ...

However, you may try using a "Custom liquid" block if product section offers one.

Simply paste code from the file in Custom liquid setting and position the block as you like.

[Lolo24]

Thanks for your reply Tim,

Yes, I am unsure of where to place the code in 'main-product.liquid' shown in the third photo above.

I tried a few places in the code but do not have a lot of experience in this area. At one point I had the button show up but it was not clickable.

The Custom Liquid block seems to be working so far,

 

 I appreciate this advice!

[Lolo24]

This is the code i am implementing, Is there any advice you can give me to make it work or improve it?

<div class="tear-btn" id="tear-btn" style="align-self: auto;" onclick="tearSheet()">
<input class="tear-sheet" id="tear-sheet" type="button" name="print" value="TEAR SHEET" aria-label="Product Tear Sheet">
</div>

<!-- TEAR SHEET CODE -->

<script>
var variantId = `{{ current_variant.id }}`;
var titleStore = 'title' + variantId;
var imgStore = 'image' + variantId;
var descStore = 'description' + variantId;
var priceStore = 'price' + variantId;
var titlePrint = `{{ product.title }}`;
var pricePrint = `{{ current_variant.price | money }}`;
var imgGet = `{{ product.featured_image }}`;
var imgPrint = `{{ product | img_url: '720x720' }}`;
var descPrint = `{{ product.description }}`;

// CLEAR OLD PRODUCT INFO IN LOCAL STORAGE ON PAGE LOAD
localStorage.clear();

// SET CURRENT PRODUCT INFO INTO LOCAL STORAGE
function currentProduct() {

// TITLE
localStorage.setItem(titleStore, `{{ product.title }}`.toString());
// console.log('TITLE: ' + localStorage.getItem(titleStore));

// DESCRIPTION
localStorage.setItem(descStore, descPrint);
// console.log('DESC: ' + localStorage.getItem(descStore));

// IMAGE
localStorage.setItem(imgStore, imgPrint);
// console.log('IMAGE: ' + localStorage.getItem(imgStore));

// PRICE
localStorage.setItem(priceStore, pricePrint);
// console.log('PRICE: ' + localStorage.getItem(priceStore));

}

// CALL FUNCTION TO SET PRODUCTS INTO LOCAL STORAGE ON PAGE LOAD
// NOTE: This is optional...
currentProduct(); // ...can be commented out and left to be called at the 'tearSheet' function below

function tearSheet() {

currentProduct();

var variantId = `{{ current_variant.id }}`;

/////// OPEN TEAR SHEET PRINT PAGE ///////
window.open("/pages/tear-sheet?"+variantId);
};

</script>

[kmtl]

Hi there, did you get it working? You might want to try our app: https://apps.shopify.com/printproductpage
It prints tearsheets and also emails it to the customer as a file attachment.