Shopify « Joseph Xu的Blog

  document.addEventListener("shopify:section:load", function (section) {
    initSlider(section.target);
    checkImagesLazyLoaded();
  });
  document.addEventListener("shopify:section:reorder", function (section) {
    initSlider(section.target);
    checkImagesLazyLoaded();
  });

shopify:section:load 事件：当某个部分（section）加载完成时，会执行传入的回调函数。在回调函数中，调用 initSlider 函数并传入加载的部分的目标元素，同时调用 checkImagesLazyLoaded 函数。
shopify:section:reorder 事件：当某个部分（section）重新排序时，执行相同的回调操作。

shopify:block:select：当一个块被选中时触发。
shopify:block:deselect：当一个块取消选中时触发。
shopify:product:select：当选择一个产品时触发。
shopify:cart:update：当购物车内容更新时触发。


// one-liner version
// retains latin-1 supplement chars as well as latin extended-a and latin extended-b

Shopify.handleize = function (str) {
    return str.toLowerCase().replace(/[^\w\u00C0-\u024f]+/g, "-").replace(/^-+|-+$/g, "");
};

// from https://github.com/Shopify/liquid/blob/63eb1aac69a31d97e343822b973b3a51941c8ac2/performance/shopify/shop_filter.rb#L100
Shopify.handleize = function (str) {
    str = str.toLowerCase();

    var toReplace = ['"', "'", "\\", "(", ")", "[", "]"];

    // For the old browsers
    for (var i = 0; i < toReplace.length; ++i) {
        str = str.replace(toReplace[i], "");
    }

    str = str.replace(/\W+/g, "-");

    if (str.charAt(str.length - 1) == "-") {
        str = str.replace(/-+\z/, "");
    }

    if (str.charAt(0) == "-") {
        str = str.replace(/\A-+/, "");
    }

    return str
};

第一，我觉得“你不满意”是一个很伪命题的事情。因为目前Top 100的Shopify的PageSpeed Insight的评分普遍都只有20分～40分左右。和大部分其它的Shopify网站是一样的。详情可以看rankly上的榜单。
追求速度极致的，只能自己写代码开发独立站，这个模式是最优解，但是需要投入的人力成本非常高昂，完全不值得。正如上述所说的，Shopify并不慢，这个已经得到了非常多网站的验证。慢的可能是你所使用的主题。如果真的决定要自己写代码的话，我个人目前仅推荐NextJs和Gatsby。Gatsby有CMS的整合，而NextJS的速度和整体性能比gatsby更快（尤其是nextjs v12）。作为一个使用过各类前端框架的人而言，我能推荐的就是上述二个，尽管我自己用得最多的是nuxt。
使用Shopify建站的，我是不推荐再使用cloudflare这类proxy增加多一层缓存层的。个人认为必要性不强，甚至可能会伤害性能。而且同时可能会导致过多301重定向的浏览器ERROR（重定向是有阈值的，然后cloudflare这类服务如果开启了proxy模式，则可能会导致这个问题）。很多Top 100的网站有使用cloudflare和cloudfront是因为他们加载了一些其它插件和其它静态文件，所以才有使用的必要性。但是对于一个全新的shopify网站，我并不认为这是必须要做的。但是Cloudflare有一个很好的功能，能够自动压缩和缓存你的css/html和js文件，这个能够极大的增加你的网站速度。但是Shopify的CDN也是会做类似的事情的，不同的在于Shopify CDN可能并没有提供主题文件css的minify压缩。

转自-牛津小马哥

很多人会通过pagespeed.web.dev（一个google的网站测速工具）来判断自己的网站是不是太慢了。

首先，需要说明的是Pagespeed insight的评分是不稳定的，你测试10次，有的时候可能是80分，有的时候可能是20分，这都是很正常的。同时，如果你是Shopify，那么你就已经会面临一定的局限性。因为Shopify本身已经尽力他们自己最大的努力去优化你的网站。说明如下：

Shopify本身已经为网站提供了加速服务

1 - 图片加速：

Shopify会使用懒加载，有lazyload。
图片全部都会经过Shopify的CDN，可以看到cdn.shopify.com
图片经过不同宽度的压缩，可以看到链接上的{width}x.png，以及data-widths=[110,160...]

JS文件的加速和异步：

目前大多数Shopify的JS文件，都是通过自己的cdn的。见下图。
必要的JS文件则应该是async加载，或者是defer加载

3 - CSS文件压缩和加速

尽量避免使用inline css。但是Shopify网站的inline css一般不会有很多的。这个是属于可以忽略的问题。如果是自己写代码建站，则需要注意这一点。
这里其中一个最为影响的，也是Shopify无法干预的，则是你所使用的主题。下述例子中的主题，是Pipeline Theme / Groupthought Theme。这个主题包所生成的css文件抬头如下：可以看到“An unminified version of this CSS ...”，也就是说，目前production中的版本已经是被压缩过的版本。所以该css文件，应该不是“很大，但是仍然有优化空间”。为什么仍然有优化空间呢？因为毕竟不是每个主题的每个css文件你都会在自己的网站内用上。

如何查看哪个文件加载得慢？

你可以打开自己的网站，然后右键inspect（审查），点击Network（网络），找到你的网站加载数据。这里拿Rankly.cn举例（该网站是NextJs搭建，并非Shopify。所以速度非常快），你可以看到各类文件和请求的加载速度在1ms至209ms。你可以通过这个手段查看自己的网站，找到最影响加载速度的图片/文件，这样子你就可以基本判断出“为什么这么慢”的原因了。

这里拿Yeti（Shopify Top100榜单榜首），他的网站速度加载得非常慢。至少，在我的网络环境下是如此的。在通过上面的方式去查看的时候，我通过waterfall可以看得到，前面的250万ms前都是在加载clarity.ms，也就是说clarity ms极有可能是导致网络加载速度慢的元凶。

通过上述方式去查看网站加载速度慢是比较合理的，也是我们程序员一般会使用的方式。但是部分请求速度就是会很慢（例如从后端服务器检索产品数据）。这类请求可能会慢至1～2秒。能够提升这个速度的方式就是使用边缘计算。在Shopify独立站领域，我们不会过多探讨例如边缘计算等这类前沿加速方式。因为这个都远远超出了卖家本身的能力以及资金范围。更不用提，Shopify本身就已经为每个网站使用了边缘加速。

转自-牛津小马哥

解决custom liquid 无法翻译问题

翻译键格式：

{{ 'yurob_about.yurob_about33' | t }}

需分别在en.json 和 es.json中进行配置：

en.json：

  "yurobabout": {
    "yurobabout33": "Yurob focuses on the R&D and manufacturing of medical devices such as electric wheelchairs. It is located in Kunshan,adjacent to Shanghai. Covers an area of 10,000 square meters.At present, the products are divided into five categories: electric wheelchair, manual wheelchair, golf scooter, nursingbed and patient lifts to meet different health needs, and continue to be exported all over the world."
  }

es.json

  "yurobabout": {
"yurobabout33": "Yurob se centra en la investigación y desarrollo y fabricación de dispositivos médicos Por ejemplo, sillas de ruedas eléctricas. Se encuentra en kunshan.Adyacente a shanghai. Cubre un área de 10000 metros cuadrados.En la actualidad, los productos se dividen en cinco categorías principales: silla de ruedas eléctrica, silla de ruedas manual,Scooter de golf, cuidado Camas y elevadores de pacientes para satisfacer diferentes necesidades de salud y continuar exportando a todo el mundo El mundo"
}

参考：

一	二	三	四	五	六	日
						1
2	3	4	5	6	7	8
9	10	11	12	13	14	15
16	17	18	19	20	21	22
23	24	25	26	27	28	29
30	31

Joseph Xu的Blog

Category Archives: Shopify

Shopify Event

Shopify handleize function in JavaScript

如果你不满意Shopify的网站速度，你能怎么做呢？

为什么我说shopify已经提供了加速的服务

解决custom liquid 无法翻译问题