Alams Stoyne

Я использую псевдоэлементы :before и :after у обертки label а сами checkbox и radio скрываю (активируя через for)

Научитесь писать читаемый код (отступы) и проверять открытие и закрытие скобок таких { и таких (

Пробуйте должно работать:

<?php
require "db.php";
$data = $_POST;
if( isset($data['do_login']) )
    {
        $errors = array();
        $user = R::find('user', 'login = ?', array($data['login']));
        if($user)
        {  
            if( password_verify($data['password'], $user->password ) ) /* $user->password в скобки заключать бессмысленно */
            {
                /* ТУТ Видимо авторизация */
            }else{ 
                $errors[] = 'Неверное введён пароль!;';}
            }
        }else{
            $errors[] = 'Пользователь с таким логином не найден!;';}
        }
    }
?>

Если знаешь позицию необходимого значение то выводишь его а потом всё остальное кроме него

$a = array(1, 2, 3, 4);
echo  $a[1].'</br>';
foreach ($a as $b) {
if($a[1] !== $b){ echo  $b.'</br>'; }
}

Если не знаешь то

$a = array(1, 3, 2, 4);
$key = array_search(2, $array);
echo  $a[$key].'</br>';
foreach ($a as $b) {
if($a[$key] !== $b){ echo  $b.'</br>'; }
}

$('.slick-slider .slider-items').slick({
        infinite: true,
        slidesToShow: 1,
        slidesToScroll: 1,
        dots: true,
        arrows: true,
        dotsClass: 'nav slide-dots',
        prevArrow: '<div class="prev"></div>',
        nextArrow: '<div class="next"></div>',	
        appendArrows: '.slider-navigation',		
        appendDots: '.slider-dots',
    });

appendArrows - Куда вставить кнопки
appendDots - Куда вставить точки

А в твоём случае это можно решить CSS - т.е контейнер с кнопками должен быть в длину фото

.slider2-image-wrapper{
width: (Тут длина фото)px;
position: absolute;
bottom: 0;
z-index: 2;
}

Laravel - это PHP vs Node.js - это JavaScript = тут всё зависит от того что ВЫ знаете?
PHP - более популярен среди разработчиков под Web (Laravel, Yii, Zend, CodeIgniter) и серверов настроенных под работу PHP много больше.
Node.js - удобен при разработках продуктов типа SPA (single page application) - тут тебе и vue / react / angular несомненно это шустро и качественно работает при правильном проектировании приложения и разработке.
К слову конфигурирование сервера и запуск / перезапуск проекта на Node.js отличаются от привычного PHP и в этом тоже нужно понимать.

Готового решения под ваши задачи нет ни там ни там (так чтоб из коробки - взял + поставил = работает).

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

Воспроизведение функционала доступного в 1С Битрикс (ИМ + 1С + CRM + Касса + Платежная система) займет от 2 до 6 месяцев разработки как следствие ценник.

Вот и думайте оно Вам точно надо?

Может быть вся беда в том что вы неэффективно используете 1С Битрикс или напротив перемудрили?
1С Битрикс - это тоже на PHP но данную систему нужно правильно "кастрировать" и вычищать / отключать не используемое тогда и летать будет и работать как швейцарские часы.
При наличии адекватного программиста перестать использовать стандартные компоненты для вывода и обработки, а использовать свои компоненты создав их с использованием API 1C Framework.

P.s. Если всё же менять CMS 1С Битрикс то я бы предложил посмотреть в сторону OpenCart.

Всё вышеизложенное является моим Личным мнением основанном на опыте и доступно для дискуссии : )

Советую для начала вывести

var_dump($arSection);
var_dump($arResult);

И вы поймете что вообще есть в этих переменных.
Могу предположить что там нет массива ['DETAIL_PICTURE']['SRC'] и ['PICTURE']['SRC'] а лишь ['DETAIL_PICTURE'] и ['PICTURE'] с указанием ID файлов, а не пути до них.
Для этого используйте:

$image_src =  CFile::GetPath($arSection["PICTURE"]);
echo '<img src="<?=$image_src?>">';

Или как я делаю сразу ресайз :

$image =  CFile::ResizeImageGet($arSection['PICTURE'], array('width'=>1024, 'height'=>768), BX_RESIZE_IMAGE_PROPORTIONAL, true);
echo '<img src="'.$image['src'].'">';

Попробуй так:

<?
AddEventHandler("iblock", "OnAfterIBlockElementAdd", Array("OBEAClass", "OBEA")); // объявляем обработчики 
AddEventHandler("iblock", "OnAfterIBlockElementUpdate", Array("OBEAClass", "OBEA"));
class OBEAClass 
{
    public static $disableHandler = false;
    function OBEA(&$arFields)
    { 
        if (self::$disableHandler){return;}        
        CModule::IncludeModule("iblock");
        if( $arFields["ID"]> 0 && $arFields["IBLOCK_ID"] == "33") // ID основного каталога товаров
        {

            $db_props = CIBlockElement::GetProperty($arFields["IBLOCK_ID"], $arFields["ID"], Array("sort"=>"asc"), Array("CODE"=>"CML2_ARTICLE"));
            if($ar_props = $db_props->Fetch()){
                $arLoadProductArray = Array("CODE" => mb_strtolower($ar_props["VALUE"]));
                if($res = $el->Update($arFields["ID"], $arLoadProductArray)){

                }
            }
            self::$disableHandler = true; //отключаем
        }         
    }
}
?>

Я бы сделал так:

<div class="d-flex flex-wrap">
    <div class="block">1</div>
    <div class="block">2</div>
    <div class="block">3</div>
    <div class="block">4</div>
    <div class="block">5</div>
    <div class="block">6</div>
</div>

.block{
    max-width: calc(100%/3 - 20px); 
    margin: 10px;
    border: 1px solid #000;
}

Например есть слайдер Slick а разметку я бы сделал примерно так:

<div class="slider slick">
    <div>
        <h3>Понедельник</h3>
        <div class="d-flex">
            <div><img src="" alt=""><p>Блюдо 1</p></div>
            <div><img src="" alt=""><p>Блюдо 2</p></div>
            <div><img src="" alt=""><p>Блюдо 3</p></div>
            <div><img src="" alt=""><p>Блюдо 4</p></div>
            <div><img src="" alt=""><p>Блюдо 5</p></div>   
        </div>
    </div>
    <div>
        <h3>Вторник</h3>
        <div class="d-flex">
            <div><img src="" alt=""><p>Блюдо 1</p></div>
            <div><img src="" alt=""><p>Блюдо 2</p></div>
            <div><img src="" alt=""><p>Блюдо 3</p></div>
            <div><img src="" alt=""><p>Блюдо 4</p></div>
            <div><img src="" alt=""><p>Блюдо 5</p></div>   
        </div>
    </div>
    ...
    <div>
        <h3>Воскресение</h3>
        <div class="d-flex">
            <div><img src="" alt=""><p>Блюдо 1</p></div>
            <div><img src="" alt=""><p>Блюдо 2</p></div>
            <div><img src="" alt=""><p>Блюдо 3</p></div>
            <div><img src="" alt=""><p>Блюдо 4</p></div>
            <div><img src="" alt=""><p>Блюдо 5</p></div>   
        </div>
    </div>
</div>