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?