когда нечего делать, а творческая душа требует реализации и хочется что-то сделать или написать, то я пишу сюда или делаю что-то на этом сайте. Кому интересна web-разработка, wordpress и то что рядом с этим, то заходите на мой сайт и читайте всякое...
Добавление изображений внутрь блока с помощью jQuery
Предисловие
Йоу-йоу. Совсем недавно мне пришлось вручную обновлять каталог техники на сайте jet-khv.ru. Это если что дистрибьютер канадской техники BRP Can-am в Хабаровске. Ну так вот, в чём проблема: сейчас там акция (июнь 2018) и нужно было добавить ко всей технике картинку, которая говорит, что она участвует в акции. Можно было сделать это в графическом редакторе, но мне не хотелось этого делать т.к. акция рано или поздно кончиться и придётся заново менять все картинки.
Проблема
Для того чтобы избежать повторного добавления картинок после окончания акции я решил использовать вставлять «шеврон» акции с помощью jQuery. В мом случае нужно было два варианта. В первом случае картинка находилась в карточке товара, во втором нужно было вывести в списке товаров. Осложнялось это тем, что я не мог не хотел менять шаблон добавлять к карточке товара стили чтобы определять к каким картинкам добавлять шильдик акции, а к каким нет.
В итоге у меня получилось два кода которые я вставлял в детальное описание и в анонс.
Код для детального просмотра
Он актуален, когда есть обложка картинки с уникальным селектором
Добавляя картинку акции, я еще прописал стили: абсолютное позиционирование и расположение справа снизу, так же я указал высоту и ширину 100px.
Код для анонса
Он используется кода есть много одинаковых блоков в которые нужно вставить картинку, но к ним нельзя указать какой-либо селектор чтобы отличить те в которые нужно добавить картинку от тех которым не нужно
Как я уже говорил добавлять класс или идентификатор чтобы распознавать нужные элементы я не мог. Поэтому я добавлял в анонс пустой блок с селектором чтобы по нему искать куда вставлять картинку. Но этот блок не оболочка картинки товара, что же делать?! Давайте я сначала покажу код, а потом его объясню.
$(Селектор блока который я добавил в анонс)
. сlosest(селектор блока который выше по дом)
.find(селектор оболочки картинки) )
.css(‘добавление относительного позиционирования’)
.append(Добавление картинки акции)
Для большей ясности вот вам схема, на которой изображён элемент и метод, который к нему применяется.
Думаю, после схемы вам всё стало понятно.
Как это выглядит
Проблема с jQuery
Данный код актуален если ваш jQuery подключается в шапке сайта. А что же делать если это не так?! Как выполнить jQuery код если он подключается в подвале перед закрывающим тегом </body>?! На самом деле просто. Вам нужно обернуть ваш код этим —
Думаю вам пригодиться этот код, может не сейчас, а позже. Запомните что этот код вы видели на XakPlant.ru. Если у вас что-то не получилось в этом коде напишите мне в ВК или Instagram (ссылки в подвале)
Думаю , что смогу вам помочь, а пока подписывайтесь на меня в инстаграме, во вконтакте (ссылки в подвале), пользуйтесь моим сервисом строки, ищите вхождения ключевых фраз. Поддержите проект, зарегистрируйтесь по реферальной ссылке на хостинге beget, он действительно классный, о нём вы можете прочитать в этом отзыве.
Поддержи Xakplant
Я давно хочу развить видеоверсию, но пока этого не получается из-за нехватки ресурсов. Сейчас я собираю деньги на новый компьютер и микрофон. Поддержи xaklant и ты увидишь полезные видео быстрее.