Shopware 6: 以 Shell/Bash 构建店面

Shopware 6 是一个功能强大的电商平台，它允许你使用不同的技术构建自己的店面。在本篇文章中，我们将介绍如何使用 Shell/Bash 构建一个简单的 Shopware 6 店面主题。

准备工作

在开始构建前，你需要确保已经安装了以下软件：Git、Node.js 和 Shopware 6。在本教程中，我们将使用 Shopware 6.3.5 版本。

你需要在电脑上创建一个新的文件夹，用于保存你的主题文件。

步骤

步骤 1：克隆 Shopware 6 仓库

首先，使用 Git 克隆 Shopware 6 仓库：

git clone https://github.com/shopware/production.git

进入 platform 目录，然后安装依赖：

cd production/platform
bin/build-administration.sh

该脚本将为 Shopware 6 构建管理员前端，并安装必要的依赖项。

步骤 2：创建一个新的主题

在 Shopware 6 中，所有的主题都存放在 custom/plugins 文件夹中。我们需要在其中创建一个新的主题。

创建一个名为 MyTheme 的新文件夹：

mkdir custom/plugins/MyTheme

进入该文件夹，创建一个名为 manifest.xml 的文件，内容如下：

<?xml version="1.0" encoding="UTF-8"?>
<manifest xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
          xsi:noNamespaceSchemaLocation="https://raw.githubusercontent.com/shopware/platform/6.4.1.0/src/Core/System/Xml/Schema/manifest.xsd">
    <metadata>
        <name>MyTheme</name>
        <label lang="en">My Theme</label>
        <version>1.0.0</version>
        <targetShopwareVersion>6.3.5.0</targetShopwareVersion>
    </metadata>
    <views>
        <script file="app.js"/>
        <style file="app.css"/>
    </views>
</manifest>

该文件将告诉 Shopware 6 这是一个主题，并引入了 app.js 和 app.css 两个文件。

步骤 3：创建主题的样式

进入 MyTheme 文件夹，创建一个名为 app.css 的文件，并添加以下内容：

* {
    background-color: #f1f1f1;
}

该样式将为 Shopware 6 店面的所有元素添加一个浅灰色背景。

步骤 4：创建主题的 JavaScript

同样地，我们需要为主题创建一个 JavaScript 文件。进入 MyTheme 文件夹，创建一个名为 app.js 的文件，并添加以下内容：

console.log('MyTheme is running!');

该代码片段将在浏览器的控制台中输出一条信息，以表明我们的主题已经成功运行。

步骤 5：注册主题

回到 Shopware 6 后台，通过 Settings > System > Plugins 菜单进入插件管理界面。

点击 Upload plugin 按钮，上传 MyTheme 文件夹。上传完成后，你会看到一个名为 MyTheme 的插件，点击启用它。

激活插件后，在 Shopware 6 后台的 Settings > Theme 菜单中选择 MyTheme 作为当前主题。此时，你应该能够在浏览器中看到前面在 JavaScript 文件中添加的控制台输出。

结束语

在本篇文章中，我们介绍了如何使用 Shell/Bash 构建一个简单的 Shopware 6 店面主题。通过编写 CSS 和 JavaScript 文件，并在 Shopware 6 后台中注册它们，我们成功地创建了一个新的主题。

Shopware 6 还支持其他许多技术，例如 Twig 和 Vue.js。如果您对这些技术感兴趣，请继续阅读 Shopware 6 的官方文档。