从头开始构建电子商务网站

电子商务近年来变得如此受欢迎,现在很难想象没有它的未来。互联网的力量使得与企业和品牌的联系变得轻而易举,电子商务在很大程度上是向受众提供产品的最简单方式。

Foundation的Building Blocks编码UI组件库旨在使您更快地获得最终产品。与模板不同,构建模块不会规定您的网站的外观或结构。它们只是为您提供工具来构建您自己的自定义外观并且感觉更快。

在本教程中,您将学习如何使用电子商务套件从头开始构建静态电子商务网站,电子商务套件是一系列精选的构建模块,旨在帮助您构建特定类型的网站。虽然这个脚手架是原型,但我们使用的构建块和我们最终使用的布局可以应用于任何系统。

入门

构建块不会决定您的网站应该如何显示

我们需要做的第一件事就是建立一个构建网站的环境。在本教程中,您需要先下载node.js.安装完成后,您将需要使用该命令安装Foundation CLInpm install -g foundation-cli

现在您已经在系统上安装了Foundation,让我们使用命令foundation new ecommerce-site启动一个新的Foundation项目。在随后的列表中,选择第一个选项“网站(网站基础)”,在我们的项目名称“电子商务网站”中键入,然后选择“ZURB模板”。这将启动一个Foundation模板和开发服务器,以便我们可以轻松地开始构建我们的网站。跑Npm开始在终端中运行项目。

接下来,让我们通过在文本编辑器中打开它来查看我们新项目的代码。在这里,您将在'src / pages / index.html'中找到包含一些默认模板材料的示例页面。我们将在这里删除所有代码。

安装套件

在我们编写任何代码之前,我们将使用Foundation的CLI获取Foundation的电子商务工具包。前往您的终端并使用命令基础套件安装电子商务。

如果此命令不起作用,请仔细检查您的Foundation CLI是否已更新为2.2.3。要检查您所使用的版本,请运行基金会-v在你的终端。如果需要更新,只需卸载CLI即可npm uninstall -g foundation-cli然后重新安装npm install -g foundation-cli

这刚下载了我们电子商务套件中的所有构建模块!每次安装Building Block时,它都会出现在SRC /分音/构建模块。如果所有构建块都已自动导入您的套件,您就会知道您的套件安装正确App.scss文件。

其中一些构建块包含来自Font Awesome的图标,因此您需要手动安装它们或将其CDN添加到你的网站。为此,请导航至SRC /布局/ Default.html中并添加在。。之间标签。

脚手架网站

混合和匹配块以实现理想的电子商务布局

我们来建设吧!安装我们的套件后,接下来的几个步骤将有点像玩乐高:在您自己的项目中,您可以选择使用所有这些,或者您只需选择一个。随意混合搭配积木,实现您梦寐以求的电子商务布局。

对于本教程,我们将开始的前两个块是标题和促销英雄。为此,我们将使用Handlebars部分机制。在我们的空index.html文件中,让我们抛出部分内容{{> Ecommerce-header}}{{> Ecommerce-promo-hero}}。只有这两个构建模块,我们的电子商务登陆页面已经完成了一半。

接下来,我们将在英雄部分下方放入一些产品卡。要使用产品卡Building Block,我们将使用Foundation的块网格,以便卡片均匀地放置在网格中。这也将使以后更容易更改这些卡的布局。

让我们开始吧

。在这个div里面,用每个列内的产品卡扔十列
{{>电子商务产品卡}}

我们希望为客户提供更多产品的方式,让我们在产品卡下添加一个标注按钮。首先,我们需要创建我们的

这样我们的按钮就会在页面上居中。接下来,我们将使用Foundation按钮组件来创建我们的标注。添加一个里面的。行列

该页面现在感觉几乎已经完成了,但是我们还要在我们的英雄和产品卡之间添加标题以提供一些上下文。在英雄下,添加一个

包含我们的标题

最新到货

大多数电子商务主页在其产品下方都有更多促销内容。我们来使用Building Block{{> Ecommerce-hero-slider-small}}这里。为了防止滑块跨越页面的宽度,我们将它包裹在一个

由于电子商务网站通常包含许多页面,因此大多数页面都需要具有大量链接的大型页脚来处理页面量。我们的电子商务套件附带了这个确切用例的页脚。要结束这个脚手架,让我们来看看{{> Ecommerce-footer}}在HTML的最底层。

检查响应性

如今,如果没有适合移动设备,任何网站都很难获得。对于电子商务网站尤其如此。既然网上购物已经成为常态,我们不希望失去那些通过手机实现这一目标的用户。

遵循我们的移动优先座右铭,基金会的构建模块是自然响应的。快速检查较小的屏幕显示我们的网站看起来仍然很好。

但是,当我们点击汉堡包菜单时,我们的画布上没有正确连接。这部分有点棘手,但不要担心!我们将分解这个非画布菜单中发生的事情,然后介绍如何将其连接起来。

如果您查看ecommerce-header.html文件,您会注意到此标头内置了一个非画布。那么,为什么它不起作用?当我们点击汉堡包菜单时,唯一被“推”的是标题。页面的其余部分仍然在视图中,导致一些奇怪的重叠。

这是因为这个标题是为了自己的工作而构建的,但实际上它需要与整个页面一起工作。换句话说,它需要在触发画布菜单时推送页面上的所有内容,而不仅仅是标题菜单。这个电子商务标题是这样写的,因为设置一个非画布需要潜入你的SRC /布局/ Default.html中页面,超出了Building Block的范围。

This is what we’re currently seeing because the off-canvas hasn't been hooked up yet

这就是我们目前所看到的,因为画布还没有被连接起来

要解决这个问题,我们需要做的就是把所有内容都包括在内

并将其移动到src / layouts / default.html。接下来,我们将打包{{> Body}}我们网站里面的一个
。当触发画布时,这将推动我们网站的主体。

现在,当我们点击我们的汉堡包时,整个网站都会移动到画布上的菜单!我们的身体Default.html中页面应如下所示:

{{> body}}

结论

我们已经向您展示了如何使用Foundation的电子商务套件启动您的电子商务网站,但不要就此止步!有超过100个Building Block可用于帮助增强您的页面。在几分钟内,我们已经搭建了一个带有Building Blocks的静态电子商务网站。这为您节省了大量时间,您现在可以使用这些时间来划分视觉效果并为网站设计风格以适合您的品牌。

即使您正在进一步使用后端系统,不同的部分机制或使用另一种方式将数据导入网站,使用Building Blocks的给定工作流程将真正节省您的时间,从而节省资金。 Foundation的构建模块是一种很好的入门方式,因为它们可以扩展,适合您现有的样式,并可用于任何应用程序系统。

这篇文章最初出现在网络杂志问题266.买这里

相关文章:



翻译字数超限