Главная Станица Как В Шаблоне Туризм
#1
Отправлено 08 Сентябрь 2017 - 17:26
Шапка сайта остается неизменной. Остальное необходимо заменить.
#2
Отправлено 09 Сентябрь 2017 - 08:28
Уточните пожалуйста, ваши нынешние блоки(новости, информационный блок, "Бесплатная доставка по России*\Подарки при заказе от 50 тыс.*\etc.") необходимо удалить? Или новые блоки с баннерами из шаблона Туризм необходимо расположить над ними?
#3
Отправлено 10 Сентябрь 2017 - 21:06
Vaccina (09 Сентябрь 2017 - 08:28) писал:
Уточните пожалуйста, ваши нынешние блоки(новости, информационный блок, "Бесплатная доставка по России*\Подарки при заказе от 50 тыс.*\etc.") необходимо удалить? Или новые блоки с баннерами из шаблона Туризм необходимо расположить над ними?
Добрый вечер! Шапку сайта хочу оставить как есть.
Остальное все как в шаблоне Туризм.
Блок - Баннеры - Хиты продаж - Скидки - Новинки - Товары на главной - Описание магазина - Новости - Подвал сайта
#4
Отправлено 11 Сентябрь 2017 - 17:05
evros (10 Сентябрь 2017 - 21:06) писал:
Остальное все как в шаблоне Туризм.
Блок - Баннеры - Хиты продаж - Скидки - Новинки - Товары на главной - Описание магазина - Новости - Подвал сайта
<!-- Slider Слайдер --> {% IF index_page %} <div class="container"> <div id="slideshow"> <div class="preloading"><div class="folding-cube"><div class="cube1 cube"></div><div class="cube2 cube"></div><div class="cube4 cube"></div><div class="cube3 cube"></div></div></div> <!-- Slides Container --> <div class="slider"> <a href="#" title="" style="background-image: url({ASSETS_IMAGES_PATH}xspirit-aktsiya.jpg?design=sunrise);"></a> <a href="#" title="" style="background-image: url({ASSETS_IMAGES_PATH}xwega-w.jpg?design=sunrise);"></a> <a href="#" title="" style="background-image: url({ASSETS_IMAGES_PATH}xammity_leto.jpg?design=sunrise);"></a> </div> <div class="nav"> <a href="#" class="prev"></a> <a href="#" class="next"></a> </div> </div> </div> {% ENDIF %} <!-- /END Slider Слайдер -->замените на
<!-- Slider Слайдер --> {% IF index_page %} <!-- Слайдшоу--> <div id="slideshow"> <div class="preloader"><span class="content-loading"></span></div> <div class="slider owl-carousel"> <div class="item" style="background:url({ASSETS_IMAGES_PATH}slide1.jpg?design=tourism) 25% top no-repeat;"> <div class="image"><img src="{ASSETS_IMAGES_PATH}slide1.jpg?design=tourism" /></div> <div class="content" data-animation-in="fadeInUp" data-animation-out="animate-out fadeOutDown"> <div class="container"> <div class="text-content right"> <h2>Большой выбор</h2> <p>аксессуаров для путешествий</p> <a href="{CATALOG_URL}" class="button big">Каталог</a> </div> </div> </div> </div> <div class="item" style="background:url({ASSETS_IMAGES_PATH}slide2.jpg?design=tourism) 80% top no-repeat;"> <div class="image"><img src="{ASSETS_IMAGES_PATH}slide2.jpg?design=tourism" /></div> <div class="content" data-animation-in="fadeInUp" data-animation-out="animate-out fadeOutDown"> <div class="container"> <div class="text-content left"> <h2>Путешествуйте с нами</h2> <p>Скидки до 30% на новую коллекцию</p> <a href="{CATALOG_URL}" class="button big">Каталог</a> </div> </div> </div> </div> </div> </div> <!-- Баннеры --> <div id="banners"> <div class="preloader"><span class="content-loading"></span></div> <div class="banner-left"> <div class="banner-image" style="background-image: url({ASSETS_IMAGES_PATH}banner1.jpg?design=tourism);"> <div class="content big"> <h3>Стильные сумки</h3> <h4>Выберите свой аксессуар</h4> <a href="{CATALOG_URL}" class="button">Каталог</a> </div> </div> </div> <div class="banner-right"> <div class="banner-left"> <div class="banner-top"> <div class="banner-image" style="background-image: url({ASSETS_IMAGES_PATH}banner2.jpg?design=tourism);background-position: center center;"> <div class="content small"> <h3>Распродажа</h3> <h4>Скидки до 70%</h4> <a href="{CATALOG_URL}" class="button">Каталог</a> </div> </div> </div> <div class="banner-bottom"> <div class="banner-image bg"> <div class="content small"> <h3>Последний</h3> <h4>Шанс купить</h4> <a href="{CATALOG_URL}" class="button">Каталог</a> </div> </div> </div> </div> <div class="banner-right"> <div class="banner-image" style="background-image: url({ASSETS_IMAGES_PATH}banner3.jpg?design=tourism);"> <div class="content big"> <h3>Одежда</h3> <h4>Новая колекция</h4> <a href="{CATALOG_URL}" class="button">Каталог</a> </div> </div> </div> </div> </div> {% ENDIF %} <!-- /END Slider Слайдер -->
далее найдите код
$(function(){ indexPage(); });
замените на
$(function(){ indexPage(); indexPageslide();});
далее добавьте в конец файла main.js код
// Функции для главной страницы function indexPageslide() { // Слайдер на главной var owlS = $('#slideshow .owl-carousel'); owlS.owlCarousel({ items: 1, loop: true, rewind: true, lazyLoad: false, nav: false, dots: true, autoplay: true, autoplayHoverPause: true, smartSpeed: 500, dotsSpeed: 400, mouseDrag: true, touchDrag: true, pullDrag: true }); // add animate.css class(es) to the elements to be animated function setAnimation ( _elem, _InOut ) { // Store all animationend event name in a string. // cf animate.css documentation var animationEndEvent = 'webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend'; _elem.each ( function () { var $elem = $(this); var $animationType = 'animated ' + $elem.data( 'animation-' + _InOut ); $elem.addClass($animationType).one(animationEndEvent, function () { $elem.removeClass($animationType); // remove animate.css Class at the end of the animations }); }); } // Fired before current slide change owlS.on('change.owl.carousel', function(event) { var $currentItem = $('.owl-item', owlS).eq(event.item.index); var $elemsToanim = $currentItem.find("[data-animation-out]"); setAnimation ($elemsToanim, 'out'); }); // Fired after current slide has been changed owlS.on('changed.owl.carousel', function(event) { var $currentItem = $('.owl-item', owlS).eq(event.item.index); var $elemsToanim = $currentItem.find("[data-animation-in]"); setAnimation ($elemsToanim, 'in'); }); }
далее найдите в файле main.css
.block.cart .dropdown-cart, .header-top .block .dropdown, .block.compare .dropdown-compare { visibility: hidden;opacity: 0;filter: alpha(opacity=0);-khtml-opacity: 0; -webkit-transform: translate(0, 50px);-moz-transform: translate(0, 50px);-o-transform: translate(0, 50px);transform: translate(0, 50px); -webkit-transition: all 0.3s linear;-moz-transition: all 0.3s linear;-o-transition: all 0.3s linear;transition: all 0.3s linear;} .block.cart:hover .dropdown-cart, .header-top .block:hover .dropdown, .block.compare.have-items:hover .dropdown-compare { visibility: visible;opacity: 1;filter: alpha(opacity=100);-khtml-opacity: 1; -webkit-transform: translate(0);-moz-transform: translate(0);-o-transform: translate(0);transform: translate(0); -webkit-transition: all 0.3s linear;-moz-transition: all 0.3s linear;-o-transition: all 0.3s linear;transition: all 0.3s linear;}
после вставьте
/*** Слайдер ***/ #slideshow {position: relative;} #slideshow .item {position: relative;} #slideshow .item .content {position: absolute;top: 35%;width: 100%;} #slideshow .container .text-content {background: rgba(255,255,255,0.5);padding: 30px;} #slideshow .container .text-content h2 {font-family: 'PT Sans Narrow', sans-serif;letter-spacing: 0;font-size: 72px;font-weight: 700;line-height: 1.1;} #slideshow .container .text-content p {font-size: 34px;margin: 7px 0;color: #21293c;text-transform: uppercase;} #slideshow .container .text-content .button {display: inline-block;margin-top: 20px;} #slideshow .owl-dots {position: absolute;top: auto;bottom: 27px;left: auto;right: 15%;width: 100%;text-align: right;padding: 0 15px;-webkit-user-select: none;-khtml-user-select: none;-moz-user-select: none;-ms-user-select: none;user-select: none;-webkit-tap-highlight-color: rgba(0, 0, 0, 0);} #slideshow .owl-dots .owl-dot {display: inline-block;zoom: 1;} #slideshow .owl-dots .owl-dot span {display: block;position: relative;width: 18px;height: 18px;border: 2px solid #019934;border-radius: 100%;background: none;margin: 0 4px;} #slideshow .owl-dots .owl-dot.active span:after, #slideshow .owl-dots .owl-dot:hover span:after {content: '';position: absolute;top: 4px;left: 4px;right: 4px;bottom: 4px;width: 6px;border: 2px solid #019934;border-radius: 100%;} #slideshow .owl-dots .owl-dot.active span, #slideshow .owl-dots .owl-dot:hover span {border-color: #019934;} /*** Баннеры ***/ #banners {display: inline-block;position: relative;background-color:#fff;width: 100%;margin: 10px 0;} #banners .banner-left {float: left;width: 50%;padding-right: 5px;} #banners .banner-right {float: left;width: 50%;padding-left: 5px;} #banners .banner-right .banner-top {margin-bottom: 10px;} #banners .banner-image {position: relative;background-size: cover;background-repeat: no-repeat;} #banners .banner-image:not(.bg):before {position: absolute;content: '';top: 0;left: 0;width: 100%;height: 100%;background: #333;opacity: 0;filter: alpha(opacity=0);-moz-transition: opacity 0.55s ease-out;-o-transition: opacity 0.55s ease-out;-webkit-transition: opacity 0.55s ease-out;transition: opacity 0.55s ease-out;} #banners .banner-image:hover:before {opacity: 0.4;filter: alpha(opacity=40);} #banners .banner-image .content {text-align: center;padding: 300px 0;} #banners .banner-image .content.small {padding: 150px 0;} #banners .banner-image .content h3, #banners .banner-image .content h4 {color: #fff;} #banners .banner-image .content h3 {font-size: 48px;margin-bottom: 10px;} #banners .banner-image .content h4 {font-size: 30px;} #banners .banner-image .content .button {margin-top: 20px;border-width: 2px;border-style: solid;border-color: #fff;color: #fff;background-color: transparent;font-size: 18px;line-height: 45px;padding: 0 35px;} #banners .banner-image .content .button:hover {border-color: #fff;background-color: #fff;color: #000;} #banners .banner-image.bg {background-color: #019934;} #banners .banner-image.bg:hover {background-color: #858585;} #banners .banner-image.bg .content.small {padding: 55px 0;outline: 3px solid #fff;outline-offset: -20px;} #banners .banner-image .content h3 {-moz-transition: 0.5s all ease;-o-transition: 0.5s all ease;-webkit-transition: 0.5s all ease;transition: 0.5s all ease;-moz-transition-delay: 0.1s;-o-transition-delay: 0.1s;-webkit-transition-delay: 0.1s;transition-delay: 0.1s;-moz-transform: translate3d(0,40px,0);-ms-transform: translate3d(0,40px,0);-o-transform: translate3d(0,40px,0);-webkit-transform: translate3d(0,40px,0);transform: translate3d(0,40px,0);} #banners .banner-image:hover .content h3 {-moz-transition-delay: 0.2s;-o-transition-delay: 0.2s;-webkit-transition-delay: 0.2s;transition-delay: 0.2s;-moz-transform: translate3d(0,0,0);-ms-transform: translate3d(0,0,0);-o-transform: translate3d(0,0,0);-webkit-transform: translate3d(0,0,0);transform: translate3d(0,0,0);} #banners .banner-image .content h4 {-moz-transition: 0.5s all ease;-o-transition: 0.5s all ease;-webkit-transition: 0.5s all ease;transition: 0.5s all ease;-moz-transition-delay: 0.2s;-o-transition-delay: 0.2s;-webkit-transition-delay: 0.2s;transition-delay: 0.2s;-moz-transform: translate3d(0,40px,0);-ms-transform: translate3d(0,40px,0);-o-transform: translate3d(0,40px,0);-webkit-transform: translate3d(0,40px,0);transform: translate3d(0,40px,0);} #banners .banner-image:hover .content h4 {-moz-transition-delay: 0.1s;-o-transition-delay: 0.1s;-webkit-transition-delay: 0.1s;transition-delay: 0.1s;-moz-transform: translate3d(0,0,0);-ms-transform: translate3d(0,0,0);-o-transform: translate3d(0,0,0);-webkit-transform: translate3d(0,0,0);transform: translate3d(0,0,0);} #banners .banner-image .content .button {opacity: 0;filter: alpha(opacity=0);-moz-transition-delay: 0.3s;-o-transition-delay: 0.3s;-webkit-transition-delay: 0.3s;transition-delay: 0.3s;-moz-transform: translate3d(0,40px,0);-ms-transform: translate3d(0,40px,0);-o-transform: translate3d(0,40px,0);-webkit-transform: translate3d(0,40px,0);transform: translate3d(0,40px,0);} #banners .banner-image:hover .content .button {opacity: 1;filter: alpha(opacity=100);-moz-transition-delay: 0.05s;-o-transition-delay: 0.05s;-webkit-transition-delay: 0.05s;transition-delay: 0.05s;-moz-transform: translate3d(0,0,0);-ms-transform: translate3d(0,0,0);-o-transform: translate3d(0,0,0);-webkit-transform: translate3d(0,0,0);transform: translate3d(0,0,0);}
#5
Отправлено 11 Сентябрь 2017 - 17:56
баннер "Последний шанс купить" Меньше чем остальные.
#6
Отправлено 12 Сентябрь 2017 - 06:44
Зайдите в раздел Сайт - Редактор шаблонов - main.css - найдите:
#banners {display: inline-block;position: relative;background-color:#fff;width: 100%;margin: 10px 0;}
после него пропишите:
#banners h3, #banners h4{line-height: 1.3;}
Далее найдите:
#banners .banner-image.bg .content.small {padding: 55px 0;outline: 3px solid #fff;outline-offset: -20px;}
замените на:
#banners .banner-image.bg .content.small {top: 0;padding: 59px 0;outline: 3px solid #fff;outline-offset: -20px;}
Далее найдите:
#slideshow .item {position: relative;}
после него пропишите:
#slideshow .item img { display: block; width: 100%;}
Далее зайдите в main.js найдите:
owlS.owlCarousel({ items: 1, loop: true, rewind: true, lazyLoad: false, nav: false, dots: true, autoplay: true, autoplayHoverPause: true, smartSpeed: 500, dotsSpeed: 400, mouseDrag: true, touchDrag: true, pullDrag: true });
замените на:
owlS.owlCarousel({ items: 1, loop: true, rewind: true, lazyLoad: false, nav: false, dots: true, smartSpeed: 500, dotsSpeed: 400, mouseDrag: true, touchDrag: true, pullDrag: true, autoplay: true, autoplayTimeout: 1000, autoplayHoverPause: true });
#7
Отправлено 12 Сентябрь 2017 - 11:26
Vaccina (12 Сентябрь 2017 - 06:44) писал:
Зайдите в раздел Сайт - Редактор шаблонов - main.css - найдите:
#banners {display: inline-block;position: relative;background-color:#fff;width: 100%;margin: 10px 0;}
после него пропишите:
#banners h3, #banners h4{line-height: 1.3;}
Далее найдите:
#banners .banner-image.bg .content.small {padding: 55px 0;outline: 3px solid #fff;outline-offset: -20px;}
замените на:
#banners .banner-image.bg .content.small {top: 0;padding: 59px 0;outline: 3px solid #fff;outline-offset: -20px;}
Далее найдите:
#slideshow .item {position: relative;}
после него пропишите:
#slideshow .item img { display: block; width: 100%;}
Далее зайдите в main.js найдите:
owlS.owlCarousel({ items: 1, loop: true, rewind: true, lazyLoad: false, nav: false, dots: true, autoplay: true, autoplayHoverPause: true, smartSpeed: 500, dotsSpeed: 400, mouseDrag: true, touchDrag: true, pullDrag: true });
замените на:
owlS.owlCarousel({ items: 1, loop: true, rewind: true, lazyLoad: false, nav: false, dots: true, smartSpeed: 500, dotsSpeed: 400, mouseDrag: true, touchDrag: true, pullDrag: true, autoplay: true, autoplayTimeout: 1000, autoplayHoverPause: true });
Добрый день. Заменил. Все практически выровнялось. Не работает слайдшоу и теперь баннер справа от баннера "Последний шанс купить" стал длиннее.
#8
Отправлено 12 Сентябрь 2017 - 11:45
evros (12 Сентябрь 2017 - 11:26) писал:
Вам необходимо изменить изображение для блока "Последний шанс купить", изображения должны быть размером 475 на 805, что бы адаптивность блока корректно смотрелась.
#9
Отправлено 12 Сентябрь 2017 - 12:20
Ирина345 (12 Сентябрь 2017 - 11:45) писал:
Вам необходимо изменить изображение для блока "Последний шанс купить", изображения должны быть размером 475 на 805, что бы адаптивность блока корректно смотрелась.
Зашел через два браузера, слайдер у меня не работает. Адаптивность не очень. Во вложении вид через телефон. Баннер Последний шанс еще не менялся, там фото штатное. Я имею ввиду баннер справа, подписанный как Батуты.
Сайт через телефон.
#10
Отправлено 12 Сентябрь 2017 - 13:34
evros (12 Сентябрь 2017 - 12:20) писал:
Сайт через телефон.
@media all and (max-width: 1199px) { #information {padding-bottom: 0;} } @media all and (max-width: 991px) { #slideshow .slider a {height: 335px;}замените на
@media all and (max-width: 1199px) { #information {padding-bottom: 0;} #banners .banner-image .content h3 {font-size: 40px;} #banners .banner-image .content {text-align: center;padding: 200px 0;} #banners .banner-image .content.small {padding: 70px 0;} #banners .banner-image.bg .content.small {padding: 40px 0;} #slideshow .item .content {top: 40%;} #slideshow .container .text-content {padding: 20px 30px;} #slideshow .container .text-content h2 {font-size: 56px;} #slideshow .container .text-content p {font-size: 24px;} } @media all and (max-width: 991px) { #banners {margin-bottom: 0;} #banners .banner-left {width: 100%;margin-bottom: 10px;padding: 0;} #banners .banner-right {width: 100%;margin-bottom: 10px;padding: 0;} #banners .banner-right .banner-right {margin-bottom: 0;} #slideshow .slider a {height: 335px;}
Попробуйте полистать мышкой слайдер.
#11
Отправлено 12 Сентябрь 2017 - 14:30
Ирина345 (12 Сентябрь 2017 - 13:34) писал:
@media all and (max-width: 1199px) { #information {padding-bottom: 0;} } @media all and (max-width: 991px) { #slideshow .slider a {height: 335px;}замените на
@media all and (max-width: 1199px) { #information {padding-bottom: 0;} #banners .banner-image .content h3 {font-size: 40px;} #banners .banner-image .content {text-align: center;padding: 200px 0;} #banners .banner-image .content.small {padding: 70px 0;} #banners .banner-image.bg .content.small {padding: 40px 0;} #slideshow .item .content {top: 40%;} #slideshow .container .text-content {padding: 20px 30px;} #slideshow .container .text-content h2 {font-size: 56px;} #slideshow .container .text-content p {font-size: 24px;} } @media all and (max-width: 991px) { #banners {margin-bottom: 0;} #banners .banner-left {width: 100%;margin-bottom: 10px;padding: 0;} #banners .banner-right {width: 100%;margin-bottom: 10px;padding: 0;} #banners .banner-right .banner-right {margin-bottom: 0;} #slideshow .slider a {height: 335px;}
Попробуйте полистать мышкой слайдер.
Да листается мышкой. Автоматическую листалку можем прикрутить? В шаблоне Туризм она присутствует.
И еще момент, на рисунке во вложении баннер справа длиннее чем остальные. Второй вопрос: второй баннер слайдера имеет широкий зазор между блоком баннеров, как исправить?
#12
Отправлено 12 Сентябрь 2017 - 16:01
evros (12 Сентябрь 2017 - 14:30) писал:
И еще момент, на рисунке во вложении баннер справа длиннее чем остальные. Второй вопрос: второй баннер слайдера имеет широкий зазор между блоком баннеров, как исправить?
Что бы зазор в баннерах пропал, Вам необходимо изменить изображение по размерам 475 на 805
#14
Отправлено 12 Сентябрь 2017 - 16:36
#16
Отправлено 13 Сентябрь 2017 - 11:08
Mr.Nito (13 Сентябрь 2017 - 10:39) писал:
Перенёс подвал с шаблона Туризм, проверьте, пожалуйста
бэкап до 13.09.2017 10:22:26
после
13.09.2017 10:38:20
Доброе утро. В который раз убеждаюсь что вы самая лучшая тех поддержка. Подвал проверил, все ок. За исключеним вкладки КАТАЛОГ. При переходе по вкладке каталог перекрашивается в цвет подвала сайта. http://market-fitness.ru/catalog
#17
Отправлено 13 Сентябрь 2017 - 11:39
evros (13 Сентябрь 2017 - 11:08) писал:
#18
Отправлено 13 Сентябрь 2017 - 15:54
Mr.Nito (13 Сентябрь 2017 - 11:39) писал:
Да с каталогом все отлично. Только фильтры с чек боксами очень нужны! Фильтры брались из шаблона ГОРОД. Замеряли удобство чек боксов - клиент охотнее пользуется таким фильтром.
#19
Отправлено 13 Сентябрь 2017 - 16:33
evros (13 Сентябрь 2017 - 15:54) писал:
<!-- Если в тарифном плане подключен модуль фильтров по товарам -->
Количество пользователей, читающих эту тему: 0
0 пользователей, 0 гостей, 0 анонимных