Значок «New», «Sale», «Top»

Значки new, sale, top помогут вам легко обозначать товары, которые продаются по скидкам, новые товары и бестселлеры. Помогите посетителям вашего сайта выбрать товар.

Предупреждение!

Внесение изменений в шаблон интернет-магазина InSales следует выполнять только при наличии достаточных навыков работы с этой системой. Наша инструкция предоставлена «как есть» и мы не можем нести ответственности за ее неправильное толкование или использование.

Мы оказываем только платную техническую поддержку по данному вопросу и сможем интегрировать код в Ваш магазин только на платной основе

Многие любят разноцветные наклеечки на товары в магазине, на которых написаны завлекающие надписи “Sale!”, ”Best Offer!”, “Бесплатная доставка” или что-то наподобие. Реализация их предельно проста, но даже тут есть свои особенности.


Поле

Для начала нужно узнать, что-то с помощью чего магазин будет знать на какой именно товар лепить наклейку. Для этого нужно в разделе “Настройки” бек-офиса создать дополнительное поле товара: “Текстовая строка”, “Не индексируется”.

В это поле мы будем записывать что-то, что будет говорить о наклейке. Можно сразу зайти в нужный товар и ввести в это поле, например “top”. Теперь можно переходить к редактированию шаблона.


Продукт

Нужно найти в шаблоне, то место, где выводится товар. Обычно это сниппет с соответствующим названием.



Добавим блок, который впоследствии будет значком и присвоим ему класс badge:

 <article class="grid_product article">
       <div class="productcont">
            <div class="badge"></div>
                 <div class="prev">
            .....

Теперь нужно прописать ему стили. Делать это нужно не в сниппете, а в любом css файле шаблона, так как сам HTML товара будет рендерится много раз, а стилям достаточно одного.

Позиция родительского блока badge (в данном случае productcount) должна обязательно быть “position: relative;” а для самого значка прописываем:

  .badge {
    height: 64px;
      width: 64px;
        position: absolute;
        top: -4px;
      left: -4px;
        z-index: 10;
    }

Это значит, что значок теперь имеет высоту и ширину, абсолютное позиционирование относительно productcount (или относительно всего окна, если прочитать не внимательно то, что написано выше), а так же определенную высоту над остальной страницей, чтобы его ничего не загораживало. Возможно, значение z-index придется подбирать экспериментально.


Картинки

Казалось бы, сейчас пора добавить в стили значка что-то типа “background-image: url(top.png);”, но нет. Сами картинки весят всего 3 кб, однако каждая будет генерировать HTTP запрос, если ее получать отдельно с сервера. Конечно, это может быть не заметно, однако лучше лишние запросы не делать и прописать картинку прямо в стилях. В этом нам поможет такой конвертер. Картинки будут храниться в формате Base64 и прогружаться вместе с файлом стиля, тем самым не оказывая влияния на скорость загрузки сайта. Пропишем 3 разных наклейки в стилях, вот как это будет выглядеть:

  .badge.top {
background:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEAAAABACAYAAACqaXHeAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyJpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuMy1jMDExIDY2LjE0NTY2MSwgMjAxMi8wMi8wNi0xNDo1NjoyNyAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENTNiAoV2luZG93cykiIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6OTk5MTYwMjM1RTY3MTFFMjg1QzlDODRDRUYzNjkyNzUiIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6OTk5MTYwMjQ1RTY3MTFFMjg1QzlDODRDRUYzNjkyNzUiPiA8eG1wTU06RGVyaXZlZEZyb20gc3RSZWY6aW5zdGFuY2VJRD0ieG1wLmlpZDo5OTkxNjAyMTVFNjcxMUUyODVDOUM4NENFRjM2OTI3NSIgc3RSZWY6ZG9jdW1lbnRJRD0ieG1wLmRpZDo5OTkxNjAyMjVFNjcxMUUyODVDOUM4NENFRjM2OTI3NSIvPiA8L3JkZjpEZXNjcmlwdGlvbj4gPC9yZGY6UkRGPiA8L3g6eG1wbWV0YT4gPD94cGFja2V0IGVuZD0iciI/PifEJH8AAASPSURBVHja5JttTBN3HMe/tGhppQItoxTL42jkYUA2ZMYZNGYbGqPg9IUbblkysxiTjRdLeLHshSNLlk2XuPDCJb6ZiQnGB15oUszQRA2CEhQlBAXnJFEc46FCKVDKU9f7b3R06D201/vf9X7J5dL2kuvnc7/f7/+7Nhfj8/nAFdXN9YhwHPFv30LiGB8cgQb0gxr82OAwdQFU4ZmIVRu8P+qaPv0ucF6N2uAbKmqCzqtRMzwNAbKCl1qA7OClFEANnuu8GjXDSyFA1vCRFiB7eMGDUH9nD6/jst8qZIXfmJyNybkZ9LgGqcJHZBJkgy9MsOJw8Q6Y9EbyumvwD/zY7aAGL3oJcMF/VVqF6dkZnGu/gocDT1BifR17zW9QgxdVAB94jx/+i9M/4US7A9+3nf/nM0sWXEOjVOBFE8BV8yR8PpgMa1FZ9A5S7ZmIf81E3h52vYBnYpIKvCgC+MAzze7orQuY9s7gs61V2G/bgMOF78EzP4tTbQ7E6lZTgQ9bAK8r/2/0zThxrL2RSPigqBz2xDQcv3oGj8aHkGhJpgIf1irABv+uNR9lllwYVunQ6xxAw5PbQRJqN+6DQRcHiy4BKTnpQjNANPiQM4ANvirjTRwseh/FKdnITUrDrty3cbTsQ2QYklZkwsFte7Avq5QafEgCuLr9/rxytPZ3Y9MPh1BZX4sbPXdgS0pBbcluxPu0KyRsySiCe3SMCrxgAVw1X2LOJPsLrc0wJichPi8dvzxtQWPnNZiNiThk34bFhYUgCTVnf+YjICLwQgXwbniFadlEADmBVovG0W48Gn6K0pwCJE4sBDVGrc1ElkUa8EIEsKY9U/dMOJ51+YcdL6o370SBISXouJahPrK3xhox750NvK8z6IkkGvC8BFQ313NOeJuteSSNXXMeXHx8m3T4r7d+hPVx5v+ONaeT/d3njzE3O0et5gUtg3zgnVMuMt66F70k7S8NdGHe48XHpRU4suUAfh8d8AvRY53RTHrByPQEMg1psoBnFcAHXh+7Gm0P7mHcD7+8jpucvfjz+gvs9i+B+bYcON3j+LXlEk62OmBaZ2FLeUnhmYh52X+DfK+8Kc5I0v10x2+4PNa34liPewquv0bInhl2mIlvqTlKCd9QUcM/A9jgE1bpyf38UtrbLTbUVX6OT8q2I+ZuDLnyy0NvXEM2WkOO4CbIBs8E0+RO3G/Cl2eOk7R/Fj8fGGiYmt9pzqN2Vxe2AC74pXjgHoImNYHUPFPLy6e6ECXU9Xf2UIEPCOAL/6q1+/8Syo2ZioAnAoTCc93u9j7vx+WOm5gam5A9/FIGiPYlGAnfdJzDpHYB+rVrZA8f1u8BbOWRas/ibHj+Gys58Ev+7zC1bi8HAbKDl1KALOGlEiBbeCkEyBo+0gJkDx9JAYqAj5QAxcBHQoCi4MUWoDh4MQUoEl4sAYqFF0OAouHDFaB4+HAERAV8qAKiBj4UAVEFL1RA1MELERCV8HwFRC08HwGsDxtEu4Coh2cToAr4VwlQDfzLBKgKPkgA8zip2uADApY/S6s6AWqGZ+JvAQYAF+nt7NgqiskAAAAASUVORK5CYII=);
    }
  .badge.new {
background:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEAAAABACAYAAACqaXHeAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyJpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuMy1jMDExIDY2LjE0NTY2MSwgMjAxMi8wMi8wNi0xNDo1NjoyNyAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENTNiAoV2luZG93cykiIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6OTMzOTNBRTM1RTY3MTFFMjg0MEVENjlCNkRBMUNBQTQiIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6OTMzOTNBRTQ1RTY3MTFFMjg0MEVENjlCNkRBMUNBQTQiPiA8eG1wTU06RGVyaXZlZEZyb20gc3RSZWY6aW5zdGFuY2VJRD0ieG1wLmlpZDo5MzM5M0FFMTVFNjcxMUUyODQwRUQ2OUI2REExQ0FBNCIgc3RSZWY6ZG9jdW1lbnRJRD0ieG1wLmRpZDo5MzM5M0FFMjVFNjcxMUUyODQwRUQ2OUI2REExQ0FBNCIvPiA8L3JkZjpEZXNjcmlwdGlvbj4gPC9yZGY6UkRGPiA8L3g6eG1wbWV0YT4gPD94cGFja2V0IGVuZD0iciI/PrZTW6MAAAUqSURBVHja5JtdTFtlGMf/K0Jb2m7QgqXAikwK2K2TDZwGsi+muMyYzK/MGW9MXPTSxCyLccn0Tq+MV4gzUS+8MtuIkWjMxjY2psImjAJGPmRggUJHy0pZCwXqeV/GCR/b6Wl7es5p+yQNTVN6+P3e53mfpy85m0KhENbHqYYWiBxnmMcnYl900uWGAtKHZPATMhAgKTyJx1INnolPvz19lL2uItXgP39v35rrKlIZXgoBsoIXW4Ds4MUUIEt4sQTIFj7iNmjvHYjoL7BZSzjhi406DE3MSAYf1wwIB3/8YCle2WeBPzAnGXzcBISDJ+GZCcCo1+I5S7ag8JGWm0IKeBK/3hzBmMuLF6vLsTAXkARecAF80v5wlRla1fLWc/HWCAxZWuzdkYfFxSXR4QUVwGfls3UqHKx8AifffAZ1lVsxPOHF9c47D7LALzq8YAL4pv3V2w76c9Y/h0NVxVTE3EIIgfkFvHGgNJosiAleEAHh4EnKk3ZHomfYjaFRN7Pzz6Phx1ZWBImaXU8iPTQnKnzMAsLB77fl05R//+guHNtfQmv/mn0MhXl66DRKfHy2BT80tWNpaXnl3znyNObng6LBx3QewAVPwEcmZ3CVgR0Zd6N2txm7y/PxVHEubtgd6P13ktb95S4nuhx+XPnqCg7YjLQERsddKC7KFwU+6gwIB3+kugRWcxYdcobuBvDlhU6cPf8H7j9I+SxmM8xUKyk0CX32ZiriWq8LWzZrRYOPSgAf+PYeBz77/jLueX30da0mEwOueZryjc1dtBuolek4XGOF2+Nlf5+IIA+x4CMWwAe+Z9CJM1//RkGOHbLR3r8SZHV/75/GR/WXcOFSJzMDaFBmyhS15mMRwLnhqZXL28m2Aj2qbUV4q66CCgkGF5i6nlzzXmWmBq3/TOODL35B81934Ju9Lwl8JJtg2D5PRtspzwxef96GD9/eC7Uqg5bCSjbQUmC6gC+wQJ+npSmQxoiwlm2jz6WA55sBnGm/OsXbBz0419xN4Uk0NndS+ALT4/S9J4/vQY5OueYzpITnI+CR8GQ1K8vzUFGah1eri9jX2/rdVAKJ0yfqsGe7md0f7P1OtNz8m0+vFwU+nADOtCepXN94G46JaTzL1PzDJJBMOPFyBdsZSDmQjTAjI10W8FwCeM32/uAivmnqCSuhtWOQ3QtIOXDB23sHRD0+27AJnmpo4az5mp2FcE75MHbXh/9cPvqNjkh496XtVAKJ8zeGWQkuTxt+aumWJfwGAVzwK61ui1ZFH2VFOezr5NsckeIPBDdIIJMgGW3JMCQ3+DUCwsGvb3V9Q05c/LMPeQYdigsNMJsMTLov1zaRMDzuwa0hLzsJyhGeFcAHfnWr26Toxmu1O7A134D6c+34ua2Dzv3koKe8MBsWcw6+a+qgKc8x2koOT9uw31Qb8bn9qNsPr3cGOy0mVFiMGJuahSJdBY1WC19Qgb6xe1ApM5BjyIoK3pirjwnqhaqiiLpAVCuwvtUV6FXsYENSPjcnW9YrL8iByGoJ5QU6vmf8soGP6UBktYSVVkdWXa1SJgy8IAISodXFXQCfVkf2Gpu1RG78ovx3WNTZXm4CZA0fbwGyh4+ngISAj5eAhIGPh4CEghdaQMLBCykgIeGFEpCw8EIISGj4WAUkPHwsApICPloBSQMfjYCkgo9UQNLBRyIgKeH5CkhaeD4Ckho+nICkh+cSkBLwjxKQMvAPExDRzQZJJYDcTppq8KyA1ffSppyAVIYn8b8AAwDwnDoLDVidTAAAAABJRU5ErkJggg==);
    }
  .badge.sale {
background:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEAAAABACAYAAACqaXHeAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyJpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuMy1jMDExIDY2LjE0NTY2MSwgMjAxMi8wMi8wNi0xNDo1NjoyNyAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENTNiAoV2luZG93cykiIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6OEQ4RkE1MjM1RTY3MTFFMjk5QzlEOTY4MkQ1NjEyRTkiIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6OEQ4RkE1MjQ1RTY3MTFFMjk5QzlEOTY4MkQ1NjEyRTkiPiA8eG1wTU06RGVyaXZlZEZyb20gc3RSZWY6aW5zdGFuY2VJRD0ieG1wLmlpZDo4RDhGQTUyMTVFNjcxMUUyOTlDOUQ5NjgyRDU2MTJFOSIgc3RSZWY6ZG9jdW1lbnRJRD0ieG1wLmRpZDo4RDhGQTUyMjVFNjcxMUUyOTlDOUQ5NjgyRDU2MTJFOSIvPiA8L3JkZjpEZXNjcmlwdGlvbj4gPC9yZGY6UkRGPiA8L3g6eG1wbWV0YT4gPD94cGFja2V0IGVuZD0iciI/Psee6L4AAAVSSURBVHja5JtrTFtlGMf/tMDaUlpKLyowRDFZsk0xGCExXvZBJ5kfVHAuzmRLTDZdNMoHP+CCDrIgkhhjFpdM6xZJQOO2MDIdw20qRjMSIlNhm04GQRK2cSnj2iu0nvetp4DAOaeXc2n7JE1O05O0v995nud9ztuclEAggHBjfE8ZYhwHmFcNJI7hkSmoIH/IBj88Mim7AFnhSaQmGzwTtUWnO2uK/nujSjb4/3+vKpnh5RCgKHipBSgOXkoBioSXSoBi4cNaBjueKQ4dbzlzSejEyAmvrdgL9/mTCExPyAIvagbwwev3ViOjrBzujaVY8AdkgRdNgBB4zcOPYviro+hracSsxysLvCgChMLfOn0cfU2HkZOVidy3DkJTtlNy+JgL4INPMWQviiguRU5+AfIr66iQKa8PE06XpPAxFcAHT4I0u6kjBzHR+RP0eXej8KOmxVJgsmE1UWLCx0yAEHg21KoU+I/VUwlqrQ5uxzgG207SUsjWaWmJGN9uENoYo4KPiQAueK4ryUrQmC14sP5TmGy5of4w0nEOg47bosNHLYALPnVDMbLrjiK97CVeCRl5+ch+//Nl5WDK0IoOH5UA3oanN4AksaFiN/xPvsgrgZRDf9NnoZWBlIPY8PR3Ct0TXDoJbs6xCap5370PwFpZg1QGbvTrY1BdOL4iSxZuDtLmOLPxEfxzoVUSeIu9PfIMEApPIm2gB45DtZh3OWHb8cqyTCDwxjfehWbHPtrwMq9eRIE5S7IrH5GAcOBDXf/6HysksPC+iXH0fFKPkenZ4GywLl1S+LAE8MGTGxt1bqEgCYbXqyl8d9WrUE2P4w6DXpKGF3EP4Gt4aQ9tgfG1Knrs6b/G3OGdgq+7Y8V5C/cVwfzmAWbtH0Pv/n0UvsBsorOBlPBLewCvAKFDjr7qYyDLQo/J2u7u/wue860rRBAJA1d6ZYMPqwmGM+HN/95FwYdONGKgyY7UnHyaFYZa+7IbHVIOeSovL/zlG6OSbKKoIoFfrd7d7V8yde1A/vbdCDDHcz2/Br/AZIa+YheMDc2hyVCblqoI+DV3hLjg2XHV6VuAb+hvpKvVoc88P56hsHd+0EinOzLVkTk/r3wXvLMzGOvrQ6E1WzHwq2aAEHgCduVIPaZcnlWzgMAPNtvpVGf1O6H59gvMtzXBkqlTFPwKAVzwJOUJ/Nj3baFx1arX0RWAvJZmAZ0CmeGGneoINDmXa8iRA35ZCfDP9sZg/W7YhHueeg624lJoSh5HiiYI5ezdCueh/fBcbIdu2wtYv60cQ+3Ngm5p5YIPCRDS7eevXcJc18/QlzwGfeV7wavMDDM3zrbCuKkIWfcXY7Tkaei7voOz4yxGHA6Mzzi5rrrs8FRAOEudy16Hyf7t8Gp0uN3dienffqFNMFDyBLKqP4RPkxHsCy12puk5ac0rGZ7NgLB+xLofTmDO6YKWqXEr09F1ZhsMO/fA73Zh9NwpWAN+eh6peaXDr7kM8gWb1qT5ZTz7MtQmC64fboB/chRGm0XRNR/THSHd1ueZuVeHq/Xv4FbHN1hvMnItcxSeGUMVAx9xBrAx19KIwT8vwzl2k462ZMKLJ/ioBZCVwbwwj7u4p7vFtF+yq5QQAti5nq/mSaPdnGODEkPsv8dF3cxQugDFw4spIC7gxRIQN/BiCIgr+FgLiDv4WAqIS/hYCYhb+FgIiGv4aAXEPXw0AhICPlIBCQMfiQBF3tJKJSDh4MMRkJDwQgUkLLwQAQkNzycg4eG5BCQF/FoCkgZ+NQFJBU8itKVLHiclT1QiyULFwrPP0iadgGSGJ/GvAAMAxKxkeqos4EIAAAAASUVORK5CYII=);
    }


Liquid

Все работает, только наклейки пока не появляются. Настало время для встроенного шабонизатора Insales, под названием Liquid. В итоге есть 3 значка. Один из них sale, что значит, что он должен появляться, если у товара есть старая цена. Остальные 2 наклейки new и top пусть появляются если нет старой цены, а дополнительное поле товара содержит соответствующий текст. Добавляем такой код в блок badge:


Итог

Теперь наклейки отображаются там где нужно и когда нужно. Их состав, положение и порядок довольно просто меняется и редактируется.

Заключение

Данный мануал для InSales включает в себя только основной код. Разобраться с ним и внедрить его в магазин сможет опытный разработчик. Если Вы не готовы самостоятельно заниматься изменениями шаблонов InSales, а также хотите реализовать другие идеи как по этому модулю, так и в общем по системе InSales, мы будем готовы Вам помочь в рамках платной поддержки.

Закажи установку модуля: Значок «New», «Sale», «Top» для своего магазина

Установка модуля от разработчиков InsalesThemes!
  • Удобные настройки модуля
  • Пожизненная гарантия на работу
  • Быстро и качественно
Успейте заказать установку модуля по специальной цене. Количество ограничено!
Закрыть

Ваша заявка отправлена!

В ближайшее время Вам на почту придет уведомление, а в течении нескольких часов мы свяжемся с Вами и уточним все детали по работе. Имейте ввиду - мы работает с понедельника по пятницу с 10:00 - до 19:00 по МСК