shopify主题开发_shopify主题中的vue js组件

shopify主题开发

There are certain things that do not change over time: all dev tutorials start with a “hello world” example, junior developers want senior salaries and the world of e-commerce stands on the shoulders of JQuery.

有些事情并不会随着时间的推移而改变：所有开发教程都以“ hello world”示例开始，初级开发人员想要高级薪水，而电子商务世界站在JQuery的肩膀上。

Some time ago my employer decided to start using Shopify as a new e-commerce platform for our existing and new e-shop projects. “OK for me”, I thought, probably, it’s a good chance to learn something new, practice React or Vue and add several fancy words to my CV. Bring it on! But, as you might have guessed, few moments later life gave me a good lesson not to take anything for granted.

前一段时间，我的雇主决定开始将Shopify用作我们现有和新的电子商店项目的新电子商务平台。 我想，“对我来说还行”，这可能是学习新知识，练习React或Vue并在我的简历中添加一些花哨单词的好机会。 来吧！ 但是，正如您可能已经猜到的那样，过了一会儿，生活给了我一个很好的教训，不要把任何事情视为理所当然。

As a good mannered developer I started to explore the new platform by reading documentation and breaking apart available free themes. Little by little I opened to myself the “wonderful” world of SaaS with its upsides and downsides. With that being said I leave you the choice to scroll down the page until code examples or to stay here with me and read some of my observations about Shopify as a platform for theme developers.

作为一个有礼貌的开发人员，我开始通过阅读文档并分解可用的免费主题来探索新平台。 我一点一点地向自己敞开了SaaS的“奇妙”世界的面，它有其利弊。 话虽这么说，我让您可以选择向下滚动页面直到找到代码示例，或者与我呆在一起，阅读我对Shopify作为主题开发者平台的一些看法。

The first thing that got my attention was data management which was absolutely different to what I used to work with before. There is no direct access to all the data on your site so you can not create a full back up or roll back to a previous version in case of any trouble. Also you no longer have exclusive rights on site’s data. You must give your consent to share some part of it with third parties like app developers when you want to add non default functionality to your site. And you should do it quite often as the default configuration is limited to a bare minimum. That’s very reassuring right? Definitely not for me but a SaaS platform comes as a package and you either take it or leave it. I guess we should take it and move on to the bright side.

引起我注意的第一件事是数据管理，它与我以前使用的完全不同。 无法直接访问您站点上的所有数据，因此如果遇到任何麻烦，您将无法创建完整备份或回滚到以前的版本。 此外，您不再拥有站点数据的专有权。 当您要向网站添加非默认功能时，必须同意与应用程序开发人员之类的第三方共享其中的一部分。 而且您应该经常这样做，因为默认配置被限制为最低限度。 那很让人放心吧？ 绝对不适合我，但SaaS平台是作为一个软件包提供的，您可以选择使用它或离开它。 我想我们应该接受它，继续前进。

What does Shopify have to offer to a front-end developer? For me the most valuable asset is a front-end API. It gives us an opportunity to build nice, clean, dynamic interfaces and helps us to deliver exactly what customers want at the right place and at the right time. Shopify does have a large API ecosystem that reaches every single piece of data that you may need to create your site or application. API comes in two major groups: “admin API” for back-end changes and app development plus “storefront API” to use on the client side. These groups are represented in three flavours: AJAX, REST, GraphQL. At first glance everything looks very promising. Right? With these API at hand there is no visible constrains on what can be done on the front-end, thus we should observe a considerable number of Shopify sites based on popular js frameworks. But wait a minute. You’ve probably already guessed that this is not the case.

Shopify必须为前端开发人员提供什么？ 对我而言，最有价值的资产是前端API。 它使我们有机会构建美观，干净，动态的界面，并帮助我们在正确的位置和正确的时间准确交付客户想要的东西。 Shopify确实有一个庞大的API生态系统，可以覆盖创建站点或应用程序可能需要的每条数据。 API分为两大类：用于后端更改和应用程序开发的“管理员API”以及要在客户端使用的“店面API”。 这些组以三种形式表示：AJAX，REST，GraphQL。 乍看起来，一切看起来都非常美好。 对？ 有了这些API，在前端可以做什么方面就没有明显的限制，因此我们应该观察到大量基于流行js框架的Shopify网站。 等一下 您可能已经猜到情况并非如此。

If you randomly pick any Shopify store, open developer console and type “JQuery” there is a good chance that you find this object defined.

如果您随机选择任何Shopify商店，请打开开发人员控制台并键入“ JQuery”，则很有可能会找到定义的对象。

Chrome console

Chrome控制台

Hence the site one way or another uses JQuery library under the hood. Don’t you find this odd? How could that happen that the Shopify community has made a choice in favor of an obsolete js library? You may not like the answer.

因此，该站点以某种方式在后台使用JQuery库。 你不觉得奇怪吗？ Shopify社区如何选择支持过时的js库，这怎么可能呢？ 您可能不喜欢答案。

为什么选择JQuery？ (Why JQuery?)

At the beginning of the 20th century Ford Motor Company made a car available for masses. Since then the car ceased to be a toy in hands of rich enthusiasts and became a tool, an instrument to do business and make money. Of cause those cars had a simple construction, were made of cheap materials and were not very reliable but that was a trade off to make them affordable and produce in large quantities. Also don’t forget that an average driver should be able to handle this beast without much problems as well as a mechanic should not struggle a lot while fixing it in the middle of a corn field.

20世纪初，福特汽车公司向大众提供了一辆汽车。 从那时起，这辆车就不再是富裕发烧友手中的玩具，而成为一种做生意和赚钱的工具。 原因是这些汽车的结构简单，用便宜的材料制成并且不是很可靠，但这是要使它们能够负担得起并大量生产的折衷方案。 同样不要忘记，普通驾驶员应该能够在没有太多问题的情况下处理这头野兽，并且机械师在将其固定在玉米田中时也不会费劲。

Great minds think alike. Looks like Shopify has chosen a similar path. It offers fully functional ready to use e-shop to everybody. A shop owner may not have any special knowledge or expertise in IT, all he should do is tweak a few settings here and there and he is good to go. But what if something goes wrong or does not work right in the “car”? The shop owner pulls over, lifts the hood to check the engine, looks aimlessly for a couple of seconds, realizes that he has not a slightest idea how it works and then starts to squeeze and pull different tubes and wires at random hoping that it will help get the car fixed. A driver who does not know how to fix a car can do more harm rather than fix anything.

英雄所见略同。 看起来Shopify选择了类似的路径。 它为所有人提供了功能齐全的随时可以使用的网上商店。 店主可能没有IT方面的专门知识或专业知识，他所要做的只是在这里和那里调整一些设置，他很乐意去做。 但是，如果出现问题或在“汽车”中无法正常工作怎么办？ 店主停下来，抬起引擎盖检查发动机，几秒钟漫不经心地看了一下，意识到自己丝毫不知道它是如何工作的，然后开始随机挤压并拉动不同的管子和电线，希望它会帮助修理汽车。 不知道如何修理汽车的驾驶员可能造成更大的伤害，而不是修理任何东西。

So Shopify stepped up with a couple of protective measures — a rigid template system based on a proprietary language called Liquid with a web editor to work with the code from an administration panel. By the way Liquid is very similar to Twig. You may be familiar with it if you worked with Drupal for example. So with these measures in place, if the shop owner needs to fix something, he may access the code via a web editor and modify it. This time if something goes wrong, just use built-in version control feature and roll back to a previous file version. Quite simple. Obviously this is not a very convenient way to work with the code all the time and more complex cases require a dev environment on a local machine but in most simple cases a web editor is more than enough. Thus we came to the first major reason to favour JQuery.

因此，Shopify采取了一些保护措施，即基于名为Liquid的专有语言的刚性模板系统，以及一个Web编辑器来使用管理面板中的代码。 顺便说一下，Liquid与Twig非常相似。 例如，如果您与Drupal合作，您可能会熟悉它。 因此，采取这些措施后，如果店主需要修理某些东西，他可以通过网络编辑器访问代码并进行修改。 这次如果出现问题，只需使用内置的版本控制功能并回滚到以前的文件版本。 非常简单。 显然，这并不是一直使用代码的便捷方式，更复杂的情况需要在本地计算机上使用开发环境，但在大多数简单情况下，Web编辑器绰绰有余。 因此，我们得出了支持JQuery的第一个主要