관련 상품 플러그인에 제목을 추가하는 방법

EC-CUBE ver4.1부터 관련 상품 플러그인을 표준으로 설치할 수 있습니다.
이에 따라 이번에는 해당 상품 플러그인에 제목을 붙이는 방법을 소개한다.
제비를 뽑다

이번 결승점

CSS만으로 간단하게 구현할 수 있는 방법

관리 화면에서 CSS

입력

샘플 입력

jQuery로 구현하는 방법

관리 화면에서 jQuery

입력

관리 화면에서 CSS

입력

샘플 입력

이번 결승점

CSS에서만 쉽게 구현할 수 있는 방법

해당 상품의 요소를 조사해 보면 아래의''에 둘러싸여 있음을 알 수 있다.

<div id="RelatedProduct-product_area" class="ec-shelfRole">

css를 이쪽 idRelatedProduct-product_area에 놓으세요.
관리 화면에서 css 입력
관리화면&내용관리&css관리에 액세스하여 아래 코드를 입력하십시오.

/* 関連商品見出し用CSS */
#RelatedProduct-product_area::before{
    content:'見出し';
    font-weight: bold;
    font-size: 2rem;
    border-top:1px solid #ccc;
    border-bottom:1px solid #ccc;
    padding:.5em;
    margin: 2em 0 1em;
    display: block;
}

before를 지정한 idRelatedProduct-product_area의 첫 번째 하위 요소로 위조 요소를 만들고 content:'見出し'로 출력합니다.
이때 잊지 말아야 할 것은 지정display: block이다.
before에서 생성된 위조원소는 내연원소이기 때문에 지정display: block하고 블록원소로 변환합니다.
지정을 잊어버리면 Margin을 식별할 수 없기 때문에 레이아웃이 파괴된 것처럼 보입니다.

등록하면 대상 모양에 표시됩니다.
스마트폰 대응도 좋다.

CSScontent:'見出し'의 텍스트 섹션을 수정하여 문을 수정할 수 있습니다.
샘플 입력

/* 関連商品見出し用CSS */
#RelatedProduct-product_area::before{
    content:'関連商品';
    font-weight: bold;
    font-size: 2rem;
    border-top:1px solid #ccc;
    border-bottom:1px solid #ccc;
    padding:.5em;
    margin: 2em 0 1em;
    display: block;
}

jQuery로 구현하는 방법
잘 표기된 형식으로 제목을 달고 싶은 사람은 다음과 같은 방법을 시도해 보세요.
관리 화면에서 jQuery 입력
jQuery를 h2 요소로 사용하여 제목을 붙인다.
관리 화면 > Content Management > JavaScript 관리에 액세스하여 다음 코드를 입력하십시오.

$(function() {
  $('#RelatedProduct-product_area').prepend('<h2 class="RelatedProduct_title">関連商品</h2>');
});

prepend를 사용하여 #RelatedProduct-product_area에 둘러싸인 요소 중 h2를 가장 먼저 배치합니다.

관리 화면에서 CSS 입력
만약 jQuery일 뿐이라면 장식이 없기 때문에 CSS도 입력할 것입니다.
방금 h2에classRelatedProduct_title를 추가했기 때문에 아래 CSS로 처리합니다.

/* 関連商品見出し用CSS */
.RelatedProduct_title{
    font-weight: bold;
    font-size: 2rem;
    border-top:1px solid #ccc;
    border-bottom:1px solid #ccc;
    padding:.5em;
    margin: 2em 0 1em;
}

이렇게 되면 RelatedProduct-product_area에는 h2로 관련 상품의 제목이 추가된다.
샘플 입력
화면 관리의 JavaScript에서 가져오기 관리

$(function() {
  $('#RelatedProduct-product_area').prepend('<h2 class="RelatedProduct_title">関連商品</h2>');
});

관리 화면의 CSS에서 입력 관리

/* 関連商品見出し用CSS */
.RelatedProduct_title{
    font-weight: bold;
    font-size: 2rem;
    border-top:1px solid #ccc;
    border-bottom:1px solid #ccc;
    padding:.5em;
    margin: 2em 0 1em;
}

최후
관련 상품 플러그인은 이미 표준적으로 설치할 수 있으니 본 글을 꼭 이용하시기 바랍니다.