Вкладки (таби) на картці товару в 1С-Бітрікс 14
Дізнатися більше про те, як легко робляться сучасні інтернет-магазини Ви можете підписавшись на мою розсилку:
Колонка у нас йде ось у нас ще права.
Тому що тут у нас скрізь верстка а це у нас вже не верстка і так я викликав тут саме виклик самого каталогу tabs але давайте трошки пробіжимося саме по самому за викликом компонента я тут поясню що означає кожен рядок тобто кожен параметр справа в тому що у нас викликаються якісь компоненти саме ось цією конструкцією applications include компонент після цього в дужках перебитися параметр першим параметром йде який компонент у нас викликатися тобто це ім'я компонента почали пишеться простір імен бітрикс потім через виточена звання самого компонента далі наступний рядок або наступний параметр це шаблон компонента якщо порожній означає дефолт наступний рядок або наступний параметр це ось а рот компонента але в нас якраз комплексно використовуватися тому нам треба використовувати тут об'єкт комплексного компонента батьківського і в шаблоні комплексного компонента у нас вже визначено ось така змінна яка називається компонент ми просто і пишемо в будь-якому простому компоненті якщо він викликається з комплексу ось цю змінну і вона автоматично ось вказує на потрібний нам об'єкт батьківського елемента ну і далі у нас є ще до параметри це тут простий масив де може бути наприклад ось хоч і konce та тобто нам треба приховати іконку налаштування імена цього компонента цих вкладок і тут стоїть ось наприклад y тут щеможе бути наприклад параметра актив компонент так тобто компонент активний або не активний включений він або вимкнений в принципі теж можна тобто у нас може використовуватися компонентами прямо тут одним параметром можемо вимкнути принципі це теж може використовуватися так ми з вами зробили так що у нас викликали ось цей самий компонент який у нас повинен показувати те б і ось тут у нас є are the pro ms нас вони не задані ходімо їх теж звідти з дернем ось цей арота params я тут його виділю і ось звідси його візьму control c5 натискаю вставляю і тут.
Нас передаються дані і тут у нас доведеться еге ідея передавати не буду я його звідси приберу він мені не потрібен він там автоматично може створюватися тому не потрібен але у нас ще є наприклад тут ось такий рядок це ширина і я задам ось просто ось цей параметр ширина я візьму види звідси і тут просто вставлю як ще один параметр і зроблю її наприклад і 200 все просто 200. Задаються ширина у пікселях для всього блоку принципі or params написали зараз у нас не вистачати їх даних давайте подивимося як у нас пишуться самі дані та ми тут піднімемося день вище і ось візьму дані ось звідси я їх просто теж копіюю і сюди до себе вставляю і так дані. Назвемо її і першу вкладочку я її назву топ 1 це не як ніде не відображається просто назва все і далі у нас йде масив далі у нас йде ім'я це назва вкладки і тут на вкладці я зробив перше ім'я припустимо це буде тесту у вклад яка -небудь та тобто для тесту приклад назву вона буде у мене активна тобто ось цей проект актив y відповідати за те що це вкладка у нас автоматично відкриватися при завантаженні сторінки на якій знаходиться ось цей компонент вкладками і далі у нас йде контент у контентпередаємо те, що має бути в цій вкладці і ось тут я зроблю який-небудь div в.
Нас пішло ось це після цього у нас йде decryptor печі він у нас тут не потрібен тому що у нас і так тут скрізь є потрібно нам decryptor та ми зараз все не будемо виводити прямо на екран ми повинні виводити все це у рядок рядок це у нас буде до речі далі ми з вами перевіряємо якщо у нас детальний опис це ми всі залишаємо нехай вона буде якщо вона є тоді нам треба виводити ось ці ось диви тобто ми з вами пишемо ось цей ось знову змінну ми до неї додаємо те.
Є. так само і поїхали заганяти інші дива які у нас тут використовуються в принципі як вони у нас в один з одним чи ні нам по барабану але ось тут у нас йде item description а ми з вами якщо подивимося на сторінці то це у нас ось повне опис нам в принципі ось це повне опис з підкреслення не треба тому що буде у нас вкладка на якій буде написано повний опис тому ось ось це можна просто прибрати вона нам тут просто не потрібно тому в принципі його прибираємо весь цей div прибираємо він нам не потрібен а далі у нас просто виводиться a result деталь текст причому він у нас водиться або в тегах п якщо використовуватися що це у нас html або якщо у нас просто тексту без тегів п в принципі нам виводити їх у тезі п можна і не побачити тому що нас скрізь використовується html і там ті хто вже у мене за замовчуванням по вас скрізь стоїть тому ми просто візьмемо і сюди зробимо висновок ось цієї змінний detail текст і не будемо просто морочитися з цього приводу і все природно ось це все прибираємо зайве після цього нам треба природно закрити це div що я ось це все також праю та тут я просто тоді роблю ще. Додатково було закриваючий div тег.
Усев принципі, далі у нас ось ці всі. Теги ми прибираємо цей тест ми теж.
Прибираємо і ось цей тег div нам теж не потрібний все в принципі у нас все тут готове тобто все що у нас залишилося це нам на вивести ось цієї div з оком і там info section в ньому вивести сам детальний текст і в кінці нам треба закрити цей div і до речі це div нам треба по-любому закрити навіть є у нас немає детального тексту тому я ось це переношу сюди все в принципі ми з вами написали дуже простеньку сходинку зберігаємо дивимося що у нас з вами вийшло до речі скидаємо кеш і ось ми з бачимо.
Повний опис назва повний опис у нас зникла у нас є приклад і ви бачите що при завантаженні сторінки відразу відкриватися повний опис тобто це вкладка у нас за замовчуванням виходить активною і так все здорово повний опис ми з вами отримали зараз нам потрібні ще характеристики є ось ці характеристики звідси нам треба прибрати їх ось сюди ось поставити в характеристиці а тут складатися тільки ось ці ось артикул і самі ось ці торгові пропозиції вибір і кнопочку купити і так далі тобто нам треба знайти ось ці характеристики природно вони називаються properties тут робимо складочку характеристики так що поїхали дивитися наступну вкладку ми з вами беремо одну з вкладок копіюємо і тут після tab 2 ми з вами вставляємо вкладочку tab 3 звані характеристики контент відразу тут вставляємо якусь ту ж змінну назвемо її характер кант то. Є це характеристики яка ми сюди вставлятимемо ну а саму perry ну ми зараз заповнимо виходячи з того що у нас вами використовує орське я запам'ятовую 605 рядок зараз ми з вами будемо шукати де у нас там є property тому що саме за рахунок property у нас виводиться ось цей блок десь він у нас виненбути property тип це все ні то так так можу вам довго стати так мабуть я швидше знайду та ось я знайшов так.
Дійсно швидше справа в тому що у нас ось тут є окремо display properties до речі тут у множині тому через property я б не знайшов через ігри тут properties так що у нас тут виводиться циклом всі наші характеристики які є якщо вони взагалі є а трохи нижче у нас виводиться і ще й характеристики торгових пропозицій тобто це ті прості характеристики які у нас наприклад ось це ж самий артикул на який змінюється залежності від обраної торгової пропозиції і зараз нам з вами треба ось цей блок звідси взяти і просто туди перенести і тут ми з вами повинні обов'язково використовувати ось цей div і темп інфо section справа в тому, що від нього залежить саме вся розмітка це ось ці ось там д т д д і так далі тобто асоціативна списку яка використовується вони у нас всі країни відразу ось для цього блоку і додому нехай екшену це взагалі перевірено вже на піку тому ми не геть косячіть відразу разом з цим блоком все і заберемо і так все що нам треба зробити це ось ми візьмемо разом з цим блоком я роблю kontrol ц ці характеристики я поки сюди видаляти не буду запам'ятовуємо 273 рядок потім видалімо йдемо назад в 600 п'ятий рядок ось тут у нас виводяться характеристики саме тут я їх і виведу і так все що нам треба зробити це вивести ось ці ось характеристики і перше це нам треба ось цей блок повісті тобто я копіюю нашу змінну яка нам потрібна і знову все заганяю прямо в неї як раніше роблю і заганяю сюди на початку div все загнав. комою після цього в кінці мені треба в цю змінну це div не забути закрити в самому кінці перед тим як викликати саме цю вкладку я роблю знову. одноі тут цей div закриваю всі діви закрити не забули після цього ми з вами дивимося якщо у нас в чеку the properties ну властивість у нас завжди є тому ось це ось цей блок ця умова я використовує просто не буду тому я його просто стираю а вона нам не потрібна я бачу що у мене ще повинен бути dl тобто це у мене відразу вставляємо в цей рядок щоб не забути а після цього у нас вже йде з вами цикл для того щоб перебрати всі ці характеристики я прибираю всі ці відкривають і закривають теги і тут дивлюся що у мене ці властивості виводиться один за одним і в принципі все що мені треба зробити це прибрати все зайве просто і.
Все це загнати рядок але давайте спочатку зробимо трошки оформлення щоб це більш-менш нормально виглядала і так всі властивості перебираються сама властивості у мене прив'язуватися в змінну or он має рацію тому цю цю властивість ми з вами йдемо далі використовувати справам kontrol ц тут обов'язково вставляємо на кожному циклі ось цього dt тобто dt ми сюди вставили після цього нам треба сюди приліпити ім'я ми його сюди приліплюємо через конкатенацію після цього нам треба сюди ж приліпити ще закриття асоціативних списків тобто я просто ось це все вона просто виводилося я їх зараз забиваючи в рядок це все що треба зробити в принципі тобто запис весь цей рядок ну а далі у нас йде якщо у нас властивість має безліч призначення то всі характеристики виводяться через сліш в принципі це теж все зрозуміло тому ми просто беремо і так само як у нас було до цього замість м'яча ми це заганяємо все в рядок і тут може навіть залишити все як є тобто взагалі нічого не використовувати чи є у нас тут масив тоді ми з вами розбираємо ось це значення через сліш і в принципі тут навіть нічого міняти не треба тільки зробимо все це більш-менше ось так, а в кінці нам ще треба додати до нашого.
Властивості тут закрити і асоціативного списку саме цього так багато. Рухів виходять і далі у нас тут відкріплюється ця зміна ван орман прок тобто ми її просто з братством все і так в принципі що то у нас тут вийшло та ось ці всі інші ми теж прибираємо і нам треба ще закрити список тобто ми його тут ще й закриваємо дейл, нам теж треба закрити. Вся справа закрили div закрили всі закрили в принципі все має у нас працює збережемо дивимося що у нас вийшло на сторінці оновлюємося по і ми з вами маємо 609 рядку помилку синтаксису десь ми щось забули що 9 рядку від забули ми з вами забули ми з вами скобочку є. Його так то в нас? тут : його так простіше дивитися все в.
Обходимо всі ці властивості що or різав display properties youtube та ми з вами бачили що там є масив виллю тому я прямо тут його та пишу тому що ми його назвемо ми його назвемо якийсь просто там так же, як він нас зверху була також та назвемо щоб не морочитися сюди його також і поставимо. І після цього нам треба кожної властивості записати ось сюди у вигляді account я його сюди пишу.
Може бути нам треба в кінці просто додати щоб це все в тегах якихось лежала і тоді це все будуть нормально.
Включаємо режим редагування тут у нас має з'явитися ця вкладка знову ж таки з нашим кодом з нашими ведемо тобто йдемо тут.