Поиск по сайту
Результаты поиска по тегам 'javascript'.
Найдено 65 результатов
-
Доброго дня! Останнiм часом раз-пораз з'являються дискусії на тему застаріння CMS OpenCart. Порушимо і тут цю тему, але не розкритикувати, чи похвалити, а пропонуючи! Як розгорнути проект з сучасним FrontEnd ми писали ранiше... Зараз-же розглянемо посібник з прикладами, де спробуємо подружити Element Plus та OpenCart модуль для адмiн панелi Створемо додаток "Управління категоріями OpenCart" 1) Клієнтська частина ../upload/admin/view/template/extension/module/multi_categories.twig {{ header }} {{ column_left }} <div id="content"> <div class="page-header"> <div class="container-fluid"> <div class="pull-right"> <a href="{{ cancel }}" data-toggle="tooltip" title="{{ button_cancel }}" class="btn btn-default"><i class="fa fa-reply"></i></a> </div> <h1>{{ heading_title }}</h1> <ul class="breadcrumb"> {% for breadcrumb in breadcrumbs %} <li><a href="{{ breadcrumb.href }}">{{ breadcrumb.text }}</a></li> {% endfor %} </ul> </div> </div> <div class="container-fluid"> <div class="panel panel-default"> <div class="panel-heading"> <h3 class="panel-title"><i class="fa fa-pencil"></i> {{ breadcrumb_last }}</h3> </div> <div class="panel-body"> <div id="app"></div> </div> </div> </div> </div> <script type="module" crossorigin src="{{ base }}view/javascript/product_list.js"></script> <link rel="stylesheet" crossorigin href="{{ base }}view/javascript/product_list.css"> <style> html { height: auto } </style> {{ footer }} 2) Клієнтська частина source for Vue Element-plus ../src/App.vue <template> <el-tree style="max-width: 600px" :data="products" node-key="category_id" > <template #default="{ node, data }"> <span class="custom-tree-node"> <span>{{ data.sort_order }}) {{ node.label }}</span> <span> <a :href="openCategory(data)" target="_blank">_<i class="fa fa-pencil"></i></a> </span> </span> </template> </el-tree> </template> <script setup> import { onMounted, ref } from 'vue'; let productPath = ''; const products = ref({}); const openCategory = (data) => { return data.href.replaceAll('&', '&'); } const appInit = (list = []) => { products.value = list; } const getProducts = async () => { if (!productPath) { console.debug('The error for determining the path to get data!'); } else { let response = await fetch( productPath ); appInit( await response.json() ); } } const appUrl = (route) => { // Sanitize the call route = route?.replace(/[^a-zA-Z0-9_\/]/i, '') || ''; if (!route) return ''; // production or development (variable set: in root on .env.development file) const inputUrl = new URL( import.meta.env.PROD ? document?.location?.href : import.meta.env.VITE_APP_HOME_PATH ); inputUrl?.searchParams?.set('route', route); return inputUrl?.href || ''; } onMounted(() => { productPath = appUrl( 'extension/module/multi_categories/get_categories' ); getProducts(); }) </script> <style> .custom-tree-node { align-items: center; column-gap: 9px; display: flex; flex: 1; justify-content: space-between } </style> 3) Контроллер ../upload/admin/controller/extension/module/multi_categories.php <?php // Read more: https://opencartforum.com/files/developer/678008-sha class ControllerExtensionModuleMultiCategories extends Controller { private $error = []; private $edit_link = ''; public function index() { $this->load->language('extension/module/multi_categories'); $this->document->setTitle( $this->language->get('heading_title') ); $this->getForm(); } protected function getForm() { $data = []; $data['header'] = $this->load->controller('common/header'); $data['column_left'] = $this->load->controller('common/column_left'); $data['footer'] = $this->load->controller('common/footer'); $this->response->setOutput($this->load->view('extension/module/multi_categories', $data)); } public function get_categories() { $this->response->addHeader('Content-Type: application/json'); if (!$this->validate()) $this->response->setOutput([]); $this->load->model('extension/module/multi_categories'); $categories = $this->model_extension_module_multi_categories->get_categories(); $this->edit_link = $this->url->link( 'catalog/category/edit', 'user_token=' . $this->session->data['user_token'], true ); $this->response->setOutput(json_encode( $this->tree( $categories ) )); } private function tree($list, $parent_id = 0) { $children_list = []; foreach ($list as $item) { if ((int)$parent_id !== (int)$item['parent_id']) continue; $item['children'] = $this->tree( $list, $item['category_id'] ); $children_list[] = $this->itemBuild( $item ); } return $children_list; } private function itemBuild($data = []) { $data['label'] = strip_tags(html_entity_decode( $data['name'], ENT_QUOTES, 'UTF-8' )); $data['href'] = $this->edit_link . '&category_id=' . $data['category_id']; return $data; } private function validate() { if (!$this->user->hasPermission('access', 'extension/module/multi_categories')) { $this->error['warning'] = $this->language->get('error_permission'); } return !$this->error; } } 4) Модель ../upload/admin/model/extension/module/multi_categories.php <?php // Read more: https://opencartforum.com/files/developer/678008-sha class ModelExtensionModuleMultiCategories extends Model { public function get_categories() { $query = $this->db->query("SELECT cd.name, c.category_id, c.parent_id, c.sort_order FROM " . DB_PREFIX . "category c LEFT JOIN " . DB_PREFIX . "category_description cd ON (c.category_id = cd.category_id) WHERE cd.language_id = '" . (int)$this->config->get('config_language_id') . "' ORDER BY c.parent_id, c.sort_order, cd.name;"); return isset($query->num_rows) ? $query->rows : []; } } 5) Мова ../upload/admin/language/en-gb/extension/module/multi_categories.php <?php // Heading $_['heading_title'] = 'Categories'; Сучасні бібліотеки та фреймворки пропонують широкий вибір готового функціоналу, наприклад, ви легко можете додати можливість перетягування елементів <el-tree ... draggable ... > //... </el-tree> та події <el-tree @node-drag-start="dragStart" @node-drag-enter="dragEnter" @node-drag-leave="dragLeave" @node-drag-over="dragOver" @node-drag-end="dragEnd" @node-drop="drop" > // ... </el-tree> та з легкістю створити модуль зручного сортування дерева категорій перетягуванням OpenCart методом "Drag and Drop". А з нашими прикладами ще й безкоштовно!!! Дякуємо, за прочитання! Тут ви зможете знайти наші модулі, та щє-й зі знижкою!) якщо використаєте купон 678008-30 Ось що вийшло sha-categories-multi-tree_v0.1.ocmod.zip пропозиції та оцiнка вітаються!)
- 2 комментария
-
- 1
-
- module
- javascript
-
(и ещё 1)
Теги:
-
Повна документацiя на офiцiйному сайтi. [EN] 1) Нам потрiбно завантажити та встановити Node.js 2) Перейти до консолi 3) Зазвичай він використовується у зв'язку з якимось проектом, наприклад Vite, або PrimeVue 4) В консолi ввести: npm install -D tailwindcss postcss autoprefixer 5) Згенерувати конфігураційні файли, пишемо npx tailwindcss init -p Ось вони: 6) Тепер нам потрiбно вiдкрити до редагування файл tailwind.config.js, та внести ось такi змiни "./index.html", "./src/**/*.{vue,js,ts,jsx,tsx}" 7) Далi вiдкрити файл style.css, та додати ось такi змiни @tailwind base; @tailwind components; @tailwind utilities; 8) Якщо ви вперше розгортаєте проект, вам може знадобиться пiдтянути залежностi npm i 9) Останнiй шаг це запуск проекту! npm run dev В мене вийшло!) Як пiдключити tailwind до OpenCart робочого проекту , за допомогою CDN? (офiцiйний сайт) Нашi проекти!
-
- new
- javascript
- (и ещё 11)
-
Якщо на комп'ютерi ще не встановлено node.js його потрiбно завантажити з офсайту та встановити як звичайний додаток. Короткий посібник: 1) Спершу потрiбно вiдкрити консоль, та перейти до проекту наприклад, cd D:\xampp\htdocs\www\multiedit-pro\ 2) Переходимо до розгорнування проекту, вводимо в консолi: npm create vite@latest 3) Назва проекту: Якщо на цьому етапi ви розгортаєте новий чистий проект, то можна вказати його назву. Але в нашому випадку, для роботи поряд з CMS OpenCart замiсть назви, потрiбно поставити крапку тодi з'явиться запитання, i вам потрiбно буде: 3) Обрати Ignore files and continue, щоб залишити вже iснуючi файли. 4) Обрати шаблон я обираю Vue. 5) Обрати налаштування наприклад JavaScript Готово! 6) Для подальшої роботи підтягуємо залежнi модулi npm i ...тут буде багато iнфи) А ось i результат: Проект створили, та рушiй ocStore не зачепили! (Вiн знаходиться в папцi upload). А тепер можна й подивитись на результат, та отримати крапельку дофаміну: npm run dev, або npm run preview! Офiцiйний сайт Vite!
-
Написати обробник АПІ з двома сценаріями імпорту: додавання товару, та оновлення прайсу https://developer.bm.parts/api/v2/prices.html https://developer.bm.parts/api/v2/product.html Якщо товар відсутній в базі опенкарт(перевіряти по зв'язці бренд+модель) створити товар, якщо для цього товару відсутнє авто/модель/модифікація створити відповідне у модулі авто фільтр плюс, якщо авто є то прив'язуємо товар до відповідного авто. Якщо товар присутній, то заповнюємо пусті поля, оновлюємо прайс. Аналоги вставляємо в рекомендовані, перевіряти і прив'язувати аналогічно як товар. Додати можливість окремо оновлювати прайс, додавати товар по розкладу (крону). Допрацювати оновлення прайсу конкретного товару (ціна, кількість, склад, кіл. днів доставки) по АПІ при відкритті карточки товару на фронті, або в адмінці. Список файлів з правками задокументувати, у разі потреби системні файли не редагувати вносити зміни через OCMOD. Приклади запросів для вставки в БД опенкарт є в скрипту парсера, можна взяти його за основу тільки замінити регулярки на виклики апі. Приклади обробників АПІ інших постачальників також є, але без вставки характеристик, аналогів і відповідності до авто. Також є ще декілька задач по цьому проекту. tecdoc_pars.php
-
Всех приветствую! Появилась необходимость скрытия меню от индексации Яндексом на всех страницах категорий, кроме главной страницы. Есть вариант, как это сделать на php (архив прикрепил). Не очень понятно как это реализовать на menu.twig или через контроллер menu.php (вроде как выводить java через menu.twig не очень то и правильно). Можете подсказать, как это реализовать? menu.twig {% if (not modern_header_var) %} <div class="row"> <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12 menu_adapt"> <div class="top-menu"> <div id="top-menu" > <div class="nobackground"> <nav id="menu" class="navbar"> <div class="navbar-header"><span id="category" class="visible-xs">{{ text_category }}</span> <button type="button" class="btn btn-navbar navbar-toggle" data-toggle="collapse" data-target=".navbar-ex1-collapse"><i class="fa fa-bars"></i></button> </div> <div class="collapse navbar-collapse navbar-ex1-collapse menu_adapt_coll"> <noindex><ul class="nav navbar-nav"> {% if (modern_ico_home != 1 and home != og_url) %} <li><a href="{{ base }}"><i class="fa fa-home fa_homemenu"></i></a></li> {% endif %} {% if (modern_ico_home_text != 1 and home != og_url) %} <li><a href="{{ base }}">{{ text_homel }}</i></a></li> {% endif %} {% if (modern_seevmenu_menu != 1) %} {% if (not modern_open_menu and home == og_url) %} <li class="dropdown hidev open"> {% else %} <li class="dropdown hidev"> {% endif %} <a class="with-child dropdown-toggle size" {% if (modern_link_menucatalog is not empty) %} href="{{ modern_link_menucatalog }}" {% endif %} data-hover="dropdown" data-delay="1" data-close-others="false"> {% if (modern_seevmenuico != 1) %} <i class="fa fa-bars"></i> {% endif %} {{ modern_vmenu_menu[language_id] }}<span class="fa fa-angle-down menu"></span></a> <ul class="dropdown-menu multi-level" role="menu"> {% for category in categories %} {% if (category['children']) %} <li class="dropdown-submenu li-drop close-button" > <a class="dr_menu" tabindex="-1" href="{{ category['href'] }}">{{ category['name'] }}<span class="arrowvertmenu"></span></a> <ul class="dropdown-menu2 column_width3"> {% if (category['image_main'] and modern_main_photos_menu != 1) %} <li class="col-lg-3 col-md-3 col-sm-4 li-main-foto"> <a href="{{ category['href'] }}"> <div class="main-foto-pos"><img class="main-foto-menu img-responsive" alt="{{ category['name'] }}" title="{{ category['name'] }}" src="{{ category['image_main'] }}"><span class="main-foto-back"></span></div> </a> </li> {% endif %} {% for child in category['children'] %} <li class="col-sm-4 mcol"> <span class = "hidden-xs">{% if (modern_photos_menu != 1 and (child['image2'] is not empty)) %}<a href="{{ child['href'] }}"><img class="vopmen img-responsive" src="{{ child['image2'] }}" alt="{{ child['name'] }}" title="{{ child['name'] }}" ></a>{% endif %}</span> <div class="clearfix"></div> <a class="submenu_main" href="{{ child['href'] }}">{{ child['name'] }}</a> {% if (modern_3lv_menu != 1) %} {% if (child['children_lv3'] is defined and child['children_lv3']) %} {% set v = 0 %} {% set break = false %} {% for child_lv3 in child['children_lv3'] if not break %} <a class = "menuv_3lv " href="{{ child_lv3['href'] }}"> - {{ child_lv3['name'] }}</a> {% set v = v + 1 %} {% if (v >modern_countvmenulv - 1) %} <a class="menuv-allv" href="{{ child['href'] }}"><noindex>{{ modern_seeall_menu[language_id] }}</noindex></a> {% set break = true %} {% endif %} {% endfor %} {% endif %} {% endif %} </li> {% endfor %} </ul> </li> {% else %} <li class="v3hover li-drop close-button"><a class="dr_menu" href="{{ category['href'] }}">{{ category['name'] }}</a></li> {% endif %} {% endfor %} <li id="openclose"> <p class="dr_menu menu_slow">{{ text_modern_menu_open }}</p> </li> </ul> </li> {% endif %} </ul></noindex> <noindex><div class="menu_mob_plus"> <div class="hidem"> <ul class="nav navbar-nav"> {% for category in categories %} {% if (category['children']) %} <li class="plus"><i class="fa fa-plus"></i><i class="fa fa-minus"></i></li> <li class="{% if (category['category_id'] == category_id) %}{{ 'activetopmenu' }}{% endif %} dropdown static_pos"> <a class="with-child dropdown-toggle" href="{{ category['href'] }}" data-hover="dropdown" data-delay="1" data-close-others="false">{{ category['name'] }}<span class="fa fa-angle-down menu"></span></a> <div class="dropdown-menu marg_top"> <div class="dropdown-inner children-category"> {% if (category['image_main'] and modern_main_photos_menu != 1) %} <ul class="col-lg-2 col-md-3 col-sm-3 li-main-foto"><li class="list_type"> <a href="{{ category['href'] }}"> <div class="main-foto-pos"><img class="image_main main-foto-menu img-responsive" alt="{{ category['name'] }}" title="{{ category['name'] }}" src="{{ category['image_main'] }}"><span class="main-foto-back"></span></div> </a> </li></ul> {% endif %} {% for child in category['children'] %} <ul class="list-unstyled {% if (category['image_main'] and modern_main_photos_menu != 1) %} col-lg-2 col-md-3 col-sm-3 clear_menu_cat_img {% else %} col-lg-2 col-md-3 col-sm-3 clear_menu_cat_noimg {% endif %}" > {% if (child['children_lv3'] is defined and child['children_lv3']) %} <li class="with-child" > <span class = "hidden-xs hidden-sm">{% if (modern_photos_menu != 1 and (child['image2'] is not empty)) %}<a href="{{ child['href'] }}"><img class="opacityhv img-responsive" src="{{ child['image2'] }}" alt="{{ child['name'] }}" title="{{ child['name'] }}" ></a>{% endif %}</span> <a href="{{ child['href'] }}"><span class="style2lv">{{ child['name'] }}</span></a> </li> {% if (modern_3lv_menu != 1) %} {% set m = 0 %} {% set break = false %} {% for child_lv3 in child['children_lv3'] if not break %} <li class="children_lv3"><a href="{{ child_lv3['href'] }}"> - {{ child_lv3['name'] }}</a> {% set m = m + 1 %} {% if (m >modern_countvmenulv - 1) %} <a class="menuv-all" href="{{ child['href'] }}"><noindex>{{ modern_seeall_menu[language_id] }}</noindex></a> {% set break = true %} {% endif %} </li> {% endfor %} {% endif %} {% else %} <li>{% if (modern_photos_menu != 1 and (child['image2'] is not empty)) %}<span class = "hidden-xs hidden-sm"><a href="{{ child['href'] }}"><img class="opacityhv img-responsive" src="{{ child['image2'] }}" alt="{{ child['name'] }}" title="{{ child['name'] }}" ></a></span>{% endif %}<a href="{{ child['href'] }}"><span class="style2lv">{{ child['name'] }}</span></a></li> {% endif %} </ul> {% endfor %} </div> </div> <div class="clearfix"></div> </li> {% else %} <li class="{% if (category['category_id'] == category_id) %}{{ 'activetopmenu' }}{% endif %}"><a href="{{ category['href'] }}">{{ category['name'] }}</a></li> {% endif %} {% endfor %} </ul> </div> <ul class="nav navbar-nav"> <!--add menu link--> {% if (modern_top_links8 ) %} {% for modern_top_link8 in modern_top_links8 %} <li> <a {% if (modern_top_link8['link_top'][language_id]) %} href="{{ modern_top_link8['link_top'][language_id] }}"{% endif %}>{% if (modern_top_link8['faicons_top']) %} <i class="{{ modern_top_link8['faicons_top'] }}"></i> {% endif %}{% if (modern_top_link8['title']) %}{{ modern_top_link8['title'][language_id] }}{% endif %}</a> </li> {% endfor %} {% endif %} <!--add menu link--> <!--other link--> {% if (modern_main_link_menu[language_id]) %} <li class="plus"><i class="fa fa-plus"></i><i class="fa fa-minus"></i></li> <li class="dropdown"> <a class="with-child dropdown-toggle" {% if (modern_main_link_href_menu[language_id] is not empty) %} href="{{ modern_main_link_href_menu[language_id] }}" {% else %} href="javascript:void(0)" {% endif %} data-hover="dropdown" data-delay="1" data-close-others="false">{{ modern_main_link_menu[language_id] }}<span class="fa fa-angle-down menu"></span></a> <div class="dropdown-menu"> <div class="dropdown-inner1 children-category"> <ul class="list-unstyled"> {% if (modern_top_links4 ) %} {% for modern_top_link4 in modern_top_links4 %} <li> <a {% if (modern_top_link4['link_top'][language_id]) %} href="{{ modern_top_link4['link_top'][language_id] }}"{% endif %} title="{{ modern_top_link4['title'][language_id] }}">{% if (modern_top_link4['faicons_top']) %} <i class="{{ modern_top_link4['faicons_top'] }}"></i>{% endif %}{% if (modern_top_link4['title']) %} {{ modern_top_link4['title'][language_id] }}{% endif %}</a> </li> {% endfor %} {% endif %} </ul> </div> </div> </li> {% endif %} <!--other link END--> <!--informations--> {% if (modern_info_menu != 1) %} {% if (informations) %} <li class="plus"><i class="fa fa-plus"></i><i class="fa fa-minus"></i></li> <li class="dropdown"> <a class="with-child dropdown-toggle" data-hover="dropdown" data-delay="1" data-close-others="false">{{ text_information }}<span class="fa fa-angle-down menu"></span></a> <div class="dropdown-menu"> <div class="dropdown-inner1 children-category"> <ul class="list-unstyled"> {% for information in informations %} <li><a href="{{ information['href'] }}">{{ information['title'] }}</a></li> {% endfor %} </ul> </div> </div> </li> {% endif %} {% endif %} <!--informations END--> <!--manufacturer--> {% if (modern_man_menu != 1) %} {% if (manufacturers) %} <li class="plus"><i class="fa fa-plus"></i><i class="fa fa-minus"></i></li> <li class="dropdown postion_fullmenu2"> <a class="with-child dropdown-toggle" href="{{ href_manufacturer }}" data-hover="dropdown" data-delay="1" data-close-others="false">{{ text_manufacturer }}<span class="fa fa-angle-down menu"></span></a> <div class="mancss dropdown-menu"> <div class="dropdown-inner children-category"> {% for manufacturer in manufacturers %} <ul class="list-unstyled" style="width: {{ 100/modern_menuman_column-1 }}%"> <li>{% if (modern_photos_menu_manuf != 1) %}<span class = "hidden-xs hidden-sm "><a class = "manufac-menu" href="{{ manufacturer['href'] }}"><img class="opacityhv manimgmen" src="{{ manufacturer['manufacturer_image'] }}" alt="{{ manufacturer['name'] }}" title="{{ manufacturer['name'] }}" ></a></span>{% endif %}<a class = "manufac-menu" href="{{ manufacturer['href'] }}">{{ manufacturer['name'] }}</a></li> </ul> {% endfor %} </div> </div> </li> {% endif %} {% endif %} <!--manufacturer END--> </ul> </div></noindex> </div> </nav> </div> </div> </div> </div> </div> <script> categories_count = {{ categories|length }}; modern_menu_category_lg = {{ modern_menu_category_lg }}; modern_menu_category_md = {{ modern_menu_category_md }}; modern_menu_category_sm = {{ modern_menu_category_sm }}; var q = 0; $(window).scroll(function(){if(window.innerWidth>991)if($(window).scrollTop()>{% if (not modern_open_menu) %}850{% else %}250{% endif %}){if(0==q){var a='<div class="top-header2"><div id="fix_scroll"><div class="container"><div class="row postion_fullmenu"><div id="logo" class="col-lg-1 col-md-1 col-sm-1 col-xs-1">';a+=$("div#logo").html(),a+='</div><div class="col-lg-9 col-md-9 col-sm-9 col-xs-9 postion_fullmenu2"><div class="top-menu">',a+=$("div.top-menu").html(),a+='</div></div><div class="col-lg-2 col-md-2 col-sm-2 col-xs-2 cart">',a+=$("div.cart").html(),a+="</div></div></div></div></div>",$("body").append(a),$(".top-header2 .hidev").removeClass("open"),$(".top-header2 .hidev").addClass("slide"),q=1}}else 1==q&&($("*").remove(".top-header2"),q=0)}); $(window).resize(function() { if (window.innerWidth < 992) { $('*').remove('.top-header2'); } else if (window.innerWidth > 991 && window.innerWidth < 1200) { $('.dropdown-menu2').attr('class', 'dropdown-menu2 column_width2'); $('.mcol').attr('class', 'col-sm-4 mcol'); $('.dropdown-menu2 .clearfix').remove(); $(".dropdown-menu2 > li:nth-child(3n)").after('<li class="clearfix visible-sm visible-md visible-lg"></li>'); category_menu = {{ category_menu_sm }}; if (modern_menu_category_sm < categories_count) { $('#openclose').css('display', ''); } else { $('#openclose').css('display', 'none'); } } else if (window.innerWidth > 1199 && window.innerWidth < 1600) { $('.dropdown-menu2').attr('class', 'dropdown-menu2 column_width3'); $('.mcol').attr('class', 'col-sm-3 mcol'); $('.dropdown-menu2 .clearfix').remove(); $(".dropdown-menu2 > li:nth-child(4n)").after('<li class="clearfix visible-sm visible-md visible-lg"></li>'); category_menu = {{ category_menu_md }}; if (modern_menu_category_md < categories_count) { $('#openclose').css('display', ''); } else { $('#openclose').css('display', 'none'); } } else if (window.innerWidth > 1599) { $('.dropdown-menu2').attr('class', 'dropdown-menu2 column_width3'); $('.mcol').attr('class', 'col-sm-3 mcol'); $('.dropdown-menu2 .clearfix').remove(); $(".dropdown-menu2 > li:nth-child(4n)").after('<li class="clearfix visible-sm visible-md visible-lg"></li>'); category_menu = {{ category_menu_lg }}; if (modern_menu_category_lg < categories_count) { $('#openclose').css('display', ''); } else { $('#openclose').css('display', 'none'); } } }); $(window).resize(); $(".menu_slow").click(function () { if ($(".dropdown-menu > li.li-drop:nth-last-child(-n+"+ category_menu +")").is(":hidden")) { $(".dropdown-menu > li.li-drop:nth-last-child(-n+"+ category_menu +")").show("slow"); $('.li-drop').removeClass('close-button'); $('.li-drop').addClass('open-button'); $('.menu_slow').text('{{ text_modern_menu_close }}'); } else { $(".dropdown-menu > li.li-drop:nth-last-child(-n+"+ category_menu +")").hide("slow"); $('.li-drop').removeClass('open-button'); $('.li-drop').addClass('close-button'); $('.menu_slow').text('{{ text_modern_menu_open }}'); } return false; }); </script> {% else %} <div class="col-lg-8 col-md-8 col-sm-8 col-xs-12 postion_fullmenu2"> <div class="top-menu"> <div id="top-menu" > <div class="nobackground"> <nav id="menu" class="navbar"> <div class="navbar-header"><span id="category" class="visible-xs">{{ text_category }}</span> <button type="button" class="btn btn-navbar navbar-toggle" data-toggle="collapse" data-target=".navbar-ex1-collapse"><i class="fa fa-bars"></i></button> </div> <div class="collapse navbar-collapse navbar-ex1-collapse menu_adapt_coll"> <ul class="nav navbar-nav"> {% if (modern_ico_home != 1) %} <li><a href="{{ base }}"><i class="fa fa-home fa_homemenu"></i></a></li> {% endif %} {% if (modern_ico_home_text != 1) %} <li><a href="{{ base }}">{{ text_homel }}</i></a></li> {% endif %} {% if (modern_seevmenu_menu != 1) %} <li class="dropdown hidev"> <a class="with-child dropdown-toggle size" {% if (modern_link_menucatalog is not empty) %} href="{{ modern_link_menucatalog }}" {% endif %} data-hover="dropdown" data-delay="1" data-close-others="false"> {% if (modern_seevmenuico != 1) %} <i class="fa fa-bars"></i> {% endif %} {{ modern_vmenu_menu[language_id] }}<span class="fa fa-angle-down menu"></span></a> <ul class="dropdown-menu multi-level" role="menu"> {% for category in categories %} {% if (category['children']) %} <li class="dropdown-submenu li-drop" > <a class="dr_menu" tabindex="-1" href="{{ category['href'] }}"> {{ category['name'] }} <span class="arrowvertmenu"></span></a> <ul class="dropdown-menu2"> {% if (category['image_main'] and modern_main_photos_menu != 1) %} <li class="col-lg-3 col-md-3 col-sm-4 li-main-foto"> <a href="{{ category['href'] }}"> <div class="main-foto-pos"><img class="main-foto-menu img-responsive" alt="{{ category['name'] }}" title="{{ category['name'] }}" src="{{ category['image_main'] }}"><span class="main-foto-back"></span></div> </a> </li> {% endif %} {% for child in category['children'] %} <li class="col-sm-4 mcol"> <span class = "hidden-xs">{% if (modern_photos_menu != 1 and (child['image2'] is not empty)) %}<a href="{{ child['href'] }}"><img class="vopmen img-responsive" src="{{ child['image2'] }}" alt="{{ child['name'] }}" title="{{ child['name'] }}" ></a>{% endif %}</span> <div class="clearfix"></div> <a class="submenu_main" href="{{ child['href'] }}">{{ child['name'] }}</a> {% if (modern_3lv_menu != 1) %} {% if (child['children_lv3'] is defined and child['children_lv3']) %} {% set v = 0 %} {% set break = false %} {% for child_lv3 in child['children_lv3'] if not break %} <a class = "menuv_3lv " href="{{ child_lv3['href'] }}"> - {{ child_lv3['name'] }}</a> {% set v = v + 1 %} {% if (v >modern_countvmenulv - 1) %} <a class="menuv-allv" href="{{ child['href'] }}"><noindex>{{ modern_seeall_menu[language_id] }}</noindex></a> {% set break = true %} {% endif %} {% endfor %} {% endif %} {% endif %} </li> {% endfor %} </ul> </li> {% else %} <li class="v3hover li-drop"><a class="dr_menu" href="{{ category['href'] }}">{{ category['name'] }}</a></li> {% endif %} {% endfor %} </ul> </li> {% endif %} </ul> <div class="menu_mob_plus"> <div class="hidem"> <ul class="nav navbar-nav"> {% for category in categories %} {% if (category['children']) %} <li class="plus"><i class="fa fa-plus"></i><i class="fa fa-minus"></i></li> <li class="{% if (category['category_id'] == category_id) %}{{ 'activetopmenu' }}{% endif %} dropdown postion_fullmenu2"> <a class="with-child dropdown-toggle" href="{{ category['href'] }}" data-hover="dropdown" data-delay="1" data-close-others="false">{{ category['name'] }}<span class="fa fa-angle-down menu"></span></a> <div class="dropdown-menu"> <div class="dropdown-inner children-category"> {% if (category['image_main'] and modern_main_photos_menu != 1) %} <ul class="col-lg-2 col-md-3 col-sm-3 li-main-foto"><li class="list_type"> <a href="{{ category['href'] }}"> <div class="main-foto-pos"><img class="image_main main-foto-menu img-responsive" alt="{{ category['name'] }}" title="{{ category['name'] }}" src="{{ category['image_main'] }}"><span class="main-foto-back"></span></div> </a> </li></ul> {% endif %} {% for child in category['children'] %} <ul class="list-unstyled {% if (category['image_main'] and modern_main_photos_menu != 1) %} col-lg-2 col-md-3 col-sm-3 clear_menu_cat_img {% else %} col-lg-2 col-md-3 col-sm-3 clear_menu_cat_noimg {% endif %}" > {% if (child['children_lv3'] is defined and child['children_lv3']) %} <li class="with-child" > <span class = "hidden-xs hidden-sm">{% if (modern_photos_menu != 1 and (child['image2'] is not empty)) %}<a href="{{ child['href'] }}"><img class="opacityhv img-responsive" src="{{ child['image2'] }}" alt="{{ child['name'] }}" title="{{ child['name'] }}" ></a>{% endif %}</span> <a href="{{ child['href'] }}"><span class="style2lv">{{ child['name'] }}</span></a> </li> {% if (modern_3lv_menu != 1) %} {% set m = 0 %} {% set break = false %} {% for child_lv3 in child['children_lv3'] if not break %} <li class="children_lv3"><a href="{{ child_lv3['href'] }}"> - {{ child_lv3['name'] }}</a> {% set m = m + 1 %} {% if (m >modern_countvmenulv - 1) %} <a class="menuv-all" href="{{ child['href'] }}"><noindex>{{ modern_seeall_menu[language_id] }}</noindex></a> {% set break = true %} {% endif %} </li> {% endfor %} {% endif %} {% else %} <li>{% if (modern_photos_menu != 1 and (child['image2'] is not empty)) %}<span class = "hidden-xs hidden-sm"><a href="{{ child['href'] }}"><img class="opacityhv img-responsive" src="{{ child['image2'] }}" alt="{{ child['name'] }}" title="{{ child['name'] }}" ></a></span>{% endif %}<a href="{{ child['href'] }}"><span class="style2lv">{{ child['name'] }}</span></a></li> {% endif %} </ul> {% endfor %} </div> </div> <div class="clearfix"></div> </li> {% else %} <li class="{% if (category['category_id'] == category_id) %}{{ 'activetopmenu' }}{% endif %}"><a href="{{ category['href'] }}">{{ category['name'] }}</a></li> {% endif %} {% endfor %} </ul> </div> <ul class="nav navbar-nav"> <!--add menu link--> {% if (modern_top_links8 ) %} {% for modern_top_link8 in modern_top_links8 %} <li> <a {% if (modern_top_link8['link_top'][language_id]) %} href="{{ modern_top_link8['link_top'][language_id] }}"{% endif %}>{% if (modern_top_link8['faicons_top']) %} <i class="{{ modern_top_link8['faicons_top'] }}"></i> {% endif %}{% if (modern_top_link8['title']) %}{{ modern_top_link8['title'][language_id] }}{% endif %}</a> </li> {% endfor %} {% endif %} <!--add menu link--> <!--other link--> {% if (modern_main_link_menu[language_id]) %} <li class="plus"><i class="fa fa-plus"></i><i class="fa fa-minus"></i></li> <li class="dropdown"> <a class="with-child dropdown-toggle" {% if (modern_main_link_href_menu[language_id] is not empty) %} href="{{ modern_main_link_href_menu[language_id] }}" {% else %} href="javascript:void(0)" {% endif %} data-hover="dropdown" data-delay="1" data-close-others="false">{{ modern_main_link_menu[language_id] }}<span class="fa fa-angle-down menu"></span></a> <div class="dropdown-menu"> <div class="dropdown-inner1 children-category"> <ul class="list-unstyled"> {% if (modern_top_links4 ) %} {% for modern_top_link4 in modern_top_links4 %} <li> <a {% if (modern_top_link4['link_top'][language_id]) %} href="{{ modern_top_link4['link_top'][language_id] }}"{% endif %} title="{{ modern_top_link4['title'][language_id] }}">{% if (modern_top_link4['faicons_top']) %} <i class="{{ modern_top_link4['faicons_top'] }}"></i>{% endif %}{% if (modern_top_link4['title']) %} {{ modern_top_link4['title'][language_id] }}{% endif %}</a> </li> {% endfor %} {% endif %} </ul> </div> </div> </li> {% endif %} <!--other link END--> <!--informations--> {% if (modern_info_menu != 1) %} {% if (informations) %} <li class="plus"><i class="fa fa-plus"></i><i class="fa fa-minus"></i></li> <li class="dropdown"> <a class="with-child dropdown-toggle" data-hover="dropdown" data-delay="1" data-close-others="false">{{ text_information }}<span class="fa fa-angle-down menu"></span></a> <div class="dropdown-menu"> <div class="dropdown-inner1 children-category"> <ul class="list-unstyled"> {% for information in informations %} <li><a href="{{ information['href'] }}">{{ information['title'] }}</a></li> {% endfor %} </ul> </div> </div> </li> {% endif %} {% endif %} <!--informations END--> <!--manufacturer--> {% if (modern_man_menu != 1) %} {% if (manufacturers) %} <li class="plus"><i class="fa fa-plus"></i><i class="fa fa-minus"></i></li> <li class="dropdown manuf_drop postion_fullmenu2"> <a class="with-child dropdown-toggle" href="{{ href_manufacturer }}" data-hover="dropdown" data-delay="1" data-close-others="false">{{ text_manufacturer }}<span class="fa fa-angle-down menu"></span></a> <div class="dropdown-menu"> <div class="dropdown-inner children-category"> {% for manufacturer in manufacturers %} <ul class="list-unstyled" style="width: {{ 100/modern_menuman_column-1 }}%"> <li><span class = "hidden-xs hidden-sm ">{% if (modern_photos_menu_manuf != 1) %}<a class = "manufac-menu" href="{{ manufacturer['href'] }}"><img class="opacityhv manimgmen" src="{{ manufacturer['manufacturer_image'] }}" alt="{{ manufacturer['name'] }}" title="{{ manufacturer['name'] }}" ></a></span>{% endif %}<a class = "manufac-menu" href="{{ manufacturer['href'] }}">{{ manufacturer['name'] }}</a></li> </ul> {% endfor %} </div> </div> </li> {% endif %} {% endif %} <!--manufacturer END--> </ul> </div> </div> </nav> </div> </div> </div> </div> {% endif %} menu.php <?php class ControllerCommonMenu extends Controller { public function index() { $this->load->language('common/menu'); // Menu $this->load->model('catalog/category'); $this->load->model('catalog/product'); $data['categories'] = array(); $categories = $this->model_catalog_category->getCategories(0); foreach ($categories as $category) { if ($category['top']) { // Level 2 $children_data = array(); $children = $this->model_catalog_category->getCategories($category['category_id']); foreach ($children as $child) { $filter_data = array( 'filter_category_id' => $child['category_id'], 'filter_sub_category' => true ); $children_data[] = array( 'name' => $child['name'] . ($this->config->get('config_product_count') ? ' (' . $this->model_catalog_product->getTotalProducts($filter_data) . ')' : ''), 'href' => $this->url->link('product/category', 'path=' . $category['category_id'] . '_' . $child['category_id']) ); } // Level 1 $data['categories'][] = array( 'name' => $category['name'], 'children' => $children_data, 'column' => $category['column'] ? $category['column'] : 1, 'href' => $this->url->link('product/category', 'path=' . $category['category_id']) ); } } return $this->load->view('common/menu', $data); } } ajaxMenu.zip
- 6 ответов
-
- javascript
- яндекс
-
(и ещё 2)
Теги:
-
У картці товару потрібно додати тип опції "Варіант ціни" (додайте поля складу та Кількість днів доставки) Ви можете скопіювати контролер (взяти як основу тип chekbox, та перейменувати в "Варіант ціни"), і все вдосконалення в панелі адміністратора зводиться до додавання стовпця "Кількість днів доставки" та у стовпці "Ціна", додайте опцію дорівнює = так, щоб при виборі опції, ціна опції не додавалась до основної, а відображалась та, яка вказана у варіанті опції не враховуючи ціну товару. На фронті приховати склад постачальника та прапорці чекбоксів, щоб привести зовнішній вигляд аналогічно стандартному додаванню до кошика, як на скріншоті з BILSTEIN. На сторінці кошика/оформлення замовлення, варіанти з опціями повинні візуально відображатись як окремий продукт.
-
Добрый день, пример: https://stroyka-market.com/ поиск реализован сторонним сервисом: searchbooster.io работают они на основании предоставленной YML выгрузки возможно ли такое реализовать независимо? и так что бы поиск работал также релевантно и быстро я вижу в такой реализации большую перспективу И в какой бюджет это выйдет ? пробовали Sphinx от Yoda, но поиск не был релевантен - то есть в первую очередь выводилось не то подразумевалось - тестировали около месяца.. сейчас стоит поиск от яндекса по товарам - но у него ограничение 100к товаров и не самый удобный интерфейс, наш сайт https://om-ek.ru/ - у нас сейчас 165к товаров и на подходе еще партия на 50 к товаров - итого использование поиска от яндекса будет уже совсем не актуально Очень надеюсь на обратную связь! Или если есть ещё варианты для хорошего качественного поиска -открыты и готовы обсудить
- 4 ответа
-
- поиск
- поиск opencart
- (и ещё 3)
-
https://www.statusdoors.com/ вот сайт, там идет скрипт класс dropdown находится в хедере каталог, не могу понять что не так делаю? document.addEventListener('mouseover', event => { if(event.target.classList.contains('dropdown')) { event.target.classList.add('dropdown-active') } }); document.addEventListener('mouseout', event => { if(event.target.classList.contains('dropdown')) { setTimeout(() => event.target.classList.remove('dropdown-active'), 3000) } });
-
Добрый день, нужен бесстрашный специалист для доработки и исправления ошибок в ocStore 2.3.0.2.3 В карте сайта для контента на русском языке исправить вывод ссылки (добавить ru/ после домена) В модуле генератора фидов для контента на русском языке исправить вывод ссылки (добавить ru/ после домена) Убрать вывод дублей постов с категорией в карте сайта блога, продублировать ссылки с ru/ Исправить чпу для пагинации, тегов и сортировки Настроить корректную передачу целей/событий в расширенную эл.коммерцию гугл аналитикс Подробнное ТЗ тут https://docs.google.com/document/d/13SdbXH3r7weAnsWb4Jq-CzXjcCE_hzhnAeZzcSSZX6k/edit?usp=sharing Важно! При работе не в коем случае не переключать движок чпу с СЕО ПРО на стандартный. Задачи не сложные, думаю за день можно справится не напрягаясь для опытного разработчика. Ставить модули не предлагать. По окончанию работы предоставить список затронутых файлов. Жду ваши предложения.
- 1 ответ
-
- javascript
- php
- (и ещё 4)
-
Добрый день , форумчане Появилась проблема, которую я не могу решить сам На страницу категорий добавил скрипт прокрутки, работает как часы и грузит все отлично. Проблема в том, что из-за этого скрипта перестали работать кнопки (Добавить в корзину и т.д ) Не могли бы подсказать в чем именно проблема ? Ссылка на сайт тут Скрипт $(function() { function scrollLoader() { console.log('---', 123) if ($(window).scrollTop() == $(document).height() - $(window).height()) { console.log('---', 'ok') setTimeout(function() { $('#endless').trigger('click') }, autoscroller.delay) } } var autoscroller = [] //setting autoscroller.hidePagination = 1 autoscroller.autoScroll = 0 autoscroller.catcher = '#endless' autoscroller.delay = 1000 autoscroller.loading = 0 $(window).scroll(function() { scrollLoader() if (inWindow(autoscroller.catcher) && !autoscroller.loading && autoscroller.autoScroll) { autoscroller.loading = true $('#endless .fa-refresh').addClass('btn-load-new') } }) if ($('.category-catalog').length) { if ($('.pagination').length && !$('.pagination > li:last-child').hasClass('active')) { $('#content col-12 col-md-9 order-2').hide() $('.pagination') .parent() .before( '<div class="col-xs-12 text-center"><button class="btn btn-success btn-lg" id="endless" style="margin: 15px auto; padding: 10px 120px;" ><span class="btn-load-new">Еще товары</span></i></button></div>') $('#endless').on('click', function(e) { var lastProduct = $('.pagination') .closest('.category-catalog') .find('.front-top-products li:last-child') var nextPage = $('ul.pagination li.active').next().find('a:first-child') var nextPageHref = nextPage.attr('href').substring(7) // console.log('---',nextPageHref); // console.log('---', nextPage.attr('href')); $.ajax({ url: 'https://' + nextPageHref, beforeSend: function() { $('#endless .fa-refresh').addClass('btn-load-new') }, success: function(data) { var products = $(data).find('.category-catalog .front-top-products') lastProduct.after(products) $('.pagination').html($(data).find('.pagination > *')) nextPage = $('ul.pagination li.active').next().find('a:first-child') if (nextPage.length == 0) { $('#endless').remove() } else { $('#endless .fa-refresh').removeClass('btn-load-new') } autoscroller.loading = 1 }, }) return false }) } } function inWindow(el) { if ($(el).length) { var scrollTop = $(window).scrollTop() var windowHeight = $(window).height() var offset = $(el).offset() if (scrollTop <= offset.top && ($(el).height() + offset.top) < (scrollTop + windowHeight)) { return true } } return false } })
- 4 ответа
-
- javascript
- пагинация
- (и ещё 1)
-
Добрый вечер! Ни с чего перестала работать админка. Ну она работает, но половина кнопок и меню не работает. Судя по консоли: Request URL: https://72smesitelya.ru/admin/view/javascript/bootstrap/js/bootstrap.min.js Status Code: 404 Not Found Не находит файл. Пару часов все было нормально, сайт не трогал НИКТО! Uncaught TypeError: $(...).tooltip is not a function at HTMLDocument.<anonymous> (common.js:175) at j (jquery-2.1.1.min.js:2) at Object.fireWith [as resolveWith] (jquery-2.1.1.min.js:2) at Function.ready (jquery-2.1.1.min.js:2) at HTMLDocument.I (jquery-2.1.1.min.js:2) (anonymous) @ common.js:175 j @ jquery-2.1.1.min.js:2 fireWith @ jquery-2.1.1.min.js:2 ready @ jquery-2.1.1.min.js:2 I @ jquery-2.1.1.min.js:2 Ошибка возникает тут commos js: $('[data-toggle=\'tooltip\']').tooltip({container: 'body', html: true}); Есть варианты?
- 5 ответов
-
- common
- javascript
-
(и ещё 2)
Теги:
-
Я только начал изучать javascript. Подскажите пожалуйста, как реализовать данную задачу. Имею страницу с товаром. На ней есть гиперссылка https://magazin.ru/fruit/purchase/public/purchase/info/common-info.html?idNumber=123456789 Мне нужно в части этой гиперссылки изменить common-info на teletape и получить новую с тем же окончанием (id). Позже их назначу на кнопки и в итоге пользователь должен будет видеть две ссылки и старую и новую. Товаров много, вручную не вариант.
-
- javascript
- изменение
- (и ещё 2)
-
Наш стек: (OPENCART 1.5), Memcached, MуSQL. Интернет-магазин интегрирован с 1С и облачной CRM, платежной системой. часть внутреннего функционала написано JavaScript фреймворке Vue.js Требования к кандидату: - Знание php mysql html css javascrip - Знание архитектуры MVC - Опыт работы с опенкарт ocStore Версия 1.5.5.1.2 - Умение работать с системой контроля версий Git (github.com) Оплата 500р в час. Задачи составляются в подробное ТЗ, выполнение контролируется тимлидом. Работа не разовая, задачи на доработки появляются регулярно. примерная загрузка 50-100 часов в месяц. Обязанности: Развитие интернет-магазина, Интеграции с внешними сервисами, Правка или доработка шаблона, Работы по ускорению магазина, Написание нового функционала и расширение функций движка. Дописывания новой бизнес логики. - Текущие задачи требующие выполнения. * Доработать внутренний скрипт управления товарами (php). * Исправить ошибки php кода из журнала логирования ошибок * Перевести движок сайта с php 5.6 => php 7.3 * Настроить кеширование запросов к базе данных на тяжелых страницах * Поработать со скоростью загрузки страниц сайта. При откликах желательно прикреплять портфолио и описание о себе.
-
- программист
- работа
- (и ещё 5)
-
Здравствуйте, есть свой контроллер, ссылка вида test/test. Можно ли сделать так, чтобы этих урлов было больше? К примеру test/test-first, test/test-second и т.д.?
-
Здравствуйте, есть пользователи из бд и я хочу чтобы при клике на имя (там расположена ссылка на страницу с детальной информацией) изменялся стиль на странице с детальной информацией. В голове примерно так выглядит но не знаю как довести до ума. $('.information-information-14 .card--info:nth-child(8) .card--link').on("click", function(){ $('.guestbook-entry .card--info3:nth-child(4)').css('display', 'block'); });
- 4 ответа
-
- jquery
- javascript
-
(и ещё 2)
Теги:
-
Разделитель для атрибутов товара opencart
valerykurak опубликовал теме в Opencart 2.x: Общие вопросы
Здравствуйте, реализованы фильтры через атрибуты товара. Проблема в том, что атрибуту можно указать лишь одно значение, можно ли после какого-либо знака: например ; увеличивать количество значений?- 3 ответа
-
- opencart
- javascript
-
(и ещё 1)
Теги:
-
Здравствуйте, помогите решить вопрос, хочу сделать пересчет цены в зависимости от количества товара в категориях товара, поставил счетчик а вот реализовать пересчет не получается.. OcStore 3.0.2 Вот код в category.twig отвечающий за вывод цены <div class="us-module-price"> {% if not product.special %} <span class="us-module-price-actual">{{ product.price }}</span> {% else %} <span class="us-module-price-old">{{ product.price }}</span><span class="us-module-price-new">{{ product.special }}</span> {% endif %} {% if product.tax %} <div class="price-tax">{{ text_tax }} {{ product.tax }}</div> {% endif %} </div> {% endif %} А это ниже сам счетчик {% if oc_quantity_category_status and oc_quantity_status %} <a href="javascript:void(0);" onclick="cart.add('{{ product.product_id }}', $(this).parent().parent().find('.input-number').val());" class="us-module-cart-btn button-cart">{{ button_cart }}</a> {% else %} <a href="javascript:void(0);" onclick="cart.add('{{ product.product_id }}', '{{ product.minimum }}');" class="us-module-cart-btn button-cart">{{ button_cart }}</a> {% endif %} {% if oc_quantity_category_status and oc_quantity_status %} <div class="input-group"> <span class="input-group-btn"> <button type="button" class="minus-square" data-type="minus" data-field="category" onclick="descrement($(this).parent().parent())" )><i class="fas fa-minus-square"></i> <span class="glyphicon glyphicon-minus"></span> </button> </span> <input type="text" name="quantity" class="form-control input-number" id="category" value="1"> <span class="input-group-btn"> <button type="button" class="plus-square" data-type="plus" data-field="category" onclick="increment($(this).parent().parent())"><i class="fas fa-plus-square"></i> <span class="glyphicon glyphicon-plus"></span> </button> </span> </div> {% endif %}</div></div></div>{% endfor %} За ранее спасибо.
- 2 ответа
-
- oc3
- javascript
-
(и ещё 1)
Теги:
-
Вставка видео с youtube или twitch на сайт довольно обычное дело. Заходим на страницу с видео, нажимаем на кнопку поделиться, копируем iframe, вставляем в нужном месте и готово, видео сразу же появляется на сайте, но в этом и заключается проблема... Когда iframe встроен непосредственно в разметку сайта, то как только начинается загрузка страницы и браузер видит iframe он начинает загружать видео и все ресурсы необходимые для работы плеера. Сайт начинает долго грузится и как не странно жутко лагать вплоть до зависания устройства с которого пользователь посетил сайт. Помимо этого анализ производительности pagespeed insights даже из-за одного видео проседает примерно на 15 пунктов и тут я с ним полностью солидарен, если на сайте стоит preloader, то пользователь вообще может не дождаться загрузки. Поскольку мне часто приходится иметь дело с такими проблемами я написал небольшой скрипт решающие основные задачи с которыми я сталкивался. Решения в интернете есть ведь идея не нова и проблема известна давно, но они достаточно топорные и сложно расширяемые. Возможно есть какие-то плагины, но к сожалению мне не попадались, да я и не искал. Скрипт написан на чистом js, так что его можно подключить к любому проекту. Demo: https://get-web.site/insertmedia.html Репозиторий на gitHub: https://github.com/get-web/insertmedia Чтобы начать использовать необходимо подключить скрипт: <script src="../src/insertmedia.js"></script> И вызвать его: document.addEventListener("DOMContentLoaded", function () { insertmedia(); }); Можно вызвать с опциями: document.addEventListener("DOMContentLoaded", function () { insertmedia({ delay: 300, // Задержка. default: 300ms immediately: true, // тип задержки true/false. Сразу или по очереди каждый "delay" милисекунд. default: true - сразу attr: 'data-insertmedia', // Атрибут с конфигурацией вставки. В блок с этим атрибутом будет вставляться наше видео или изображение. default: data-insertmedia }) }); Блоку в который будет вставляться видео мы добавляем атрибут с параметрами: data-insertmedia='{"type" : "youtube", "src" : "https://www.youtube.com/embed/6Q6cCuSvFpI", "setting" : "autoplay=1&mute=1" }' Например для вставки видео с ютуба мы можем использовать такие настройки: <div data-insertmedia='{"type" : "youtube", "src" : "https://www.youtube.com/embed/6Q6cCuSvFpI", "setting" : "autoplay=1&mute=1" }'> </div> Доступные опции: type*: тип вставляемого ресурса. На данный момент это: youtube , twitch , html5 , img src*: Ссылка на ресурс (видео,картинка..) например: https://example.com/img.jpg width: Ширина доступная для вставляемого типа ресурса height: Высота доступная для вставляемого типа ресурса setting: Настройки доступные для вставляемого типа ресурса (*) - Обязательно В общем идея достаточно проста, мы передаем тип ресурса и ссылку на него без параметров, а уже в setting передаются параметры доступные для данного типа ресурса. Например фрейм ютуба по умолчанию выглядит так: <iframe width="560" height="315" src="https://www.youtube.com/embed/6Q6cCuSvFpI" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe> Мы можем вставить его таким образом (не используя setting или передавая пустую строку "setting": "") : <div data-insertmedia='{"type" : "youtube", "src" : "https://www.youtube.com/embed/6Q6cCuSvFpI" }'> </div> Но если мы, к примеру, хотим запустить видео автоматически и без звука, фрейм будет таким: <iframe width="560" height="315" src="https://www.youtube.com/embed/6Q6cCuSvFpI?autoplay=1&mute=1" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe> Как вы могли заметить к ссылке были добавлены необязательные параметры ?autoplay=1&mute=1 их мы и передаем в setting при использовании скрипта: <div data-insertmedia='{"type" : "youtube", "src" : "https://www.youtube.com/embed/6Q6cCuSvFpI", "setting" : "autoplay=1&mute=1" }'> </div> То есть любые параметры описанные в документации к youtube вы можете использовать таким образом. Точно так же передаются параметры и другим типам ресурсов в зависимости от их API. Именно поэтому происходит разделение ссылки и параметров, чтобы можно было их интегрировать под любой тип и иметь возможность правильно составлять шаблоны для последующей вставки. Надеюсь я понятно объяснил и мой труд кому-то будет полезен. Если будут вопросы задавайте их тут. Пишите если что-то нужно добавить или исправить, или если хотите покритиковать. Источник: https://get-web.site/blog/javascript/43-insertmedia.html
-
- 1
-
- javascript
- youtube
- (и ещё 11)
-
Здравствуйте Необходимо перевязать домены у интернет-магазина (изменить старый домен на новый) Сервер останется старый, где хранится сайт читал, что из-за смены домена может сломаться функционал сайта.... те в случае необходимости настроить работу старых модулей в сайте: корзина - смс - yml файл, настроена работа скриптов по работе с гугл таблицами те на выходе изменить домен и сохранить старую работоспособность
- 4 ответа
-
- интернет-мгазин
- скрипт
- (и ещё 4)
-
Установлен Ocstore 3, стандартный шаблон. Появились проблемы при попытке изменить размер шрифта в главном меню из-за прописанных inline стилей такого содержания: style="font-size: 12px !important; line-height: 20px !important;"> <header style="font-size: 12px !important; line-height: 20px !important;"> <div class="container" style="font-size: 12px !important; line-height: 20px !important;"> Как отключить автоматическое добавление этих правил?
-
Извините если было, не нашел в поиске. Изменил форму заказа, скрыл пункт "адрес доставки" и сделал чтобы в него всегда вставлялась информация из предыдущего пункта. Когда человек не зарегистрирован - все работает как надо, но если заказ делать зарегистрированным, то необходимо нажимать две кнопки подтверждения адреса. И т.к. один из пунктов скрыт - нажать на кнопку не представляется возможным. Попытался решить это через такой скрипт var $btn = $("#buttonID"), click = $btn.click.bind($btn); setTimeout(click, 400); Срабатывает, но, видимо(не силен в JS) из-за setTimeout клик повторяется каждые 400мс из-за чего следующий пункт в форме открывается/закрывается. Суть - как сделать так, чтобы клик срабатывал только один раз при переходе к этому скрытому разделу и не повторялся после нажатия кнопки? Заранее благодарю.
-
Всем привет! Знатоки JS, нужна помощь... Есть 2 скрипта: один фиксирует всякие элементы, второй скролит страницу к якорям. 1. Фиксация. Как правильно добавить условие срабатывания скрипта при разрешении экрана менее 1200? <script type="text/javascript"> $(function(){ $(window).scroll(function() { var top = $(document).scrollTop(); if (top < 300) $(".mcdmobile-menu").css({top: '0', position: 'relative'}); else $(".mcdmobile-menu").css({top: '0', width: '100%', left: '0', position: 'fixed'}); }); }); </script> 2. Скролл. Как правильно задать значение отступа от верхней границы, чтобы "якорный" контент не перекрывался другими зафиксированными элементами, а оказался ниже? То есть, отступ от top. <script type="text/javascript" > $('.anchor').click(function(){ var target = $(this).attr('href'); $('html, body').stop().animate({ scrollTop: $(anchor.attr('href')).offset().top }, 777); e.preventDefault(); return false; }); }); </script > Буду очень благодарен за помощь знатоков!
-
Всем привет! Нужна помощь специалиста! Столкнулся с такой проблемой. В карточке товара установлен модуль рекомендуемые товары, но вот беда, на мольных устройствах он не корректно отображается... в частности заметил такую проблему на гугл хроме, яндекс браузере. На мозиле проблем нет Ссылка на товар https://santeh-nova.com/2292-newarc-smesiteli-941881 Вот сама проблема... сжимает Подскажите, кто возможно сталкивался с данной проблемой? какие есть возможные варианты решений ?
-
- адаптивный шаблон
- javascript
- (и ещё 2)
-
Скрыть сквозное меню.
Mojitoua опубликовал теме в Programming, creating modules, changing functionality
Всем привет. Ищу исполнителя. На сайте есть выпадающее меню (по нажатию - КАТАЛОГ ТОВАРОВ) Эту кнопку и все выпадающие меню нужно скрыть от поисковиков, то есть оставить для людей (юзабилити). Сделать это нужно по умному, без noindex и nofollow, я так понимаю альтернативы аяксу нет. Уверен здесь хорошо это реализовано, как пример f.ua.