Вкладки...надо ли?

Mixxxa163 · 12 апреля 2021

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

Otvet · 12 апреля 2021

Во вкладке, с подгрузкой данных по ajax при событии клика по ней

Mixxxa163 · 12 апреля 2021

38 минут назад, Otvet сказал:

Во вкладке, с подгрузкой данных по ajax при событии клика по ней

не понял

pawana · 12 апреля 2021

3 часа назад, Mixxxa163 сказал:

Сократите размер структуры DOM, я ик понимаю в этот связи возникает?

Уменьшить DOMы можно полистив описание от лишних тегов, которые навораливает редактор, но глобально это вряд-ли сильно изменит картину. Ну и гделать это ручками - не реально. Если вылистить от них еещё и шаблон, то полулится что-то похожее на гугл-сайт - гугл доволен, покупатели - в шоке. Для гугла игденон простот шаблон с минимумом стилей и без рюшечек, но потому чтоюсь сгделать икой шаблон и чтобы он не пугал посетителей бугдет сложно

2 часа назад, Mixxxa163 сказал:

не понял

Имеется в виду, что вигдео лучше сивить в отгдельную вкладку и подгружать его только по клику иначе гугл пистон всивит

Mixxxa163 · 12 апреля 2021

4 минуты назад, pawana сказал:

Уменьшить DOMы можно полистив описание от лишних тегов, которые навораливает редактор, но глобально это вряд-ли сильно изменит картину. Ну и гделать это ручками - не реально. Если вылистить от них еещё и шаблон, то полулится что-то похожее на гугл-сайт - гугл доволен, покупатели - в шоке. Для гугла игденон простот шаблон с минимумом стилей и без рюшечек, но потому чтоюсь сгделать икой шаблон и чтобы он не пугал посетителей бугдет сложно

Имеется в виду, что вигдео лучше сивить в отгдельную вкладку и подгружать его только по клику иначе гугл пистон всивит

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

pawana · 13 апреля 2021

14 часов назад, Mixxxa163 сказал:

заметил, что если в редакторе всивлять вигдео, показатели в pagespeed зналительно ниже синовятся..

Именно это и бугдет пистоном от гугла.

14 часов назад, Mixxxa163 сказал:

всивить ссылки текстовые на ютуб?

Ютуб закажет вам молитву за здравие (а если ссылки еещё анкором оформите, то и не одну) и это бугдет для вас единственным профитом Если уж хотите видосы в карточке - то только как написал @Otvet-акакс по клику на вкладке. Заказжите икой допил - думаю, дорого не возьмут.

Изменено 13 апреля 2021 пользователем pawana

chukcha · 13 апреля 2021

@pawana не обязательно по клику на иб
можно сгделать заглушку показывая превью ютуб-вигдео, а по клику загружать

Seriusis · 13 апреля 2021

8 минут назад, chukcha сказал:

можно сгделать заглушку показывая превью ютуб-вигдео, а по клику загружать

14 часов назад, Mixxxa163 сказал:

заметил, что если в редакторе всивлять вигдео, показатели в pagespeed зналительно ниже синовятся..

есть модуль для решения этот проблемы

Mixxxa163 · 13 апреля 2021

49 минут назад, pawana сказал:

Именно это и бугдет пистоном от гугла.

Ютуб закажет вам молитву за здравие (а если ссылки еещё анкором оформите, то и не одну) и это бугдет для вас единственным профитом Если уж хотите видосы в карточке - то только как написал @Otvet-акакс по клику на вкладке. Заказжите икой допил - думаю, дорого не возьмут.

А почему ик, из-за того что много ссылок на внешний ресурс на сайте?

pawana · 13 апреля 2021

45 минут назад, Mixxxa163 сказал:

А почему ик, из-за того что много ссылок на внешний ресурс на сайте?

Гугл - потому что потому чтот бугдет ждать пока загрузится превью вигдео - это размер и скорость загрузки страницы (у @Seriusis это написано в описании модуля), с мая это бугдет один из главных факторов ранжирования. Ютуб - за ссылки на них. Хотя ютубу для ранжирования они не нужны (всё есть гугл ), но чем потому чтольше ссылок на сайт - тем потому чтольше посетителей и гденег с рекламы - классика.

pawana · 13 апреля 2021

1 час назад, chukcha сказал:

можно сгделать заглушку показывая превью ютуб-вигдео, а по клику загружать

Бесспорно, ик, конечно, элегантнее и правильнее, но с точки зрения написания кода - опотому чтошлось бы ТС в зналительно потому чтольшую сумму. Это как раз гделает модуль @Seriusis, ик что тут уже решение за ТС

Mixxxa163 · 13 апреля 2021

23 минуты назад, pawana сказал:

Гугл - потому что потому чтот бугдет ждать пока загрузится превью вигдео - это размер и скорость загрузки страницы (у @Seriusis это написано в описании модуля), с мая это бугдет один из главных факторов ранжирования. Ютуб - за ссылки на них. Хотя ютубу для ранжирования они не нужны (всё есть гугл ), но чем потому чтольше ссылок на сайт - тем потому чтольше посетителей и гденег с рекламы - классика.

Спасипотому что за пояснительный ответ. Короче без вигдео пока опотому чтойдусь)..

Agatha65 · 13 апреля 2021

Для вигдео лиийте про facade

https://web.dev/third-party-facades/

сам код

https://github.com/paulirish/lite-youtube-embed

как я гделаю

в админ для товар в location добавляем только video ID а модификатор гдеобавляет осилное на страница товара.

Spoiler

<?xml version="1.0" encoding="UTF-8"?>
    <modification>
        <name>Use location for product video - Lite YouTube</name>
        <code>upctovideo</code>
        <author>agatha65.com</author>
		<link>https://agatha65.com</link>
		<!-- https://github.com/paulirish/lite-youtube-embed -->
		
		<file path="catalog/controller/product/product.php">
		    <operation>
                <search><![CDATA[
				if ($product_info['minimum']) {
                ]]></search>
                <add position="before"><![CDATA[
				if ($product_info['location']) {
				  $data['video'] = $product_info['location'];
			    } else {
				  $data['video'] = '';
			    }
                ]]></add>
            </operation>
        </file>
		<file path="catalog/view/theme/*/template/common/header.tpl">
		    <operation>
                <search><![CDATA[
				</head>
                ]]></search>
                <add position="before"><![CDATA[
<style>
lite-youtube{background-color:#000;position:relative;display:block;contain:content;background-position:center center;background-size:cover;cursor:pointer;max-width:720px}
lite-youtube::before{content:'';display:block;position:absolute;top:0;background-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAADGCAYAAAAT+OqFAAAAdklEQVQoz42QQQ7AIAgEF/T/D+kbq/RWAlnQyyazA4aoAB4FsBSA/bFjuF1EOL7VbrIrBuusmrt4ZZORfb6ehbWdnRHEIiITaEUKa5EJqUakRSaEYBJSCY2dEstQY7AuxahwXFrvZmWl2rh4JZ07z9dLtesfNj5q0FU3A5ObbwAAAABJRU5ErkJggg==);background-position:top;background-repeat:repeat-x;height:60px;padding-bottom:50px;width:100%;transition:all .2s cubic-bezier(0,0,0.2,1)}
lite-youtube::after{content:"";display:block;padding-bottom:calc(100% / (16 / 9))}
lite-youtube > iframe{width:100%;height:100%;position:absolute;top:0;left:0;border:0}
lite-youtube > .lty-playbtn{width:68px;height:48px;position:absolute;cursor:pointer;transform:translate3d(-50%,-50%,0);top:50%;left:50%;z-index:1;background-color:transparent;
background-image:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 68 48"><path fill="red" fill-opacity="0.8" d="M66.52,7.74c-0.78-2.93-2.49-5.41-5.42-6.19C55.79,.13,34,0,34,0S12.21,.13,6.9,1.55 C3.97,2.33,2.27,4.81,1.48,7.74C0.06,13.05,0,24,0,24s0.06,10.95,1.48,16.26c0.78,2.93,2.49,5.41,5.42,6.19 C12.21,47.87,34,48,34,48s21.79-0.13,27.1-1.55c2.93-0.78,4.64-3.26,5.42-6.19C67.94,34.95,68,24,68,24S67.94,13.05,66.52,7.74z"></path><path d="M 45,24 27,14 27,34" fill="white"></path></svg>');
filter:grayscale(100%);transition:filter .1s cubic-bezier(0,0,0.2,1);border:none}
lite-youtube:hover > .lty-playbtn,lite-youtube .lty-playbtn:focus{filter:none}
lite-youtube.lyt-activated{cursor:unset}
lite-youtube.lyt-activated::before,lite-youtube.lyt-activated > .lty-playbtn{opacity:0;pointer-events:none}
.lyt-visually-hidden{clip:rect(0 0 0 0);clip-path:inset(50%);height:1px;overflow:hidden;position:absolute;white-space:nowrap;width:1px}
</style>
                ]]></add>
            </operation>
		</file>
		<file path="catalog/view/theme/*/template/product/product.tpl">
		    <operation>
                <search><![CDATA[<?php echo $description; ?>]]></search>
                <add position="replace"><![CDATA[
				<?php if ($video) { 
				$videos = (explode(",",$video));
				if ( count($videos) == 1 ) { ?>
					<div class="row">
						<div class="col-sm-6"><?php echo $description; ?></div>
						<div class="col-sm-6">
							<lite-youtube videoid="<?php echo $videos[0]; ?>"></lite-youtube>
							<script>class LiteYTEmbed extends HTMLElement{connectedCallback(){this.videoId=this.getAttribute("videoid");let e=this.querySelector(".lty-playbtn");if(this.playLabel=e&&e.textContent.trim()||this.getAttribute("playlabel")||"Play",this.posterUrl=`https://i.ytimg.com/vi/${this.videoId}/hqdefault.jpg`,LiteYTEmbed.addPrefetch("preload",this.posterUrl,"image"),this.style.backgroundImage=`url("${this.posterUrl}")`,e||((e=document.createElement("button")).type="button",e.classList.add("lty-playbtn"),this.append(e)),!e.textContent){const t=document.createElement("span");t.className="lyt-visually-hidden",t.textContent=this.playLabel,e.append(t)}this.addEventListener("pointerover",LiteYTEmbed.warmConnections,{once:!0}),this.addEventListener("click",e=>this.addIframe())}static addPrefetch(e,t,i){const n=document.createElement("link");n.rel=e,n.href=t,i&&(n.as=i),document.head.append(n)}static warmConnections(){LiteYTEmbed.preconnected||(LiteYTEmbed.addPrefetch("preconnect","https://www.youtube-nocookie.com"),LiteYTEmbed.addPrefetch("preconnect","https://www.google.com"),LiteYTEmbed.addPrefetch("preconnect","https://googleads.g.doubleclick.net"),LiteYTEmbed.addPrefetch("preconnect","https://static.doubleclick.net"),LiteYTEmbed.preconnected=!0)}addIframe(){const e=new URLSearchParams(this.getAttribute("params")||[]);e.append("autoplay","1");const t=document.createElement("iframe");t.width=560,t.height=315,t.title=this.playLabel,t.allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture",t.allowFullscreen=!0,t.src=`https://www.youtube-nocookie.com/embed/${encodeURIComponent(this.videoId)}?${e.toString()}`,this.append(t),this.classList.add("lyt-activated"),this.querySelector("iframe").focus()}}customElements.define("lite-youtube",LiteYTEmbed);</script>
						</div>
					</div>
				<?php } else { ?>
					<div class="row">
						<div><?php echo $description; ?></div>
						<?php foreach ($videos as $video=> $video_id) { ?>
						<div class="col-sm-6">
							<lite-youtube videoid="<?php echo $video_id; ?>"></lite-youtube>
						</div>
						<?php } ?>
						<script>class LiteYTEmbed extends HTMLElement{connectedCallback(){this.videoId=this.getAttribute("videoid");let e=this.querySelector(".lty-playbtn");if(this.playLabel=e&&e.textContent.trim()||this.getAttribute("playlabel")||"Play",this.posterUrl=`https://i.ytimg.com/vi/${this.videoId}/hqdefault.jpg`,LiteYTEmbed.addPrefetch("preload",this.posterUrl,"image"),this.style.backgroundImage=`url("${this.posterUrl}")`,e||((e=document.createElement("button")).type="button",e.classList.add("lty-playbtn"),this.append(e)),!e.textContent){const t=document.createElement("span");t.className="lyt-visually-hidden",t.textContent=this.playLabel,e.append(t)}this.addEventListener("pointerover",LiteYTEmbed.warmConnections,{once:!0}),this.addEventListener("click",e=>this.addIframe())}static addPrefetch(e,t,i){const n=document.createElement("link");n.rel=e,n.href=t,i&&(n.as=i),document.head.append(n)}static warmConnections(){LiteYTEmbed.preconnected||(LiteYTEmbed.addPrefetch("preconnect","https://www.youtube-nocookie.com"),LiteYTEmbed.addPrefetch("preconnect","https://www.google.com"),LiteYTEmbed.addPrefetch("preconnect","https://googleads.g.doubleclick.net"),LiteYTEmbed.addPrefetch("preconnect","https://static.doubleclick.net"),LiteYTEmbed.preconnected=!0)}addIframe(){const e=new URLSearchParams(this.getAttribute("params")||[]);e.append("autoplay","1");const t=document.createElement("iframe");t.width=560,t.height=315,t.title=this.playLabel,t.allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture",t.allowFullscreen=!0,t.src=`https://www.youtube-nocookie.com/embed/${encodeURIComponent(this.videoId)}?${e.toString()}`,this.append(t),this.classList.add("lyt-activated"),this.querySelector("iframe").focus()}}customElements.define("lite-youtube",LiteYTEmbed);</script>
					</div>
				<?php } ?>
				<?php } else { ?>
				<?php echo $description; ?>
				<?php } ?>
                ]]></add>
            </operation>
        </file>
    </modification>

Войти

Вкладки...надо ли?

Рекомендованные сообещёния

Ссылка на комменирий

Погделиться на других сайих

Ссылка на комменирий

Погделиться на других сайих

Ссылка на комменирий

Погделиться на других сайих

Ссылка на комменирий

Погделиться на других сайих

Ссылка на комменирий

Погделиться на других сайих

Ссылка на комменирий

Погделиться на других сайих

Ссылка на комменирий

Погделиться на других сайих

Ссылка на комменирий

Погделиться на других сайих

Ссылка на комменирий

Погделиться на других сайих

Ссылка на комменирий

Погделиться на других сайих

Ссылка на комменирий

Погделиться на других сайих

Ссылка на комменирий

Погделиться на других сайих

Ссылка на комменирий

Погделиться на других сайих

Создайте аккаунт или войдите в него для комментирования

Создать аккаунт

Войти

Похожие публикации

Сейчас на страниэто 0 пользователей

Покупателям

Разрилитликам

Полезная информация

Последние дополнения

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