完全自定义和样式您的购物车和购物车按钮。
购物车按钮。关于这个有很多东西要讲。但我们将快速有效地完成它,甚至可能会减少一些杂乱的拨号——(1)解剖购物车按钮,(2)自定义默认元素,(3)添加和删除元素,(4)购物车数量元素,如果有时间,(5)显示购物车按钮内部的小计。
让我们看一下购物车按钮的构造。如果我们深入挖掘,在我们的Navigator中,我们可以看到它有一些东西:它有一个图标,它有一些文本(在我们的中是“cart”),它有一个cart quantity元素。(这是的当前的顾客购物车中的商品数量。)
让我们来谈谈图标。特别是图标的颜色。想改吗?确保图标被选中。你知道我们如何改变字体的文本或字体颜色吗?看,这里也是一样。
这就是图标颜色。车的文本。不久前,我们看到了一个文本块。在这个视频的脚本中,我们提到在我们的脚本中是“推车”。但是我们可以在这里做更多的事情:我们当然可以编辑文本,但我们也可以从实际购物车中获取文本——看看这个:我们可以获取反映当前数量或小计的文本。这给了我们很大的灵活性在事件中我们不想让它说cart,就像在这个视频之前做的那样。
车的数量是多少?此文本块已经连接到购物车数量字段。你可以给它设置样式就像你可以给任何文本元素设置样式一样。
现在让我们看看如何从购物车按钮中添加甚至删除内容。你可以在按钮上添加东西。只是…在按钮上添加东西。
你可以从按钮中删除内容。只是删除。唯一不能删除的是cart quantity元素。但你可以把它藏起来。
让我们深入研究一下。车数量。我们可以双击名为cart button的元素。(那是购物车按钮。)从这里,我们可以通过切换开关隐藏购物车数量。我们可以把它打开。然后再次关闭。然后返回。
在购物车数量元素本身中呢?我们可以在导航器中选择购物车quantity元素。如果购物车是空的,我们可以使用这个(在元素设置下)来隐藏购物车数量。这意味着如果有人没有往购物车中添加东西,就不会有数字0。
最后,我们可以在购物车按钮中单独显示小计。如果要显示小计,可以向购物车按钮添加文本块。就像我们之前演示的,从设置中,我们可以从购物车小计中获取文本。
所以。我们讲了这么多。引用迪肯森的一句话:“沉默有时是最真实的。”所以我们把r -调成静音
一旦你添加购物车到您的页面,您可以完全自定义和样式的购物车按钮以及购物车本身。
在本节课中,我们自定义购物车按钮。要自定义购物车本身,请签出定制购物车.
默认情况下,购物车按钮有一个图标、一个文本块“购物车”和购物车数量元素。
您可以通过应用字体颜色来更改购物车图标的颜色。
您可以编辑按钮文本或双击并将其连接到购物车的数量或小计。你可以像设计任何排版元素一样设计它。
此文本块连接到无法编辑的购物车数量字段。可以像处理任何排版元素一样对该元素进行样式化。
您可以向购物车添加其他元素,例如不同的图像或文本块,并根据自己的喜好设置购物车按钮的样式。您可以删除购物车图标和文本块,但不能删除购物车数量元素。你可以用购物车设置隐藏它。阅读下文。
默认情况下,购物车按钮显示购物车数量-购物车中的全部商品。
隐藏车的数量元素:
当购物车是空的时候隐藏购物车数量:
在“购物车”按钮上显示购物车的小计: