Рубрика: Верстка / Front-end

Маркер на карте гугл с произвольной ссылкой

Для одного из проектов у нас потребовалось сделать на нашей карте клик по маркеру, чтобы открывалась необходимая ссылка. В нашем случае ссылка вела на открытие самих Google Maps и прокладывание маршрута от текущего места до офиса клиента.

var myLatlng = new google.maps.LatLng(50.5342832,30.2296718);
	var myOptions = {
		zoom:15,
		mapTypeId: google.maps.MapTypeId.ROADMAP,
		center: myLatlng,
		panControl: false,
		zoomControl: true,
		mapTypeControl: false,
		scaleControl: true,
		streetViewControl: false,
		overviewMapControl: false,
		disableDoubleClickZoom:true,
		suppressInfoWindows:true,
		scrollwheel: true
	};
	map = new google.maps.Map(document.getElementById("map"), myOptions);
	map.setOptions({styles: styles});
	
	var markerLatlng = new google.maps.LatLng(50.53248143295204, 30.229685611563006);
	const image = "/assets/images/pin.png";
	var marker = new google.maps.Marker({
		url: 'https://www.google.com/maps/dir//адрес клиента',
		position: markerLatlng,
		icon: image
	});

	marker.setMap(map);
	google.maps.event.addListener(marker, 'click', function() {
		window.open(marker.url, '_blank');
	});

В этом коде мы формируем карту с заданным центром и на ней размещаем необходимый нам маркер, который выглядит как пин (наше изображение, которое мы хотим разместить на карте). После этого мы для маркера указываем необходимую нам ссылку в параметре url.

var markerLatlng = new google.maps.LatLng(50.53248143295204, 30.229685611563006);
	const image = "/assets/images/pin.png";
	var marker = new google.maps.Marker({
		url: 'https://www.google.com/maps/dir//адрес клиента',
		position: markerLatlng,
		icon: image
	});

Далее вешаем обработчик клика по маркеру и открываем нашу ссылку. Мы захотели ее открыть в новом окне, используя параметр _blank.

google.maps.event.addListener(marker, 'click', function() {
		window.open(marker.url, '_blank');
	});

19 июня, 2024 Добавить коментарий

Какие CMS популярны? Как выбрать CMS при разработке сайта?

Выбор системы управления содержанием (CMS) для разработки сайта зависит от множества факторов, включая тип сайта, его функциональные требования, уровень сложности, потребности в масштабировании, удобство использования для администраторов, доступность расширений и т. д. Вот некоторые основные критерии, которые стоит учитывать при выборе CMS:

  1. Тип сайта: Важно определить, для чего будет использоваться сайт. Это может быть блог, интернет-магазин, корпоративный сайт, портфолио и т. д.
  2. Удобство использования: CMS должна быть интуитивно понятной для администраторов, чтобы они могли легко добавлять, редактировать и удалять контент.
  3. Безопасность: CMS должна обеспечивать надежную защиту от хакерских атак и иметь регулярные обновления безопасности.
  4. Экосистема плагинов и тем: Важно, чтобы CMS имела богатую экосистему дополнений, которые могут добавить необходимый функционал без необходимости в разработке с нуля.
  5. Сообщество и поддержка: Чем больше сообщество вокруг CMS, тем больше вероятность получения помощи и решения проблем.
  6. Скорость и производительность: CMS должна обеспечивать хорошую производительность сайта даже при высоких нагрузках.
  7. Расширяемость и масштабируемость: CMS должна позволять легко масштабировать сайт с ростом бизнеса.
  8. Стоимость: Некоторые CMS бесплатны, в то время как другие могут требовать лицензионные платежи или плату за дополнительный функционал.

Популярные CMS в мире:

  1. WordPress: Одна из самых популярных и распространённых CMS. Имеет большое сообщество пользователей и разработчиков, богатую библиотеку плагинов и тем.
  2. Joomla: Еще одна из популярных CMS, более подходящая для создания корпоративных сайтов и онлайн-журналов.
  3. Drupal: Мощная CMS, которая обладает расширенными возможностями по управлению контентом и поддерживает создание сложных сайтов.
  4. Magento: Специализированная CMS для интернет-магазинов, обладает широкими возможностями по управлению товарами, заказами и платежами.
  5. Shopify: Еще одна CMS, специализированная на интернет-магазинах, но отличается от Magento тем, что предлагает готовые решения в облаке, что облегчает настройку и управление.

В СНГ популярность могут иметь те же системы, но также стоит обратить внимание на локальные CMS, которые могут быть более адаптированы к специфике регионального рынка.

12 апреля, 2024 Добавить коментарий

Замена вариаций продукта с Select на Radio buttons для WooCommerce (вариант 2)

В одном из статей был описан метод, как можно заменить стандарный вывод выбора вариаций с помощью select на radio. Эта статья находится тут.

Сегодня же будет показан еще один, альтернативный, вариант решения данной проблемы.

Открываем файл /ваша_тема/woocommerce/single-product/add-to-cart/variable.php (если такого файла нет, то нужно создать его.

В папке /ваша_тема/woocommerce/ находятся шаблоны woocommerce, которые изменяются для темы. Исходники их находятся в папке с плагином woocommerce в папке /templates.

В этом файле мы перед функцией вывода select выбора вариаций товара добавляем

<?foreach($options as $index => $item):?>
<label for="<?=sanitize_title( $attribute_name );?>_<?=$item;?>" <?if($index===0):?>class="active"<?endif;?>><?=$item;?></label>
<?endforeach;?>

и оборачиваем все это (вместе с выводом select) в обертку 

<div class="radio-input-container"></div>

В итоге у нас получится следующая конструкция:

<div class="radio-input-container">
<?foreach($options as $index => $item):?>
<label for="<?=sanitize_title( $attribute_name );?>_<?=$item;?>" <?if($index===0):?>class="active"<?endif;?>><?=$item;?></label>
<?endforeach;?>
<?php
wc_dropdown_variation_attribute_options(
array(
'options'   => $options,
'attribute' => $attribute_name,
'product'   => $product,
)
);
?>
</div>

в js файл со скриптами добавляем:

$('.radio-input-container label').on('click', function(){
var Value = $(this).text();
var Label = $(this);
$('.radio-input-container label').removeClass('active');
Label.addClass('active');
Label.parent().find('select').val(Value).change();
});

Я также добавил очистку наших «лейблов» по клику на ссылку «Очистить»:

$('.reset_variations').on('click', function(){
$('.radio-input-container label').removeClass('active');
});

и следующие стили получились:

.radio-input-container {
display: flex;
gap: 10px;
flex-wrap: wrap;
margin-bottom: 15px;
label {
width: 20%;
text-align: center;
border: 1px solid @colorGrey;
border-radius: 5px;
padding: 6px 15px 5px 15px;
cursor: pointer;
font-weight: 500;
&:hover, &.active {
border-color: @colorRed;
background: @colorWhite;
}
}
select {
display: none;
}
}

Select я спрятал намеренно, что не портило дизайн и не путало пользователя.

В итоге получилась такая вот красота:

24 марта, 2023 Добавить коментарий

w3c validator ругается на />

При проверке очередного проекта валидатором w3c, он начал ругаться на закрывающуюся ‘/’.

Self-closing tag syntax in text/html documents is widely discouraged; it’s unnecessary and interacts badly with other HTML features (e.g., unquoted attribute values). If you’re using a tool that injects self-closing tag syntax into all void elements, without any option to prevent it from doing so, then consider switching to a different tool.

Перевод:

Синтаксис самозакрывающихся тегов в документах text/html не рекомендуется; это не нужно и плохо взаимодействует с другими функциями HTML (например, значениями атрибутов без кавычек). Если вы используете инструмент, который внедряет синтаксис самозакрывающегося тега во все пустые элементы без возможности предотвратить это, подумайте о переходе на другой инструмент.

Интересное наблюдение… Кто не знал — берите на вооружение…

Хотя, вроде как, месяца полтора-два назад еще небыло такого…

Ну и, конечно же, warning’и на h2-h6 в <section> и/или <article> они не убрали… Хотя тоже странно. По семантике html5 внутри ставишь <header> и это корректно и валидно… Однако валидатор w3c думает иначе.

28 сентября, 2022 Добавить коментарий

Изображение как фон для email-подписи

Всем привет.

Сейчас email-подписи стали не то, что очень популярны, а являются неотъемлемой частью практически любого сервиса. И мы говорим не только о триггерных рассылках или спаме… Нет, сюда входит абсолютно любое электронное письмо, которое отправляется в бизнес целях.

Вот и я верстал очередной макет для email-подписи одного из клиентов. И столкнулся с определенной проблемой. Мне необходимо было сделать так, чтобы фоновое изображение тянулось на весь макет. Однако, оказалось, что сделать это не так уж и просто.

CSS для background-image для email-подписи

Задача, которая была поставлена, в том, чтобы добиться отображения макета, как указано выше на изображении. Однако на практике получилось, что стили CSS для background резались фильтром gmail-сервиса.

Получается, что правило:

background: ulr('/path_to_file') no-repeat 100% 100%;

фильтр обрезает до конструкции

background: ulr('/path_to_file') no-repeat

И на выходе мы получаем что-то подобное этому

Вставка фона изображением в email-подпись

Окей, смотрим в сторону альтернативы и более обьемного описания того, чтобы задать размеры и положение фонового изображения, когда каждое правило пишется отдельно

background-image: url('/path_to_file');

background-repeat: no-repeat;

background-position: 100% 100%;

Однако, данная конструкция также обрезается фильтром почтовой системы или фильтром почтового клиента. В итоге мы получаем что-то такого плана:

background-image: url('/path_to_file');

background-repeat: no-repeat;

После некоторого «курения манов» и перелопачивания кучи ссылок и справочной информации, было найдено решение.

Правила для размеров и положения фонового изображения необходимо записывать в виде правила через ‘/’.

background: url('/path_to_file') no-repeat top / 100% auto;

Такую конструкцию пропустит фильтр почтового сервиса и на выходе мы получим то, что требуется.

ЗЫ: также хочу отметить еще иные результаты изучения справочной информации. Для верстки подписи не подходит позиционирование абсолютное и отрицательные margin.

Эти конструкции также будут фильтроваться и обрезаться фильтром почтовой системы.

Итого:

position: absolute;

и

margin-top: -100px;

Не пройдут проверку и будут обрезаны в финальном виде и не будут применены. Это также нужно учитывать.

Всем хорошего и валидного кода.

13 июля, 2022 Добавить коментарий

Как убрать браузерную обводку кнопок и ссылок в браузерах Chrome и Safari

У кнопок из Bootstrap — при клике на кнопку появляется браузерная обводка (обводка — в Chrome ; и пунктирная обводка — в Firefox )

* Аналогичная ситуация (если хотим эту браузерную обводку убрать) в случае с ссылками и инпутами решается с помощью css-стиля:

a:active, a:focus { outline: none; }

input, textarea {
outline:none;
}
input:active, textarea:active {
outline:none;
}
:focus {
outline:none;
}
textarea {
resize:none;
}
textarea {
resize:vertical;
}
textarea {
resize:horizontal;
}
button:active, button:focus {
outline: none;
}
button::-moz-focus-inner {
border: 0;
}

Данный код будет работать и для ссылок и для кнопок.

8 февраля, 2022 Добавить коментарий