Перейти к содержанию
flamehowk

[Решено] Проблемы с загрузкой изображений товаров

Рекомендуемые сообщения

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

В сборке ОКСтор установлен плагин jail в пакете с jquery. Штука призвана подгружать картинки по мере разворачивания странички, плюс делает это с приятными эффектами.
Собственно проблема в том, что перед тем, как появляется сама картинка товара (у меня фон везде белый) происходит кратковременное появление серого квадрата в качестве фона картинки, а потом он пропадает и уже пошел нужный эффект проявления картинки на странице. Так как у меня везде фон белый, этот серый квадрат просто выедает глаза.
Одна часть проблемы была решена путем вычисления прошитого в скрипте эффекта принудительного наложения фона через размножение серой точки, точка была заменена на белую и длительность эффекта серого квадрата уменьшилась, то бишь сама проблема состояла из двух частей - первая, это та, которую я так и не решил, а после нее еще накладывается принудительный фон из файла и тоже серый, и только потом идет эффект проявления картинки. Так вот, заменив серую точку на белую я устранил вторую часть негативного эффекта, но первая осталась.
Попытка поиграться с настройками плагина ни к чему не привела - меняется время засветки серого квадрата, и все что угодно, только не факт его появления. Стили здесь тоже однозначно не при чем, так как все что только можно было проверить было проверено. Углубляться дальше в джава-скрипт ради такой мелочи я попросту не могу - нет времени, а потому прошу помочь - кто знает что за чудо и где зарыто?
На всякий случай даю ссылку на страничку, чтобы можно было визуально ощутить данный эффект, кто не понял со слов о чем речь:
http://www.diatools.com.ua/index.php?route=product/category&path=18

 

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

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты

я конечно извиняюсь,

но на фоне дизайна сайта ваша проблема - вообще не проблема  :ugeek: 

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты

по поводу "серого квадрата" - цвет пикселя в файле catalog/view/theme/default/image/grey.gif измените на белый

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты

Я в теме поста четко описал, что сделал это в первую очередь - прочитайте внимательно.
А что с дизайном то не так? Вечно на этом форуме мои дизайны критикуют, а толком никто не может сказать что не так?

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты

исходный код показывает

697fae0d8b144c958141b1e80784e7ce.png

 

не поленился, скачал гифку - угадайте, какого цвета в ней пискель?  :ugeek: 

 

а насчет дизайна..

дизайн в стиле "вырвиглаз" - слишком отвлекающий и не сочетающийся

  • +1 1

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты

А х ты ж японский городовой... вот что значит - "глаз замылился". Эта зараза грузила аж 2 пикселя с двух разных мест, в одном я его вычислил, переписал адрес, поменял файл и даже название файла поменял, чтобы потом было все понятно, и эффект стал вдвое меньше, дак оказалось что оно еще из одного места второй такой же подгружает, а я уже че-то и прозевал это... от жэж старый баран.

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

 

Однако, остается вопрос - как же эта зараза работает, ведь в файле, который управляет данным эффектом прописано следующее:

effect: 'fadeIn', speed : 4000, placeholder : 'catalog/view/javascript/jquery/jail/white.gif'

почему, зачем и откуда идет управление вторым файлом? или там идут подряд два разных эффекта, которые накладывают разные скрипты и где эта штука зашита?

 

Алексу огромный реверанс за внимательность, с меня - могорыч.

По дизайну...

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

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

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты

Ураааа... нашел.
Если кому будет нужно - держите.

Итак, вся беда оказалась еще и прописана в качестве принудительного стиля в файле темплейта, то есть ее не вынесли в какую-нибудь ксс-ку, а прямо в темплейте прописали.

 

Смотрим файл: category.tpl

адрес: catalog/view/theme/default/template/product

 

буквально уже на второй страничке строка:

 <img class="imagejail" src="catalog/view/theme/default/image/gray.gif" width="<?php echo $product['thumbwidth']; ?>" height="<?php echo $product['thumbheight']; ?>" data-src="<?php echo $product['thumb']; ?>" title="<?php echo $product['name']; ?>" alt="<?php echo $product['name']; ?>" />
 
Все, тема решена.
Всем спасибо за внимание.
А по дизайну еще можно поговорить, если кто что толковое посоветует...

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты
Гость
Эта тема закрыта для публикации ответов.

  • Похожий контент

    • От SergeTkach
      750.00 руб
      Скачать/Купить дополнение


      Handy Product Manager — удобное управление товарами в OpenCart 2.x
      Наполнение интернет-магазина товарами может превратиться в сущий кошмар, если использовать стандартную админку OpenCart.
      Модуль Handy Product Manager позволяет Вам массового редактировать/добавлять товары в OpenCart 2, настолько же быстро, как если бы Вы прописывали товары в экселе. Но намного более удобно в плане работы с данными товара.
       
       
      ПРЕИМУЩЕСТВА МОДУЛЯ
      Удобный фильтр товаров в админке — позволяет быстро найти товар по ID, артикулу модели, категории, производителю, атрибуту и значению атрибута и даже по SEO URL.
      Быстрый выбор существующих атрибутов и опций прямо в списке товара без дополнительных всплывающих окон и переходов куда-бы то ни было.
      Возможность создания нового атрибута прямо в списке товара (!) и возможность выбрать значения атрибутов из выпадающего списка (1 раз вписал, потом просто кликаем — наподобие как в модуле Attribute select oc2.0, только в последнем нет создания нового атрибута на ходу)
      Быстрая загрузка изображений товаров прямо в списке товара с переименованием и распределением в папку категории, к которой отнесен товар (если категория выбрана перед загрузкой фотографии). Возможность загрузки товаров методом Drug & Drop + изменение сортировки изображений также выполняется перетаскиванием.
      Возможность клонировать сразу 99 экземпляров нужного товаров — что бывает очень удобно при выполнении работы по наполнению товаров определенной категории с очень похожими параметрами.
      Из поля зрения убраны поля доставка, вес, ширина, высота и тому подобные невостребованные поля
       
       
      КОГДА ВАМ ПРИГОДИТСЯ МОДУЛЬ HANDY PRODUCT MANAGER?
      Когда Вы хотите удобно быстро и без лишних переходов по страницам добавить товар в свой магазин или выполняете работу по наполнению сайта для заказчика
      Когда Вы хотите быстро отредактировать цены без необходимости делать экспорт товаров в xls (экселе) — работа в модуле изначально организована так, чтобы сделать изменения цены было настолько же просто, как в электронной таблице
      Когда Вы делаете SEO оптимизацию и хотите отредактировать мета-описания ряда товаров — HPM также будет удобнее, чем эксель.
       
       
      ВНИМАНИЕ!
      В отличие от широко известного модуля Batch Editor, Handy Product Manager соредоточен не на пакетных действиях с сотнями уже существующих товаров, у которых уже что-то назначено, и это что-то можно массово заменить. Мой модуль позволяет быстро создать много новых товаров, быстро и удобно загрузить для них изображения, создать и назанчить атрибуты, прописать мета-теги, не переходя по многочисленными страницам и не тыкая каждый раз на кнопку "Сохранить".
       
       
      ДЕМО
      Данные для входа в демо-доступ:
         Логин: demo
         Пароль: demo

      Посмотрите:
      Список товаров (Меню Каталог -> HPM - Список товаров ) - http://hpm-ru.sergetkach.com/admin/index.php?route=extension/module/handy_product_manager/productList&page=1 Настройки модуля - http://hpm-ru.sergetkach.com/admin/index.php?route=extension/module/handy_product_manager  
       
      ТЕХНИЧЕСКИЕ ТРЕБОВАНИЯ
      Разрешение монитора - от 1280px ширины - иначе, будет сложно понимать, что где находится. php версии 5.4 или выше На хостинге (сервере) должен быть включен IonCube Loader версии 10 или выше Добавил SergeTkach Добавлено 03.12.2018 Категория Модули Системные требования PHP 5.4 или выше; IonСube Loader v10 или выше Сайт разработчика http://sergetkach.com/ Старая цена 750 Метод активации По запросу на почту
      Автоматическая активация Ioncube Loader Требуется OpenCart 2.3
      2.2
      2.1 ocStore 2.3
      2.2
      2.1 OpenCart.Pro, ocShop  
    • От SergeTkach
      Наполнение интернет-магазина товарами может превратиться в сущий кошмар, если использовать стандартную админку OpenCart.
      Модуль Handy Product Manager позволяет Вам массового редактировать/добавлять товары в OpenCart 2, настолько же быстро, как если бы Вы прописывали товары в экселе. Но намного более удобно в плане работы с данными товара.
       
       
      ПРЕИМУЩЕСТВА МОДУЛЯ
      Удобный фильтр товаров в админке — позволяет быстро найти товар по ID, артикулу модели, категории, производителю, атрибуту и значению атрибута и даже по SEO URL.
      Быстрый выбор существующих атрибутов и опций прямо в списке товара без дополнительных всплывающих окон и переходов куда-бы то ни было.
      Возможность создания нового атрибута прямо в списке товара (!) и возможность выбрать значения атрибутов из выпадающего списка (1 раз вписал, потом просто кликаем — наподобие как в модуле Attribute select oc2.0, только в последнем нет создания нового атрибута на ходу)
      Быстрая загрузка изображений товаров прямо в списке товара с переименованием и распределением в папку категории, к которой отнесен товар (если категория выбрана перед загрузкой фотографии). Возможность загрузки товаров методом Drug & Drop + изменение сортировки изображений также выполняется перетаскиванием.
      Возможность клонировать сразу 99 экземпляров нужного товаров — что бывает очень удобно при выполнении работы по наполнению товаров определенной категории с очень похожими параметрами.
      Из поля зрения убраны поля доставка, вес, ширина, высота и тому подобные невостребованные поля
       
       
      КОГДА ВАМ ПРИГОДИТСЯ МОДУЛЬ HANDY PRODUCT MANAGER?
      Когда Вы хотите удобно быстро и без лишних переходов по страницам добавить товар в свой магазин или выполняете работу по наполнению сайта для заказчика
      Когда Вы хотите быстро отредактировать цены без необходимости делать экспорт товаров в xls (экселе) — работа в модуле изначально организована так, чтобы сделать изменения цены было настолько же просто, как в электронной таблице
      Когда Вы делаете SEO оптимизацию и хотите отредактировать мета-описания ряда товаров — HPM также будет удобнее, чем эксель.
       
       
      ВНИМАНИЕ!
      В отличие от широко известного модуля Batch Editor, Handy Product Manager соредоточен не на пакетных действиях с сотнями уже существующих товаров, у которых уже что-то назначено, и это что-то можно массово заменить. Мой модуль позволяет быстро создать много новых товаров, быстро и удобно загрузить для них изображения, создать и назанчить атрибуты, прописать мета-теги, не переходя по многочисленными страницам и не тыкая каждый раз на кнопку "Сохранить".
       
       
      ДЕМО
      Данные для входа в демо-доступ:
         Логин: demo
         Пароль: demo

      Посмотрите:
      Список товаров (Меню Каталог -> HPM - Список товаров ) - http://hpm-ru.sergetkach.com/admin/index.php?route=extension/module/handy_product_manager/productList&page=1 Настройки модуля - http://hpm-ru.sergetkach.com/admin/index.php?route=extension/module/handy_product_manager  
       
      ТЕХНИЧЕСКИЕ ТРЕБОВАНИЯ
      Разрешение монитора - от 1280px ширины - иначе, будет сложно понимать, что где находится. php версии 5.4 или выше На хостинге (сервере) должен быть включен IonCube Loader версии 10 или выше
    • От Aky
      Как передать POST параметр через ajax в файл controller модуля OpenCart ?
       
      Есть модуль "latest"  Файл контроллера latest.php, нужно передать туда параметр width через Ajax/Jquery  
       
      Как обратится к этому файлу? 
       
      Как работать с Ajax знаю, как параметры передать знаю, как принять знаю, но как обратится к нужному файлу в OpenCart?
       
      При попытках обращения по "url:' скрипт выдает ошибку  "404 (not found)"
       
      Пробовал вот так:
      url: 'index.php?route=extension/module/latest',  url: 'index.php?route=module/latest',  url: '/catalog/controller/extension/module/latest',   
      Если перейти на прямую по ссылки: "/catalog/controller/extension/module/latest.php"  выдает ошибку HTTP ERROR 500
    • От Techno1og
      Обнаружили на страницах сайта множество ссылок дублирующих друг друга, эти ссылки располагаются в разных блоках, виджетах и разделах сайта.
       
      Например в  блоке с новостями: ссылка дублируется аж 3 раза: ссылка на статью, ссылка с изображения, ссылка на кнопке подробнее. Есть дублирующие ссылки в главном слайдере, дубли в миниатюрах каждого слайда, Дубли в кнопках вида «далее», «подробнее» - даже во внутренних ссылках нельзя использовать не точные анкоры, анкор должен соответствовать теме URL , поэтому такие кнопки лучше завернуть в JS.   Категории товаров.  Принято считать, что сквозные элементы сайта, в частности меню, поисковиками не учитываются, либо учитываются очень слабо, т.к. присутствуют на каждой странице. Тем не менее имеют место быть различные варианты. Возьмем для примера 4 крупных интернет-магазина:  www.mvideo.ru, www.eldorado.ru и www.dns-shop.ru, www.tehnosila.ru. На сайте М.Видео абсолютно всё меню навигации с категориями и подкатегориями закрыто в тег noindex. Аналогичная картина на сайте Эльдорадо. Закрывать меню в noindex имеет смысл только чтобы не учитывать его текстовую составляющую, чтобы меню не попадало в сниппет на поисковой выдаче, чтобы не мешало определению релевантной страницы. Если запустит Краулер и посмотреть как он определить релевантные страницы, то можно увидеть что некоторые стр. определяются не верно. Так же есть повторяющиеся ссылки в Footer , микроразметке, и т.д, и прочих элементах...  
      судя по отчету ScreaminFrog - google видит все  внутренние ссылки, воспринимает, и распределяет вес с учетом всех внутренних факторов. Ссылки нужно закрыть, но по умолчанию такого решения в Opencart не предлагается, поэтому ищем альтернативные способы, изучаем правила закрытия ссылок:
       
      Внутренние ссылки не должны содержать атрибута rel=”nofollow”. В противном случае вес со страницы будет утекать, то есть будет попросту испаряться. Атрибут rel=”nofollow” необходимо использовать в редких случаях случаях, когда ссылка ведет на неиндексируемую страницу. Ссылки всегда должны вести на индексируемые страницы сайта, иначе будет повторяться история, описанная в пункте №1 выше. Даже при формировании внутренних ссылок при перелинковке следует использовать уникальные анкоры. Внутренние ссылки всегда должны быть прямыми и идти строго на целевые страницы. Это значит, что переход по ссылке должен отдавать ответ 200 OK. Я не говорю о том, что битые ссылки недопустимы, это очевидно, а я говорю о том, что ссылки должны идти без промежуточных 301-редиректов (а если там еще и не 301, а 302-редирект, то совсем беда). Не редко, когда меняют структуру, либо по вине верстальщика  
      отследить на глаз многие мелочи трудно, и чтобы потом не удивляться - советую использовать краулер. (XENU или родной Screaming Frog)
       
      Нашел следующие методы закрытия внешних и внутренних ссылок на jQuery AJAX:
      (взяты со стороннего ресурса; там где проводили эксперимент пишут, что все способы  рабочие)
       
      Вариант №1 —
      <a href="#" class="link" data-link="http://goo.gl">ссылка</a> Скрипт, который будет обрабатывать ссылку и открывать ее:
      <script>$('a.link').click(function(){window.open($(this).data("link"));return false;});</script> В этом варианте вам не надо будет производить никаких дополнительных доработок стилей в css, наша ссылка будет выглядеть как и все остальные «нормальные» ссылки.
      Вариант №2 —
      Код ссылки на странице:
      <a href="#" class="link" rel="http://goo.gl">ссылка</a> Скрипт, который будет обрабатывать ссылку и открывать ее:
      <script>$('a.link').click(function(){window.open($(this).attr("rel"));return false;});</script> Вариант №3 —
      Код ссылки на странице:
      <span class="hidden-link" data-link="http://goo.gl">ссылка</span> Скрипт, который будет обрабатывать ссылку и открывать ее:
      <script>$('.hidden-link').click(function(){window.open($(this).data('link'));return false;});</script> как пишет автор данный вариант100% не вызовет никаких подозрений у поисковика, так как даже структурно в коде нет ссылки, а просто кусок текста (он же анкор) выделен спаном <span>, что довольно часто используется при разметке документов.
      Однако и отображаться такая «ссылка» будет как обычный текст на странице. Придется пошаманить с css, чтобы имитировать ссылку. Например, добавить в свой css:
      span.hidden-link { color: #00ff00; /*-цвет ссылки-*/ text-decoration: underline; /*-подчеркивание-*/ cursor: pointer; /*-указатель в виде пальца-*/ } Вариант №4 — Еще один вариант скрытия ссылки
      <span class="hidden-link" data-link="http://goo.gl">ссылка</span> Скрипт, который будет обрабатывать ссылку и открывать ее:
      <script>$('.hidden-link').replaceWith(function(){return'<a href="'+$(this).data('link')+'">'+$(this).text()+'</a>';})</script> Отличие этого способа от предыдущего в том, что js-скрипт меняет на странице html-код «якобы» ссылки на нормальную ссылку после полной загрузки документа. Поэтому никаких правок в css вносить не придется, а ссылка будет открываться как и обычная.
      Способ так же прошел проверку экспериментом — ссылка не индексируется и не видится поисковыми роботами и, соответстенно, не учитывается.
       
      Вариант №5 — Универсальный вариант скрытия любого контента, например, картинок
      ..... Предыдущий вариант не работает в том случае, если в анкоре ссылки стоит картинка. А такие варианты довольно часто встречаются: счётчики, информеры, партнёрские баннеры. Поэтому предлагаю использовать вместо метода .text () метод .html (), он будет более универсальным.
      Код элемента, в данном случае ссылки, на странице, будет такой:
      <span class="hidden-link" data-link="http://goo.gl">внешняя ссылка</span> * — Чтобы закрыть картинку, в коде, указанном выше, необходимо заменить «внешняя ссылка» на код <img src="...">.
      Скрипт, который будет обрабатывать ссылку или любой другой элемент:
      <script>$('.hidden-link').replaceWith(function(){return'<a href="'+$(this).data('link')+'">'+$(this).html()+'</a>';})</script> Как вы понимаете, отличие данного способа от всех других в том, что в скрипт можно «спрятать» не только ссылку, но и картинку со ссылкой или еще что-нибудь. Все проверено — все работает
       
      6.  Вариант №6 —  как пишут в коментариях самый лучший.
      $('.hidden-link').replaceWith (function (){return'<a href="'+$(this).data ('link')+'" title="'+$(this).text ()+'">'+$(this).html ()+'</a>';})  
      Интересно кто какие варианты использует и на что нужно обратить внимание еще.
       
       
    • От speecher
      Добрый день, прошу о точечной подсказке.
       
      Перевел сайт на хттпс: отредактировал файлы конфиг, сделал редирект, включил в настройках самого магазина.
      Сначала все было ок, позже вылезла проблема: часть изображение открываются по ссылкам HTTP, из-за этого пишет, что соединение не защищено.
       
      В консольке разработчиков везде одни и те же 8 фото - всякие спрайты для кнопок поиска и т.д. Если правильно понял, запрос на них дает вот этот скрипт: catalog/view/javascript/jquery/jquery-1.7.1.min.js
       
      Открывал его, добавил в двух местах к хттп букву "с", но без толку.
      Вопрос, как заставить это недоразумение запрашивать картинки по защищеному соединению ?
  • Последние посетители   0 пользователей онлайн

    Ни одного зарегистрированного пользователя не просматривает данную страницу

×

Важная информация

На нашем сайте используются файлы cookie и происходит обработка некоторых персональных данных пользователей, чтобы улучшить пользовательский интерфейс. Чтобы узнать для чего и какие персональные данные мы обрабатываем перейдите по ссылке. Если Вы нажмете «Я даю согласие», это означает, что Вы понимаете и принимаете все условия, указанные в этом Уведомлении о Конфиденциальности.