• Как сделать звёздный рейтинг в сниппете?

    Mike_Ro
    @Mike_Ro
    Python, JS, WordPress, SEO, Bots, Adversting
    Яндекс, страница товара или услуги:
    <div itemscope itemtype="http://schema.org/Product">
      <span itemprop="name">Название продукта</span>
      <span itemprop="aggregateRating" itemscope itemtype="http://schema.org/AggregateRating">
        Рейтинг:
        <span itemprop="ratingValue">4.5</span> из 
        <span itemprop="bestRating">5</span>
        на основе 
        <span itemprop="ratingCount">10</span> оценок
      </span>
    </div>

    Яндекс, информационная страница:
    <article itemscope itemtype="http://schema.org/Article">
      <header>
        <h1 itemprop="headline">Заголовок статьи</h1>
        <div itemprop="aggregateRating" itemscope itemtype="http://schema.org/AggregateRating">
          Рейтинг:
          <span itemprop="ratingValue">4.5</span> из 
          <span itemprop="bestRating">5</span>
          на основе 
          <span itemprop="ratingCount">10</span> оценок
        </div>
      </header>
      <div itemprop="articleBody">
        <!-- Текст статьи -->
      </div>
    </article>

    Гугл, страница товара или услуги:
    <html>
      <head>
        <title>Название страницы</title>
        <script type="application/ld+json">
        {
          "@context": "http://schema.org/",
          "@type": "Product",
          "name": "Название продукта",
          "image": "https://example.com/product-image.jpg",
          "description": "Описание продукта",
          "aggregateRating": {
            "@type": "AggregateRating",
            "ratingValue": "4.5",
            "bestRating": "5",
            "ratingCount": "10"
          },
          "offers": {
            "@type": "Offer",
            "priceCurrency": "USD",
            "price": "19.99",
            "availability": "http://schema.org/InStock"
          }
        }
        </script>
      </head>
      <body>
        <!-- Содержимое страницы -->
      </body>
    </html>

    Гугл, информационная страница:
    <html>
      <head>
        <title>Название страницы</title>
        <script type="application/ld+json">
        {
          "@context": "http://schema.org",
          "@type": "CreativeWork",
          "name": "Название статьи",
          "aggregateRating": {
            "@type": "AggregateRating",
            "ratingValue": "4.5",
            "bestRating": "5",
            "ratingCount": "10"
          }
        }
        </script>
      </head>
      <body>
        <!-- Содержимое страницы -->
      </body>
    </html>
    Ответ написан
    7 комментариев
  • Чем заменить React.FunctionComponent?

    @slide13
    frontend/web-developer
    "Чем заменить React.FunctionComponent?" - ничем, так и использовать интерфейс FunctionComponent или тип FC.

    В конкретном коде проблема из-за отсутствия запятой в импорте, а не в типизации.

    Единственное, на будущее в 18й версии убрали children из FunctionComponent, поэтому при использовании children нужно его явно указывать в типизации пропов.
    Ответ написан
    5 комментариев
  • Как отправить содержимое корзины?

    @webdevkin15
    Думаю, здесь то, что Вам нужно :-)
    webdevkin.ru/posts/backend/internet-magazin-realiz...
    Ответ написан
    Комментировать
  • Можно ли обойтись без backenda в инет-магазине?

    GavriKos
    @GavriKos
    PHP Mailer уже по сути бекенд.

    Но вообще ТЗ конечно потрясное. С учетом что щас есть львиная доля "магазинов" в виде сайтов-визиток и "пишите нам в месенджеры" - то в целом какой то "магазин" можно сделать.
    Ответ написан
  • В PageSpeed говорят поменять onload на `pagehide` или `visibilitychange`. Как работают эти события и как мне их подключить?

    Stalker_RED
    @Stalker_RED
    У вас этот unload для чего то используется же, не просто так вы регистрировали слушатель?
    Вот посмотрите какое из двух предложенных событий лучше походит для ваших целей, выберите.
    Ответ написан
    2 комментария
  • Как сделать чтобы при наведении на кнопку она меняла цвет другой кнопки?

    delphinpro
    @delphinpro Куратор тега HTML
    frontend developer
    Сергей Молвов, с has все довольно просто

    .vskrytiye__ot:has(.vskrytiye__btn:not(.blue):hover) .vskrytiye__btn.blue {
      /* Стили для второй кнопки при наведении на первую */
    }
    .vskrytiye__ot:has(.vskrytiye__btn.blue:hover) .vskrytiye__btn:not(.blue) {
      /* Стили для первой кнопки при наведении на вторую */
    }


    Заморочки с :not из-за того, что наличие класса .blue - единственное различие между кнопками

    Однако можно привязаться к последовательности кнопок в html

    .vskrytiye__ot:has(.vskrytiye__ot__b:first-child .vskrytiye__btn:hover) .vskrytiye__ot__b:last-child .vskrytiye__btn {
      /* Стили для последней кнопки при наведении на первую */
    }
    .vskrytiye__ot:has(.vskrytiye__ot__b:last-child .vskrytiye__btn:hover) .vskrytiye__ot__b:first-child .vskrytiye__btn {
      /* Стили для первой кнопки при наведении на последнюю */
    }


    Но так длиннее получается.

    Лучше всего будет дать кнопкам разные классы

    .vskrytiye__ot:has(.first-btn:hover) .second-btn {
      /* Стили для второй кнопки при наведении на первую */
    }
    .vskrytiye__ot:has(.second-btn:hover) .first-btn {
      /* Стили для первой кнопки при наведении на вторую */
    }


    Но это не будет работать на данный момент в FireFox!
    Ответ написан
    5 комментариев
  • Как через css поменять цвет png изображения?

    kursoriks
    @kursoriks
    Разработчик
    CSS Filters только так, если через CSS.
    Ответ написан
    Комментировать
  • Почему когда я присваиваю к каждому элементу класс, открывается только один?

    nedosekinstanislav
    @nedosekinstanislav
    Штирлиц как никогда был близок к провалу
    const openPops = document.querySelectorAll('.open__popup');
    const closePop = document.querySelector('.popup__close');
    const popUps = document.querySelectorAll('.popup');
    
    openPops.forEach((openPop, index) => {
      openPop.addEventListener('click', function (e) {
        e.preventDefault();
        popUps[index].classList.add('active');
      });
    });
    
    closePop.addEventListener('click', () => {
      popUps.forEach(popUp => {
        popUp.classList.remove('active');
      });
    });
    Ответ написан
    1 комментарий
  • Почему когда я присваиваю к каждому элементу класс, открывается только один?

    Добрый день! Вы вешаете событие на 1 элемент, а не на все.

    Смотрите в сторону document.querySelectorAll.
    Ответ написан
    3 комментария
  • Почему когда я присваиваю к каждому элементу класс, открывается только один?

    imko
    @imko
    Senior Scratch Developer
    У тебя в скрипте обрабатывается только один попап, одна кнопка открытия и одна закрытия потому что querySelector возвращает только первый подходящий под селектор элемент, тебе нужно использовать querySelectorAll
    Ответ написан
    3 комментария
  • Как найти в одну переменную 2 класса?

    sergiks
    @sergiks Куратор тега JavaScript
    ♬♬
    какой логической операцией хотите два класса сочетать?
    класс1 И класс2 — чтобы непременно оба были в наличии у элемента, и тогда только его брать;
    класс1 ИЛИ класс2 — достаточно любого одного из двух, ну или оба, вообще супер.

    Чтобы непременно оба класса одновременно присутствовали:
    document.querySelector('.popup__close.popup__area'); // без пробела


    Чтобы хотя бы один был:
    document.querySelector('.popup__close, .popup__area'); // через запятую


    Ну и помните, разумеется, что querySelector() выбирает первый подходящий найденный элемент. Один.
    А querySelectorAll() выберет все подходящие.
    Ответ написан
    Комментировать
  • Как найти в одну переменную 2 класса?

    Ostrovsky_Miroslav
    @Ostrovsky_Miroslav
    Понравился ответ? Отметь решением!
    Простым вариантом будет просто засунуть их в массив, если нужно в 1 переменную.
    const closePop = [document.querySelector('.popup__area'), document.querySelector('.popup__close')]


    Использование:

    closePop [0].addEventListener (...code)
    Ответ написан
    Комментировать
  • Как определить, когда нужны спрайты а когда LazyLoading?

    Sanes
    @Sanes
    Для иллюстраций/фоток LazyLoading. Для элементов дизайна/иконок спрайты.
    Ответ написан
    Комментировать
  • Как определить, когда нужны спрайты а когда LazyLoading?

    MrDecoy
    @MrDecoy
    Верставший фронтендер
    Оно другому не мешает. Спрайт тоже можно грузить лениво.

    Спрайты, как правило, используются либо для загрузки большого количества небольших изображений - иконок. Это было более актуально до http2. Сейчас нужно проверять, даёт ли это действительно прирост. Либо когда нужно сделать анимацию. Суть оптимизации - сокращение количества сетевых запросов.

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

    Таким образом - если контентные тяжёлые изображения - лэйзи лоад.
    Если много небольших или кадры анимации - спрайт.

    Таким образом. если изображений из спрайта нет во вьюпорте и рядом с ним, то и спрайт можно грузить лениво.
    Ответ написан
    Комментировать
  • Как определить, когда нужны спрайты а когда LazyLoading?

    Stalker_RED
    @Stalker_RED
    Когда страница без скролла, то лейзилоад не особо поможет.

    Для иконок:
    Если можете в иконочные шрифты - используйте.
    Не получается иконочные - отдельные векторные иконки.
    Если векторные никак- спрайты.
    Если мы не о иконках, а о достаточно больших фоточках на длинной странице - лейзи.
    Ответ написан
    4 комментария
  • Как правильно подключить .json файл в проект?

    rework
    @rework
    Помог ответ? В благодарность отметь его решением
    Если вы хотите получить ответ на ваш вопрос, постарайтесь хотя бы понятно его задать.
    Ответ написан
    Комментировать
  • Как клиенту дать возможность редактировать контент wordpress?

    AntonLitvinenko
    @AntonLitvinenko
    HTML coder
    Даже из коробки вордпресс уже оснащен подобием билдера - гутенберг. При интеграции вы должны были как минимум подготовить стандартные шаблоны для записей и страниц, в которые функцией the_content() выводится все из редактора, будь то классический или гутенберг.
    Произвольные поля позволяют редактировать контент расположеный в уже готовых сверстанных блоках, положение которых на странице можно изменить используя flexible content или кастомные блоки для гутенберга.
    Итак, если для страницы уникальная верстка и нужно разрешить редактирование только самого контента, то можно обойтись ACF. Если чуть по разнообразнее то с помощью него же использовать Flexible content. Также ACF поможет создавать блоки для гутенберга. это все про ПРО версию.
    Далее билдеры. кроме встроенных блоков, для любого билдера можно создавать кастомные шорткоды (виджеты), как указано в вопросе. Но это дело часто непростое, хотя есть варианты упрощения.
    Я чаще всего использую просто кастомные поля и кастомные типы записей, реже флексибл контент и блоки для гутенберга. Был опыт создания виджетов для Page builder by Site origin - долго и муторно. Также делал для visual composer, но в качестве настроек юзал acf
    Ответ написан
    2 комментария
  • При установке grunt-contrib-concat ошибки. Что делать?

    rqdkmndh
    @rqdkmndh
    Web-разработчик
    у вас grunt-contrib-concat@2.1.0 требует версию grunt@">=1.4.1, а у вас в проекте "grunt": "~0.4.1". Значит либо повышаете версию grunt до требуемой, либо понижаете версию grunt-contrib-concat до той которой хватит grunt в вашем проекте.
    Есть и более варварский способ установить невзирая на требования используя флаг --legacy-peer-deps:
    npm install --legacy-peer-deps
    Ответ написан
    1 комментарий