Javascript-форум (https://javascript.ru/forum/)
-   Общие вопросы Javascript (https://javascript.ru/forum/misc/)
-   -   Как подгрузить картинку с другой страницы и вставить (https://javascript.ru/forum/misc/71034-kak-podgruzit-kartinku-s-drugojj-stranicy-i-vstavit.html)

EvgenStor 20.10.2017 18:06

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

Корзина
<div id="order-table">
  <div>
    <div>1.</div>
    <div>
      <a href="" class="ulightbox"><img src=""></a>
    </div>
    <div><a href="ссылка-на-страницу-с-картинкой-1">Название товара 1</a></div>
  </div>
  <div>
    <hr>
    <div>2.</div>
    <div>
      <a href="/ссылка-на-картинку-есть.jpg" class="ulightbox"><img src="/ссылка-на-картинку-есть.jpg"></a>
    </div>
    <div><a href="/ссылка-на-страницу-с-картинкой-2">Название товара 2</a></div>
  </div>
  <div>
    <hr>
    <div>3.</div>
    <div>
      <a href="" class="ulightbox"><img src=""></a>
    </div>
    <div><a href="/ссылка-на-страницу-с-картинкой-3">Название товара 3</a></div>
  </div>
</div>


Если ссылка на картинку есть ничего не делаем (например товар номер 2 имеет ссылку). Если нет, то на странице товара находим блок с картинкой по class="link-photo", копируем src и вставляем в соответствующую товару конструкцию <a href=""><img src=""></a> в href="" и src=""

Фото на страницах товара, на каждой странице по одному фото

<img alt="Название товара 1" src="https://ссылка-на-фото-название-1.jpg" class="link-photo">
<img alt="Название товара 2" src="https://ссылка-на-фото-название-2.jpg" class="link-photo">
<img alt="Название товара 3" src="https://ссылка-на-фото-название-3.jpg" class="link-photo">


Если картинки class="link-photo" на странице с товаром нет, копируем div class="shop-item-foto" и заменяем

<a href=""><img src=""></a>

на скопированное

<div class="shop-item-foto">....</div>


Все на что меня хватило :(


$('#order-table div div:nth-child(3) a').each(function(index, value){
   var url = $(this).attr('href');
	
  $.get(url, function(d){
  $('#order-table div div:nth-child(2)').html($('.link-photo',d).html());
	
});
});

laimas 20.10.2017 18:29

EvgenStor,
А что на сервере сразу сложно определить есть ли изображение или нет и если нет то вывод тега с изображением по умолчанию? Или наличие фото у товара не отображено в базе?

EvgenStor 20.10.2017 19:08

Цитата:

Сообщение от laimas (Сообщение 467868)
EvgenStor,
Или наличие фото у товара не отображено в базе?

Фото в базе нет, оно выводится на странице товара по внешней ссылке с внешнего сервера.

laimas 20.10.2017 19:19

Цитата:

Сообщение от EvgenStor
оно выводится на странице товара по внешней ссылке

И кто же это вставляет <img alt="Название товара 1" src="https://ссылка-на-фото-название-1.jpg" class="link-photo"> или же нет?

Если бы сервер всегда вставлял фото, но src шлюз бы возвращал изображение или нет, это одно. Но вы же пишите, что тега img вообще может не быть. Интересно кто об этом "знает"?

Faab 20.10.2017 19:24

laimas прав, удобнее что бы сервер отдал сразу нужные теги. Не важно где храняться изображения, ссылки же на изображения вы вы всё равно где то получаете - и вероятнее всего именно на сервере)

А так я использовал бы библиотеку imagesloaded - она отлично проверяет ссылку на изображение - если изображение не загрузилось, то подставляйте свои ссылки.

EvgenStor 20.10.2017 19:46

Цитата:

Сообщение от laimas (Сообщение 467873)
И кто же это вставляет

Попробую объяснить
Дело в том, что корзина/страница оформления заказа формируется сервером, к ней доступа нет.
Есть товары с фото которые загружены в базу сайта с ними все нормально, а есть товары с фото по ссылке, такие фото я ни как не могу передать в корзину, поскольку корзина формируется сервером, к ней доступа нет.

В итоге на странице заказа/в корзине у одних есть фото, а у тех которые были по ссылке нет. Вот и задача стоит такая, что нужно зайти на страницу товара, взять фото и вывести в корзине.

Nexus 20.10.2017 19:58

EvgenStor, от сервера, к которому нет доступа данные в каком виде приходят?

EvgenStor 20.10.2017 20:11

Цитата:

Сообщение от Nexus (Сообщение 467878)
EvgenStor, от сервера, к которому нет доступа данные в каком виде приходят?

В шаблоне страницы оформления заказа (корзина), вставляешь оператор $cart$, и этот оператор выводит уже готовую корзину со всем содержимым в виде html. А в $cart$ попадает только определенные параметры, фото только те которые в базе сайта, артикул, цена, количество.

И не как ты не повлияешь на $cart$ пока он не загрузится.

Форумчане помогите пожалуйста со скриптом разобраться, с $(this), как сделать, что бы к первому товару добавилась картинка со страницы первого товара, ко второму со страницы второго товара и так далее?

laimas 20.10.2017 20:20

Цитата:

Сообщение от EvgenStor
Дело в том, что корзина/страница оформления заказа формируется сервером, к ней доступа нет.

Это что чужой сервер, а ваши страницы это только html/css/js, к которым у вас есть доступ? А откуда тогда на странице пустая заготовка тега, которую подставлять?

EvgenStor 20.10.2017 20:46

Цитата:

Сообщение от laimas (Сообщение 467883)
Это что чужой сервер

Это сервер CMS, и база хранится на сервере. Я лишь могу выводить содержимое редактируя шаблон страницы html/css/js.


Часовой пояс GMT +3, время: 13:17.