如何修改magento前端页面答案

【问题标题】：How to modify magento front end pages如何修改magento前端页面
【发布时间】：2017-05-08 16:48:24
【问题描述】：

我正在尝试创建一个同时具有前端和后端功能的模块。就像我需要在商店加载时在主页中询问城市一样。并且所有可用的城市都在后端管理面板中输入/管理。

在我以前只写后端的东西之前，前端似乎有点混乱。

有一个设计文件夹，完全用于主题开发。

所有示例都略有不同（https://www.mageplaza.com/magento-2-module-development/,http://inchoo.net/magento-2/how-to-create-a-basic-module-in-magento-2/]2），它们有routes.xml，其中route_id，并且都已定义，但这里我不需要任何额外的路线。需要对前端页面进行一些额外的调整。

我创建了模块V_name/M_name/adminhtml/block controllers etc view ...

指导我如何创建一个有前端和后端连接的模块，城市应该在admin中输入，它们应该显示在前端主页上。

目前，我只能通过添加一些 HTML 来编辑主页内容 CMS 页面，该 HTML 在页面加载时显示带有城市下拉菜单的弹出窗口。

【问题讨论】：

标签： php magento magento2

【解决方案1】：

既然你已经弄清楚了后端，我将专注于前端。此外，由于您需要做的就是填充您已经创建的列表，这应该很容易。我以前做过类似的事情，我发现只使用 JSON 来查询列表（在你的情况下是城市）并填充下拉列表更容易。我不相信这是最“MVP/正确”的方式，但它比其他方式工作量少。（至少对我来说是这样。我总是更喜欢 JavaScript 选项，因为它允许将来轻松自定义页面。）要使用 JSON 方法，您需要使用如下方法创建一个块。您将看到您还必须创建一个资源模型（我不会详细介绍如何创建资源模型或块的详细信息，因为网上已经有比我更好的资源可以深入了解您需要的每一个细节.)。完成后，您可以直接从 .phtml 页面以易于使用的 JSON 数组访问数据。

首先，您需要确保您现在正确地构建了您的模块。下面的新Block应该是这样的结构...

app/code/<VENDOR>/<MODULE>/Block/Wrapper.php (or whatever you name it)

管理块应该在下面的结构中，听起来你已经知道该怎么做了。

app/code/<VENDOR>/<MODULE>/Block/Adminhtml

创建您的 Block 并添加一个方法来创建 JOSN 数组，如下所示...

public function getCityList()
{
    $city_array = array();
    /** @var \<VENDOR>\<MODULE>\Model\ResourceModel\City\Collection $collection */
    $collection = $this->_cityCollectionFactory->create();
    $collection->addFieldToFilter('active','1')->addFieldToSelect(['city_id', 'city']);
    $collection->getSelect()->order(array('city ASC', 'city_id ASC'));

    $count = 0;
    foreach ($collection as $model)
    {
        $city_array["$count"] = $model->getData();
        $count++;
    }
    return \Zend_Json::encode($city_array);
}

仅供参考...上面代码中的 foreach 循环很奇怪，它使用了 $count，因为我需要做一些棘手的事情才能让某些东西正常工作。

然后您可以在 .phtml 文件中创建 Block 以通过 javascript 访问数据。

<?php
    $block_obj = $block->getLayout()->createBlock('<VENDOR>\<MODULE>\Block\Wrapper');
?>
<script type="text/javascript">

    window.citylistJson = <?php echo $block_obj->getCityList() ?>;

</script>

【讨论】：