Як вивести властивість товару інфоблоку Бітрікс

Як, як же це сідлати, мучаюся вже котрий день і в мене не чого не виходить, допоможіть! Саме так я уявляю не має досвіду web-розробника у якого щось не виходить.

У цьому пості хочу поділитися як вивести різні властивості товару в різних табах, наприклад, у картці товару інтернет-магазину Бітрікс.

Різні таби різні властивості

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

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

Так як сайти на Бітрікс я роблю не для себе коханого, а конкретного замовника, то тут потрібно думати ще і як майбутній користувач сайту, який обмежений у своїх знаннях у web-програмуванні сайтів. Що буде якщо сьогодні цих самих властивостей до прикладу 5, а завтра їх стало 10, що замовник знову повинен бігти до розробника сайтів на Бітрікс з проханням, що в нього щось не виводиться нові властивості. Загалом якщо ви є web-розробником сайтів не важливо на якій платформі ви їх робитимете, найголовніше думати прокористувачам які цим надалі користуватимуться, робити потрібно по максиму універсально, щоб потім якнайменше лазити в код і щось там правити.

Створюємо властивість для інфоблоку

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

Ідемо в налаштування інфоблоку каталог, вкладка властивість. Сподіваюся, що сам ІБ у вас уже створено. Тут нам потрібно прописати всі назви та типи для наших майбутніх властивостей товару.

Тут найголовніше, що варто звернути увагу вказано вище на скріншоті:

1 -Назва властивість– це сама назва, яку ми будемо бачити при заповненні даної властивості.

2 -Тип властивість- тут є досить великий вибір, властивість може бути різним за своїм типом, рядок або файл і т.д.

3 -Код властивість- його потрібно вказати англійською мовою і як прийнято великими літерами.

Після цього як всі необхідні властивості вказані, тиснемо кнопку зберегти. Далі нам потрібно перейти в каталог, створити сам товар і заповнити потрібні йому властивості.

Програмуємо картку товару Бітрікс

Справа залишилася за малим це все, що ми створили, потрібно вивести на візуальну частину інтернет-магазину на Бітрікс. Для цього потрібно скопіювати сам компонент каталогу собі, як люблять говорити дітлахи з компанії Бітрікс - у свій простір імен. Далі потрібно відкрити папку catalog.element, яка відповідає за відображення самої картки товару і в ній відкрити файл під назвою template.php, вякому ми і надалі працюватимемо.

Тут відображення всіх елементів в 99% у всіх різні, так як дизайн і завдання так само різні, думаю з цим все ясно. Але якщо ви читаєте цей пост, то означає як мінімум тиби або щось подібне у вашому дизайні так само присутній.

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

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

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

Пропоную нагадати, як він виглядає на візуальній частині сайту.

Це якийсь список ul-li, який виводить властивості, але тільки тих, які нам потрібні саме на цьому тобі, а не весь список цілком. Після тега ul я створив змінну і назвав її досить банально $per в неї я заніс ту назву ключа, яка зберігає в собі властивість, яку я планую вивести в наступному тобі, таких ключів може бути скільки завгодно і їх можна перераховувати до нескінченності . Для тих хто не зрозумів, ключ INSTRUCTIONS зберігає в собі в моєму випадку властивість, яка відповідає за файли та інструкції, це третій таб.

Ну, а далі справа техніки, потрібно запустити цикл foreach або як я люблю його називати хитрий форич $propsTab): ?> та пройтися нашими li але, після самого запуску циклу як ви можете помітити я застосував цей найбільш лівий бічний за допомогою якого ми себе та фільтруватимемо висновок наших властивостей у даному табі. Дана конструкція php коду нам виключить висновок тих ключів властивостей яких, власне, я і зберіг у змінну $per. Так само важливо пускати саме цикл за властивістю, а непросто виводити їх за ключамимасиву. Такий запис нам допоможе в подальшому уникнути проблем при додаванні нових властивостей до інфоблоку, вони будуть поваляться автоматично.