Задать вопрос
  • Как сделать пролистывание картинок в карточке товара?

    @alezzz
    Использовали Tiny Slider
    Смотреть код

    initTinySlider() {
    			/**
    			 * Content carousel with extensive options to control behaviour and appearance
    			 * @requires https://github.com/ganlanyuan/tiny-slider
    			 */
    			let forEach = function forEach(array, callback, scope) {
    				for (let i = 0; i < array.length; i++) {
    					callback.call(scope, i, array[i]); // passes back stuff we need
    				}
    			}; // Carousel initialisation
    
    
    			let carousels = document.querySelectorAll('.tns-carousel .tns-carousel-inner:not(.tns-slider)');
    			let carousels1 = document.querySelectorAll('.preview-slider');
    			forEach(carousels1, (index, value) => {
    				let defaults = {
    					mode: 'gallery',
    					container: value,
    					controlsText: ['<span class="gm-angle-left"></span>', '<span class="gm-angle-right"></span>'],
    					navPosition: 'bottom',
    					mouseDrag: true,
    					speed: 500,
    					lazyload: true,
    					autoplayHoverPause: true,
    					autoplayButtonOutput: false,
    					controls: false,
    					navAsThumbnails: false,
    					center: true,
    					responsive: {
    						900: {
    							controls: false
    						}
    					}
    				};
    				let userOptions;
    				if (value.dataset.carouselOptions != undefined) {
    					userOptions = JSON.parse(value.dataset.carouselOptions);
    				}
    				let options = Object.assign({}, defaults, userOptions);
    				let carousel1 = tns(options);
    				const sectorWith = value.offsetWidth / value.dataset.count; // ширина сектора в зависимости от количества cлайдов
    				let positionX = 0; // координата по горизонтали относительно элемента
    				let sector = 1; // текущий слайд
    				value.addEventListener("mousemove", (e) => {
    					let x = e.clientX;
    					let rect = e.target.getBoundingClientRect();
    					let offsetX = x - rect.left; // текущая координата по горизонтали
    					let currentSector = Math.floor(offsetX / sectorWith);
    					if (currentSector !== sector) {
    						sector = currentSector;
    						carousel1.goTo(currentSector);
    					}
    				});
    
    			});
    			forEach(carousels, (index, value) => {
    				let defaults = {
    					mode: 'gallery',
    					container: value,
    					controlsText: ['<span class="gm-angle-left"></span>', '<span class="gm-angle-right"></span>'],
    					navPosition: 'bottom',
    					mouseDrag: true,
    					speed: 500,
    					lazyload: true,
    					autoplayHoverPause: true,
    					autoplayButtonOutput: false,
    					controls: false,
    					navAsThumbnails: false,
    					center: true,
    					responsive: {
    						900: {
    							controls: false
    						}
    					}
    				};
    				let userOptions;
    				if (value.dataset.carouselOptions != undefined) {
    					userOptions = JSON.parse(value.dataset.carouselOptions);
    				}
    				let options = Object.assign({}, defaults, userOptions);
    				let carousel = tns(options);
    
    			});
    		},


    Как это работает можно посмотреть тут
    Ответ написан
    Комментировать
  • Как лучше обратиться к кнопке через id или через class?

    @alezzz
    Обращение через id работает быстрее. Для уникальных элементов использую id.
    Ответ написан
    Комментировать
  • Как перенести данные из файла php в файл js?

    @alezzz
    выведите внутри тега<head> ваш массив, до того как подключается файл script.js
    <script>window.objJq = {"PATH_TO_TEMPLATE":"/bitrix/component/catalog.element/test/","WORDS":Раз, два","ARRAY":{"Test1":1,"Test2":3}</script>

    И в файле script.js обращайтесь к элементам массива
    let testOne = window.objJq.ARRAY.Test1;
    Ответ написан
    Комментировать
  • Как собрать сборку gulp для многостраничного сайта?

    @alezzz
    Раньше делал отдельные файлы под каждый тип страницы: Категория, Карточка товара, Корзина и тп.
    Сейчас пришел к одному (точнее 2-м) файлам: первый - библиотеки, второй - свой JS.
    В исходниках - это отдельные файлы-модули, которые gulp-ом собираются в один обсуфицированный файл.
    Модули подключаю для каждого типа страницы свои (кроме общих для всего сайта).
    Делаю так:
    // общие для всех страниц модули
    $(() => {
    	site.cart.drawCart();
    	site.theme.init();
    	site.common.init();
    	site.forms.init();
    	site.cart.init();
    	site.search.init();
    	site.theme.initHorizontalSliders();
    
    	// модули в зависимости от типа страницы
    	switch (method) {
    		case 'content':
    			switch (pageId) {
    				case 0:
    				  break;
    				default:
    			}
    			break;
    		case 'category':
    			site.category.init();
    			break;
    		case 'object':
    			site.object.init();
    			site.category.init();
    			break;
    		case 'cart':
    			site.cart.initCartPage();
    			break;
    		case 'purchasing_one_step':
    			break;
    		default:
    	}
    });

    В итоге получаем один файл и время выполнения скриптов уменьшается.
    Задание в gulp примерно такое:
    gulp.task('uglify:js', () => {
      return gulp.src(path.src_js + '/**/*.js')
          .pipe(concat('theme.min.js'))
          .pipe(babel({
            presets: ['@babel/env']
          }))
          .pipe(uglify())
          .pipe(rename({ basename: dateNow}))
          .pipe(gulp.dest(path.dist_js_theme));
    });
    Ответ написан
    Комментировать
  • Как найти значение по ключу в многомерном ассоциированном массиве?

    @alezzz Автор вопроса
    В общем есть решения, которые могут найти значения элементов, которые не содержат массив внутри. В моем примере это key0, key6 и тп.
    Пример:
    function array_column_recursive(array $haystack, $needle) {
        $found = [];
        array_walk_recursive($haystack, function($value, $key) use (&$found, $needle) {
            if ($key == $needle)
                $found[] = $value;
        });
        return $found;
    }

    Но не получается получить элементы внутри которых содержатся массивы. Например key1, key4, key5 и тп
    Ответ написан
    Комментировать
  • Есть ли где то понятная схема базы данных umi cms?

    @alezzz
    Согласен, что обращаться напрямую к БД UMI - не самая лучшая идея.
    В UMI CMS есть встроенный импорт из CSV, который отлично работает.
    Если он по какой-либо причине по подходит, можно добавить свой сплиттер
    Ответ написан
    Комментировать
  • FancyBox v3/Owl Carousel v2 как решить проблему с зацикленной каруселью?

    @alezzz
    Можно например так:
    $().fancybox({
        selector : '.owl-item:not(.cloned) a'
    });
    Ответ написан
    2 комментария