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

Замена вариаций продукта с 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 я спрятал намеренно, что не портило дизайн и не путало пользователя.

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

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 думает иначе.

Изображение как фон для 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;

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

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

Как убрать браузерную обводку кнопок и ссылок в браузерах 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;
}

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