Проблема

Если вы разработчик Shopify или даже Shopify «Эксперт», то вам пришлось бороться с нечетной обходной ситуацией из-за ограничений системы — такова жизнь, когда вы работаете в основном на платформе, которая закрыта помимо шаблонов темы Liquid, содержащих предопределенные объекты и фильтры, HTML, CSS и JS. Это означает, что в большинстве случаев вам приходится что-то менять, чтобы Shopify действовал так, как вам нужно.

Недавно в компании, в которой я работаю (крупная компания по производству пищевых добавок Shopify), мы поняли, что у вас могут быть темы предварительного просмотра, но вы не можете предварительно просмотреть скрытый продукт в теме предварительного просмотра — даже если вы манипулируете URL-адресами и параметрами вокруг этого. что у вас может быть и то, и другое. Вы можете предварительно просмотреть скрытый продукт в активной теме или просмотреть неактивную тему, но без продукта.

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

Фрагмент

Все, что нам нужно сделать, это использовать небольшой обходной путь и сделать его включенным на любой странице, которую мы хотим, которая находится в режиме реального времени в живой теме, что будет перенаправлять пользователя до отображения страницы. Я назвал его is-admin.liquid, но вы можете назвать его is-staff.liquid или как угодно.

Сам фрагмент объясняет, как он работает, в верхнем комментарии, но в основном он ищет панель темы предварительного просмотра, которая отображается при каждой загрузке страницы, если вы предварительно просматриваете тему, это позволяет вам иметь живой продукт, который является дубликатом с новыми данными и просто сделайте:

{% include 'is-admin' %}

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

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

Теперь, на момент написания, именно так Shopify вводит свою панель предварительного просмотра, как описано в Gist. Как говорится, Shopify может в любое время изменить способ ввода панели, переименовать используемые объекты или ссылки, или любое изменение может существенно нарушить этот метод — вам нужно будет отследить изменение и изменить часть фрагмента, который использует содержитоператор, чтобы он снова заработал.

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

То, что нужно запомнить

  1. Убедитесь, что вы включаете фрагмент на страницу только один раз, включение его более одного раза еще больше снизит производительность и на самом деле никак не поможет, кроме дальнейшего запутывания браузера.
  2. Продолжайте проверять, работает ли код, и Shopify ничего не изменил — он создан не для долгосрочного использования в производстве, а больше для краткосрочных спринтов, когда нет другого варианта из-за необходимости использовать данные в реальном времени, кроме как скрыть их от внештатных сотрудников.
  3. Убедитесь, что всем, кому вы хотите ее просмотреть, предоставлена ​​правильная ссылка для предварительного просмотра, и они используют ее, прежде чем попытаются посетить скрытую страницу — распространенная ошибка, в которую вы не поверите!
  4. Попробуйте разместить фрагмент как можно выше по странице, чтобы он активировался до того, как страница начнет строиться.
  5. Пожалуйста, убедитесь, что у вас нет ссылки на скрытую страницу, плавающую в цикле коллекций или в главном меню, что является еще одним неожиданным распространенным упущением.
  6. После добавления на страницу вы также можете использовать и протестировать переменную isAdmin, которой было присвоено значение true, на тот случай, если вы хотите использовать ее по причинам, не связанным с перенаправлением, этот фрагмент можно легко изменить для выполнения другого действия, такого как мигание уведомление, изменение способа отображения страницы или все, что вы можете придумать! Проявите творческий подход, теперь вы можете определить, кто является сотрудником, а кто нет.

Небольшой продвинутый совет

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

All Engines:
<meta name="robots" content="noindex" />
Specifically Google:
<meta name="googlebot" content="noindex" />

Итак, я надеюсь, что вам, ребята, повезет, и вы спрячете свою новую захватывающую разработку от всего мира, пока они не будут готовы ее увидеть!

Если вам нужна помощь Shopify, воспользуйтесь их экспертной программой или напишите мне по адресу [email protected], и я могу направить вас к рекомендованным разработчикам Shopify с многолетним опытом.

Вот и наступил 2020 год, с Новым годом!