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.

laimas 20.10.2017 21:01

Цитата:

Сообщение от EvgenStor
Это сервер CMS, и база хранится на сервере.

Нет CMS серверов, это вы используете CMS, и доступ к своему серверу у вас есть, иначе бы и js вы бы не могли изменить. Следовательно нужно всего лишь определить в шаблоне вывод изображения по умолчанию. Получается что вы не знаете как это сделать, только лишь всего, и туманите мозги. :)

Проблема в том, что как я понял изображения нужно вставить в html-код корзины. Но она то на всех страницах есть, а изображения источники только на конкретных страницах. Например, находимся на странице 2, узнаем что изображения нет, нечто вставляем. А как с другими товарами корзины, например со страниц 1 и 3, на которых тоже нет изображений?

Или не так понятно?

EvgenStor 20.10.2017 21:36

Это сервер + CMS на ней, они не разделимые, называется ucoz. Так понятней :)
доступ к своему серверу у вас есть
Нет полного доступа :) , в основном только через CMS и хранилище под личные файлы, поверьте на слово!

js вы бы не могли изменить
JS вставляется в шаблоны страниц

как я понял изображения нужно вставить в html-код корзины. Но она то на всех страницах есть
Неправильно поняли, с той корзиной которая на всех страницах, как раз таки проблем нет, там я сделал все как надо, и фото показываются.

А вот когда переходишь на страницу корзины (страница оформления заказа), вот там то доступа к содержимому нет, как я писал выше выводится оператором.

туманите мозги
Получается то наоборот, что вы мне туманите мозги.
Просишь помочь скрипт написать по исходным данным, а в ответ получаешь кучу советов :) . Если бы это можно было без скрипта сделать, я бы тут не задавал вопросы.

laimas 21.10.2017 03:27

Цитата:

Сообщение от EvgenStor
называется ucoz. Так понятней

Это хост полуобрубок, есть такое. Остается выразить вам искреннее соболезнование. Но тем не менее, не мутите мозги. :)

Цитата:

Сообщение от EvgenStor
Просишь помочь скрипт написать по исходным данным, а в ответ получаешь кучу советов

Прежде чем советовать, нужно выяснить, это а. А то что вы пишите в прямом смысле физически невозможно, это б.

Еще раз, а тем более о полной корзине речь: пользователь на странице корзина, страницы товаров недоступны, каким образом можно с них получить изображения?

1) Если все так плохо, значит придется организовывать на стороне клиента мини-базу по хранению ссылок на изображения. Если пользователь на странице товара и в "базе" ссылки на картинку этого товара нет - сохранить.

На странице корзины - если нет изображения, то извлечь ссылку из базы. При этом товары в корзине и ссылки в базе должны иметь идентификаторы, по которым их можно "связать".

2) Если изображения именуются по идентификатору товара и имеют единый базовый путь, тогда может быть просто "рассчитать" такой путь на клиенте.

То есть у вас два выхода из предложенных. Вопрос - как связать "место" в корзине с картинками товаров?

Nexus 21.10.2017 14:48

Цитата:

Сообщение от EvgenStor
Получается то наоборот, что вы мне туманите мозги.
Просишь помочь скрипт написать по исходным данным, а в ответ получаешь кучу советов . Если бы это можно было без скрипта сделать, я бы тут не задавал вопросы.

Читать содержимое корзины на клиенте и после этого долбить этот же сервер новыми запросами, чтобы отобразить изображения этих товаров - не есть хорошо.
Именно поэтому вам и начали мозг совокуплять. Правильнее реализовать так, чтобы сервер сразу возвращал все необходимые данные.

Раз уж реализовать этот правильно нельзя, то нужно хотя бы нагрузку на сервер уменьшить.
Попробуйте этот код:
$('#order-table > div').each(function(){
	var $this=$(this),
		$img=$this.find('>div:eq(1) img[src=""]'),
		$link=null,
		src=null;
	
	if(!$img.length)
		return;
	
	$link=$this.find('>div:eq(2) a');
	
	if(!!src=storage_get_img_src($link.attr('href')))
		return $img.attr('src',src);
	
	(function($img,$link){
		$.get($link.attr('href'),function(html){
			var src=$(html).find('img[alt="'+$link.text()+'"].link-photo');
			if(!src.length)
				throw new Error('Image not found');
				
			storage_set_img_src($link.attr('href'),src);
			$img.attr('src',src);
		});
	})($img,$link);
});

function storage_get_img_src(url){
	if(!window.localStorage)
		return null;
		
	return localStorage.getItem(url);
}
function storage_set_img_src(url,src){
	if(!window.localStorage)
		return false;
	
	localStorage.setItem(url,src);
	
	return true;
}


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