입문

이 글은
"EC-CUBE는 전혀 몰라요".
부터
"외관을 변경할 수 있습니다."
에서 설명한 대로 해당 매개변수의 값을 수정합니다.
평소에는 주로 워드프레스에서 사이트를 만들기 때문에 EC-CUBE 개발에서 Symfony를 이해하는 데 시간이 많이 걸리는 것 같습니다.
Symfony의 기법과 MVC에 대한 설명은 공식 개발 문서와 기술서에 맡깁니다.
디자인에 대한 맞춤형 설명일 뿐입니다.
• 개발 문서(공식)
https://doc4.ec-cube.net/
공식 문서는 정의롭다.하지만
익숙하지 않은 단계에서 읽는 문턱이 좀 높다.
・EC-CUBE4 시스템 구축 입문 & 점포 운영 ・관리 초보자 안내
https://www.amazon.co.jp/dp/B07PBWN5Y9/ref=dp-kindle-redirect?_encoding=UTF8&btkr=1

이 글의 대상

평소 HTML, CSS, JS(jQuery), WordPress 웹 개발 위주

EC-CUBE는 과거 버전을 포함하여 손대지 않았습니다

WordPress 등 CMS 구축에 익숙하고 기본 PHP의 기법을 알고 있음

VC는 무엇입니까?

EC-CUBE를 배우기 시작하면 먼저 눈에 띄는 것은 MVC라는 단어다.
는 Model View Controller의 이니셜을 따온 단어입니다.
난폭하게 설명하면
모델: 컨텐츠, 데이터베이스 측
외관
Controller: Model 및 View 브로커
태그 요소의 표시 속성을 수정합니다.
실제 캐릭터와 다른 점이 있을 수도 있고 오해가 생길 수도 있어요.
간단한 해설이니까 잠시 이걸로 설명하면 돼요.
이 기사는 View만 설명합니다.

EC-CUBE 파일 구조

루트 디렉터리로 볼 때 많은 파일과 폴더가 있습니다.
앱이나 bin 등 폴더 이름이 익숙하지 않아서 죄송합니다.
이 글은 디자인 편집에 필요한 세 개의 폴더를 집중적으로 소개할 것이다.

1.src 폴더

기본 템플릿을 포함합니다.(템플릿 이외에도 있음, 할애)
정확히 말하면 아래의 디렉터리에 템플릿이 있다./src/Eccube/Resource/template/default/↓ 기본 템플릿 디렉토리

첫 페이지 템플릿/src/Eccube/Resource/template/default/index.twig상품 상세 페이지 템플릿/src/Eccube/Resource/template/default/Product/detail.twig기본적으로 src 폴더의 템플릿 파일을 만지작거리지 않습니다.
아래에 설명된 앱 폴더를 사용합니다.

2.app 폴더

사용자 정의 템플릿을 배치할 폴더입니다.
설치 후 아무것도 없기 때문에 src 폴더에서 편집할 파일을 복사하여 설정합니다.
처음부터 모든 템플릿을 복사할 수 있겠지.
↓ 사용자 정의 템플릿을 배치할 디렉토리

첫 페이지 템플릿 배치 위치/app/template/default/index.twig상품 상세 페이지 템플릿 배치 위치/app/template/default/Product/detail.twig

3.html 폴더

안에 css와 그림이 있습니다.
기본 이미지 또는 css/html/template/default/assets/사용자 정의 이미지 또는 css/html/user_data/assets/기본 편집/html/user_data/assets/.
customize.css는 처음부터 준비가 되었지만 관리 화면에서 편집할 수 있기 때문에 클라이언트가 터치할 수 있습니다.

기존 페이지의 디자인 변경

예를 들어, 첫 페이지를 표시할 때
EC-CUBE는 다음 순서로 템플릿을 읽습니다.

/app/template/default/index.twig

/src/Eccube/Resource/template/default/index.twig

(참조: https://doc4.ec-cube.net/design_template
앱 폴더에서 템플릿 구성
사용자 정의 디자인을 표시합니다.
페이지 디자인 편집 절차는 여기 있습니다.
1. src 폴더에서 기본 템플릿 복사/src/Eccube/Resource/template/default/index.twig2. 앱 폴더에 붙여넣기/app/template/default/index.twig3. index.편집 단추

EC-CUBE의 페이지 구성

EC-CUBE가 페이지를 어떻게 만드는지 봅시다.
관리 화면에서 컨텐츠 관리 > 레이아웃 디자인 관리 > 첫 페이지용 레이아웃 디자인을 엽니다.
이렇게 하면 첫 페이지가 몇 개의 블록으로 구성되어 있다는 것을 알게 될 것이다.

여기서 첫 페이지의 템플릿 파일을 봅시다./src/Eccube/Resource/template/default/index.twigindex.twig 코드 보기

{#
This file is part of EC-CUBE

Copyright(c) EC-CUBE CO.,LTD. All Rights Reserved.

http://www.ec-cube.co.jp/

For the full copyright and license information, please view the LICENSE
file that was distributed with this source code.
#}
{% extends 'default_frame.twig' %}

{% set body_class = 'front_page' %}

{% block stylesheet %}
    <style>
        .slick-slider {
            margin-bottom: 30px;
        }

        .slick-dots {
            position: absolute;
            bottom: -45px;
            display: block;
            width: 100%;
            padding: 0;
            list-style: none;
            text-align: center;
        }

        .slick-dots li {
            position: relative;
            display: inline-block;
            width: 20px;
            height: 20px;
            margin: 0 5px;
            padding: 0;

            cursor: pointer;
        }

        .slick-dots li button {
            font-size: 0;
            line-height: 0;
            display: block;
            width: 20px;
            height: 20px;
            padding: 5px;
            cursor: pointer;
            color: transparent;
            border: 0;
            outline: none;
            background: transparent;
        }

        .slick-dots li button:hover,
        .slick-dots li button:focus {
            outline: none;
        }

        .slick-dots li button:hover:before,
        .slick-dots li button:focus:before {
            opacity: 1;
        }

        .slick-dots li button:before {
            content: " ";
            line-height: 20px;
            position: absolute;
            top: 0;
            left: 0;
            width: 12px;
            height: 12px;
            text-align: center;
            opacity: .25;
            background-color: black;
            border-radius: 50%;

        }

        .slick-dots li.slick-active button:before {
            opacity: .75;
            background-color: black;
        }

        .slick-dots li button.thumbnail img {
            width: 0;
            height: 0;
        }
    </style>
{% endblock %}

{% block javascript %}
    <script>
        $(function() {
            $('.main_visual').slick({
                dots: true,
                arrows: false,
                autoplay: true,
                speed: 300
            });
        });
    </script>
{% endblock javascript %}

{% block main %}
    <div class="ec-sliderRole">
        <div class="main_visual">
            <div class="item slick-slide"><img src="{{ asset('assets/img/top/img_hero_pc01.jpg') }}"></div>
            <div class="item slick-slide"><img src="{{ asset('assets/img/top/img_hero_pc02.jpg') }}"></div>
            <div class="item slick-slide"><img src="{{ asset('assets/img/top/img_hero_pc03.jpg') }}"></div>
        </div>
    </div>
{% endblock %}

index.twig를 봐도 메인 슬라이드만 설명되어 있습니다.
다른 요소가 블록으로 구성되어 있기 때문입니다.
머리글/머리글, TOPICS 및 NEW ITEM
블록으로 관리
그걸 조합해서 첫 페이지를 만들었어요.

블록 추가 / 편집

관리 화면 컨텐츠 관리 > 블록 관리에서 새로 만들기를 클릭합니다.
생성된 블록은 다음 디렉토리에 저장됩니다.
사용자 정의 블록 디렉토리/app/template/default/Block/test_block.twig

새 css 파일

customize.css와 같은 층
임의의 파일 이름으로 css 파일을 설정합니다./html/user_data/assets/css/style_add.css리본에서 를 클릭합니다.
default_frame.twig에서
customize.css를 읽는 곳이 있기 때문에 아래에 보충합니다./src/Eccube/Resource/template/default/default_frame.twig

{# 中略 #}
    <link rel="stylesheet" href="{{ asset('assets/css/customize.css', 'user_data') }}">
    <link rel="stylesheet" href="{{ asset('assets/css/style_add.css', 'user_data') }}"> {# 追加css #}
</head>
{# 中略 #}

현재 새로 추가된 css를 읽을 수 있습니다.

로그인 판정

디자인만 만지작거리며 조건이 엇갈리는 코드를 간단하게 소개한다.

{% if is_granted('ROLE_USER') %}
    {# ログイン中に表示 #}
{% else %}
   {# 非ログイン中に表示 #}
{% endif %}

사용자 정의 이외의 참조 URL 설계

[PHP 초입문] 네임스페이스(namespace·use) 정보
본 기사에서 언급하지 않은 컨트롤러를 배우다가 걸려 넘어졌다
namespace와use에 대해 아주 쉽게 썼습니다.

총결산

파일 구조를 이해하면 기능과 무관한 외관이 쉽게 바뀔 수 있다.
EC-CUBE·Symfony를 공부하고 있기 때문에 본 기사를 수정합니다.