BigCommerce，如何使用自定义页面布局的新面板和代码段文件

Question

我正在尝试为每种产品类型创建自定义页面布局，以便我可以为男士，女士，上衣，下装等提供特定尺寸的图表。我创建了新模板，将其应用于单个产品，创建了一个新的productdetail面板，它是原始的直接副本，并在我的新产品布局中引用它。一旦我试图反驳新的图像并添加到购物车就不见了。是否有关于BC模板结构或引用的遗漏？

Answer 1

可以在Stencil中的BigCommerce中创建自定义页面布局。在部署之前，您应该使用Stencil CLI来测试这项工作，但步骤如下：

1. 创建自定义目录和所需文件夹。 class Folder < ApplicationRecord extend FriendlyId friendly_id :name, use: [ :sequentially_slugged, :scoped ], scope: :account_id end

2. 更新主题目录中的.stencil - 为单个产品添加新页面布局的映射：

mkdir templates/pages/custom cd templates/pages/custom mkdir brand product category page

1. 重新启动模板 "customLayouts": { "brand": {}, "category": {}, "page": {}, "product": { "product-size-chart": "/sample-that-software-guy-t-shirt/" }

修改stencil start后必须重启stencil。

1. 将默认产品页面复制到新的页面布局

.stencil

然后复制视图html：

cp ./templates/pages/product.html templates/pages/custom/product/product-size-chart.html

1. 修改cp templates/components/products/product-view.html templates/components/products/product-view-size-chart.html 指向templates/pages/custom/product/product-size-chart.html而不是默认文件（只是产品）。

product-view-size-chart

然后在<div itemscope itemtype="http://schema.org/Product"> {{> components/products/product-view-size-chart schema=true}} ， 将标签文件的包含更改为 templates/components/products/product-view-size-chart.html

1. 创建这个新文件： {{> components/products/description-size-tabs}}

编辑它并添加所需的新标签： cp ./templates/components/products/description-tabs.html ./templates/components/products/description-size-tabs.html 在保修标签正上方。

1. 更新 <li class="tab"> <a class="tab-title" href="#tab-size-chart">{{lang 'products.size-chart'}}</a> </li> 以获得尺寸图的定义。

2. 更新lang/en.json以显示图片

完成所有操作并在CLI本地工作后，捆绑主题并上传并激活它。然后，编辑要使用新布局的产品，并转到其他详细信息以将模板布局文件设置为您创建的新布局。