Shopify Plus открывает мир возможностей с помощью функции расширения чекаута. В этом посте я расскажу о своём опыте создание двух приложений-расширений для страницы оформления заказа: баннер обратного отсчета и калькулятор записей. А также о том, как именно они улучшили страницу Checkout в Shopify магазине.

#Введение в приложения-расширения (Extension Apps)

Расширения Checkout UI позволяют разработчикам приложений создавать пользовательские функции, которые продавцы могут устанавливать в определенных точках на странице оформления заказа, включая информацию о продукте, доставку, оплату, сводку заказа и Shop Pay.

#Запрос на разработку

Мне пришёл запрос на расширение чекаута в Shopify. У Shopify есть Checkout UI Extensions. Расширения позволяют кастомизировать страницу чекаут как вы хотите (почти).

Есть определённые области (extension points) куда можно добавить кастомный блок.

Блоки бывают разные: статический или динамический. Статический блок это обычно текстовый баннер. Например, предупреждение пользователя о загруженности магазина. Динамический блок это когда нужна какая-то логика, например, показывать сообщение если в чекауте лежит n количество товаров, или применять скидку на определённые товары.

#Что было разработано

#Баннер обратного отсчёта

Показывает таймер. Когда таймер заканчивается, появляется вопрос «Нужно ли вам еще время» и ответы «Да» или «Нет».

#Калькулятор билетов

Этот вариант более сложный, чем баннер обратного отсчёта. В нем есть логика. Некоторые продукты имеют множитель 5x, а некоторые 10x. И, конечно, бонусы тоже имеют свою логику. Сильно углубляться не буду.

Изначально была идея “прицепиться” к тэгу товаров или типу. И так я и сделал, использовал тип продукта для множителя, но после переписал логику и начал использовать метаполя (metafields). Метаполя более универсальный вариант. Теперь у каждого товара может быть свой множитель.

#Как начать разработку Checkout Extension App?

Чтобы начать разработку чекаут расширения, вставьте эти команды в терминал:

npm init @shopify/app@latest
cd your-app
npm run shopify app generate extension

#Необходимые условия:

• Тариф Shopify Plus: Пользовательская проверка доступна только для магазинов Plus.
• Партнерский Shopify аккаунт: Требуется для создания и развертывания приложения.
• Среда разработки: Используйте Shopify CLI, Node.js и редактор кода для создания приложения.

Официальная документация

#Заключение

Расширяемость Shopify Checkout позволяет магазинам на тарифе Shopify Plus легко создавать индивидуальный опыт оформления заказа, который соответствует их уникальным потребностям.

В своём недавнем проекте я в очередной раз убедился, что Shopify очень удобный в разработке. Создав такие расширения для чекаута, как баннер с обратным отсчётом, чтобы увеличить конверсию магазина, и калькулятор билетов с интеллектуальной логикой для более понятного вычисления билетов на странице оформления заказа.

Что вы думаете, когда слышите про фриланс? Переработки, отсутствие выходных и непостоянная занятость? А ещё площадки и где именно искать клиентов?

Фриланс — это не просто работа вне офиса, это стиль жизни. Многие начинающие фрилансеры выбирают специализированные платформы (Upwork, Fiverr, FL.ru и т.д.) для поиска клиентов. Но что, если отказаться от этих площадок?

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

#Что такое фриланс без площадок?

Фриланс без площадок — это модель работы, где вы находите клиентов напрямую, минуя посредников. Весь процесс, от поиска заказов до выставления счетов, фрилансер организует самостоятельно.

Это может включать:

• Работа по рекомендациям;
• Активное использование соцсетей и профессиональных сообществ;
• Создание личного бренда;
• Ведение своего сайта или блога;
• Прямую рассылку коммерческих предложений (outreach).

#Плюсы работы без площадок

#Отсутствие комиссии

Фриланс-платформы берут до 20% комиссии с каждого заказа. Без них все заработанное остается у вас.

#Свобода ценообразования

Вы самостоятельно определяете стоимость услуг. Нет необходимости конкурировать с демпингующими новичками.

#Развитие личного бренда

Работая напрямую, вы строите репутацию в своей нише, а не «прокачиваете» профиль на платформе.

#Контроль за процессами

Вы выбираете, с кем работать, на каких условиях, и как управлять проектами.

#Лояльные клиенты

Прямые клиенты чаще становятся постоянными, так как они работают с вами лично, а не через обезличенную систему.

#Минусы фриланса без площадок

#Сложность поиска клиентов

Особенно для новичков, которые не имеют портфолио и рекомендаций.

#Административная нагрузка

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

#Риски мошенничества

Без посредников сложнее защитить себя от недобросовестных клиентов.

#Маркетинг на ваших плечах

Придется уделять время продвижению личныого сайта, соцсетей, рассылок, и PR.

#Почему фриланс без площадок работает?

• Принцип «Сарафанного радио»

  Люди чаще доверяют рекомендациям знакомых. Построение репутации через качество работы приводит к росту базы клиентов.

• Эффект доверия

  Прямое взаимодействие позволяет выстраивать личные отношения с клиентами, что повышает лояльность.

• Автономность и независимость

  Фрилансер, работающий без площадок, быстрее адаптируется к рынку и становится более гибким в изменяющихся условиях.

#Факты и цифры

#Рост личного бренда увеличивает доходы

Фрилансеры с активными соцсетями зарабатывают на 40% больше, чем их коллеги, использующие только платформы.

#80% клиентов приходят по рекомендациям

Исследования показывают, что клиенты предпочитают работать с фрилансерами, которых им порекомендовали знакомые.

#Собственный сайт увеличивает шансы на успех

Фрилансеры с личным сайтом получают до 65% больше заказов, так как выглядят более профессионально.

#Стратегии для успешного фриланса без площадок

1. Создание сильного портфолио

   Разместите ваши работы на Behance, Dribbble, Dprofile или просто на личном сайте. Покажите не только результат, но и процесс работы.

2. Активность в соцсетях

   Используйте LinkedIn, Instagram, TikTok и тематические Telegram-каналы. Делитесь экспертизой и показывайте кейсы.

3. Разработка личного бренда

   • Пишите статьи;
   • Участвуйте в конференциях;
   • Делайте экспертные посты.

4. Нетворкинг

   Знакомьтесь с людьми из вашей ниши. Это могут быть как клиенты, так и другие фрилансеры, которые порекомендуют вас.

5. Рассылки и cold outreach

   Научитесь грамотно писать коммерческие предложения. Укажите, как вы можете решить проблему клиента, и подкрепите это примерами.

#Практические советы

#1. Запустите сайт-визитку с SEO

Оптимизируйте сайт под ключевые запросы вашей ниши: «дизайнер логотипов», «разработчик на Shopify», «motion дизайнер», «SMM менеджер», и тд.

#2. Инвестируйте в личный бренд

Курсы, вебинары, качественный контент помогут укрепить репутацию.

#3. Работайте по договору

Составьте шаблон договора для работы с клиентами. Это обезопасит клиента от обмана, а вас от большого количества правок.

#4. Автоматизируйте процессы

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

#Заключение

Фриланс без площадок — это выбор для тех, кто готов взять ответственность за свою карьеру. Он дает свободу, контроль и возможность заработать больше. Однако, чтобы добиться успеха, необходимо инвестировать время и ресурсы в развитие личного бренда и маркетинг.

#Нужна помощь?

Консультация проходит в Zoom тет-а-тет. Если у вас есть какие-либо вопросы или сложности, я вам помогу.

#Основные преимущества

1️⃣ Улучшенная настройка: Больше возможностей для индивидуализации вашего магазина без необходимости вмешательства в код.

2️⃣ Новые инструменты для разработчиков: От интеграции с GitHub до улучшенного CLI – разработка стала проще и эффективнее.

3️⃣ Адаптивные под мобильные устройства: Улучшенный дизайн и функциональность для мобильных пользователей.

4️⃣ Новый подход к темам: Переход от .liquid шаблонов к JSON, что позволяет создавать динамические секции.

5️⃣ Улучшенная скорость загрузки: Сайты на темах 2.0 загружаются быстрее, чем 1.0.

При клике на кнопку будет открыт Телеграм.

Обложка поста: Medusa.js.

Если вы знакомы c электронной коммерцией, то, возможно, слышали про Медузу, и я сейчас не про СМИ (26 января 2023 года Генеральная прокуратура России признала «Медузу» «нежелательной организацией»).

#Что такое Medusa.js?

Медуза - Один из самых популярных проектов электронной коммерции на GitHub. Medusa предоставляет серверную инфраструктуру электронной коммерции с открытым исходным кодом на NodeJS.

Если простыми словами — Медуза это бэкенд для вашего интернет-магазина.

#Преимущества Medusa.js

#1. Полный контроль.

Используя Медузу, вы имеете полный контроль над вашим e-commerce магазином. Единственное, вам понадобится сервер.

Для того чтобы хранить базу данных, вам нужно хранилище (сервер). Существует множество сервисов, которые предоставляют выделенный сервер, вот что рекомендует Медуза: Heroku, DigitalOcean, Railway, Microtica, и свой вариант (вдруг у вас уже есть сервер на другом сервисе).

#2. Гибкость в разработке фронтенда

Medusa.js не накладывает ограничений на выбор технологий для создания витрины магазина. Вы можете использовать любой современный JavaScript-фреймворк, например, React, Vue.js, Svelte, или Remix. Это позволяет создать уникальный пользовательский интерфейс, который полностью соответствует вашим требованиям.

#3. Интеграции

Medusa.js поддерживает интеграции с популярными сервисами, такими как Stripe, PayPal, и другими платёжными системами. Это облегчает создание сложных eCommerce решений, включая мультивалютность, управление запасами и аналитические инструменты.

#Ограничения Medusa.js

Несмотря на преимущества, Medusa.js подходит не всем. Вот несколько ключевых ограничений:

#1. Требования к техническим знаниям

Если вы не разработчик или у вас нет команды разработчиков, работа с Medusa.js может быть сложной. Платформа требует глубокого понимания серверных технологий, настройки баз данных и разработки пользовательских интерфейсов.

#2. Отсутствие встроенного редактора тем

Shopify предлагает удобный редактор тем, который позволяет вносить изменения в дизайн магазина без написания кода. В Medusa.js такого инструмента нет, поэтому все изменения необходимо вносить вручную через код.

#3. Поддержка

Если вы выбираете Medusa.js, будьте готовы к тому, что все вопросы поддержки магазина ложатся на ваши плечи или плечи вашей команды разработчиков. В отличие от Shopify, где есть централизованная служба поддержки, в случае с Medusa.js придётся рассчитывать на сообщество и документацию.

#Кому подходит Medusa.js?

Medusa.js — это идеальный выбор для компаний, которым нужны кастомные eCommerce решения. Например, если ваш магазин требует уникальных функций, сложных интеграций или нестандартного дизайна, Medusa.js предоставит вам необходимые инструменты. Однако для небольших магазинов с ограниченным бюджетом и ресурсами лучше выбрать готовые платформы, такие как Shopify.

Читать про Shopify

#Заключение

Медуза — интересная альтернатива Shopify, особенно для технически подкованных пользователей. Платформа предлагает полный контроль над проектом и позволяет создать уникальный опыт электронной коммерции.

Однако за эту гибкость приходится платить:

• сложностью настройки;
• необходимостью знаний в области программирования и отсутствием встроенных инструментов для управления витриной.

Если вы готовы к этим вызовам, Medusa.js может стать отличным выбором для реализации вашего интернет-магазина мечты.

Не можете определиться с платформой для вашего магазина? Я вам помогу.

Недавно выпустили новый искусственный интеллект.

Today we're excited to introduce Devin, the first AI software engineer.

Devin is the new state-of-the-art on the SWE-Bench coding benchmark, has successfully passed practical engineering interviews from leading AI companies, and has even completed real jobs on Upwork.

Devin is… pic.twitter.com/ladBicxEat

— Cognition (@cognition_labs) 12 марта 2024 г.

Понимаю, тема уже надоела. Но в этот раз выпустили не просто ИИ, а ИИ-программист. То есть это бот с упором на программирование. В чём подвох?

Давайте посмотрим на то, что предлагают разработчики этого чуда. Они говорят, что это убийца всех других ИИ и решает задачи в несколько раз лучше GPT-4. Кстати, GPT-4 уже год.

#Что может Devin?

1. Девин может научиться использовать незнакомые технологии;

   1/4 Devin can learn how to use unfamiliar technologies. pic.twitter.com/UXWxSp6Lv8

   — Cognition (@cognition_labs) 12 марта 2024 г.

2. Девин может вносить изменения в репозитории;

   2/4 Devin can contribute to mature production repositories. pic.twitter.com/0CsISZnKSA

   — Cognition (@cognition_labs) 12 марта 2024 г.

3. Девин может обучать и настраивать собственные ИИ модели;

   3/4 Devin can train and fine tune its own AI models. pic.twitter.com/WSGSO5evsL

   — Cognition (@cognition_labs) 12 марта 2024 г.

4. Девин может выполнять реальные заказы на фрилансе.

   4/4 We even tried giving Devin real jobs on Upwork and it could do those too! pic.twitter.com/7XUWQLeZm1

   — Cognition (@cognition_labs) 12 марта 2024 г.

#Стоит ли вашего внимания?

Не хочу показаться старым дедом, но как по мне это уже не удивляет. Я помню бум с Chat GPT и вот тогда было да, революционно. А сейчас как-будто все вот эти новые модели создаются лишь бы грести большое количество денег. Я могу ошибаться, посмотрим, что из этого получится.

#Будет ли видео?

Я долго думал выпускать ли видео о GPT, когда он только появился. Но что-то пока думал, уже вся шумиха прошла. Теперь думаю с этим ИИ, стоит или не стоит. Особо ничего нового я не расскажу, но чтобы оставить на память можно снять, посмотрим.

#Почему React?

React, один из самых популярных инструментов для разработки пользовательских интерфейсов, достиг важной вехи с выпуском версии 19.

#Новвоведения в React 19

В React 19 было представлено несколько новых функций и улучшений, включая автоматическую группировку (batching), серверные компоненты, конкурентные функции и различные оптимизации для улучшения как разработки, так и пользовательского опыта.

Вот краткое изложение ключевых обновлений:

#Автоматическая Группировка (Batching)

React 19 расширяет автоматическую группировку на больше сценариев, включая промисы, обработчики нативных событий и временной интервал с requestIdleCallback. Это приводит к меньшему количеству повторных рендеров и улучшению производительности для приложений React.

Для демонстрации эффекта автоматической группировки в React 19 и сравнения его с предыдущим поведением, рассмотрим пример, когда мы обновляем состояние в ответ на клик пользователя. В более ранних версиях React, без явного использования ReactDOM.unstable_batchedUpdates (для событий, не связанных с React, например, в асинхронных операциях), обновления состояния могли приводить к нескольким перерендерам.

#Как было раньше

function MyComponent() {
	const [count, setCount] = useState(0);
	const [flag, setFlag] = useState(false);

	function handleClick() {
		// Представим, что это вызовы setState происходят в результате асинхронной операции
		// или в обработчике событий, не управляемом React (например, внешний WebSocket).
		setCount((c) => c + 1);
		setFlag((f) => !f);
		// В более старых версиях React, каждый вызов setState приводил бы к отдельному рендеру,
		// если не использовать unstable_batchedUpdates для явной группировки.
	}

	return (
		<div>
			<p>Счётчик: {count}</p>
			<p>Флаг: {flag.toString()}</p>
			<button onClick={handleClick}>Обновить</button>
		</div>
	);
}

В этом примере, без автоматической группировки, каждое обновление состояния (setCount и setFlag) могло приводить к отдельному рендеру в более старых версиях React. Это могло негативно сказаться на производительности, особенно в компонентах с большим количеством обновлений состояния.

#С Автоматической Группировкой в React 19

В React 19 автоматическая группировка обновлений состояния расширена и на асинхронные операции, так что пример выше будет работать более эффективно “из коробки”:

// Код не поменяется, тот же самый код будет работать, но React 19 автоматически оптимизирует и группирует обновления,
// сокращая количество рендеров до одного.

Это значит, что в React 19, оба вызова setState в функции handleClick будут автоматически сгруппированы в один перерендер, независимо от того, происходят ли они в результате асинхронной операции или в обработчиках событий, не управляемых React. Это улучшение значительно облегчает разработку, снижая необходимость в ручном управлении группировками обновлений и способствуя более высокой производительности приложения.

#Серверные Компоненты

React 19 улучшает поддержку серверных компонентов, позволяя разработчикам создавать компоненты, которые рендерятся исключительно на сервере. Это сокращает размер JavaScript-бандла, отправляемого клиенту, улучшая время загрузки и производительность. Серверные компоненты могут беспрепятственно интегрироваться с клиентскими компонентами, позволяя разработчикам создавать более эффективные и динамичные приложения.

#Конкурентные Функции

Конкурентные функции в React — это набор возможностей, введённых для улучшения производительности и отзывчивости приложений за счёт более эффективного управления приоритетами обновлений и рендеринга.

Эти функции позволяют React лучше использовать ресурсы браузера, выполняя работу в фоновом режиме, откладывая менее важные задачи и сосредотачиваясь на критически важных для пользователя действиях. Это позволяет приложениям оставаться отзывчивыми даже при выполнении тяжёлых вычислений или загрузке данных.

#Примеры Использования

React позволяет использовать API, такие как startTransition, для указания задач, которые могут быть отложены без ущерба для восприятия пользователем отзывчивости интерфейса. Например:

import { startTransition } from 'react';

function MyComponent() {
	const [input, setInput] = useState('');
	const [filteredData, setFilteredData] = useState([]);

	function handleChange(e) {
		const nextInput = e.target.value;
		setInput(nextInput);

		// Эта задача может быть выполнена асинхронно без блокировки основного потока,
		// улучшая восприятие отзывчивости приложения.
		startTransition(() => {
			const nextFilteredData = expensiveFilterOperation(nextInput);
			setFilteredData(nextFilteredData);
		});
	}

	return (
		<div>
			<input value={input} onChange={handleChange} />
			{/* Отображение отфильтрованных данных */}
		</div>
	);
}

#Конкурентные функции в React - круто?

Конкурентные функции в React предоставляют мощные инструменты для управления производительностью и отзывчивостью приложений. Они позволяют разработчикам более тонко управлять приоритетами задач, оптимизируя взаимодействие пользователя с приложением даже при высоких нагрузках. Внедрение этих методик в процесс разработки может способствовать созданию более плавных и приятных для пользователя приложений.

#Оптимизации и Исправления Ошибок

React 19 включает различные оптимизации и исправления ошибок, направленные на улучшение опыта разработчиков и стабильности приложений.

Это включает улучшения в React DevTools, лучшую обработку ошибок и обновления в алгоритме согласования, чтобы сделать его более эффективным.

#Улучшения Suspense и Ленивой Загрузки (lazy loading)

Релиз приносит улучшения для Suspense и ленивой загрузки (на англ. lazy loading), упрощая разделение кода (на англ. code splitting) и ленивую загрузку компонентов.

Это может значительно улучшить время начальной загрузки приложений, уменьшая количество кода, необходимого во время начальной загрузки.

#Улучшенный Опыт Разработчиков

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

Эти изменения направлены на то, чтобы сделать отладку и разработку более интуитивно понятными и менее времязатратными.

#Документация

Команда React также сосредоточилась над улучшением документации и туториалов. Введение новых учебных ресурсов направлено на поддержку как новых, так и опытных разработчиков в создании React приложений.

#Заключение

Улучшения в React 19 предназначены для того, чтобы сделать React приложения более эффективными, проще в разработке и более производительными, чем раньше. Фокус на автоматической группировке, серверных компонентах, конкурентных функциях и оптимизациях отражает стремление React улучшить как опыт разработки, так и пользовательский опыт, что очень круто.

Перенос описания товара может стать неплохим решением кастомизации вашего магазина. Например, если вы не хотите чтобы в правой колонке было много контента.

В этой статье мы перенесём описание под товар, конечный итог будет выглядеть вот так:

Как вы можете заметить, описание находится под товаром, что позволяет справа разместить больше контента, например, Upsell блок для отображения похожих товаров.

#Что такое Upsell?

Upsell (продажа дополнительных товаров или услуг) – это маркетинговая стратегия, при которой продавец предлагает покупателю более дорогой продукт, улучшение или дополнение к тому, что уже выбрано или куплено клиентом. Цель этой стратегии – увеличить среднюю стоимость покупки, предлагая покупателям более высококлассные или дополнительные товары или услуги.

#Удаляем блок с описанием

Для начала нужно удалить блок с описанием который у нас изначально есть в секцие с товаром. На скриншоте ниже я скрыл этот блок:

#Добавляем секцию Rich Text

Она нам понадобится чтобы динамически отображать текст формата:

[НАЗВАНИЕ ПРОДУКТА] - Description

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

Выводить описание вместе с этой секцией необязательно. Если вы не желаете делать таким образом, то переходите дальше.

#Добавляем секцию Custom Liquid

Следующий шаг – добавить новую секцию под названием Custom Liquid. Эта секция позволяет вставлять liquid код. Она нам нужна чтобы отобразить описание.

#Что такое liquid?

Liquid – это шаблонизатор, который используется для создания динамических веб-страниц. Разработан компанией Shopify и в основном используется в их электронной коммерческой платформе.

Основная цель Liquid заключается в обеспечении гибкости и удобства для разработчиков при создании настраиваемых шаблонов, которые могут отображать различный контент в зависимости от контекста или данных пользователя.

#Отображение описания товара

Для отображения товара мы будем использовать следующий кусок кода:

<div class="page-width">{{ product.description }}</div>

Так как в примере используете тема Dawn, блок описания оборачивается в контейнер с классом page-width.

Такой класс есть также у тем: Ride, Refresh, Sense, Origin, Craft, Taste, Studio, Crave, Publisher, Colorblock.

Это нужно для того чтобы описание не “прилепало” к границам устройства. Если вы используете другую тему, у вас класс, отвечающий за ограничение ширины блока, может быть иной.

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

{{ product.description }}

#Заключение

Теперь вы умеете отображать описание товара под товаром. В этой статье мы рассмотрели один из многих вариантов иного от шаблонного отображения описания.

#Статья была полезна?

Если статья была полезна или вам понравилась - поделитесь с друзьями! На этом сайте нет рекламы и он ведётся на энтузиазме, любое упоминание повышает шанс на улыбку у автора.

Иногда при работе с Vue.js или Nuxt.js возникает баг. При переходе на разные страницы веб-приложения, подвал приложения “подскакивает” к шапке. Это решается довольно просто, в этом посте я показал решение этого бага и возможные причины его появления в вашем приложение.

#YouTube видео

#В этом посте

• Почему при переходе на разные страницы в Nuxt.js приложение футер скачет?
• Причины прыгающего подвала к шапке сайта при переходе на разные страницы
• Фикс прыгающего подвала в Nuxt.js

#Причины появления “прыгающего” эффекта

#CSS стили

Проблема может быть связана с CSS стилями, применяемыми к компонентам Header, Footer или даже к <NuxtPage />. Если для этих элементов заданы определенные стили (например, абсолютное или фиксированное позиционирование), это может привести к тому, что футер будет отображаться неправильно. Проверьте и убедитесь, что стили не конфликтуют друг с другом.

Убедитесь, что у элементов Header, Footer, и <NuxtPage /> заданы корректные высоты. Если высота этих элементов не контролируется должным образом, это может привести к тому, что футер окажется под шапкой.

#JS скрипт

Если вы используете JavaScript или Vue Lifecycle Hooks для динамического изменения стилей или классов, это также может повлиять на расположение футера.

#Конфликт компонентов

Если вы подключаете какие-либо компоненты на в файле app.vue, то это тоже может повлиять на шапку или подвал веб-приложения.

#HTML ошибки

Проверьте, нет ли ошибок в вашем HTML, которые могут привести к непредвиденному поведению макета. Например, незакрытые теги.

#Решение

Если всё из вышеперечисленного не помогло решить проблему, то попробуйте обернуть <NuxtPage /> в <div>.

<template>
	<NuxtLayout>
		<Header />
		+
		<div>
			<NuxtPage />
			+
		</div>
		<Footer />
	</NuxtLayout>
</template>

#Заключение

Теперь вы знаете как решить проблему прыгающего футера при переходе на разные страницы в Nuxt.js. Надеюсь этот пост был вам полезен!

Вы ищете возможности работы фрилансером? Существует множество веб-сайтов, которые предоставляют фрилансерам платформу для общения с клиентами и поиска работы. Фрилансеру может быть сложно найти работу, особенно в самом начале.

#Содержание

• Апворк (Upwork)
• Фрилансер (Freelancer)
• Файвер (Fiverr)
• Топтал (Toptal)
• Гуру (Guru)
• 99 дизайнов (99 designs)
• Люди в час (peoplePerHour)
• Контра (Contra)
• Легко Нанят (SimplyHired)
• Задачливый Кролик (TaskRabbit)

К счастью, существует множество сайтов для фрилансеров, которые могут помочь вам найти идеальную работу. Вот 10 лучших сайтов для фрилансеров, которые вам стоит посетить.

Апворк (Upwork)

Upwork — один из крупнейших сайтов для фрилансеров с огромным количеством объявлений о вакансиях. Он идеально подходит для писателей, дизайнеров, разработчиков и маркетологов. Сайт предлагает множество вакансий с различной структурой оплаты, включая проекты с почасовой оплатой и с фиксированной ставкой. Он также имеет функцию Upwork Pro, которая связывает предприятия с фрилансерами с самым высоким рейтингом для крупномасштабных проектов.

Upwork — отличный выбор для начинающих фрилансеров или для тех, кто хочет расширить свою клиентскую базу.

Фрилансер (Freelancer)

Freelancer имеет удобный интерфейс и предоставляет вакансии в различных категориях, включая написание, дизайн и программирование. Эта платформа предлагает уникальную функцию под названием «Контесты», где клиенты могут проводить конкурсы для конкретного проекта, а фрилансеры могут отправлять свои работы, чтобы выиграть денежный приз. У Freelancer также есть мобильное приложение, которое позволяет фрилансерам искать работу и управлять своими профилями на ходу.

Файвер (Fiverr)

Fiverr — отличная платформа для фрилансеров, которые специализируются на творческих услугах, таких как графический дизайн, редактирование видео и копирайтинг. Как следует из названия, Fiverr начинался как платформа, где фрилансеры могли предлагать свои услуги за 5 долларов. Однако сайт развился, и теперь фрилансеры могут устанавливать свои собственные расценки. Fiverr также имеет функцию под названием «Гиги», которая позволяет фрилансерам предлагать клиентам готовые услуги.

Топтал (Toptal)

Toptal — эксклюзивная платформа, предоставляющая доступ к лучшим фрилансерам отрасли. Идеально подходит для бизнеса, которому нужна качественная работа.

Toptal имеет строгий процесс отбора, который гарантирует, что на платформу будут приняты только 3% лучших фрилансеров. Это означает, что клиенты могут быть уверены, что работают с лучшими из лучших. Toptal также предлагает услуги по управлению проектами и координации команды, что делает его универсальным сервисом для компаний, желающих передать свою работу на аутсорсинг.

Гуру (Guru)

Guru предоставляет возможности трудоустройства фрилансерам в различных категориях, таких как веб-разработка, дизайн, писательство и маркетинг. На сайте есть функция SafePay, которая позволяет клиентам вносить средства на целевой депозитный счет, а платеж производится только тогда, когда проект завершен к удовлетворению клиента. У Guru также есть инструмент для совместной работы, который позволяет фрилансерам и клиентам общаться и обмениваться файлами в режиме реального времени.

99 дизайнов (99 designs)

99designs — это платформа, предназначенная исключительно для дизайнеров. Он предоставляет возможности графическим дизайнерам, дизайнерам логотипов и веб-дизайнерам.

На сайте есть уникальная функция «Конкурсы», где клиенты могут проводить конкурсы на конкретный дизайн-проект, а фрилансеры могут отправлять свои работы и получать денежный приз. В 99designs также есть функция «Проекты», где клиенты могут работать один на один с фрилансером для создания индивидуального дизайна.

Люди в час (peoplePerHour)

PeoplePerHour — это британский веб-сайт для фрилансеров, который предоставляет возможности трудоустройства фрилансерам по всему миру. Он идеально подходит для писателей, дизайнеров и разработчиков.

На сайте есть функция «Почасовые часы», где фрилансеры могут предлагать свои услуги по фиксированной цене. PeoplePerHour также имеет мобильное приложение, которое позволяет фрилансерам искать работу и управлять своими профилями на ходу.

#Статья полезна?

Вы можете поддержать автора, если статья вам помогла и была полезной.

PayPal не работает? Не проблема.

Контра (Contra)

На Contra фрилансеры могут создать профиль, в котором подчеркнут их навыки и опыт, искать вакансии и подавать заявки на проекты, соответствующие их опыту. Платформа охватывает широкий спектр отраслей, включая дизайн, разработку, написание текстов, маркетинг и многое другое.

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

Легко Нанят (SimplyHired)

SimplyHired — это система поиска работы, которая предоставляет возможности трудоустройства фрилансерам в различных категориях, таких как писательство, дизайн и программирование.

На сайте есть функция «Оценщик зарплат», которая позволяет фрилансерам видеть среднюю зарплату на конкретной должности в их области. У SimplyHired также есть мобильное приложение, которое позволяет фрилансерам искать работу и управлять своими профилями на ходу.

Задачливый Кролик (TaskRabbit)

TaskRabbit — это платформа, которая предоставляет возможности фрилансерам, специализирующимся на случайных работах, таких как уборка, переезд и услуги разнорабочих.

На сайте есть функция «Мгновенный подбор», с помощью которой фрилансеры могут получать запросы о работе в режиме реального времени. TaskRabbit также имеет мобильное приложение, которое позволяет фрилансерам управлять своими профилями и получать запросы о работе на ходу.

#Заключение

Если вы работаете из дома и ищете для себя новые возможности, эти 10 сайтов помогут вам найти идеальную работу. Каждая платформа имеет свои уникальные функции и преимущества, поэтому стоит проверить их, чтобы понять, какая из них соответствует вашим потребностям.

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

#Неуверены с чего начать?

Консультация проходит в Zoom тет-а-тет. Если у вас есть какие-либо вопросы или сложности, я вам помогу.

Шапка (Header) и Подвал (Footer) подобны подставкам для книг на веб-странице — они красиво обрамляют все и сохраняют целостность. В Nuxt 3 Шапку и Подвал можно легко создать, используя особый способ создания вещей, называемых «компонентами».

Также мы исправим ошибку, когда вы могли видеть, что после перехода между страницами футер «прыгает».

#Понимание компонентной архитектуры Nuxt 3

Nuxt 3 — это разбиение вещей на более мелкие части, называемые «компонентами». Это немного похоже на сборку из LEGO: вы создаете разные детали и соединяете их вместе, чтобы получилось что-то крутое. Верхние и нижние колонтитулы похожи на специальные кубики Lego, которые можно использовать снова и снова.

#Использование Header и Footer компонентов

Как только верхний и нижний колонтитулы будут готовы, мы заставим их отображаться на всех страницах с помощью макета. Или, если хотите, вы можете выбрать, где оно будет отображаться — например, на некоторых страницах, а не на других. В этом случае вам нужно будет создать разные макеты.

#Создание макета по умолчанию

В моем приложении мне не нужны разные макеты. У меня будет только один под названием default.vue. Итак, создайте папку макетов в корневом каталоге вашего проекта и создайте файл default.vue. В этом файле у нас будет этот фрагмент кода:

<template>
	<div>
		<slot />
	</div>
</template>

Как только мы закончили с макетом, нам нужно сделать его видимым на странице — добавьте макет в файл app.vue следующим образом:

<template>
	<NuxtLayout>
		<Header />
		<NuxtPage />
		<Footer />
	</NuxtLayout>
</template>

#Поиск неисправностей

Если вы вставляете приведенный выше код в свой проект и Футер «перепрыгивает» в верхнюю часть страницы при переходе между страницами, это потому, что нам нужно сделать нашу страницу уникальным узлом. Для этого нам нужно поместить наш <NuxtPage /> в div.

<template>
	<NuxtLayout>
		<Header />
		+ <div>
			<NuxtPage />
		+ </div>
		<Footer />
	</NuxtLayout>
</template>

Теперь этот эффект сбоя должен исчезнуть.

#Заключение

Хэдер и Футер могут показаться мелочами, но они очень важны для того, чтобы веб-сайт выглядел правильно. С Nuxt 3 можно легко создавать эти детали и использовать их снова и снова.

#Содержание

• Содержание
• Предисловие
• Пример использования
• Cart API
  • Добавление товара
  • Отправляемый объект
  • Пример fetch запроса
• Заключение
• Ресурсы

#Предисловие

Недавно я писал конфигуратор в Shopify и решил поделиться тем, как добавить несколько товаров в Шопифай корзину. Я находил не так много материалов по этому вопросу, тем более на русском языке.

#Пример использования

Прикрепляю скринкаст того, что можно сделать при помощи этого. Но применений довольно много, не только конфигуратор. В скринкасте я добавил 6 товаров по одному клику на «Add to cart» кнопку. Но до лимита в количестве добавляемых товаров я не дошёл, может их и нет.

#Cart API

Сначала давайте разберёмся, что такое Cart API.

API корзины позволяет расширению пользовательского интерфейса взаимодействовать с содержимым корзины POS, включая скидки в корзине, позиции и клиентов. Этот API включает в себя множество функций для добавления и удаления содержимого корзины, а также объект, на который можно подписаться, который позволяет расширению пользовательского интерфейса получать обновления корзины.

#Добавление товара

Чтобы добавить в корзину несколько товаров, вам необходимо отправить в Cart API объект items с идентификатором(id) продукта и количеством(quantities) товара. На скриншоте ниже я добавляю один товар по клику.

#Отправляемый объект

Так должен выглядеть отправляемый объект:

items: [ 
 { 
  id: 36110175633573, 
    quantity: 2 
  } 
]

#Пример fetch запроса

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

document.querySelectorAll("form.configurator-form").forEach((form) => {
    form.addEventListener("submit", async (e) => {
      e.preventDefault();

      // Показываем спиннер загрузки
      const loadingOverlays = document.querySelectorAll(".loading-overlay");
      loadingOverlays.forEach((overlay) => overlay.classList.remove("hidden"));

      // Собираем данные товаров
      const productData = selectedProducts.map((product) => ({
        id: product.id,
        quantity: 1,
        variantId:
          product.variantId && product.variantId !== product.id
            ? parseInt(product.variantId)
            : undefined,
      }));

      const requestBody = {
        items: productData,
      };

      // Добавляем товары в корзину
      await fetch(`${window.Shopify.routes.root}cart/add.js`, {
        method: "POST",
        headers: {
          "Content-Type": "application/json",
        },
        body: JSON.stringify(requestBody),
      });

      // Обновляем корзину
      const res = await fetch("/cart.json");
      const cart = await res.json();

      // Обновляем число на корзине
      document.querySelectorAll(".cart-count-bubble").forEach((el) => {
        el.textContent = cart.item_count;
      });

      // Перенаправляем пользователя на страницу корзины
      window.location.href = "/cart";
    });
  });

#Заключение

Будьте внимательны когда перед вами встанет эта задача, там довольно много подводных камней. Например, если у товара нет вариантов, то ID в value нужно передавать вот так:

{{ product.selected_or_first_available_variant.id }}

Полный код передаваемого инпута будет выглядеть так:

<input class="visually-hidden" type="radio" name="product" value={{ product.selected_or_first_available_variant.id }}>

Но если варианты есть, то уже так:

{{ product.id }}

Полный код похож на предыдущий input, просто value другое:

<input class="visually-hidden" type="radio" name="product" value={{ product.id }}">

Вот такой небольшой трюк, который вы теперь знаете. И ещё теперь вы умеете добавлять в корзину несколько товаров. Хорошей разработки!

#Ресурсы

• Создать партнёрский аккаунт.
• Открыть магазин на Shopify за $1.

#Фронтенд умер?

Для тех кто не хочет долго читать - пока что фронтенд жив, но есть нюанс.

#В чем нюанс?

Недавно Next.js обновился на 14 версию. Самое основное, что добавили - Server Actions. Если простым языком, это когда в одном файле, да даже в одной функции может быть фронтенд и бэкенд код.

export default function ServerComponent() {
  async function myAction() {
    'use server'
    // ...
  }
}

Server Actions появились в версие Next.js 13.4, но тогда они были как эспериментальная функция. Я её кстати успел попробовать на одном из своих пет-проектов. Ещё в этой версие добавили App Router, что было довольно непривычно первое время, но это уже другая тема.

Казалось бы, а что в этом такого? А дело в том, что при таком подходе как таковой фронтенд уже не используется. Точнее даже не так, он используется, но уже в связки с бэкендом. А это уже фулстек - когда разработчик пишет фронтенд и бэкенд.

#Серверный рендеринг

Тендеция перехода на серверные компонтенты довольно чиста и понятна. Это как минимум быстро.

Забавно то, что PHP использует серверный рендеринг с самого зарождения языка, а если грубо говорить, то это 1994 год. Конечно, в самом 1994 году были немного другие задачи, чем сейчас, но подход тот же.

А вот тут в клиентском компоненте имопртируется серверный компонент:

'use client'

import { myAction } from './actions'

export default function ClientComponent() {
  return (
    <form action={myAction}>
      <button type="submit">Add to Cart</button>
    </form>
  )
}

#Что будет с фронтендом?

Рынок фронтенда плавно двигается к фуллстэк, то есть фронтендерам нужно будет знать бэкенд, как минимум как писать SQL запросы к базе данных, какие бывают базы данных, и как шифровать данные.

#Заключение

Как-будто сам фронтенд стал легче, но чтобы быть конкурентным на рынке к нему добавился ещё и бэкенд. Для новичков это может стать небольшой проблемой, ведь часто люди задаются вопросом: “А что учить, фронтенд или бэкенд?”. Сейчас всё двигается к тому, что фронтендеры сами по себе вымирают. А если вы фулл-стек, то нечего переживать.

#Ресурсы

• Подробнее про Next.js 14;
• Первое появление Server Actions в Next.js;
• Ссылка, на случай если вам интересно, что за пет-проект я делал с использованием Server Actions.

#Статья доступна в видео-формате

#Содержание

• Статья доступна в видео-формате
• Содержание
• Sidekick \& Shopify Magic
• Новый дизайн админ-панели
• Polaris 12
• Гибкие секции (flex sections)
• Плагин подписок
• Shopify Collective
• Новвоведения в B2B
• Marketplace connect
• mock.shop
• Обновление плагина Search and discovery
• Шаблон приложения на Remix
• Приложения-расширения
• Страницы созданные на метаобъектах
• Заключение
• Ресурсы

#Sidekick & Shopify Magic

Искусственный интеллект, созданный для электронной коммерции. Позволяет быстро управлять магазином, например, создать скидку на все продукты и добавить их новой секцией на сайт. Также вы сможете создавать статьи, имейл рассылки, анализировать ваш магазин, и ещё много всего. Если вкратце, то это Chat GPT в Шопифай магазине.

#Новый дизайн админ-панели

Админка получила новый дизайн, но даже не только новый дизайн, а также некоторые всплывающие элементы стали открываться по-другому. Любое кардинальное изменение в дизайне всегда непривычно, поэтому нашлись люди которым не понравился текущий дизайн, но также есть те кому он понравился.

#Polaris 12

Вместе с новым дизайном обновился Polaris — это дизайн система админ-панели Шопифай, она используется для создания всех элементов которые вы видите в админке и она нужна чтобы создавать плагины на Шопифай.

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

Если вы хотите прочитать все о новой версии Polaris и понять, почему дизайнеры выбрали именно это решение, держите ссылку на статью от Шопифай. В статье рассказывают, например, почему акцентный цвет выбран черный вместо зеленого как раньше, или почему иконки сделали тоньше и какие варианты были рассмотрены. В общем, статья интересная.

#Гибкие секции (flex sections)

Создание пользовательских макетов для вашего интернет-магазина проще, чем когда-либо, с помощью флекс секций. Shopify использует CSS Flexbox, который позволяет создавать более разнонаправленные адаптивные макеты и легко выравнивать содержимое в разделах магазина. Теперь вы можете просто перетаскивать, изменять размер, группировать и редактировать блоки для вашего магазина создавая уникальный дизайн.

Фишка однозначно крутая, но не представляю сколько работы нужно проделать разработчикам чтобы их темы стали поддерживать это новвоведение, даже сам Шопифай в своих темах часто использует гриды вместо флексов.

#Плагин подписок

Шопифай представили свой плагин для создания подписок на товары. Есть шутка в Шопифай коммьюнити, что они сами из коробки не делают какие-то базовые решения по типу подписок, бандлов, кастомизации страницы чекаут, чтобы другие разработчики сделали и потом Шопифай увидел, что это пользуется спросом и сделали свое решение убив при этом другие.

Не знаю получится ли в этом случае так, что Шопифай своим плагином убьет другие плагины подписок, но какие-то базовые потребности оно точно закроет и пошатнёт рынок плагинов.

Плагин ещё не вышел, поэтому пока что невозможно сказать как он работает.

#Shopify Collective

Появилась возможность коллаборировать с другими брендами и продавать их товары в своем магазине (работает пока что только с бизнесами США). Пример Shopify Collective можно посмотреть в магазине Drake Collective — американо-канадского репера Дрейка.

#Новвоведения в B2B

Об обновлениях в B2B я написал в своем телеграм канале. (Перейти в телеграм канал)[https://t.me/devmoek/427].

#Marketplace connect

Позволяет подключить каталог продуктов Shopify к ведущим мировым торговым площадкам, таким как Amazon, Walmart и eBay. Независимо от того, где вы продаете, вы можете упростить управление списками своих торговых площадок, запасами, заказами и выполнением — прямо в Shopify. Легко устанавливайте переопределения контента и цен для конкретных площадок, а также управляйте списками в больших количествах.

#mock.shop

Мок шоп это ресурс который предоставляет основные GraphQL запросы, а также можно их менять и смотреть что будет в ответе. Также если вы не нашли пресозданного запроса вы можете написать свой используя исскуственный интеллект.

#Обновление плагина Search and discovery

Приложение Shopify Search & Discovery теперь поддерживает переименование фильтров (например отображать «теги» как «функции») , перевод фильтров и группирование значений фильтра («аква» и «бирюзовый» вместе как «синий»). Также упростили бизнесам с большими каталогами добавление, массовое редактирование и просмотр поисковых ускорителей и рекомендаций по продукции.

#Шаблон приложения на Remix

Новый шаблон приложения позволяет разработчикам создавать динамичные приложения с помощью JavaScript.

GraphQL — это функция, которую вы получаете после аутентификации. Вебхуки — это маршруты. Все быстро, и сделано на Remix.

Чтобы начать работу с шаблоном приложения Remix, запустите npm init @shopify/app@latest в интерфейсе командной строки.

#Приложения-расширения

Приложения-расширения — это настраиваемые приложения, в которых нет встроенных страниц. Так они полностью состоят из расширений, эти приложения могут размещаться на Shopify. Они имеют URL-адрес приложения, который заполняет Shopify, его можно изменить, если хотите создать встроенные страницы или разместить своё приложение в Shopify App Store.

#Страницы созданные на метаобъектах

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

#Заключение

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

#Ресурсы

• Создать партнёрский аккаунт.
• Открыть магазин на Shopify за $1.