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
};

很多人会通过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

Tag Archives: Shopify

Shopify Event

Shopify handleize function in JavaScript

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

解决custom liquid 无法翻译问题