Jump to content
Search In
  • More options...
Find results that contain...
Find results in...

Recommended Posts

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

Link to post
Share on other sites

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

Link to post
Share on other sites

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

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

не понял

Link to post
Share on other sites

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

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

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

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

не понял

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

  • +1 1
Link to post
Share on other sites

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

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

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

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

Link to post
Share on other sites

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

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

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

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

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

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

Edited by pawana
  • +1 1
Link to post
Share on other sites

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

  • +1 2
Link to post
Share on other sites
8 минут назад, chukcha сказал:

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

 

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

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

 

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

 

 

  • +1 1
Link to post
Share on other sites

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

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

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

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

Link to post
Share on other sites

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

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

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

  • +1 1
Link to post
Share on other sites

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

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

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

  • +1 1
Link to post
Share on other sites

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

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

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

Link to post
Share on other sites

Для видео читайте про 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>

 

 

  • +1 2
Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    No registered users viewing this page.

×
×
  • Create New...

Important Information

On our site, cookies are used and personal data is processed to improve the user interface. To find out what and what personal data we are processing, please go to the link. If you click "I agree," it means that you understand and accept all the conditions specified in this Privacy Notice.