Кнопка для отправки на печать карточки товара, без лишних данных

Просмотров: 828

Задача: реализовать возможность печати карточки товара, но так что бы в ней не было не нужных данных: шапки и футера сайта, кнопок покупки и прочих данных, не важных на распечатанной странице.

Кнопка для отправки на печать карточки товара, без лишних данных

Кнопка для печати страницы сайта целиком

Что бы отправить страницу сайта на печать, достаточно добавить кнопку вида

<button onclick="window.print();return false;">
	Распечатать
</button>

Но тогда, на печать отправится вся страница сайта, с шапкой футером и прочими данными, которые скорее всего не важны на листе бумаги.

Отправить на печать конкретный div блок

Что бы распечатать только содержимое карточки товара: нужно добавить javascript в подключаемый файл или в файл component_epilog.php

function printDiv(divId) {
    var printContents = document.getElementById(divId).innerHTML;
    var originalContents = document.body.innerHTML;
    document.body.innerHTML = printContents;
    window.print();
    document.body.innerHTML = originalContents;
}

Далее, нужно обвернуть div блок, содержащий информацию отправляемую на печать в id detail_printable_content

<div class="row" id="detail_printable_content">
      ... Здесь верстка вашей карточки товара ...
</div>

В нужном месте карточки товара добавить кнопку:

<button onclick="printDiv('detail_printable_content')">
	Распечатать
</button>

И добавить css стили, которые скроют не нужный контент и модифицируют нужный на медиазапросе с print.

В моем примере прячутся: кнопки добавления в корзину, в избранное, логотип бренда, дополнительные картинки товара (их все равно не кликнуть на бумаге)).

Модифицируются табы с описанием и свойствами товарами, так что бы были видны сразу и умещались на одну страницу. И прочие модификации карточки товары, которые уместны для распечатки. Плюс, блок позицианируется в левый верний угол, что бы не было пустот на странице.

@media print {
  .product-item-detail-slider-controls-block,
  .product-item-detail-slider-right,
  .product-item-detail-slider-left,
  .detail_item_content_buttons,
  .detail_dopactives,
  .detail_item_content_quant,
  .product-item-detail-slider-container,
  .tabs_links,
  .detail_item_content_brand {
    display: none !important;
  }
  .image_for_print {
    display: block;
    width: 300px;
    height: auto;
  }
  .tab_cont {
    display: block !important;
  }
  .detail_item_content_tabs .tab_cont {
    opacity: 1;
    width: 100%;
    height: auto;
    overflow: visible;
  }
  .detail_item_content_tabs_props {
    display: flex;
    flex-wrap: wrap;
    margin-top: 20px !important;
    li {
      width: 50%;
      padding: 5px 0px !important;
    }
  }
  #detail_printable_content {
    position: absolute;
    left: 0;
    top: 0;
    padding: 40px;

  }
}
Само собой, это просто пример. Вы можете как угодно модифицировать данные отправляемые на печать, с помощью стилей или сделать отдельный div блок (не рекомендуется) скрытый на сайте но видимый при распечатке страницы.
Михаил Базаров 24.04.2023
Для работы не забудте подключить jQuery - без него не заработает