Меню

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

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

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

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

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

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

<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 - без него не заработает

Стоимость и сроки разработки сайтов и приложений

Окончательная стоимость и сроки разработки сайта формируются после обсуждения деталей на этапе заказа. Как правило, они редко выходят за обозначенные ниже рамки.

Интернет магазин: разработка с нуля от 350 000 руб.
от 4-х недель

Cоздание интернет-магазина на 1С-Битрикс. Разработка с нуля, оптимизация кода под конкретный проект и требования. Реализация любого функционала без ограничений готовых решений.

Интернет-магазин на готовом решении от 100 000 руб.
от 7-ми дней

Готовое решение — вариант для тех, кто не хочет тратить много средств на индивидуальный проект, и не имеет серьезных требований к сайту. Запускается на одном из 200-та (на ваш выбор) готовых решений.

Мобильное приложение от 400 000 руб.
от 1-го месяца

Разработка кроссплатформенного мобильного приложения, которое не уступает нативным решениям как в производительности, так и пользовательском опыте. Публикуется в AppStore, GooglePlay и RuStore

Опросник на разработку. После ознакомления, задам уточняющие вопросы и оценю проект по стоимости и срокам разработки.