<?xml version="1.0" encoding="UTF-8"?><rss version="2.0"
	xmlns:content="http://purl.org/rss/1.0/modules/content/"
	xmlns:wfw="http://wellformedweb.org/CommentAPI/"
	xmlns:dc="http://purl.org/dc/elements/1.1/"
	xmlns:atom="http://www.w3.org/2005/Atom"
	xmlns:sy="http://purl.org/rss/1.0/modules/syndication/"
	xmlns:slash="http://purl.org/rss/1.0/modules/slash/"
	>

<channel>
	<title>SOAP.ZONE</title>
	<atom:link href="https://soap.zone/feed/" rel="self" type="application/rss+xml" />
	<link>https://soap.zone</link>
	<description>Creativity Internet Studio</description>
	<lastBuildDate>Fri, 07 Feb 2025 20:28:54 +0000</lastBuildDate>
	<language>en-US</language>
	<sy:updatePeriod>
	hourly	</sy:updatePeriod>
	<sy:updateFrequency>
	1	</sy:updateFrequency>
	<generator>https://wordpress.org/?v=6.8.3</generator>

<image>
	<url>https://soap.zone/wp-content/uploads/2025/02/cropped-LOGO-1-32x32.jpg</url>
	<title>SOAP.ZONE</title>
	<link>https://soap.zone</link>
	<width>32</width>
	<height>32</height>
</image> 
	<item>
		<title>Популярные JS-библиотеки и фреймворки</title>
		<link>https://soap.zone/2025/02/07/espace-pre-lang/</link>
					<comments>https://soap.zone/2025/02/07/espace-pre-lang/#respond</comments>
		
		<dc:creator><![CDATA[soap.zone]]></dc:creator>
		<pubDate>Fri, 07 Feb 2025 14:50:07 +0000</pubDate>
				<category><![CDATA[Без рубрики]]></category>
		<guid isPermaLink="false">https://soap.zone/?p=4282</guid>

					<description><![CDATA[Пример кода  Вот универсальный блок кода, который подключает jQuery и другие популярные библиотеки (Bootstrap, Lodash, Axios) в одном месте: html &#60;!-- Подключение библиотек --&#62; &#60;script src="https://code.jquery.com/jquery-3.6.0.min.js"&#62;&#60;/script&#62; &#60;script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"&#62;&#60;/script&#62; &#60;script src="https://cdn.jsdelivr.net/npm/lodash@4.17.21/lodash.min.js"&#62;&#60;/script&#62; &#60;script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"&#62;&#60;/script&#62; &#60;!-- Пользовательский код --&#62; &#60;script&#62; $(document).ready(() =&#62; { $(".ten").on("click", () =&#62; $(".six").click()); // Пример использования Lodash console.log(_.random(1, 100)); // Пример запроса через Axios [&#8230;]]]></description>
										<content:encoded><![CDATA[<h3><strong>Пример кода </strong></h3>
<p>Вот универсальный блок кода, который подключает jQuery и другие популярные библиотеки (Bootstrap, Lodash, Axios) в одном месте:</p>
<div class="contain-inline-size rounded-md border-[0.5px] border-token-border-medium relative bg-token-sidebar-surface-primary dark:bg-gray-950">
<div class="flex items-center text-token-text-secondary px-4 py-2 text-xs font-sans justify-between rounded-t-md h-9 bg-token-sidebar-surface-primary dark:bg-token-main-surface-secondary select-none">html</div>
<div class="sticky top-9 md:top-[5.75rem]"></div>
<div class="overflow-y-auto p-4" dir="ltr"><code class="!whitespace-pre language-html"><span class="hljs-comment">&lt;!-- Подключение библиотек --&gt;</span><br />
</code></div>
<div class="overflow-y-auto p-4" dir="ltr"><code class="!whitespace-pre language-html"><span class="hljs-tag">&lt;<span class="hljs-name">script</span> <span class="hljs-attr">src</span>=<span class="hljs-string">"https://code.jquery.com/jquery-3.6.0.min.js"</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">script</span>&gt;</span></code></div>
<div class="overflow-y-auto p-4" dir="ltr"><code class="!whitespace-pre language-html"><br />
<span class="hljs-tag">&lt;<span class="hljs-name">script</span> <span class="hljs-attr">src</span>=<span class="hljs-string">"https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">script</span>&gt;</span></code></div>
<div class="overflow-y-auto p-4" dir="ltr"><code class="!whitespace-pre language-html"><br />
<span class="hljs-tag">&lt;<span class="hljs-name">script</span> <span class="hljs-attr">src</span>=<span class="hljs-string">"https://cdn.jsdelivr.net/npm/lodash@4.17.21/lodash.min.js"</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">script</span>&gt;</span><br />
</code></div>
<div dir="ltr"></div>
<div class="overflow-y-auto p-4" dir="ltr"><code class="!whitespace-pre language-html"><span class="hljs-tag">&lt;<span class="hljs-name">script</span> <span class="hljs-attr">src</span>=<span class="hljs-string">"https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">script</span>&gt;</span><br />
</code></div>
<div dir="ltr"></div>
<div class="overflow-y-auto p-4" dir="ltr"><code class="!whitespace-pre language-html"><span class="hljs-comment">&lt;!-- Пользовательский код --&gt; </span></code></div>
<div class="overflow-y-auto p-4" dir="ltr"><code class="!whitespace-pre language-html"><span class="hljs-comment"><span class="hljs-tag">&lt;<span class="hljs-name">script</span>&gt;</span></span></code></div>
<div class="overflow-y-auto p-4" dir="ltr"><code class="!whitespace-pre language-html"><span class="hljs-comment"><span class="language-javascript"> $(<span class="hljs-variable language_">document</span>).<span class="hljs-title function_">ready</span>(<span class="hljs-function">() =&gt;</span> { $(<span class="hljs-string">".ten"</span>).<span class="hljs-title function_">on</span>(<span class="hljs-string">"click"</span>, <span class="hljs-function">() =&gt;</span> $(<span class="hljs-string">".six"</span>).<span class="hljs-title function_">click</span>()); </span></span></code></div>
<div dir="ltr"></div>
<div class="overflow-y-auto p-4" dir="ltr"><code class="!whitespace-pre language-html"><span class="hljs-comment"><span class="language-javascript">// Пример использования</span></span></code><code class="!whitespace-pre language-html"><span class="hljs-comment"><span class="language-javascript"> Lodash </span></span></code></div>
<div class="overflow-y-auto p-4" dir="ltr"><code class="!whitespace-pre language-html"><span class="hljs-comment"><span class="language-javascript"><span class="hljs-variable language_">console</span>.<span class="hljs-title function_">log</span>(_.<span class="hljs-title function_">random</span>(<span class="hljs-number">1</span>, <span class="hljs-number">100</span>)); </span></span></code></div>
<div dir="ltr"></div>
<div class="overflow-y-auto p-4" dir="ltr"><code class="!whitespace-pre language-html"><span class="hljs-comment"><span class="language-javascript">// Пример запроса через Axios </span></span></code></div>
<div class="overflow-y-auto p-4" dir="ltr"><code class="!whitespace-pre language-html"><span class="hljs-comment"><span class="language-javascript">axios.<span class="hljs-title function_">get</span>(<span class="hljs-string">'https://jsonplaceholder.typicode.com/todos/1'</span>) .<span class="hljs-title function_">then</span>(<span class="hljs-function"><span class="hljs-params">response</span> =&gt;</span> <span class="hljs-variable language_">console</span>.<span class="hljs-title function_">log</span>(response.<span class="hljs-property">data</span>)) .<span class="hljs-title function_">catch</span>(<span class="hljs-function"><span class="hljs-params">error</span> =&gt;</span> <span class="hljs-variable language_">console</span>.<span class="hljs-title function_">error</span>(error)); }); </span></span></code></div>
<div dir="ltr"></div>
<div class="overflow-y-auto p-4" dir="ltr"><code class="!whitespace-pre language-html"><span class="hljs-comment"><span class="hljs-tag">&lt;/<span class="hljs-name">script</span>&gt;</span></span></code></div>
</div>
<p>&nbsp;</p>
<h1><img src="https://s.w.org/images/core/emoji/16.0.1/72x72/1f4cc.png" alt="📌" class="wp-smiley" style="height: 1em; max-height: 1em;" /> <strong>Популярные JS-библиотеки и фреймворки</strong></h1>
<h2><img src="https://s.w.org/images/core/emoji/16.0.1/72x72/1f539.png" alt="🔹" class="wp-smiley" style="height: 1em; max-height: 1em;" /> <strong>1. jQuery</strong> (разные источники)</h2>
<div class="contain-inline-size rounded-md border-[0.5px] border-token-border-medium relative bg-token-sidebar-surface-primary dark:bg-gray-950">
<div class="flex items-center text-token-text-secondary px-4 py-2 text-xs font-sans justify-between rounded-t-md h-9 bg-token-sidebar-surface-primary dark:bg-token-main-surface-secondary select-none">html</div>
<div class="sticky top-9 md:top-[5.75rem]"></div>
<div class="overflow-y-auto p-4" dir="ltr"><code class="!whitespace-pre language-html"><code class="!whitespace-pre language-html"><span class="hljs-comment">&lt;!-- jQuery с Google CDN --&gt;</span><br />
<span class="hljs-tag">&lt;<span class="hljs-name">script</span> <span class="hljs-attr">src</span>=<span class="hljs-string">"https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">script</span>&gt;</span></code></code><span class="hljs-comment">&lt;!&#8211; jQuery с Microsoft CDN &#8211;&gt;</span><br />
<span class="hljs-tag">&lt;<span class="hljs-name">script</span> <span class="hljs-attr">src</span>=<span class="hljs-string">&#8220;https://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.6.0.min.js&#8221;</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">script</span>&gt;</span><code class="!whitespace-pre language-html"><code class="!whitespace-pre language-html"></code></code><span class="hljs-comment">&lt;!&#8211; jQuery с официального jQuery CDN &#8211;&gt;</span><br />
<span class="hljs-tag">&lt;<span class="hljs-name">script</span> <span class="hljs-attr">src</span>=<span class="hljs-string">&#8220;https://code.jquery.com/jquery-3.6.0.min.js&#8221;</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">script</span>&gt;</span></div>
</div>
<hr />
<h2><img src="https://s.w.org/images/core/emoji/16.0.1/72x72/1f539.png" alt="🔹" class="wp-smiley" style="height: 1em; max-height: 1em;" /> <strong>2. Bootstrap</strong> (CSS + JS + Popper.js)</h2>
<div class="contain-inline-size rounded-md border-[0.5px] border-token-border-medium relative bg-token-sidebar-surface-primary dark:bg-gray-950">
<div class="flex items-center text-token-text-secondary px-4 py-2 text-xs font-sans justify-between rounded-t-md h-9 bg-token-sidebar-surface-primary dark:bg-token-main-surface-secondary select-none">html</div>
<div class="sticky top-9 md:top-[5.75rem]"></div>
<div class="overflow-y-auto p-4" dir="ltr"><code class="!whitespace-pre language-html"><code class="!whitespace-pre language-html"><span class="hljs-comment">&lt;!-- Bootstrap CSS --&gt;</span><br />
<span class="hljs-tag">&lt;<span class="hljs-name">link</span> <span class="hljs-attr">href</span>=<span class="hljs-string">"https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css"</span> <span class="hljs-attr">rel</span>=<span class="hljs-string">"stylesheet"</span>&gt;</span></code></code><span class="hljs-comment">&lt;!&#8211; Bootstrap JS (с Popper.js) &#8211;&gt;</span><br />
<span class="hljs-tag">&lt;<span class="hljs-name">script</span> <span class="hljs-attr">src</span>=<span class="hljs-string">&#8220;https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js&#8221;</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">script</span>&gt;</span></div>
</div>
<hr />
<h2><img src="https://s.w.org/images/core/emoji/16.0.1/72x72/1f539.png" alt="🔹" class="wp-smiley" style="height: 1em; max-height: 1em;" /> <strong>3. Vue.js</strong></h2>
<div class="contain-inline-size rounded-md border-[0.5px] border-token-border-medium relative bg-token-sidebar-surface-primary dark:bg-gray-950">
<div class="flex items-center text-token-text-secondary px-4 py-2 text-xs font-sans justify-between rounded-t-md h-9 bg-token-sidebar-surface-primary dark:bg-token-main-surface-secondary select-none">html</div>
<div class="sticky top-9 md:top-[5.75rem]"></div>
<div class="overflow-y-auto p-4" dir="ltr"><code class="!whitespace-pre language-html"><code class="!whitespace-pre language-html"><span class="hljs-comment">&lt;!-- Vue 2 --&gt;</span><br />
<span class="hljs-tag">&lt;<span class="hljs-name">script</span> <span class="hljs-attr">src</span>=<span class="hljs-string">"https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.min.js"</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">script</span>&gt;</span></code></code><span class="hljs-comment">&lt;!&#8211; Vue 3 &#8211;&gt;</span><br />
<span class="hljs-tag">&lt;<span class="hljs-name">script</span> <span class="hljs-attr">src</span>=<span class="hljs-string">&#8220;https://unpkg.com/vue@3.2.31/dist/vue.global.js&#8221;</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">script</span>&gt;</span></div>
</div>
<hr />
<h2><img src="https://s.w.org/images/core/emoji/16.0.1/72x72/1f539.png" alt="🔹" class="wp-smiley" style="height: 1em; max-height: 1em;" /> <strong>4. React + ReactDOM</strong></h2>
<div class="contain-inline-size rounded-md border-[0.5px] border-token-border-medium relative bg-token-sidebar-surface-primary dark:bg-gray-950">
<div class="flex items-center text-token-text-secondary px-4 py-2 text-xs font-sans justify-between rounded-t-md h-9 bg-token-sidebar-surface-primary dark:bg-token-main-surface-secondary select-none">html</div>
<div class="sticky top-9 md:top-[5.75rem]"></div>
<div class="overflow-y-auto p-4" dir="ltr"><code class="!whitespace-pre language-html"><span class="hljs-comment">&lt;!-- React --&gt;</span><br />
<span class="hljs-tag">&lt;<span class="hljs-name">script</span> <span class="hljs-attr">src</span>=<span class="hljs-string">"https://unpkg.com/react@18/umd/react.production.min.js"</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">script</span>&gt;</span><br />
<span class="hljs-tag">&lt;<span class="hljs-name">script</span> <span class="hljs-attr">src</span>=<span class="hljs-string">"https://unpkg.com/react-dom@18/umd/react-dom.production.min.js"</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">script</span>&gt;</span><br />
</code></div>
</div>
<hr />
<h2><img src="https://s.w.org/images/core/emoji/16.0.1/72x72/1f539.png" alt="🔹" class="wp-smiley" style="height: 1em; max-height: 1em;" /> <strong>5. Angular</strong></h2>
<div class="contain-inline-size rounded-md border-[0.5px] border-token-border-medium relative bg-token-sidebar-surface-primary dark:bg-gray-950">
<div class="flex items-center text-token-text-secondary px-4 py-2 text-xs font-sans justify-between rounded-t-md h-9 bg-token-sidebar-surface-primary dark:bg-token-main-surface-secondary select-none">html</div>
<div class="sticky top-9 md:top-[5.75rem]">
<div class="overflow-y-auto p-4" dir="ltr"><code class="!whitespace-pre language-html"><span class="hljs-comment">&lt;!-- Angular --&gt;</span><br />
<span class="hljs-tag">&lt;<span class="hljs-name">script</span> <span class="hljs-attr">src</span>=<span class="hljs-string">"https://ajax.googleapis.com/ajax/libs/angularjs/1.8.2/angular.min.js"</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">script</span>&gt;</span><br />
</code></div>
</div>
<hr />
<h2><img src="https://s.w.org/images/core/emoji/16.0.1/72x72/1f539.png" alt="🔹" class="wp-smiley" style="height: 1em; max-height: 1em;" /> <strong>6. Lodash</strong> (утилиты для работы с массивами и объектами)</h2>
<div class="contain-inline-size rounded-md border-[0.5px] border-token-border-medium relative bg-token-sidebar-surface-primary dark:bg-gray-950">
<div class="flex items-center text-token-text-secondary px-4 py-2 text-xs font-sans justify-between rounded-t-md h-9 bg-token-sidebar-surface-primary dark:bg-token-main-surface-secondary select-none">html</div>
<div class="sticky top-9 md:top-[5.75rem]"></div>
<div class="overflow-y-auto p-4" dir="ltr"><code class="!whitespace-pre language-html"><span class="hljs-tag">&lt;<span class="hljs-name">script</span> <span class="hljs-attr">src</span>=<span class="hljs-string">"https://cdn.jsdelivr.net/npm/lodash@4.17.21/lodash.min.js"</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">script</span>&gt;</span><br />
</code></div>
</div>
<hr />
<h2><img src="https://s.w.org/images/core/emoji/16.0.1/72x72/1f539.png" alt="🔹" class="wp-smiley" style="height: 1em; max-height: 1em;" /> <strong>7. Axios</strong> (работа с HTTP-запросами)</h2>
<div class="contain-inline-size rounded-md border-[0.5px] border-token-border-medium relative bg-token-sidebar-surface-primary dark:bg-gray-950">
<div class="flex items-center text-token-text-secondary px-4 py-2 text-xs font-sans justify-between rounded-t-md h-9 bg-token-sidebar-surface-primary dark:bg-token-main-surface-secondary select-none">html</div>
<div class="sticky top-9 md:top-[5.75rem]"></div>
<div class="overflow-y-auto p-4" dir="ltr"><code class="!whitespace-pre language-html"><span class="hljs-tag">&lt;<span class="hljs-name">script</span> <span class="hljs-attr">src</span>=<span class="hljs-string">"https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">script</span>&gt;</span><br />
</code></div>
</div>
<hr />
<h2><img src="https://s.w.org/images/core/emoji/16.0.1/72x72/1f539.png" alt="🔹" class="wp-smiley" style="height: 1em; max-height: 1em;" /> <strong>8. Moment.js</strong> (работа с датами и временем)</h2>
<div class="contain-inline-size rounded-md border-[0.5px] border-token-border-medium relative bg-token-sidebar-surface-primary dark:bg-gray-950">
<div class="flex items-center text-token-text-secondary px-4 py-2 text-xs font-sans justify-between rounded-t-md h-9 bg-token-sidebar-surface-primary dark:bg-token-main-surface-secondary select-none">html</div>
<div class="sticky top-9 md:top-[5.75rem]"></div>
<div class="overflow-y-auto p-4" dir="ltr"><code class="!whitespace-pre language-html"><span class="hljs-tag">&lt;<span class="hljs-name">script</span> <span class="hljs-attr">src</span>=<span class="hljs-string">"https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.29.4/moment.min.js"</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">script</span>&gt;</span><br />
</code></div>
</div>
<hr />
<h2><img src="https://s.w.org/images/core/emoji/16.0.1/72x72/1f539.png" alt="🔹" class="wp-smiley" style="height: 1em; max-height: 1em;" /> <strong>9. Chart.js</strong> (графики и диаграммы)</h2>
<div class="contain-inline-size rounded-md border-[0.5px] border-token-border-medium relative bg-token-sidebar-surface-primary dark:bg-gray-950">
<div class="flex items-center text-token-text-secondary px-4 py-2 text-xs font-sans justify-between rounded-t-md h-9 bg-token-sidebar-surface-primary dark:bg-token-main-surface-secondary select-none">html</div>
<div class="sticky top-9 md:top-[5.75rem]"></div>
<div class="overflow-y-auto p-4" dir="ltr"><code class="!whitespace-pre language-html"><span class="hljs-tag">&lt;<span class="hljs-name">script</span> <span class="hljs-attr">src</span>=<span class="hljs-string">"https://cdn.jsdelivr.net/npm/chart.js"</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">script</span>&gt;</span><br />
</code></div>
</div>
<hr />
<h2><img src="https://s.w.org/images/core/emoji/16.0.1/72x72/1f539.png" alt="🔹" class="wp-smiley" style="height: 1em; max-height: 1em;" /> <strong>10. D3.js</strong> (визуализация данных)</h2>
<div class="contain-inline-size rounded-md border-[0.5px] border-token-border-medium relative bg-token-sidebar-surface-primary dark:bg-gray-950">
<div class="flex items-center text-token-text-secondary px-4 py-2 text-xs font-sans justify-between rounded-t-md h-9 bg-token-sidebar-surface-primary dark:bg-token-main-surface-secondary select-none">html</div>
<div class="sticky top-9 md:top-[5.75rem]"></div>
<div class="overflow-y-auto p-4" dir="ltr"><code class="!whitespace-pre language-html"><span class="hljs-tag">&lt;<span class="hljs-name">script</span> <span class="hljs-attr">src</span>=<span class="hljs-string">"https://d3js.org/d3.v7.min.js"</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">script</span>&gt;</span><br />
</code></div>
</div>
<hr />
<h2><img src="https://s.w.org/images/core/emoji/16.0.1/72x72/1f539.png" alt="🔹" class="wp-smiley" style="height: 1em; max-height: 1em;" /> <strong>11. Three.js</strong> (3D-графика)</h2>
<div class="contain-inline-size rounded-md border-[0.5px] border-token-border-medium relative bg-token-sidebar-surface-primary dark:bg-gray-950">
<div class="flex items-center text-token-text-secondary px-4 py-2 text-xs font-sans justify-between rounded-t-md h-9 bg-token-sidebar-surface-primary dark:bg-token-main-surface-secondary select-none">html</div>
<div class="sticky top-9 md:top-[5.75rem]"></div>
<div class="overflow-y-auto p-4" dir="ltr"><code class="!whitespace-pre language-html"><span class="hljs-tag">&lt;<span class="hljs-name">script</span> <span class="hljs-attr">src</span>=<span class="hljs-string">"https://cdn.jsdelivr.net/npm/three@0.132.2/build/three.min.js"</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">script</span>&gt;</span><br />
</code></div>
</div>
<hr />
<h2><img src="https://s.w.org/images/core/emoji/16.0.1/72x72/1f539.png" alt="🔹" class="wp-smiley" style="height: 1em; max-height: 1em;" /> <strong>12. Swiper.js</strong> (слайдеры и карусели)</h2>
<div class="contain-inline-size rounded-md border-[0.5px] border-token-border-medium relative bg-token-sidebar-surface-primary dark:bg-gray-950">
<div class="flex items-center text-token-text-secondary px-4 py-2 text-xs font-sans justify-between rounded-t-md h-9 bg-token-sidebar-surface-primary dark:bg-token-main-surface-secondary select-none">html</div>
<div class="sticky top-9 md:top-[5.75rem]"></div>
<div class="overflow-y-auto p-4" dir="ltr"><code class="!whitespace-pre language-html"><span class="hljs-comment">&lt;!-- Swiper CSS --&gt;</span><br />
<span class="hljs-tag">&lt;<span class="hljs-name">link</span> <span class="hljs-attr">rel</span>=<span class="hljs-string">"stylesheet"</span> <span class="hljs-attr">href</span>=<span class="hljs-string">"https://unpkg.com/swiper/swiper-bundle.min.css"</span>&gt;</span><br />
<span class="hljs-comment">&lt;!-- Swiper JS --&gt;</span><br />
<span class="hljs-tag">&lt;<span class="hljs-name">script</span> <span class="hljs-attr">src</span>=<span class="hljs-string">"https://unpkg.com/swiper/swiper-bundle.min.js"</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">script</span>&gt;</span><br />
</code></div>
</div>
<hr />
<h2><img src="https://s.w.org/images/core/emoji/16.0.1/72x72/1f539.png" alt="🔹" class="wp-smiley" style="height: 1em; max-height: 1em;" /> <strong>13. Slick Carousel</strong> (слайдеры и карусели)</h2>
<div class="contain-inline-size rounded-md border-[0.5px] border-token-border-medium relative bg-token-sidebar-surface-primary dark:bg-gray-950">
<div class="flex items-center text-token-text-secondary px-4 py-2 text-xs font-sans justify-between rounded-t-md h-9 bg-token-sidebar-surface-primary dark:bg-token-main-surface-secondary select-none">html</div>
<div class="sticky top-9 md:top-[5.75rem]"></div>
<div class="overflow-y-auto p-4" dir="ltr"><code class="!whitespace-pre language-html"><span class="hljs-comment">&lt;!-- Slick CSS --&gt;</span><br />
<span class="hljs-tag">&lt;<span class="hljs-name">link</span> <span class="hljs-attr">rel</span>=<span class="hljs-string">"stylesheet"</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"text/css"</span> <span class="hljs-attr">href</span>=<span class="hljs-string">"https://cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.css"</span>/&gt;</span><br />
<span class="hljs-comment">&lt;!-- Slick JS --&gt;</span><br />
<span class="hljs-tag">&lt;<span class="hljs-name">script</span> <span class="hljs-attr">src</span>=<span class="hljs-string">"https://cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.min.js"</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">script</span>&gt;</span><br />
</code></div>
</div>
<hr />
<h2><img src="https://s.w.org/images/core/emoji/16.0.1/72x72/1f539.png" alt="🔹" class="wp-smiley" style="height: 1em; max-height: 1em;" /> <strong>14. GSAP</strong> (анимации)</h2>
<div class="contain-inline-size rounded-md border-[0.5px] border-token-border-medium relative bg-token-sidebar-surface-primary dark:bg-gray-950">
<div class="flex items-center text-token-text-secondary px-4 py-2 text-xs font-sans justify-between rounded-t-md h-9 bg-token-sidebar-surface-primary dark:bg-token-main-surface-secondary select-none">html</div>
<div class="sticky top-9 md:top-[5.75rem]"></div>
<div class="overflow-y-auto p-4" dir="ltr"><code class="!whitespace-pre language-html"><span class="hljs-tag">&lt;<span class="hljs-name">script</span> <span class="hljs-attr">src</span>=<span class="hljs-string">"https://cdnjs.cloudflare.com/ajax/libs/gsap/3.9.1/gsap.min.js"</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">script</span>&gt;</span><br />
</code></div>
</div>
<hr />
<h2><img src="https://s.w.org/images/core/emoji/16.0.1/72x72/1f539.png" alt="🔹" class="wp-smiley" style="height: 1em; max-height: 1em;" /> <strong>15. Anime.js</strong> (анимации)</h2>
<div class="contain-inline-size rounded-md border-[0.5px] border-token-border-medium relative bg-token-sidebar-surface-primary dark:bg-gray-950">
<div class="flex items-center text-token-text-secondary px-4 py-2 text-xs font-sans justify-between rounded-t-md h-9 bg-token-sidebar-surface-primary dark:bg-token-main-surface-secondary select-none">html</div>
<div class="sticky top-9 md:top-[5.75rem]"></div>
<div class="overflow-y-auto p-4" dir="ltr"><code class="!whitespace-pre language-html"><span class="hljs-tag">&lt;<span class="hljs-name">script</span> <span class="hljs-attr">src</span>=<span class="hljs-string">"https://cdnjs.cloudflare.com/ajax/libs/animejs/3.2.1/anime.min.js"</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">script</span>&gt;</span><br />
</code></div>
</div>
<hr />
<h2><img src="https://s.w.org/images/core/emoji/16.0.1/72x72/1f539.png" alt="🔹" class="wp-smiley" style="height: 1em; max-height: 1em;" /> <strong>16. Particles.js</strong> (анимация частиц)</h2>
<div class="contain-inline-size rounded-md border-[0.5px] border-token-border-medium relative bg-token-sidebar-surface-primary dark:bg-gray-950">
<div class="flex items-center text-token-text-secondary px-4 py-2 text-xs font-sans justify-between rounded-t-md h-9 bg-token-sidebar-surface-primary dark:bg-token-main-surface-secondary select-none">html</div>
<div class="sticky top-9 md:top-[5.75rem]"></div>
<div class="overflow-y-auto p-4" dir="ltr"><code class="!whitespace-pre language-html"><span class="hljs-tag">&lt;<span class="hljs-name">script</span> <span class="hljs-attr">src</span>=<span class="hljs-string">"https://cdn.jsdelivr.net/npm/particles.js@2.0.0/particles.min.js"</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">script</span>&gt;</span><br />
</code></div>
</div>
<hr />
<h2><img src="https://s.w.org/images/core/emoji/16.0.1/72x72/1f539.png" alt="🔹" class="wp-smiley" style="height: 1em; max-height: 1em;" /> <strong>17. AOS (Animate On Scroll)</strong> (анимации при прокрутке)</h2>
<div class="contain-inline-size rounded-md border-[0.5px] border-token-border-medium relative bg-token-sidebar-surface-primary dark:bg-gray-950">
<div class="flex items-center text-token-text-secondary px-4 py-2 text-xs font-sans justify-between rounded-t-md h-9 bg-token-sidebar-surface-primary dark:bg-token-main-surface-secondary select-none">html</div>
<div class="sticky top-9 md:top-[5.75rem]"></div>
<div class="overflow-y-auto p-4" dir="ltr"><code class="!whitespace-pre language-html"><span class="hljs-comment">&lt;!-- AOS CSS --&gt;</span><br />
<span class="hljs-tag">&lt;<span class="hljs-name">link</span> <span class="hljs-attr">href</span>=<span class="hljs-string">"https://unpkg.com/aos@2.3.1/dist/aos.css"</span> <span class="hljs-attr">rel</span>=<span class="hljs-string">"stylesheet"</span>&gt;</span><br />
<span class="hljs-comment">&lt;!-- AOS JS --&gt;</span><br />
<span class="hljs-tag">&lt;<span class="hljs-name">script</span> <span class="hljs-attr">src</span>=<span class="hljs-string">"https://unpkg.com/aos@2.3.1/dist/aos.js"</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">script</span>&gt;</span><br />
</code></div>
</div>
<hr />
<h2><img src="https://s.w.org/images/core/emoji/16.0.1/72x72/1f539.png" alt="🔹" class="wp-smiley" style="height: 1em; max-height: 1em;" /> <strong>18. Font Awesome</strong> (иконки)</h2>
<div class="contain-inline-size rounded-md border-[0.5px] border-token-border-medium relative bg-token-sidebar-surface-primary dark:bg-gray-950">
<div class="flex items-center text-token-text-secondary px-4 py-2 text-xs font-sans justify-between rounded-t-md h-9 bg-token-sidebar-surface-primary dark:bg-token-main-surface-secondary select-none">html</div>
<div class="sticky top-9 md:top-[5.75rem]"></div>
<div class="overflow-y-auto p-4" dir="ltr"><code class="!whitespace-pre language-html"><span class="hljs-tag">&lt;<span class="hljs-name">script</span> <span class="hljs-attr">src</span>=<span class="hljs-string">"https://kit.fontawesome.com/ВАШ-КОД.js"</span> <span class="hljs-attr">crossorigin</span>=<span class="hljs-string">"anonymous"</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">script</span>&gt;</span><br />
</code></div>
</div>
<hr />
<h2><img src="https://s.w.org/images/core/emoji/16.0.1/72x72/1f539.png" alt="🔹" class="wp-smiley" style="height: 1em; max-height: 1em;" /> <strong>19. Tailwind CSS</strong> (утилитарный CSS-фреймворк)</h2>
<div class="contain-inline-size rounded-md border-[0.5px] border-token-border-medium relative bg-token-sidebar-surface-primary dark:bg-gray-950">
<div class="flex items-center text-token-text-secondary px-4 py-2 text-xs font-sans justify-between rounded-t-md h-9 bg-token-sidebar-surface-primary dark:bg-token-main-surface-secondary select-none">html</div>
<div class="sticky top-9 md:top-[5.75rem]"></div>
<div class="overflow-y-auto p-4" dir="ltr"><code class="!whitespace-pre language-html"><span class="hljs-comment">&lt;!-- Tailwind CSS --&gt;</span><br />
<span class="hljs-tag">&lt;<span class="hljs-name">script</span> <span class="hljs-attr">src</span>=<span class="hljs-string">"https://cdn.tailwindcss.com"</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">script</span>&gt;</span><br />
</code></div>
</div>
<hr />
<h2><img src="https://s.w.org/images/core/emoji/16.0.1/72x72/1f539.png" alt="🔹" class="wp-smiley" style="height: 1em; max-height: 1em;" /> <strong>20. SweetAlert2</strong> (красивые модальные окна)</h2>
<div class="contain-inline-size rounded-md border-[0.5px] border-token-border-medium relative bg-token-sidebar-surface-primary dark:bg-gray-950">
<div class="flex items-center text-token-text-secondary px-4 py-2 text-xs font-sans justify-between rounded-t-md h-9 bg-token-sidebar-surface-primary dark:bg-token-main-surface-secondary select-none">html</div>
<div class="sticky top-9 md:top-[5.75rem]"></div>
<div class="overflow-y-auto p-4" dir="ltr"><code class="!whitespace-pre language-html"><span class="hljs-comment">&lt;!-- SweetAlert2 CSS --&gt;</span><br />
<span class="hljs-tag">&lt;<span class="hljs-name">link</span> <span class="hljs-attr">rel</span>=<span class="hljs-string">"stylesheet"</span> <span class="hljs-attr">href</span>=<span class="hljs-string">"https://cdn.jsdelivr.net/npm/sweetalert2@11.7.3/dist/sweetalert2.min.css"</span>&gt;</span><br />
<span class="hljs-comment">&lt;!-- SweetAlert2 JS --&gt;</span><br />
<span class="hljs-tag">&lt;<span class="hljs-name">script</span> <span class="hljs-attr">src</span>=<span class="hljs-string">"https://cdn.jsdelivr.net/npm/sweetalert2@11.7.3/dist/sweetalert2.all.min.js"</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">script</span>&gt;</span><br />
</code></div>
</div>
<hr />
<h2><img src="https://s.w.org/images/core/emoji/16.0.1/72x72/1f539.png" alt="🔹" class="wp-smiley" style="height: 1em; max-height: 1em;" /> <strong>21. Popper.js</strong> (используется для всплывающих подсказок)</h2>
<div class="contain-inline-size rounded-md border-[0.5px] border-token-border-medium relative bg-token-sidebar-surface-primary dark:bg-gray-950">
<div class="flex items-center text-token-text-secondary px-4 py-2 text-xs font-sans justify-between rounded-t-md h-9 bg-token-sidebar-surface-primary dark:bg-token-main-surface-secondary select-none">html</div>
<div class="sticky top-9 md:top-[5.75rem]"></div>
<div class="overflow-y-auto p-4" dir="ltr"><code class="!whitespace-pre language-html"><span class="hljs-tag">&lt;<span class="hljs-name">script</span> <span class="hljs-attr">src</span>=<span class="hljs-string">"https://cdn.jsdelivr.net/npm/@popperjs/core@2.11.6/dist/umd/popper.min.js"</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">script</span>&gt;</span><br />
</code></div>
</div>
<hr />
<h2><img src="https://s.w.org/images/core/emoji/16.0.1/72x72/1f539.png" alt="🔹" class="wp-smiley" style="height: 1em; max-height: 1em;" /> <strong>22. jQuery UI</strong> (расширение для jQuery)</h2>
<div class="contain-inline-size rounded-md border-[0.5px] border-token-border-medium relative bg-token-sidebar-surface-primary dark:bg-gray-950">
<div class="flex items-center text-token-text-secondary px-4 py-2 text-xs font-sans justify-between rounded-t-md h-9 bg-token-sidebar-surface-primary dark:bg-token-main-surface-secondary select-none">html</div>
<div class="sticky top-9 md:top-[5.75rem]"></div>
<div class="overflow-y-auto p-4" dir="ltr"><code class="!whitespace-pre language-html"><span class="hljs-comment">&lt;!-- jQuery UI CSS --&gt;</span><br />
<span class="hljs-tag">&lt;<span class="hljs-name">link</span> <span class="hljs-attr">rel</span>=<span class="hljs-string">"stylesheet"</span> <span class="hljs-attr">href</span>=<span class="hljs-string">"https://code.jquery.com/ui/1.13.2/themes/base/jquery-ui.css"</span>&gt;</span><br />
<span class="hljs-comment">&lt;!-- jQuery UI JS --&gt;</span><br />
<span class="hljs-tag">&lt;<span class="hljs-name">script</span> <span class="hljs-attr">src</span>=<span class="hljs-string">"https://code.jquery.com/ui/1.13.2/jquery-ui.min.js"</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">script</span>&gt;</span><br />
</code></div>
</div>
<hr />
<h1><img src="https://s.w.org/images/core/emoji/16.0.1/72x72/1f4cc.png" alt="📌" class="wp-smiley" style="height: 1em; max-height: 1em;" /> <strong>Дополнительные ресурсы</strong></h1>
<ul>
<li><a href="https://cdnjs.com/" target="_new" rel="noopener"><img src="https://s.w.org/images/core/emoji/16.0.1/72x72/1f517.png" alt="🔗" class="wp-smiley" style="height: 1em; max-height: 1em;" /> CDNJS</a> – большая база библиотек.</li>
<li><a href="https://www.jsdelivr.com/" target="_new" rel="noopener"><img src="https://s.w.org/images/core/emoji/16.0.1/72x72/1f517.png" alt="🔗" class="wp-smiley" style="height: 1em; max-height: 1em;" /> jsDelivr</a> – быстрый CDN для популярных библиотек.</li>
<li><a href="https://unpkg.com/" target="_new" rel="noopener"><img src="https://s.w.org/images/core/emoji/16.0.1/72x72/1f517.png" alt="🔗" class="wp-smiley" style="height: 1em; max-height: 1em;" /> Unpkg</a> – удобен для NPM-пакетов.</li>
</ul>
</div>
]]></content:encoded>
					
					<wfw:commentRss>https://soap.zone/2025/02/07/espace-pre-lang/feed/</wfw:commentRss>
			<slash:comments>0</slash:comments>
		
		
			</item>
		<item>
		<title>Как все изображения сделать квадратными?</title>
		<link>https://soap.zone/2024/09/17/squre/</link>
					<comments>https://soap.zone/2024/09/17/squre/#respond</comments>
		
		<dc:creator><![CDATA[soap.zone]]></dc:creator>
		<pubDate>Tue, 17 Sep 2024 18:31:18 +0000</pubDate>
				<category><![CDATA[Без рубрики]]></category>
		<guid isPermaLink="false">https://soap.zone/?p=2079</guid>

					<description><![CDATA[div { /* Блок обертки картинки */ width: 20%; /* Тут ширина ваша, высота будет считаться на хаке ниже */ position: relative; /* Это обязательно */ /* Временные стили*/ background-color: #eee; margin: 30px auto; } div:before { /* Хак формирования соотношения сторон для квадрата 1:1, исходя из ширины */ content: ""; display: block; padding-bottom: 100%; [&#8230;]]]></description>
										<content:encoded><![CDATA[<pre>
div {
  /* Блок обертки картинки */
  width: 20%;
  /* Тут ширина ваша, высота будет считаться на хаке ниже */
  position: relative;
  /* Это обязательно */

  /* Временные стили*/
  background-color: #eee;
  margin: 30px auto;

}

div:before {
  /* Хак формирования соотношения сторон для квадрата 1:1, исходя из ширины */
  content: "";
  display: block;
  padding-bottom: 100%;
}

img {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  margin: auto;
  display: inline-block;
  width: auto;
  min-width: 1px;
  max-width: 100%;
  height: initial;
  min-height: 1px;
  max-height: 100%;
}
</pre>
]]></content:encoded>
					
					<wfw:commentRss>https://soap.zone/2024/09/17/squre/feed/</wfw:commentRss>
			<slash:comments>0</slash:comments>
		
		
			</item>
		<item>
		<title>Добавить выбор количества в список товаров</title>
		<link>https://soap.zone/2024/08/27/%d0%b4%d0%be%d0%b1%d0%b0%d0%b2%d0%b8%d1%82%d1%8c-%d0%b2%d1%8b%d0%b1%d0%be%d1%80-%d0%ba%d0%be%d0%bb%d0%b8%d1%87%d0%b5%d1%81%d1%82%d0%b2%d0%b0-%d0%b2-%d1%81%d0%bf%d0%b8%d1%81%d0%be%d0%ba-%d1%82%d0%be/</link>
					<comments>https://soap.zone/2024/08/27/%d0%b4%d0%be%d0%b1%d0%b0%d0%b2%d0%b8%d1%82%d1%8c-%d0%b2%d1%8b%d0%b1%d0%be%d1%80-%d0%ba%d0%be%d0%bb%d0%b8%d1%87%d0%b5%d1%81%d1%82%d0%b2%d0%b0-%d0%b2-%d1%81%d0%bf%d0%b8%d1%81%d0%be%d0%ba-%d1%82%d0%be/#respond</comments>
		
		<dc:creator><![CDATA[soap.zone]]></dc:creator>
		<pubDate>Mon, 26 Aug 2024 23:04:20 +0000</pubDate>
				<category><![CDATA[Без рубрики]]></category>
		<guid isPermaLink="false">https://soap.zone/?p=2045</guid>

					<description><![CDATA[// 1. Добавление новой колонки для количества товаров на складе перед столбцом "В наличии" add_filter('manage_edit-product_columns', 'custom_product_columns'); function custom_product_columns($columns) { // Проверяем роль пользователя if (!current_user_can('admin_shop') &#038;& !current_user_can('administrator')) { return $columns; // Возвращаем исходные колонки, если роль не соответствует } // Создаем новый массив с колонками $reordered_columns = array(); // Проходимся по всем существующим колонкам foreach [&#8230;]]]></description>
										<content:encoded><![CDATA[
<pre>

// 1. Добавление новой колонки для количества товаров на складе перед столбцом "В наличии"
add_filter('manage_edit-product_columns', 'custom_product_columns');
function custom_product_columns($columns) {
    // Проверяем роль пользователя
    if (!current_user_can('admin_shop') && !current_user_can('administrator')) {
        return $columns; // Возвращаем исходные колонки, если роль не соответствует
    }
    
    // Создаем новый массив с колонками
    $reordered_columns = array();
    
    // Проходимся по всем существующим колонкам
    foreach ($columns as $key => $value) {
        // Перед добавлением колонки 'is_in_stock' (В наличии) добавляем нашу новую колонку
        if ($key == 'is_in_stock') {
            $reordered_columns['stock_quantity'] = __('Количество на складе', 'woocommerce');
        }

        $reordered_columns[$key] = $value;
    }

    return $reordered_columns;
}

// 2. Заполнение колонки данными
add_action('manage_product_posts_custom_column', 'custom_product_column_content', 10, 2);
function custom_product_column_content($column, $post_id) {
    // Проверяем роль пользователя
    if (!current_user_can('admin_shop') && !current_user_can('administrator')) {
        return; // Прекращаем выполнение, если роль не соответствует
    }

    if ($column === 'stock_quantity') {
        $stock = get_post_meta($post_id, '_stock', true);
        echo '<div class="stock_quantity" data-product-id="' . $post_id . '">';
        echo '<input type="number" value="' . esc_attr($stock) . '" style="width: 60px;" />';
        echo '</div>';
    }
}

// 3. AJAX обработка изменения количества товаров
add_action('wp_ajax_update_stock_quantity', 'update_stock_quantity');
function update_stock_quantity() {
    // Проверяем роль пользователя
    if (!current_user_can('admin_shop') && !current_user_can('administrator')) {
        wp_send_json_error(); // Прекращаем выполнение, если роль не соответствует
        return;
    }

    if (isset($_POST['product_id']) && isset($_POST['quantity'])) {
        $product_id = intval($_POST['product_id']);
        $quantity = intval($_POST['quantity']);
        update_post_meta($product_id, '_stock', $quantity);
        wp_send_json_success();
    } else {
        wp_send_json_error();
    }
}

// 4. Скрипт для обработки изменения количества товаров в колонке
add_action('admin_footer', 'stock_quantity_editable_script');
function stock_quantity_editable_script() {
    // Проверяем роль пользователя
    if (!current_user_can('admin_shop') && !current_user_can('administrator')) {
        return; // Прекращаем выполнение, если роль не соответствует
    }

    global $pagenow;
    if ($pagenow !== 'edit.php' || get_post_type() !== 'product') {
        return;
    }
    ?>
    <script type="text/javascript">
        jQuery(document).ready(function($) {
            $('.stock_quantity input').on('change', function() {
                var $input = $(this);
                var product_id = $input.closest('.stock_quantity').data('product-id');
                var quantity = $input.val();

                $.ajax({
                    url: ajaxurl,
                    type: 'POST',
                    data: {
                        action: 'update_stock_quantity',
                        product_id: product_id,
                        quantity: quantity
                    },
                    success: function(response) {
                        if (response.success) {
                            $input.css('border-color', 'green');
                        } else {
                            $input.css('border-color', 'red');
                        }
                    }
                });
            });
        });
    </script>
    <style>
        /* Добавляем отступ справа для колонки с количеством на складе */
        .column-stock_quantity {
            width: 80px; /* Задаем ширину для новой колонки */
            padding-right: 20px; /* Отступ справа */
        }
    </style>
    <?php
}
//
</pre>



<p></p>



<p></p>
]]></content:encoded>
					
					<wfw:commentRss>https://soap.zone/2024/08/27/%d0%b4%d0%be%d0%b1%d0%b0%d0%b2%d0%b8%d1%82%d1%8c-%d0%b2%d1%8b%d0%b1%d0%be%d1%80-%d0%ba%d0%be%d0%bb%d0%b8%d1%87%d0%b5%d1%81%d1%82%d0%b2%d0%b0-%d0%b2-%d1%81%d0%bf%d0%b8%d1%81%d0%be%d0%ba-%d1%82%d0%be/feed/</wfw:commentRss>
			<slash:comments>0</slash:comments>
		
		
			</item>
		<item>
		<title>Несколько популярных онлайн-редакторов кода</title>
		<link>https://soap.zone/2024/08/16/%d0%b2%d0%be%d1%82-%d0%bd%d0%b5%d1%81%d0%ba%d0%be%d0%bb%d1%8c%d0%ba%d0%be-%d0%bf%d0%be%d0%bf%d1%83%d0%bb%d1%8f%d1%80%d0%bd%d1%8b%d1%85-%d0%be%d0%bd%d0%bb%d0%b0%d0%b9%d0%bd-%d1%80%d0%b5%d0%b4%d0%b0/</link>
					<comments>https://soap.zone/2024/08/16/%d0%b2%d0%be%d1%82-%d0%bd%d0%b5%d1%81%d0%ba%d0%be%d0%bb%d1%8c%d0%ba%d0%be-%d0%bf%d0%be%d0%bf%d1%83%d0%bb%d1%8f%d1%80%d0%bd%d1%8b%d1%85-%d0%be%d0%bd%d0%bb%d0%b0%d0%b9%d0%bd-%d1%80%d0%b5%d0%b4%d0%b0/#respond</comments>
		
		<dc:creator><![CDATA[soap.zone]]></dc:creator>
		<pubDate>Fri, 16 Aug 2024 13:12:14 +0000</pubDate>
				<category><![CDATA[Без рубрики]]></category>
		<guid isPermaLink="false">https://soap.zone/?p=1776</guid>

					<description><![CDATA[Вот несколько популярных онлайн-редакторов кода, аналогичных JSFiddle, которые позволяют писать, тестировать и делиться HTML, CSS и JavaScript: Эти инструменты позволяют вам работать с кодом прямо в браузере и видеть результаты в реальном времени. Вы также можете делиться своими проектами с другими пользователями.]]></description>
										<content:encoded><![CDATA[
<p>Вот несколько популярных онлайн-редакторов кода, аналогичных <a href="https://jsfiddle.net/">JSFiddle</a>, которые позволяют писать, тестировать и делиться HTML, CSS и JavaScript:</p>



<ol class="wp-block-list">
<li><strong>CodePen</strong> (<a href="https://codepen.io/">https://codepen.io/</a>)<br>Один из самых популярных онлайн-редакторов. Позволяет создавать проекты, делиться ими и даже находить вдохновение среди работ других пользователей.</li>



<li><strong>JSBin</strong> (<a href="https://jsbin.com/">https://jsbin.com/</a>)<br>Легкий и простой инструмент для быстрого тестирования и отладки кода в браузере. Поддерживает совместную работу и интеграцию с GitHub.</li>



<li><strong>JSFiddle</strong> (<a href="https://jsfiddle.net/">https://jsfiddle.net/</a>)<br>Сам JSFiddle, если вам нужно быстро протестировать фрагменты HTML, CSS и JavaScript, а также делиться кодом с другими.</li>



<li><strong>CodeSandbox</strong> (<a href="https://codesandbox.io/">https://codesandbox.io/</a>)<br>Мощный онлайн-редактор, предназначенный для разработки приложений на JavaScript и TypeScript, поддерживает React, Vue, Angular и другие фреймворки.</li>



<li><strong>Repl.it</strong> (<a href="https://replit.com/">https://replit.com/</a>)<br>Универсальная платформа для кодирования, которая поддерживает множество языков программирования. Хорошо подходит для совместной работы и обучения.</li>



<li><strong>Codeply</strong> (<a href="https://www.codeply.com/">https://www.codeply.com/</a>)<br>Фокусируется на работе с фронтенд-фреймворками, такими как Bootstrap, Foundation, Materialize и др.</li>
</ol>



<p>Эти инструменты позволяют вам работать с кодом прямо в браузере и видеть результаты в реальном времени. Вы также можете делиться своими проектами с другими пользователями.</p>
]]></content:encoded>
					
					<wfw:commentRss>https://soap.zone/2024/08/16/%d0%b2%d0%be%d1%82-%d0%bd%d0%b5%d1%81%d0%ba%d0%be%d0%bb%d1%8c%d0%ba%d0%be-%d0%bf%d0%be%d0%bf%d1%83%d0%bb%d1%8f%d1%80%d0%bd%d1%8b%d1%85-%d0%be%d0%bd%d0%bb%d0%b0%d0%b9%d0%bd-%d1%80%d0%b5%d0%b4%d0%b0/feed/</wfw:commentRss>
			<slash:comments>0</slash:comments>
		
		
			</item>
		<item>
		<title>Замена футера</title>
		<link>https://soap.zone/2024/08/12/%d0%b7%d0%b0%d0%bc%d0%b5%d0%bd%d0%b0-%d1%84%d1%83%d1%82%d0%b5%d1%80%d0%b0/</link>
					<comments>https://soap.zone/2024/08/12/%d0%b7%d0%b0%d0%bc%d0%b5%d0%bd%d0%b0-%d1%84%d1%83%d1%82%d0%b5%d1%80%d0%b0/#respond</comments>
		
		<dc:creator><![CDATA[soap.zone]]></dc:creator>
		<pubDate>Mon, 12 Aug 2024 16:28:04 +0000</pubDate>
				<category><![CDATA[Без рубрики]]></category>
		<guid isPermaLink="false">https://soap.zone/?p=1769</guid>

					<description><![CDATA[Имеем несколько вариантов замены и удаления. Для замены используем код в functions.php: Здесь мы удалим часть футера function replace_opstore_footer_credit() { remove_action('opstore_footer', 'opstore_bottom_footer', 10); add_action('opstore_footer', 'custom_footer_credit', 10); } function custom_footer_credit() { ?> © 2024 Ваше Имя или Название Компании. Все права защищены.]]></description>
										<content:encoded><![CDATA[<p>Имеем несколько вариантов замены и удаления. Для замены используем код в  functions.php:<br />
Здесь мы удалим часть футера</p>
<pre>
function replace_opstore_footer_credit() {
    remove_action('opstore_footer', 'opstore_bottom_footer', 10);

    add_action('opstore_footer', 'custom_footer_credit', 10);
}

function custom_footer_credit() {
    ?>
    <div class="footer-custom">
        <p>© 2024 Ваше Имя или Название Компании. Все права защищены.</p>
    </div>
    <?php
}

add_action('wp_loaded', 'replace_opstore_footer_credit');

<pre>
Здесь замена подписи
<pre>
function modify_opstore_footer_credit($content) {
    // Ищем стандартную подпись по содержимому
     $pattern = '/Copyright 2024 - Opstore Theme By <a href="https:\/\/wpoperation\.com\/">WPoperation<\/a>/';

    // Формируем новую подпись
    $replacement = '© 2024 Ваше Имя или Название Компании. Все права защищены.';

    // Заменяем стандартную подпись на новую
    $content = preg_replace($pattern, $replacement, $content);

    return $content;
}

function start_output_buffer() {
    ob_start('modify_opstore_footer_credit');
}

function end_output_buffer() {
    ob_end_flush();
}

add_action('template_redirect', 'start_output_buffer');
add_action('shutdown', 'end_output_buffer');

</pre>
<p>или не зная разметки </p>
<pre>
function modify_opstore_footer_credit($content) {
    // Убираем стандартную подпись
    $content = preg_replace('/Opstore Theme By <a href="https:\/\/wpoperation\.com\/">.*?<\/a>/', '', $content);
    
    // Добавляем свою подпись
    $new_credit = '<p>© 2024 Ваше Имя или Название Компании. Все права защищены.</p>';

    // Вставляем новую подпись вместо старой
    return $content . $new_credit;
}

function start_output_buffer() {
    ob_start('modify_opstore_footer_credit');
}

function end_output_buffer() {
    ob_end_flush();
}

add_action('template_redirect', 'start_output_buffer');
add_action('shutdown', 'end_output_buffer');

</pre>
<p>или по классам </p>
<pre>
function modify_opstore_footer_credit($content) {
    // Ищем стандартную подпись
    $pattern = '/<div class="col-md-6 col-sm-6 col-xs-12">.*?<\/div>/s';

    // Формируем новую подпись
    $replacement = '<div class="col-md-6 col-sm-6 col-xs-12">© 2024 Ваше Имя или Название Компании. Все права защищены.</div>';

    // Заменяем старую подпись на новую
    $content = preg_replace($pattern, $replacement, $content);

    return $content;
}

function start_output_buffer() {
    ob_start('modify_opstore_footer_credit');
}

function end_output_buffer() {
    ob_end_flush();
}

add_action('template_redirect', 'start_output_buffer');
add_action('shutdown', 'end_output_buffer');

</pre>
]]></content:encoded>
					
					<wfw:commentRss>https://soap.zone/2024/08/12/%d0%b7%d0%b0%d0%bc%d0%b5%d0%bd%d0%b0-%d1%84%d1%83%d1%82%d0%b5%d1%80%d0%b0/feed/</wfw:commentRss>
			<slash:comments>0</slash:comments>
		
		
			</item>
		<item>
		<title>Elementor</title>
		<link>https://soap.zone/2024/08/12/elementor/</link>
					<comments>https://soap.zone/2024/08/12/elementor/#respond</comments>
		
		<dc:creator><![CDATA[soap.zone]]></dc:creator>
		<pubDate>Mon, 12 Aug 2024 12:04:47 +0000</pubDate>
				<category><![CDATA[Code]]></category>
		<category><![CDATA[Elementor]]></category>
		<guid isPermaLink="false">https://soap.zone/?p=1765</guid>

					<description><![CDATA[Удаляем все целевые элементы перед рендерингом страницы, точное удаление с использованием DOMDocument в PHP: строку Elementor если в ней присутствует слово Elementor элементы с классом .edit_with_elementor , с id=elementor-editor, с id=ementor-switch-mode function hide_elementor_admin_elements() { ob_start(function($content) { // Загружаем содержимое в DOMDocument $dom = new DOMDocument(); libxml_use_internal_errors(true); // Игнорируем ошибки парсинга HTML $dom->loadHTML($content, LIBXML_HTML_NOIMPLIED &#124; LIBXML_HTML_NODEFDTD); [&#8230;]]]></description>
										<content:encoded><![CDATA[<p>Удаляем все целевые элементы перед рендерингом страницы, точное удаление с использованием DOMDocument в PHP:<br />
строку <span class="post-state">Elementor</span> если в ней присутствует слово Elementor<br />
элементы  с классом .edit_with_elementor , с id=elementor-editor, с id=ementor-switch-mode</p>
<pre>
function hide_elementor_admin_elements() {
    ob_start(function($content) {
        // Загружаем содержимое в DOMDocument
        $dom = new DOMDocument();
        libxml_use_internal_errors(true); // Игнорируем ошибки парсинга HTML
        $dom->loadHTML($content, LIBXML_HTML_NOIMPLIED | LIBXML_HTML_NODEFDTD);
        libxml_clear_errors();

        // Удаляем элементы <span class="post-state">, содержащие "Elementor"
        $spans = $dom->getElementsByTagName('span');
        for ($i = $spans->length - 1; $i >= 0; $i--) {
            $span = $spans->item($i);
            if ($span->hasAttribute('class') && strpos($span->getAttribute('class'), 'post-state') !== false) {
                if (trim($span->nodeValue) === 'Elementor') {
                    $span->parentNode->removeChild($span);
                }
            }
        }

        // Удаляем элементы с классом .edit_with_elementor
        $xpath = new DOMXPath($dom);
        foreach ($xpath->query('//*[@class="edit_with_elementor"]') as $node) {
            $node->parentNode->removeChild($node);
        }

        // Удаляем элемент с id="elementor-editor"
        $editor = $dom->getElementById('elementor-editor');
        if ($editor) {
            $editor->parentNode->removeChild($editor);
        }

        // Удаляем элемент с id="elementor-switch-mode"
        $switch_mode = $dom->getElementById('elementor-switch-mode');
        if ($switch_mode) {
            $switch_mode->parentNode->removeChild($switch_mode);
        }

        // Возвращаем модифицированный контент
        return $dom->saveHTML();
    });
}
add_action('admin_init', 'hide_elementor_admin_elements');

function end_ob_clean() {
    ob_end_flush();
}
add_action('shutdown', 'end_ob_clean');
</pre>
]]></content:encoded>
					
					<wfw:commentRss>https://soap.zone/2024/08/12/elementor/feed/</wfw:commentRss>
			<slash:comments>0</slash:comments>
		
		
			</item>
		<item>
		<title>Import Export</title>
		<link>https://soap.zone/2024/08/12/import-export/</link>
					<comments>https://soap.zone/2024/08/12/import-export/#respond</comments>
		
		<dc:creator><![CDATA[soap.zone]]></dc:creator>
		<pubDate>Sun, 11 Aug 2024 21:42:34 +0000</pubDate>
				<category><![CDATA[Без рубрики]]></category>
		<guid isPermaLink="false">https://soap.zone/?p=1761</guid>

					<description><![CDATA[WP All ImportАвтор: SoflyyСсылка: https:// wordress.org/plugins/wp-all-import/ WooCommerce Product CSV Import SuiteАвтор: WooCommerceСсылка: https:// woocommerce.com/products/product-csv-import-suite/ Product Import Export for WooCommerceАвтор: WebToffeeСсылка: https:// wordpress.org/plugins/product-import-export-for-woo/ Woo Import ExportАвтор: VJInfotechСсылка: https:// codecanyon.net/item/woo-import-export/13694764 CTX Feed – WooCommerce Product Feed GeneratorАвтор: WebAppickСсылка: https:// wordpress.org/plugins/webappick-product-feed-for-woocommerce/ WooCommerce Add-On for WP All ImportАвтор: SoflyyСсылка: https:// www.wpallimport.com/woocommerce-product-import/ Auto Upload ImagesАвтор: Ali IraniСсылка: https:// wordpress.org/plugins/auto-upload-images/]]></description>
										<content:encoded><![CDATA[
<p><strong>WP All Import</strong><br><strong>Автор:</strong> Soflyy<br>Ссылка: <code>https:// wordress.org/plugins/wp-all-import/</code></p>



<p><strong>WooCommerce Product CSV Import Suite</strong><br><strong>Автор:</strong> WooCommerce<br>Ссылка: <code>https:// woocommerce.com/products/product-csv-import-suite/</code></p>



<p><strong>Product Import Export for WooCommerce</strong><br><strong>Автор:</strong> WebToffee<br>Ссылка: <code>https:// wordpress.org/plugins/product-import-export-for-woo/</code></p>



<p><strong>Woo Import Export</strong><br><strong>Автор:</strong> VJInfotech<br>Ссылка: <code>https:// codecanyon.net/item/woo-import-export/13694764</code></p>



<p><strong>CTX Feed – WooCommerce Product Feed Generator</strong><br><strong>Автор:</strong> WebAppick<br>Ссылка: <code>https:// wordpress.org/plugins/webappick-product-feed-for-woocommerce/</code></p>



<p><strong>WooCommerce Add-On for WP All Import</strong><br><strong>Автор:</strong> Soflyy<br>Ссылка: <code>https:// www.wpallimport.com/woocommerce-product-import/</code></p>



<p><strong>Auto Upload Images</strong><br><strong>Автор:</strong> Ali Irani<br>Ссылка: <code>https:// wordpress.org/plugins/auto-upload-images/</code></p>
]]></content:encoded>
					
					<wfw:commentRss>https://soap.zone/2024/08/12/import-export/feed/</wfw:commentRss>
			<slash:comments>0</slash:comments>
		
		
			</item>
		<item>
		<title>Изменение товаров в зависимости от роли пользователя</title>
		<link>https://soap.zone/2024/08/10/izmenenie-tovarov-v-zavisimosti-ot-ro/</link>
					<comments>https://soap.zone/2024/08/10/izmenenie-tovarov-v-zavisimosti-ot-ro/#respond</comments>
		
		<dc:creator><![CDATA[soap.zone]]></dc:creator>
		<pubDate>Sat, 10 Aug 2024 19:48:39 +0000</pubDate>
				<category><![CDATA[Plugins]]></category>
		<guid isPermaLink="false">https://soap.zone/?p=1723</guid>

					<description><![CDATA[Чтобы ограничить изменение количества товаров в магазине WooCommerce в зависимости от роли пользователя, можно использовать плагин, который позволит вам управлять правами доступа для различных ролей. В WordPress и WooCommerce нет встроенной функции для ограничения изменения количества товаров по ролям пользователей, но можно использовать следующие плагины и подходы: 1. WooCommerce Role-Based Pricing 2. User Role Editor [&#8230;]]]></description>
										<content:encoded><![CDATA[
<p>Чтобы ограничить изменение количества товаров в магазине WooCommerce в зависимости от роли пользователя, можно использовать плагин, который позволит вам управлять правами доступа для различных ролей. В WordPress и WooCommerce нет встроенной функции для ограничения изменения количества товаров по ролям пользователей, но можно использовать следующие плагины и подходы:</p>



<h3 class="wp-block-heading">1. <strong>WooCommerce Role-Based Pricing</strong></h3>



<ul class="wp-block-list">
<li><strong>Описание</strong>: Этот плагин позволяет управлять ценами и доступом к товарам в WooCommerce на основе ролей пользователей. Он может быть настроен для ограничения возможностей изменения количества товаров.</li>



<li><strong>Преимущества</strong>: Позволяет настроить разные уровни доступа и цен для различных ролей пользователей.</li>



<li><strong>Минусы</strong>: Основное внимание уделяется ценам, поэтому дополнительные настройки могут потребоваться для ограничения изменения количества товаров.</li>
</ul>



<h3 class="wp-block-heading">2. <strong>User Role Editor</strong></h3>



<ul class="wp-block-list">
<li><strong>Описание</strong>: Этот плагин позволяет управлять ролями и правами доступа пользователей в WordPress. С его помощью вы можете настроить права на редактирование товаров и их количества в WooCommerce.</li>



<li><strong>Преимущества</strong>: Полный контроль над правами пользователей и их ролями.</li>



<li><strong>Минусы</strong>: Не специально предназначен для WooCommerce, поэтому потребуется настройка.</li>
</ul>



<h3 class="wp-block-heading">3. <strong>Adminimize</strong></h3>



<ul class="wp-block-list">
<li><strong>Описание</strong>: Плагин Adminimize позволяет скрывать или ограничивать доступ к различным частям админки WordPress. Вы можете использовать его для скрытия элементов интерфейса, связанных с изменением количества товаров.</li>



<li><strong>Преимущества</strong>: Высокая степень настройки, возможность скрывать и управлять элементами интерфейса админки.</li>



<li><strong>Минусы</strong>: Не специфичен для WooCommerce, требует настройки.</li>
</ul>



<h3 class="wp-block-heading">4. <strong>WooCommerce Admin Custom Order Fields</strong></h3>



<ul class="wp-block-list">
<li><strong>Описание</strong>: Этот плагин позволяет добавлять и настраивать поля для заказов в WooCommerce. Вы можете использовать его для создания настраиваемых полей, которые будут зависеть от роли пользователя.</li>



<li><strong>Преимущества</strong>: Возможность создания индивидуальных полей и ограничений.</li>



<li><strong>Минусы</strong>: Может потребоваться настройка или программирование для ограничения изменения количества товаров.</li>
</ul>



<h3 class="wp-block-heading">5. <strong>WooCommerce Advanced Permissions</strong></h3>



<ul class="wp-block-list">
<li><strong>Описание</strong>: Плагин WooCommerce Advanced Permissions позволяет настраивать детализированные права доступа для различных ролей в WooCommerce, включая возможность редактирования количества товаров.</li>



<li><strong>Преимущества</strong>: Специализирован для WooCommerce, удобное управление правами доступа.</li>



<li><strong>Минусы</strong>: Могут потребоваться платные версии или дополнительные настройки для полного контроля.</li>
</ul>



<h3 class="wp-block-heading">Как настроить ограничения:</h3>



<ol class="wp-block-list">
<li><strong>Установите и активируйте один из вышеупомянутых плагинов</strong>.</li>



<li><strong>Перейдите к настройкам плагина</strong> и настройте права доступа и ограничения для ролей пользователей.</li>



<li><strong>Проверьте настройки</strong> и убедитесь, что пользователи с определенными ролями не могут изменять количество товаров.</li>
</ol>



<h3 class="wp-block-heading">Рекомендации:</h3>



<ul class="wp-block-list">
<li>Если вам нужна полная настройка прав доступа, попробуйте <strong>User Role Editor</strong> или <strong>WooCommerce Advanced Permissions</strong>.</li>



<li>Если вы хотите скрыть элементы интерфейса, которые позволяют изменять количество товаров, рассмотрите <strong>Adminimize</strong>.</li>
</ul>
]]></content:encoded>
					
					<wfw:commentRss>https://soap.zone/2024/08/10/izmenenie-tovarov-v-zavisimosti-ot-ro/feed/</wfw:commentRss>
			<slash:comments>0</slash:comments>
		
		
			</item>
		<item>
		<title>При клике на один элемент кликнуть другой</title>
		<link>https://soap.zone/2024/05/03/clic-js/</link>
					<comments>https://soap.zone/2024/05/03/clic-js/#respond</comments>
		
		<dc:creator><![CDATA[soap.zone]]></dc:creator>
		<pubDate>Thu, 02 May 2024 23:08:58 +0000</pubDate>
				<category><![CDATA[Code]]></category>
		<category><![CDATA[JS]]></category>
		<guid isPermaLink="false">https://soap.zone/?p=1709</guid>

					<description><![CDATA[При клике на элемент с классом .ten делаем клик на элемент с классом .six $(".ten").on("click", ()=&#62;$(".six").click()); Пример кода, код, который должен работать как для &#60;a&#62;, так и для &#60;button&#62; При необходимости подключить &#60;script src=&#8221;https://code.jquery.com/jquery-3.6.0.min.js&#8221;&#62;&#60;/script&#62;     &#60;script&#62; document.addEventListener("DOMContentLoaded",function(){ const observer = new MutationObserver(() =&#62; { // Ищем элемент с классом .menu-item-1788 &#62; a const demoFilterShop = [&#8230;]]]></description>
										<content:encoded><![CDATA[<p>При клике на элемент с классом .ten<br />
делаем клик на элемент с классом .six</p>
<pre>$(".ten").on("click", ()=&gt;$(".six").click());</pre>
<p>Пример кода, код, который должен работать как для</p>
<pre><code>&lt;a&gt;</code>, так и для <code>&lt;button&gt;</code></pre>
<div>При необходимости подключить</div>
<div>&lt;script src=&#8221;https://code.jquery.com/jquery-3.6.0.min.js&#8221;&gt;&lt;/script&gt;</div>
<div class="ds-markdown-code-copy-button">
<p><span class="token keyword" style="font-family: Consolas, Monaco, monospace;"> </span></p>
<pre><code>   &lt;script&gt; document.addEventListener("DOMContentLoaded",function(){
const<span style="font-family: Consolas, Monaco, monospace;"> observer </span><span class="token operator" style="font-family: Consolas, Monaco, monospace;">=</span> <span class="token keyword" style="font-family: Consolas, Monaco, monospace;">new</span> <span class="token class-name" style="font-family: Consolas, Monaco, monospace;">MutationObserver</span><span class="token punctuation" style="font-family: Consolas, Monaco, monospace;">(</span><span class="token punctuation" style="font-family: Consolas, Monaco, monospace;">(</span><span class="token punctuation" style="font-family: Consolas, Monaco, monospace;">)</span> <span class="token operator" style="font-family: Consolas, Monaco, monospace;">=&gt;</span> <span class="token punctuation" style="font-family: Consolas, Monaco, monospace;">{</span>
     <span class="token comment">// Ищем элемент с классом .menu-item-1788 &gt; a</span>
        <span class="token keyword">const</span> demoFilterShop <span class="token operator">=</span> document<span class="token punctuation">.</span><span class="token function">querySelector</span><span class="token punctuation">(</span><span class="token string">".menu-item-1788 &gt; a"</span><span class="token punctuation">)</span><span class="token punctuation">;</span>

        <span class="token keyword">if</span> <span class="token punctuation">(</span>demoFilterShop<span class="token punctuation">)</span> <span class="token punctuation">{</span>
            <span class="token comment">// Добавляем обработчик на body для делегирования событий</span>
            document<span class="token punctuation">.</span>body<span class="token punctuation">.</span><span class="token function">addEventListener</span><span class="token punctuation">(</span><span class="token string">"click"</span><span class="token punctuation">,</span> <span class="token keyword">function</span> <span class="token punctuation">(</span><span class="token parameter">event</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
                <span class="token comment">// Проверяем, был ли клик на элементе .menu-item-1132 &gt; a или button.menu-item-1132</span>
                <span class="token keyword">if</span> <span class="token punctuation">(</span>
                    event<span class="token punctuation">.</span>target<span class="token punctuation">.</span><span class="token function">closest</span><span class="token punctuation">(</span><span class="token string">".menu-item-1132 &gt; a"</span><span class="token punctuation">)</span> <span class="token operator">||</span> <span class="token comment">// Для &lt;a&gt;</span>
                    event<span class="token punctuation">.</span>target<span class="token punctuation">.</span><span class="token function">closest</span><span class="token punctuation">(</span><span class="token string">"button.menu-item-1132"</span><span class="token punctuation">)</span> <span class="token comment">// Для &lt;button&gt;</span>
                <span class="token punctuation">)</span> <span class="token punctuation">{</span>
                    event<span class="token punctuation">.</span><span class="token function">preventDefault</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// Отменяем стандартное поведение</span>
                    demoFilterShop<span class="token punctuation">.</span><span class="token function">click</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// Передаем клик на .menu-item-1788 &gt; a</span>
                <span class="token punctuation">}</span>
            <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>

            <span class="token comment">// Останавливаем observer, так как элементы найдены</span>
            observer<span class="token punctuation">.</span><span class="token function">disconnect</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
        <span class="token punctuation">}</span>
    <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>

    <span class="token comment">// Начинаем наблюдение за изменениями в DOM</span>
    observer<span class="token punctuation">.</span><span class="token function">observe</span><span class="token punctuation">(</span>document<span class="token punctuation">.</span>body<span class="token punctuation">,</span> <span class="token punctuation">{</span> <span class="token literal-property property">childList</span><span class="token operator">:</span> <span class="token boolean">true</span><span class="token punctuation">,</span> <span class="token literal-property property">subtree</span><span class="token operator">:</span> <span class="token boolean">true</span> <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;
&lt;/script&gt;
</span></code></pre>
</div>
]]></content:encoded>
					
					<wfw:commentRss>https://soap.zone/2024/05/03/clic-js/feed/</wfw:commentRss>
			<slash:comments>0</slash:comments>
		
		
			</item>
		<item>
		<title>Limit the number of lines in a block using CSS</title>
		<link>https://soap.zone/2024/04/29/limit-css/</link>
		
		<dc:creator><![CDATA[soap.zone]]></dc:creator>
		<pubDate>Mon, 29 Apr 2024 17:48:35 +0000</pubDate>
				<category><![CDATA[Code]]></category>
		<category><![CDATA[css]]></category>
		<guid isPermaLink="false">https://soap.zone/?p=1702</guid>

					<description><![CDATA[Add the following to the styles file .your-blocks { margin: 2rem 0 1rem 0; line-height: 2rem; max-height: 8rem; -webkit-box-orient: vertical; display: -webkit-box; overflow: hidden!important; text-overflow: ellipsis; -webkit-line-clamp: 2; }]]></description>
										<content:encoded><![CDATA[<p>Add the following to the styles file</p>
<pre>.your-blocks  {
    margin: 2rem 0 1rem 0;
    line-height: 2rem;
    max-height: 8rem;
    -webkit-box-orient: vertical;
    display: -webkit-box;
    overflow: hidden!important;
    text-overflow: ellipsis;
    -webkit-line-clamp: 2;
}</pre>
]]></content:encoded>
					
		
		
			</item>
	</channel>
</rss>
