0

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:

enter image description here

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>

enter image description here

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.
enter image description here

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?

2

You can use @media queries present in CSS3 which are now highly supported by browsers nowadays.

Add another node in your Rendering Variant which will be rendered only for print and add all Field Renderers for your child articles (Content) there.

Use similar CSS to show / hide this "print only" content for printing only:

<style type = "text/css">
      @media screen {
         div.print-only {display: none;}
      }

      @media print {
         div.print-only {font-family:georgia, times, serif;}
      }
</style>
1
  • I have modified the requirement to exactly explain what I need. I need to extract the content from the <main> tag of the child article rendered HTML. – Varun Dec 12 '19 at 11:07

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.