I know how to implement print functionality the javascript way and in pure sitecore using controller etc.
I wanted some thoughts on implementing print functionality in SXA. I am using sitecore 9.1 with sxa 1.8.1. My requirement is to print all the content under <main>
HTML tag of child pages.
I have an <artciles>
node which has <artcile1>...</artcile1><artcile2>...</artcile2>
etc as child pages. Each article has its page URL. I need to extract the content from each of the article URL say content under the <main>
tag and append the content to the <div>
which will be printed on click of 'Print All' button.
I am able to get the content of child articles using the query:
My sample rendered html using the above query looks like:
<div class=”article”>
<div>article-title1</div>
<div>article-content1</div>
<a class=”article-link” href=”/Articles/Article-1”>Read More</a>
</div>
<div class=”article”>
<div>article-title2</div>
<div>article-content2</div>
<a class=”article-link” href=”/Articles/Article-2”>Read More</a>
</div>
<div class=”print-only”></div>
I want to extract the content from<main>
div of article 1 page, article 2 page etc from its URL. It means when we hit the URL of article 1 in a separate window and do a viewsource. We can see the div as in below figure.
I need to append all the child article pages <main>
content to the <div class="print-only">
. And on the click of the 'Print All' button the content will be printed using media queries. Any easy ideas to achieve this?