Jump to content
Sign in to follow this  
erikocart

Модуль кнопки 'посмотреть демо'

Recommended Posts

Всем доброго времени суток)

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

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

Вот идеальный пример того, как я хочу -> https://landistore.com/templates/ecommerce/  

Я уже спросил у разрабов про такую возможность, они сказали искать модуль.

Вообщем кто может помочь с этим вопрос, очень прошу помогите.

Заранее говорю про этот движок -> https://maxystore.com/relizy-digistore/marketplace-digistore.html то, что он не интересен и поэтому про него не пишите) Спасибо!

Share this post


Link to post
Share on other sites

#рукалицо.....

может не стоит?

Share this post


Link to post
Share on other sites
18 минут назад, anboza сказал:

#рукалицо.....

может не стоит?

может ты не будешь лезть, если ничего предложить не можешь

Share this post


Link to post
Share on other sites
Только что, erikocart сказал:

может ты не будешь лезть, если ничего предложить не можешь

:grin: откуда вас такого дивного выпустили? :grin:

ладно, предлагаю!

 

значится так: 

так делаются кнопки

так кнопки нажимаются

что из этого вам не понятно?

Edited by anboza

Share this post


Link to post
Share on other sites
1 час назад, erikocart сказал:

я хочу сделать магазин по продаже шаблонов для сайтов

Я очень хочу продавать двигатели, но я не знаю как они работают, подскажите?

Вот вы не обижайтесь, но это выглядит именно так.

Share this post


Link to post
Share on other sites

http://prntscr.com/orq7fw

При нажатии на кнопки подменяются классы для блока, где выставляется ширина и высота, под них срабатывают медиа запросы.

Share this post


Link to post
Share on other sites
1 час назад, legioner26 сказал:

http://prntscr.com/orq7fw

При нажатии на кнопки подменяются классы для блока, где выставляется ширина и высота, под них срабатывают медиа запросы.

есть целый развернутый пример, как делать демо для разных разрешений. но это же нужно гуглом пользоваться...

  • +1 1

Share this post


Link to post
Share on other sites
Только что, anboza сказал:

есть целый развернутый пример, как делать демо для разных разрешений. но это же нужно гуглом пользоваться...

Ну гугл да )))

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
You are posting as a guest. If you have an account, please sign in.
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Sign in to follow this  

  • Similar Content

    • By Dotor23
      Коллеги, прошу помощи. Я начинающий разработчик на OpenCart.
      Суть такова. Использую кастомный модуль для быстрого оформления заказа, и пытаюсь его еще кастомизировать.
      Нужно блок, выделенный красным, вынести из блока моя корзина, и вставить его между блоками вкладки и моя корзина (чтобы при переходе по всем вкладкам он отображался как на 2-скриншоте).
      Так как я начинающий разработчик, то и знания PHP у меня посредственные, не могу найти в контроллере то, что нужно, чтобы перенести в другой контроллер. Буду признателен, если укажете, какую строчку перенести (файлы прилагаю, и twig, и php)
      Нужные данные находятся в файле cart.php. В файле cart.twig нашел нужную строчку и перенес в d_quickcheckout.twig.
      Буду, крайне благодарен за помощь.


      cart.twig d_quickcheckout.twig cart.php d_quickcheckout.php
    • By Blackseabreathe
      Opencart 3.0.3.3, default theme
       
      Привет всем.
      Стояла задача сделать простой магазин. Но какой магазин без ajax подгрузки товаров в аля 2К20, а?
      Сам я не то чтобы был полный ноль в js, нет, что-то в целом понимаю. Однако, сначала я искал готовые бесплатные плагины, но на мою версию опенкарт в общей сумме плагинов как кот наплакал, а для ajax подгрузки товаров их вообще 2, и то, один из них триальной версии на 3 дня потом плати монету. Пытался установить от shopunity ajax free filter, но мне не зашел, хотя бы на том, что там уродский вывод пунктов фильтров если выбираешь выводить как select. Ну и в целом плагин имеет много моментов, мне непонравившихся. Мне всё  это не подходило и я решил сделать сам.
      Конечно, я хотел сделать это быстрее, поэтому искав в интете все по запросу ajax фильтрация товаров OpenCart 3, я может что-то и находил полезное, но этого было недостаточно. Однако одну функцию я все таки спер оттуда, так как свою писать было лень, да и зачем второй велосипед нужен?! Чтобы никто не писал потом что "эту функцию ты стырил оттуда-то".
       
      Скрипт на jquery, если кто-то может переписать на ванила js, будет хорошо, Ну или если кто-то сможет заменить .load на $.ajax было бы удобней, но да ладно, перейдем к сути. Строго не судите, я не гуру jq, если есть что подправить, напишите это в комментах без грязи. Делюсь своим способом ajax фильтрации товаров opencart3 и ajax сортировка
       
       
      <!--ajax фильтрация ++--> 0. Сначала я бы предложил для фильтров поставить плагин fixfilter opecart3x чтобы изменить логику фильтрации or/and. (Но не обязательно)
      1. в category.twig (catalog/view/theme/default/template/product/category.twig) делаем обертку для вывода товаров <div id="pp" class="products_products">...тут уже цикл с выводом товаров..</div> //обернули 2. Тут же в селекте #input-sort убрать метод "onchange location = this", он нам уже не нужен 3. в category.php (catalog/controller/product/category.php) найти способы сортировки, например сортировка по умолчанию $data['sorts'][] = array( 'text' => $this->language->get('text_default'), 'value' => 'p.sort_order-ASC', //'href' => $this->url->link('product/category', 'path=' . $this->request->get['path'] . '&sort=p.sort_order&order=ASC' . $url) //копируем строку и комментируем ее на всякий случай 'href' => '&sort=p.sort_order&order=ASC',// вставляем ее ниже и изменяем на такой вид ); Тоже самое проделать со всеми другими способами сортировки, которые нужны. Мне нужны были только по цене вверх, вниз и по умолчанию; и то "по умолчанию" всегда переименовываю в "рекомендуем". 4. Идем в filter.twig (catalog/view/theme/default/template/extension/module/filter.twig) Тут уже кому как надо, а у меня стояла задача сделать вместо чекбоксов select. Собственно я изменил вывод фильтра на: <div class="the_filters df aj"> {% for filter_group in filter_groups %} <div id="filter-group{{ filter_group.filter_group_id }}" class="filtr_group"> <select name="filter[]" id="filters{{filter_group.filter_group_id}}" class="ajax_select"> <option value="{{ filter_group.name }}" disabled selected>{{ filter_group.name }}</option> {% for filter in filter_group.filter %} {% if filter.filter_id in filter_category %} <option value="{{ filter.filter_id }}" selected>{{ filter.name }}</option> {% else %} <option value="{{ filter.filter_id }}">{{ filter.name }}</option> {% endif %} {% endfor %} </select> </div> {% endfor %} <div class="part filtr_group"><button type="button" id="reset_filter">Сбросить</button></div></div> Тут должно быть все понятно, тупо из чекбокс переделал в селект, который потом подхватывает плагин select2. Кстати, рекомендую его для кастомизации селектов. Это все что будет в этом файле из разметки. Ниже будут скрипты: <script type="text/javascript"> $(document).on('change', '.filtr_group .ajax_select',function(){//обновление без кнопки "применить", если успели заметить что в разметке кнокпку убрал filter = []; //создаем резервуар для фильтров $('.filtr_group .ajax_select').each(function(element) { // каждый выбранный фильтр filter.push($(this).val()); //записываем в резервуар }); $('#pp').css('opacity', '0.3'); // самый простой способ дать уровень прозрачности блоку с товарами $('#pp').prepend('<div class="loading"><?xml version="1.0" encoding="utf-8"?><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" style="margin: auto; background-image: none; display: block; shape-rendering: auto; background-position: initial initial; background-repeat: initial initial;" width="100px" height="100px" viewBox="0 0 100 100" preserveAspectRatio="xMidYMid"><circle cx="50" cy="50" r="0" fill="none" stroke="#3e6d8d" stroke-width="2"><animate attributeName="r" repeatCount="indefinite" dur="1s" values="0;29" keyTimes="0;1" keySplines="0 0.2 0.8 1" calcMode="spline" begin="-0.5s"></animate><animate attributeName="opacity" repeatCount="indefinite" dur="1s" values="1;0" keyTimes="0;1" keySplines="0.2 0 0.8 1" calcMode="spline" begin="-0.5s"></animate></circle><circle cx="50" cy="50" r="0" fill="none" stroke="#4b9bbe" stroke-width="2"><animate attributeName="r" repeatCount="indefinite" dur="1s" values="0;29" keyTimes="0;1" keySplines="0 0.2 0.8 1" calcMode="spline"></animate><animate attributeName="opacity" repeatCount="indefinite" dur="1s" values="1;0" keyTimes="0;1" keySplines="0.2 0 0.8 1" calcMode="spline"></animate></circle></svg></div>'); // для интуитивности делаем прелоудер href = '{{action}}&filter='+filter.join(','); //тут мы берем текущую ссыль, которая конфигурируется в category.php и добавляем к ней фильтры с разделением div = $(document).find('#pp'); //куда будем загружать новые товары $(div).load(href+'#pp .product-layout', {limit: 16}, //загружаем методом jq load с лимитом 16, у кого отличается в админке кол-во вывода товаров на фронте, то изменить здесь function (responseText, textStatus, xhr) { if (textStatus == "error") { //если ошибка, то выводим текст ошибки, но я немного сделал по-своему var cn = $('header nav li a.current_page').text(); //находим название категории (но по факту текст в теге <a></a> с классом current_page) var cn_href = $('header nav li a.current_page').attr('href'); //далее берем у нее ссыль $.jGrowl('Упс, что-то пошло не так, пробуем вернуть Вас в главную категорию ' + '"'+cn+'"'); // ну и выводим соответственно текст ошибки и setTimeout(function(){window.location.replace(cn_href);}, 5000); //возвращаем покупателя главную той категории, в которой он был, но можно только вывести текст ошибки, тут уже кому как } if($('#pp .product-layout').length <= 0) { // если нет товаров по выбранной нами фильтрации, то $('#pp').text('Нет товаров, которые соответствуют критериям поиска'); //вывести этот текст } if (textStatus == "success") { // ну а если ответ успешный, то $('#pp').css('opacity', '1'); // убираем непрозрачность у блока с товарами $(document).find('.loading').remove(); //убираем прелоудер } }); setLocation(href); // адресную строку меняем в соответствие с выбранными фильтрами (функция будем ниже) return false; }); //ajax сортировка $(document).on('change', '#product_category #input-sort', function(){ //при изменении селекта сортировки + я изменил id #product-category на #product_category, а то через тире выделять неудобно filter = []; // создали резервуар фильтров $('.filtr_group .ajax_select').each(function(element) { filter.push($(this).val()); // в резервуар записали фильтры }); $('#pp').css('opacity', '0.3'); // непрозрачность установили $('#pp').prepend('<div class="loading"><?xml version="1.0" encoding="utf-8"?><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" style="margin: auto; background-image: none; display: block; shape-rendering: auto; background-position: initial initial; background-repeat: initial initial;" width="100px" height="100px" viewBox="0 0 100 100" preserveAspectRatio="xMidYMid"><circle cx="50" cy="50" r="0" fill="none" stroke="#3e6d8d" stroke-width="2"><animate attributeName="r" repeatCount="indefinite" dur="1s" values="0;29" keyTimes="0;1" keySplines="0 0.2 0.8 1" calcMode="spline" begin="-0.5s"></animate><animate attributeName="opacity" repeatCount="indefinite" dur="1s" values="1;0" keyTimes="0;1" keySplines="0.2 0 0.8 1" calcMode="spline" begin="-0.5s"></animate></circle><circle cx="50" cy="50" r="0" fill="none" stroke="#4b9bbe" stroke-width="2"><animate attributeName="r" repeatCount="indefinite" dur="1s" values="0;29" keyTimes="0;1" keySplines="0 0.2 0.8 1" calcMode="spline"></animate><animate attributeName="opacity" repeatCount="indefinite" dur="1s" values="1;0" keyTimes="0;1" keySplines="0.2 0 0.8 1" calcMode="spline"></animate></circle></svg></div>'); //прелоудер показали var sortBy = $(this).val(); // находим значение выбранного option в сортировке, то чей вывод мы изменяли в (контроллере) category.php var action = $('header nav li a.current_page').attr('href'); // берем адрес главной категории, в который находимся, так как {{action}} тут работать уже не так будет как надо// ну или найти адрес другим методом js/jq var url = action+sortBy+'&filter='+filter.join(','); // собираем в переменную куски - адрес главной категории + значение выбранной сортировки + фильтры, если есть //alert(url); // на момент тестов отслеживал какой адрес в итоге получается $(document).find('#pp').load(url+'#pp .product-layout', {limit: 16}, // опять загружаем с лимитом 16 function (responseText, textStatus, xhr) {//если ошибка, отдаем текст if (textStatus == "error") { $.jGrowl('Произошла ошибка'); } if($('#pp .product-layout').length <= 0) { // если нечего загружать, сообщаем $('#pp').text('Нет товаров, которые соответствуют критериям поиска'); } if (textStatus == "success") { // если все у всех ок, то $('#pp').css('opacity', '1'); // снимаеи непрозрачность $(document).find('.loading').remove(); // убираем прелоудер $.jGrowl('Успешная сортировка');//отдаем сообщение, тоже на момент тестов } }); setLocation(url); // записываем в адрес строку получившийся адрес return false; }); //ajax адрес в адресную строку function setLocation(curLoc){ try { history.pushState(null, null, curLoc); return; } catch(e) {} location.hash = '#' + curLoc; } /// тут тоже должно быть все ясно как ясный день </script>  
      Дальше хочу сделать ajax пагинацию и написать скрипт сброса фильтров, наверное позже дополню в тему
       
       
    • By Freimaks
      Всем привет!
       
      Что имеем:
      1. ocStore 3.0.2.0, соответственно SeoPro идет из коробки;
      2. Шаблон от OCTemplates;
      3. Модуль импорта anyCSV/XLS/YML;
      3. В настройках в разделе "Сервер" включены ЧПУ;
      4. В настройках в разделе SeoPro включен как сам SeoPro, так и режим "ЧПУ товаров с категориями".
       
      Для всех товаров и категорий прописаны SEO URL.
       
      В итоге работа магазина выглядит так:
      1. Категории отображаются как должны: mysite.com/cat/subcat. Точно также и в хлебных крошках;
      2. Товары отображаются без категорий: mysite.com/product. В хлебных крошках так же категорий нет;
       
      Отключаем SeoPro, очищаем кэш. Товары начинают соответствовать заявленному виду mysite.com/cat/subcat/product. При этом ссылки на стандартные информационные страницы типа Производители выглядит стандартно для OpenCart: index.php?route=product/manufacturer, а добавленные мной - так как прописано в SEO URL (типа mysite.com/about).
       
       
      Долго копал в чем причина и так понимаю, что подобное поведение вызывается тем, что товары загружаются с помощью anyCSV/XLS/YML. По крайней мере другой причины я не нашел. К примеру, если товар добавить вручную, то все работает отлично, если пересохранить импортированный товар, то для него тоже все начинает работать на ура. В таблице seo_url все необходимые записи для каждого товара, категории и производителя имеются и в настройках Дизайн->SEO URL все они отображаются.
       
      И еще вопрос: это нормально, что в таблице seo_url при обновлении товаров (или производителей) вместо обновления записи происходит удаление старой и создание новой?
       
    • By West11
      Добрый день!
      Опенкарт 3.0.3.2, шаблон Journal, последняя версия. 
       
      1. Удалил лишний модуль "хлебные крошки"давно, возможно его след остался.  Сейчас не получается обновить баннер на главной странице и баннер блоки - изображения не загружает. Когда изображение удаляем, система не заполняет новую.  *пометка, когда будете проверять, делайте дубликат этого блока и на дубликате проверяйте работает ли, так как удаляя картинку он не грузит ее заново. Сделали обновление версии шаблона по инструкции и документации, не помогло с обновлением модификатора. 2. Установить и настроить 3 модуля: 2.1 Simple - все знают, легкая корзина. 2.2 Новая почта - в корзине при выборе доставки что бы подтягивало отделения. 2.3 Микроразметка - для оптимизации сайта. Модули куплены, готовы к работе.
    • By vitaliik1999
      Не появляются последние статьи блога в статьях блога (новости). ocStore 3/0/2
      и когда нажать предпросмотр статься есть но в блоге она не отображается
  • Recently Browsing   0 members

    No registered users viewing this page.

×

Important Information

On our site, cookies are used and personal data is processed to improve the user interface. To find out what and what personal data we are processing, please go to the link. If you click "I agree," it means that you understand and accept all the conditions specified in this Privacy Notice.