Notifications
Clear all
Topic starter
06/06/2020 1:16 pm
Hi,
Since few days I have been for a solution to embed PDF file directly into my product page, I love the sizechart button in Plak theme, but i would to give my customers a detailed catalog (3 pages).
I am not looking for a kind of button to download the pdf or redirect them to google drive or other hosting, i need my clients to click the button and the pdf file will be shown into the product page with the possibility to make 2 buttons (previous/next).
I just need the script because i know a little bit how to style in CSS.
Thanks in advance
06/06/2020 1:38 pm
Hi @alfonso
Katrine here from Plak Theme Support.
In order to make a PDF Viewer directly into your Plak Theme product page, please follow these steps :
- From your Shopify dashboard, click Online Store > Actions > Edit code
- Click on Snippets > Create a new snippet
- Name it for example (pdf)
- Paste this code in it and
Spoiler
PDF Code
<style>
#show-pdf-button {
width: 150px;
display: block;
margin: 20px auto;
}
#file-to-upload {
display: none;
}
#pdf-main-container {
width: 100%;
margin: 20px auto;
}
#pdf-loader {
display: none;
text-align: center;
color: #999999;
font-size: 13px;
line-height: 100px;
height: 100px;
}
#pdf-contents {
display: none;
}
#pdf-meta {
overflow: hidden;
margin: 0 0 20px 0;
}
#pdf-buttons {
float: left;
}
#page-count-container {
float: right;
}
#pdf-current-page {
display: inline;
}
#pdf-total-pages {
display: inline;
}
#pdf-canvas {
border: 1px solid rgba(0,0,0,0.2);
box-sizing: border-box;
}
#page-loader {
height: 100px;
line-height: 100px;
text-align: center;
display: none;
color: #999999;
font-size: 13px;
}
</style>
<button id="show-pdf-button">View PDF</button>
<div id="pdf-main-container">
<div id="pdf-loader">Loading document ...</div>
<div id="pdf-contents">
<div id="pdf-meta">
<div id="pdf-buttons">
<button id="pdf-prev">Previous</button>
<button id="pdf-next">Next</button>
</div>
<div id="page-count-container">
Page
<div id="pdf-current-page"></div>
of
<div id="pdf-total-pages"></div>
</div>
</div>
<canvas id="pdf-canvas" width="400"></canvas>
<div id="page-loader">Loading page ...</div>
</div>
</div>
<script>
var _PDF_DOC,
_CURRENT_PAGE,
_TOTAL_PAGES,
_PAGE_RENDERING_IN_PROGRESS = 0,
_CANVAS = document.querySelector('#pdf-canvas');
async function showPDF(pdf_url) {
document.querySelector("#pdf-loader").style.display = 'block';
try {
_PDF_DOC = await pdfjsLib.getDocument({ url: pdf_url });
}
catch(error) {
alert(error.message);
}
_TOTAL_PAGES = _PDF_DOC.numPages;
document.querySelector("#pdf-loader").style.display = 'none';
document.querySelector("#pdf-contents").style.display = 'block';
document.querySelector("#pdf-total-pages").innerHTML = _TOTAL_PAGES;
showPage(1);
}
async function showPage(page_no) {
_PAGE_RENDERING_IN_PROGRESS = 1;
_CURRENT_PAGE = page_no;
document.querySelector("#pdf-next").disabled = true;
document.querySelector("#pdf-prev").disabled = true;
document.querySelector("#pdf-canvas").style.display = 'none';
document.querySelector("#page-loader").style.display = 'block';
document.querySelector("#pdf-current-page").innerHTML = page_no;
try {
var page = await _PDF_DOC.getPage(page_no);
}
catch(error) {
alert(error.message);
}
var pdf_original_width = page.getViewport(1).width;
var scale_required = _CANVAS.width / pdf_original_width;
var viewport = page.getViewport(scale_required);
_CANVAS.height = viewport.height;
document.querySelector("#page-loader").style.height = _CANVAS.height + 'px';
document.querySelector("#page-loader").style.lineHeight = _CANVAS.height + 'px';
var render_context = {
canvasContext: _CANVAS.getContext('2d'),
viewport: viewport
};
try {
await page.render(render_context);
}
catch(error) {
alert(error.message);
}
_PAGE_RENDERING_IN_PROGRESS = 0;
document.querySelector("#pdf-next").disabled = false;
document.querySelector("#pdf-prev").disabled = false;
document.querySelector("#pdf-canvas").style.display = 'block';
document.querySelector("#page-loader").style.display = 'none';
}
document.querySelector("#show-pdf-button").addEventListener('click', function() {
this.style.display = 'none';
showPDF('YOU-PDF-FILE-LINK-HERE.PDF');
});
document.querySelector("#pdf-prev").addEventListener('click', function() {
if(_CURRENT_PAGE != 1)
showPage(--_CURRENT_PAGE);
});
document.querySelector("#pdf-next").addEventListener('click', function() {
if(_CURRENT_PAGE != _TOTAL_PAGES)
showPage(++_CURRENT_PAGE);
});
</script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/pdf.js/2.2.228/pdf.min.js"></script>
- Change the (YOU-PDF-FILE-LINK-HERE.PDF) with your PDF file link and click Save
Now open the files prod-template1.liquid and prod-template2.liquid and paste this code below where you would like the button (View PDF) to appear and click Save
{% include 'pdf' %}
Since you know how to style this feature via CSS it is great, in case you need help from us, you can reply to this thread or use our Customization service
Kind regards,
Katrine| Plak theme support
- Was my reply helpful? Click Like to let me know!
- Was your question answered? Mark it as a Solved Solution
Alfonso reacted
Topic starter
06/06/2020 3:36 pm
That is exactly what I was looking for, thank you so much Katrine 🙂
Welcome to the Shopify Forum Community provided by Plak ThemeLLC, a place where you can discuss about eCommerce and Shopify, solve technical issues, get help with Shopify Design, Apps integration, Marketing, Facebooks ad, Google ads and more.
Before posting, we invite you to read and follow the forum rules | We also support any questions related to Free Shopify themes :Dawn, Express, Minimal, Brooklyn, Narrative, Supply, Debut, Venture, Boundless and Simple