Натяжка на WooCommerce. HTML2WC. Часть #8.5. Архивы: делаем ховер эффекты и убираем бардак

Артем Абрамович

Меня зовут Артем Абрамович и я являюсь фрилансером-вордпресером. Занимаюсь настройкой и редактированием сайтов созданных на CMS WordPress. Это основная моя специализация, есть еще несколько работ, которыми я занимаюсь, но обо этом вы можете более подробно узнать из моего портфолио.

29 комментариев к “Натяжка на WooCommerce. HTML2WC. Часть #8.5. Архивы: делаем ховер эффекты и убираем бардак”

  1. Спасибо за новое видео. Вы как то в одном из стримов спрашивали, что-бы такого сделать интересного. Так вот есть идея, сейчас самые используемые ресурсы(telegram, facebook, google image) используют для загрузки изображений технологию «Прогрессивная загрузка», то есть видим размытое разблюренное изображение(уменьшенное) и только после загрузки видим полное изображение. ( По мне лучший пример: https://goo.gl/AnVUP3 ) Идея какова, берем canvas в него рисуем наше уменьшенное изображение, блюрим и показываем, когда изображение попадает в поле зрения -> загружаем полное изображение. Выходит lazyload в красивой обвертке. Находил решения на wp, но они либо кривые, либо на js выстраивают обвертку и т.д.(при загрузке прыгает контент, видим увеличенные блоки и т.д., нет возможности выравнивания img). Я подобное все таки смог реализовать, хотелось бы научиться делать это правильно, так как думаю это будит в трендах в ближайшее время. Заранее благодарен)

    Ответить
    • js выстраивают обвертку при загрузке страницы прыгает контент, видим увеличенные блоки, нет возможности выравнивания img. В этом и вся идея выдавать уже полностью готовую структуру с помощью php, а с помощью js всего лишь заменять изображения при попадании их в поле зрения. Рисовать в cancas уменьшенное изображение что бы не использовать scale для ровных краев изображения с фильтром bluer. Наиболее простой метод — это использовать фильтр image_send_to_editor, но возникает проблема при редактировании данного изображения в редакторе. С изображениями статей нечего сложного используем — post_thumbnail_html и добавляем нужную обвертку. Вот с изображениями в самих записях пришлось морочится с фильтром the_content. Как по мне такой вариант с загрузкой уменьшенного изображения выглядит более выигрышно на любом проекте.

      Ответить
  2. Блин какой же ты мужик красава! Может твой голос слегка вялый, но шутки и материал у тебя бомба… Счастья тебе бро

    Ответить
  3. Очень круто рассказываешь, спасибо что делаешь эти видосы ! жду продолжения)

    Ответить
  4. Не подскажите как вместо надписи на кнопке В КОРЗИНУ сделать иконку корзины

    Ответить
    • Через фильтр например поменять или через css иконку повесить. Способов много

      Ответить
  5. Сонласен, курс отличный намного лучше чем некоторые.
    Продолжай в том же духе.

    Ответить
  6. Блин, они какие-то странные классы придумали в пагинации — списку и элементам задается ‘page-numbers’.
    Спасибо за видео.

    Ответить
    • Почему странные? Обычные классы, причем это по-моему, стандартные классы ядра

      Ответить
  7. Ты сам что-ли не заметил, у тебя если мало картинок, то при наведении показывается пустота

    Ответить
  8. Добрый день Артем! Подскажите как отсортировать товары со скидкой. Пробовал через wc_get_product_ids_on_sale(); , но почему то выводятся все подряд. Заранее благодарю!

    Ответить
    • На главной сайта или на главной, которая архив магазина где список всех товаров? Если на главной сайта, то проще использовать шоркоды или блоки, если общий архив магазина, то сортировку надо через фильтр менять

      Ответить

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

%d такие блоггеры, как: