Шаблони для 1с бітрікс. Проекти. Які файли потрібні для створення шаблону

14.05.2020 Безпека

Як встановити?

Вибір рішення Для встановлення обраного вами готового рішення потрібно завантажити та встановити продукт тієї редакції, до якої це рішення увімкнено. Інші готові рішення, що входять до цієї редакції, ви зможете випробувати пізніше, запустивши з Панелі управління вашого сайту майстер «Протестувати нове рішення». Протестувати нове рішення Ви можете протестувати будь-яке готове рішення лише за кілька клацань миші:
  • запустіть прямо з Панелі управління спеціальний майстер тестування
  • виберіть потрібне готове рішення
  • пройдіть усі кроки майстра


Протестувати нове рішення


Зверніть увагу, що всі рішення, які ви протестуєте, будуть доступні з меню тієї ж кнопки «Протестувати нове рішення». Вам достатньо вибрати зі списку одне з встановлених рішень, щоб перейти на готовий сайт Додатково можна запустити з Панелі керування майстер зміни дизайну та налаштування поточного сайту та змінити йому, скажімо, шаблон або колірну схему. Вибір готового рішення із установника продукту Ви можете вибрати одне з рішень, доступних у вибраній вами редакції, одразу під час встановлення продукту «1С-Бітрікс: Управління сайтом».



Готові рішення«1С-Бітрікс»


Установник продукту пропонує на вибір один із готових типових шаблонів: інтернет-магазин, інформаційний портал, сайт компанії (два варіанти: для компанії, що продає товари та компанії, що надає послуги), персональний сайт та сайт спільноти.




На цьому вибір не закінчується, тому що для кожного типу сайту передбачено декілька варіантів дизайну.




І, у свою чергу, кожен дизайн існує в різних комбінаціях кольорів - це теж на вибір. Наприклад, для персонального сайту ви можете вибрати один із 4-х варіантів дизайну та «розфарбувати» його в улюбленій кольоровій гамі.




Вибираючи встановлений шаблон, ви отримуєте сайт, максимально наближений до реальності не тільки за оформленням, але і за наповненням, і при цьому, що відповідає обраній вами тематиці. Більше того, ви можете створити два абсолютно різні проекти - з різними шаблонами та дизайнами, оскільки кожна копія програми дозволяє це робити відповідно до ліцензійної політики «1С-Бітрікс».

Шаблон визначає розташування функціональних елементів, відображення сторінок та художній стиль. Від нього залежить загальний зовнішній виглядсайту.

Зазвичай всім сторінок використовується одна схема, але 1С Битрикс дозволяє одночасно користуватися кількома варіантами оформлення .

За допомогою вбудованих інструментів можна задавати власні шаблонидля всіх розділів та навіть сторінок. Також можна задавати різні умови для виведення тієї чи іншої схеми. Установки виконуються через панель адміністратора.

Шаблони сторінок зберігаються в однойменній папці tempplates. У візуальний редактордостатньо вибрати зі списку необхідний варіант та доповнити його потрібними даними. Особливість шаблонізації - Відокремлення логіки від уявлення.

Кому та навіщо потрібні шаблони?

Система Бітрікс дозволяє створювати та використовувати попередньо заготовлені шаблони, застосовуючи їх до робочих областей.

Це практичне та ефективне рішення при роботі з багатокомпонентними сторінками зі складною структурою, наприклад при роботі з інтернет-магазином або порталом новин.

Переваги правильно підібраного шаблону:

  • Перше враження. Дизайн сайту дає зрозуміти, на чому спеціалізується компанія та формувати сприятливе враження.
  • Запам'ятовуваність. Сайт асоціюється з конкретною компанією та залишається впізнаваним.
  • Цілісність. Шаблон повинен бути прописаний до дрібниць, являючи собою гармонійну картину.
  • Функціональність. Привабливість поєднується з юзабіліті та практичністю.
Самостійне створення шаблону для 1С Bitrix

Структура шаблону 1С Бітрікс є сукупністю файлів і папок. В основній директорії зберігається опис та Загальна інформаціядля адміністративного розподілу. Іноді там приписуються деякі додаткові функції.

Робоча область шаблону служить розміщення основного вмісту, а необхідність поділу обумовлена ​​структурою. Вона позначається як work_area та прописується у формі редагування, виступаючи у ролі роздільника простору.

Основні розділи сайту представлені у вигляді відповідних директорій. Основа шаблону 1С Бітрікс - файли header та footer. Вони прописується код, підключається виклик розширень, CSS та інші функції.

Динамічний вміст включається до шаблону з директивами Бітрікс Фреймворк. Тут задаються PHP-вставки, що викликають спеціальні компоненти Бітрікс.

Спочатку задаються заголовок, іконки, таблиці каскадних стилів, теги та інші базові параметри. Після цього необхідно визначити місце розташування адміністративної частини. Всі робочі зображення краще розміщувати в одній папці.

Нумерований список із меню замінюється викликом компонента Бітрікс для створення та редагування пунктів. У вигляді компонентів створено більшість інших стандартних елементів.

Для розміщення необхідного розширення на попередньо вибране місце сторінки вставляється код виклику. Спочатку він знаходиться у документації користувача або у вкладці візуального редактора.

Ще один важливий аспект - файли CSS шаблону. Спочатку їх три: основний та два допоміжні для оформлення вмісту. Але це розмежування є дуже умовним, адже всі елементи тісно взаємопов'язані між собою.

Як встановити шаблон?

Установка готового шаблону здійснюється за такою схемою:

  • У розділі шаблонів панелі адміністратора необхідно вибрати кнопку «додати»;
  • Форма створення стандартна: у ній задається ID, назва та опис;
  • При роботі з html важливо чітко розділяти елементи, що належать до оформлення та контенту;
  • У полі редагування вставляється директива work_area, куди копіюється шаблон;
  • За наявності CSS необхідно перейти у вкладку стилів, куди вставляється код;
  • Можна зберегти результат та оцінити отриману роботу.
  • Заключна частина – вказівка ​​всіх змінних Бітріксів, які прописуються у файлі header. Важливо не забувати редагувати шляхи CSS і зберігати проміжні результати. Після цього можна застосувати шаблон до сайту, вибравши його у відповідному списку налаштувань продукту.

    Висновки

    Шаблони 1С Бітрікс досить практичні та функціональні. Їх використання значно спростить та прискорить розробку проекту. Можна придбати шаблони на сайті компанії.

    Інтернет магазин Plitka.ua працює з продажу плитки та сантехніки з 1999 року. Проект розроблений для того, щоб надати потрібну інформаційну та практичну підтримку Клієнтам та людям, для яких це питання цікаве та актуальне. На сторінках сайту, є можливість знайти тематичні статті про тонкощі виробництва, вибір якісної плитки, новини дизайну та техніки укладання! Реалізований у проекті сервіс фільтрації та підбору товарів дає можливість швидкого вибору товару із колекції. На Інтернет-ресурсі клієнт проходить весь цикл купівлі плитки та сантехніки разом із консультантами:
    - Продаж та консультація при купівлі плитки та сантехніки.
    - Допомога у виборі супутніх матеріалів, які також можна замовити у нас.
    - Доставка товару.
    - Консультація дизайнера, та розробка індивідуального та дизайну приміщення.
    - Укладання плитки або встановлення сантехніки кваліфікованими фахівцями.

    Унікальний брендовий дизайн, якісні фотографії, детальний опис товарів дають можливість якісно виділити цей ресурс серед інших інтернет-магазинів оздоблювальних матеріалів.

    Історії успіху


    Недержавний пенсійний фонд електроенергетики засновано 1994 року, він входить до топ-10 НПФ Росії. У 2010 році для роботи з корпоративними клієнтамина запит НПФ електроенергетики компанія AREALIDEA розробила CRM-систему під ключ. Через чотири роки цього виявилося замало.
    «Тюменський ЦУМ» – це торговельний комплекс у центрі міста площею 35 600 кв. м. (GBA) із купівельним трафіком 5 млн осіб на рік. Орендний та власний бізнес. Асортимент товарів 250 000 SKU.
    «Тотальний диктант» – це освітній проект, який допомагає перевірити ваші знання з російської мови.
    Новий сайт мав стати зручним ресурсом, де можна легко та швидко отримати інформацію про проекти Об'єднаної металургійної компанії. Для реалізації проекту обрали альянс AIC+QSOFT. Розробники порадили робити сайт на CMS «1С-Бітрікс» - у них у портфоліо вже були проекти для великих компанійстворені на цій платформі.
    Як поставити на конвеєр автоматичне виробництво повітряних кульз персональним дизайном та уникнути при цьому людських помилок? Керівники мережі магазинів «Весела затія» довірили цей ключовий бізнес-процес системі управління сайтом «1С-Бітрікс» та розробникам з ANIART. Після повної реконструкції новий інтернет-магазин став приносити понад 100 замовлень на день, що перевершило всі очікування.
    За останні роки тема здорового способу життя все частіше піднімається у медіа та активно підтримується у корпоративному секторі. Люди починають віддавати перевагу стравам їх натуральних продуктів, займатися спортом та вживати очищену воду. Важливу роль у цьому відіграла українська компанія Ecosoft, яка розробила десятки альтернативних рішень щодо систем очищення води та постачає їх до 46 країн світу. Їм вдалося на одному онлайн-майданчику розмістити весь каталог продукції, карту якості води, детальну документацію на всі рішення, унікальні картки товарів із клієнтськими кейсами, онлайн-підтримку та запустити повноцінні B2B-продажи.
    У грудні 2015 року керівництво «Івашки» вирішило створити єдиний сайт для всіх філій, загальною системоюобліку та аналітики та уніфікованим дизайном, та поєднати його з системою управління підприємством. Розробкою нового сайту зайнялася студія Uberweb. Вони ж робили для компанії попередні версіїсайту. Щодо вибору CMS сумнівів не було. Розробники й раніше використовували «1С-Бітрікс», але цього разу обрали версію Enterprise– у ній було більше функцій, які були важливими для великого бізнесу.
    Останні вісім років наш сайт працював на застарілій CMS без підтримки. Повільне завантаженнясторінок сайту, відсутність мобільної версії, проблеми лінійних співробітників (не розробників) із взаємодією з CMS - все це обмежувало потенціал нашої компанії. Ми вирішили, що сайт лідера ринку має відповідати всім сучасним вимогам, які висувають до нього як пошукові системи, так і користувачі  - працівники та клієнти.
    Перед ресурсом ставилося завдання ефективно транслювати корпоративну та продуктову інформацію. Необхідно було переконливо та емоційно розповісти про забудовника. Показати історію, досвід, репутацію бренду. Також важливо було ефектно презентувати об'єкти, що будуються: дати вичерпну інформацію і розвіяти побоювання покупців.
    Одним із першопрохідників онлайн-продажів продукції Apple у Росії став спеціалізований магазин re:Store. Через роки компанія об'єднує кілька таких майданчиків, а її прибуток від онлайн-продажів зростає астрономічними темпами. Причиною успіху там називають технологічну платформу, яка спромоглася об'єднати дуже різні за своєю суттю інтернет-магазини в єдине ціле.
    Київський універмаг « Дитячий світ» розрісся до найбільшого торгового майданчика дитячих магазинів в Україні і зупинятися не збирається. Але задуманий онлайн-проект за 6 років перетворився з функціонального сайту на старомодний ресурс, який перестав залучати клієнтів. Переглянувши можливості онлайн-бізнесу, компанія перезапустила інтернет-магазин на новій платформі та збільшила його відвідуваність у 11 разів.
    У мінливому світі, кожна хвилина дорогоцінна. Але як наповнити її позитивними емоціями? Відповідь знайшли власники інтернет-магазину KAANNI у створенні та продажу декоративних подушок ручної роботи. Вони передають тепло рук та душі майстрів, які їх створюють. Такий подарунок набуває особливої ​​цінності, викликає теплі спогади щоразу, коли стосується рука чи падає погляд.
    Land Rover – це легендарна марка автомобілів, з якою компанія Landstore працює вже багато років. Вони не тільки знаються на ремонті та обслуговуванні цих машини, але й активно займаються продажем оригінальних автозапчастин на всі моделі, починаючи від 1995 року. Власники Land Rover вміють цінувати якість товару та послуг. Тому компанія завжди намагається дбати про своїх клієнтів і хоче запропонувати максимально зручний та якісний онлайн-сервіс як окремим користувачам, так і оптовим компаніям-партнерам.
    «Провести вихідні далеко від міської суєти та цивілізації, в екологічно чистому місці, оточеному Карпатськими горами, і насолодитися природою». Саме так звучить одне із найпопулярніших бажань кожного другого міського мешканця. І так хочеться, щоб хтось узяв на себе весь клопіт із бронювання, залишивши тільки відчуття гарного відпочинку. За допомогою нового сайту гірський готель «Карпатські полонини» втілив цю мрію та почав продавати її своїм клієнтам. Після переїзду на нову платформумобільний трафік зріс на 48%
    Щоб отримувати вагомий прибуток, зовсім не обов'язково витрачатися на вивіски, вітрини та юрби обслуговуючого персоналу. Інтернет-магазин дитячих товарів Esky на платформі "1С-Бітрікс" витримує конкуренцію з офлайн-мережами. Це стало можливим після оптимізації роботи складу та служби доставки. За сім років проект вийшов на федеральний рівень. Він забрав вагому частину клієнтів у багатоканального бізнесу та не витратив ані рубля на організацію власної фізичної мережі.
    Одним із найуспішніших сегментів для продажу в інтернеті є взуття. Група компаній «Взуття Росії» продумала детальну концепцію розвитку інтернет-бізнесу та по черзі вивела в інтернет кілька своїх брендів. Зусилля не зникли задарма, сайт інтернет-магазину на платформі «1С-Бітрікс» щомісяця відвідує понад 100 тис. людей.

    У цій статті ми з вами розглянемо всі особливості створення шаблону для Бітрікса з нуля. Не важливо, чи є у вас готова верстка, чи ви просто перфекціоніст, якому тільки дай щось написати самому без посередників 🙂

    Які файли потрібні для створення шаблону

    Зовнішній вигляд вашого сайту (або подання сайту) завжди зберігається в якійсь окремій папці. У 1С-Бітрікс шлях до шаблону лежить через папку bitrix, в якій є папка templates і вже в ній перелік всіх наших шаблонів.

    Шлях до шаблонів: /bitrix/templates/

    Створити шаблон можна 3 способами:

  • можна скопіювати готовий шаблоні на його основі змінювати під себе
  • можна створити через адмінку порожній шаблон
  • можна створити порожню папку і поступово заповнювати її файлами та папками
  • Як ви зрозуміли третій варіант найхардкорніший 🙂. Зайдемо в адмінку, Адміністрація > Установки > Установки продукту > Сайти > Шаблони сайтів > Додати шаблон .
    посилання щодо сайту: /bitrix/admin/template_admin.php?lang=ua

    ID шаблон це по суті ім'я папки в якій він буде лежати, я назву development . Інші поля заповніть як зручніше, вони зараз не дуже важливі. У код шаблону додайте наступний код:

    #WORK_AREA#

    - пишемо цей рядок, щоб файл не можна було викликати безпосередньо з браузера і він не почав виконуватись;
    - показуємо поточний title для сторінки;
    - показуємо keywords, description та всі скрипти;
    - Показуємо панель для адмінів.

    Після збереження шаблону мій файл description.php виглядає так:

    Відмінно, у нас в корені повинні залишитися 5 файлів, решта Наразіми не будемо використовувати:

    • description.php,
    • header.php,
    • footer.php,
    • styles.css,
    • template_styles.css

    Та частина коду, яка знаходиться до #WORK_AREA#, в результаті записується в header.php. Вгадайте, яка частина записується у footer.php 🙂 (та, що після неї). Сама ворк-арея є динамічний контент(не завжди він такий і динамічний), який знаходиться, наприклад, у папці /contacts/ або /about/ у файлі index.php. Сам файл зазвичай починається підключенням хедера і закінчується підключенням футера:

    Text хір

    Поки що все виглядає логічно.

    1С-Бітрікс папки та структура нового шаблону

    У документації є кілька рекомендацій, які особисто мені не дуже подобаються. По-перше, вони люблять називати папку із зображеннями images замість скороченого img . І, я, звичайно, все розумію, але коли ви пишите стилі, вам у будь-якому випадку потрібно посилатися на зображення, навіщо писати в 2 рази більше? 🙂 . По-друге, була така рекомендація, зберігати області в папці include_areas — чому б не створити inc ? По-третє, навіщо нам 2 файли зі стилями? Якщо мені захочеться винести все в окремий файл і підключати потім за потребою, то ці стилі будуть зберігатися або у шаблоні компонента, або в папці css шаблону.

    Якщо підсумувати, наша правильна структурашаблону:

    Include_areas images components js

    Якщо бути трохи бунтарем, то:

    Inc img components js

    Вас у принципі ніхто не обмежує, це лише рекомендації.

    І ось ми плавно підійшли до першої проблеми – хардкод. Хардкод це коли ви замість динамічних значень, наприклад доменне ім'я, використовуєте текстовий запис. Більшість розробників-початківців не знають про константу SITE_ TEMPLATE_ PATH, яка в якості значення зберігає шлях до поточного шаблону - в нашому випадку це /bitrix/templates/development (без зліку в кінці, зверніть увагу). І тому, коли ви будете підключати свої скрипти або області, що включаються, для папки потрібно писати: