이번시간에서는 쇼핑몰에 등재되어있는 상품 중, 상품이미지가 없는 데이터를 HTML과 자바스크립트를 이용하여 골라내는 방법에대해서 내용공유드리고자 포스팅합니다.
* 방법은 아주여러가지방법이있겠지만 허접한 자바스크립트 지식으로 아주간단하게 만들어봤습니다.
업무내용은 아래와같습니다.
운영중인 상품데이터 중 상품이미지 (썸네일) 이미지가 없는 데이터를 골라서 재 보정해야하는 경우 입니다.
이때, 단일품목으로 운영하는 쇼핑몰이라면 상품가짓수가 몇가지되지않기때문에 바로 눈에띄고, 또 수정해야할 데이터도 바로 확인되기때문에 간단합니다만, 몇백가지, 몇천가지 아니 어쩌면 큰쇼핑몰에서는 몇만가지의 상품데이터를 가지고있는 쇼핑몰도 있을겁니다.
몇천가지,몇만가지의 상품중에서 상품이미지가 엑박(엑스박스) : 서버에서 해당이미지가없어진경우, 손상된경우
해당이미지를 찾기위해서 사람 눈으로 일일히 검사한다는건 아무래도 무리가있지않을까 싶습니다.
명령어 또는 프로그램 또는,, 어떠한 방법을통해서 컴퓨터가 알아서 찾아준다면 굉장히 편리한방법이지않은가 싶어
고민을 많이해봤습니다.
이걸 해결하기위해 프로그램을 만들기에는 너무 일이 커지기때문에 저는 아주 간단하고 심플하게 html 과 자바스크립트를 이용해야겠다는 생각을 했습니다.
html 이라는 게 웹페이지를 만드는 만드는 언어로 서버에두면, 웹사이트가 되겠지만
일반 사용자가 사용하는 내부 로컬에서 만들게되면 유용한 나만사용할수있는 페이지가 되겠지요.
그리고 아무래도 웹서버에서 동작하는것보다 내부로컬에서 해당 html 이 실행된다면 아무래도 처리속도가 빠르지않을까 하는 생각도 들었습니다
자, 서론이 길었습니다.
이것을 준비하기위해서는 우선 필요한 기본 베이스의 데이터가 필요합니다.
준비물
1.상품 데이터 식별이가능한 상품코드 (선택)
2.상품 데이터 식별이가능한 상품명 (선택)
3.이미지경로 (필수)
위의 준비물에서 1번과 2번은 둘중하나만 있어도 무방합니다.
자체 개발환경에서 구축된 쇼핑몰이라면, 데이터베이스 명령어 ORACLE , MYSQL 에서
SELECT (상품코드) , (상품이미지)
FROM (아이템테이블)
위와같이 데이터를 추출하여주시고,
임대형 쇼핑몰 또는 타 업체로부터 서비스를 받아 운영되는 쇼핑몰이라면 (고도몰,카페24 등..)
관리자페이지에서 상품 엑셀 추출하기 기능을 통해 자료를 받아주세요.
분명,, 해당기능은 아주기본이되는 기능이기때문에 분명 해당기능은 있을거라고 생각됩니다..
저의경우에는 데이터베이스를 직접 다룰수있어 데이터를 추출하였습니다.
아래는 예시입니다.
위와같이 상품코드와, 상품이미지경로를 추출하였습니다.
그리고 위에서 언급드린 html과 자바스크립트를 만들어줍니다.
위에 입력된 스크립트는 아래의 파일 또는 복사하시어 준비해주세요.
<html>
<head>
<scrpt src="https://code.jquery.com/jquery-1.9.1.min.js">
<script>
$( document ).ready(function() {
alert("스크립트가동작합니다");
$("img").each(function() {
var imgTag = $(this);
var imgWidth = imgTag.width();
//alert(imgWidth); 이미지 사이즈 몇인지확인하는법
if (imgWidth == 0) {
// 이미지 엑스박스는 이미지만 숨긴다
imgTag.hide();
} else {
// 이미지 존재하는 것은 전체를 숨긴다
var test3 = imgTag.parent();
test3.hide();
}
});
});
</script>
</head>
<body>
추출데이터 대입
</body>
</html>
위와같이 준비를 해주시고, 위에 추출데이터 대입이라는 내용을 추출한데이터에 형식에맞춰 만들어주시면되겠습니다.
형식은 아래와같습니다.
<div class="test"> 상품코드 <img src="이미지경로"></div><br>
자 다시 엑셀로 돌아와서 위와같은형식을만들어보겠습니다
C열 : <div class="test">
D열 : <img src="
E열 : "></div><br>
그리고, concatenate라는 함수를사용하여 붙여넣을데이터를 만들어보도록하겠습니다.
그리고, F열에 있는 내용을 복사한뒤, 아까 메모장에 붙여넣도록합니다.
제가한내용은 아래의 html 파일 다운받아주시면되겠습니다.
자 이제 끝났습니다
이걸 동작시키기만하면 끝납니다.
크롬을통해서 실행시켜주세요.
우선 크롬창을 띄워주세요.
그리고 다운받아주신 파일을 크롬위에 놓습니다.
그럼, 실행이되게됩니다.
그리고 이미지가 없는 데이터만 상품코드가 남게됩니다.
제 예시 데이터에서, itemcode1 과 itemcode2는 실제 있는이미지이고, itemcode3과 itemcode4는
없는 이미지주소입니다.
그래서 결과값으로 itemcode3과 itemcode4 라는 값이 반환되었습니다
위의스크립트를 약간더 설명드리자면
처음에 aalert("스크립트가동작합니다"); 라는 경고창 넣어 스크립트가 동작하는지를 첫번째보고,
그리고
width 가로 사이즈가 0이 아닌 데이터 ( if (imgWidth == 0) { )
는 표시하지않게 하이드(숨김) 처리하였습니다.
제경우 상품데이터가 3만가지를 가지고 한꺼번에 실행시켜봤으나 리소스부족인지, 스크립트가 잘못된건지 데이터양이많아서 실행되지않고 5천개 가량 6번 대입하여 실행시켰습니다.
프로그래밍을하여 보다 더 좋은방법이있을수도있겠지만.. 제경우에는 개발을하기위해서는 실력도부족하고 아주빠르게 처리했어야하는 업무이기때문에 html과 자바스크립트를통하여 작업하였습니다.
분명 빈번한 업무는 아닙니다만 대형쇼핑몰에서는 정기적으로 체크해줘야하는 업무 입니다.
이유는 상품이미지가 없어서 고객들에게 판매될상품이 안보이기때문에 매출과도 영향이있지않을까싶습니다.
그래서 정기적으로 체크해줘야하는 이유중에 하나입니다.
그리고, 내부서버만을가지고 이미지를 운용하시는경우도있겠지만 외부이미지를 활용하시는경우도있기때문에
활용한 외부이미지가 없어지게되면 엑스박스로 쇼핑몰에 표시되기때문에 이는 보정해줘야한다고 생각됩니다.
활용도가 높으신분들 중 말씀드리고싶은내용은
*저는 구글스프레드시트에서 해당형식을 만들어놓고 바로 복사하여 html 을 만든뒤 바로실행시킬수있도록 스프레드시트를 셋팅해두었습니다.
그리고 정기적으로 상품데이터만 내려받아 대입하여 실행시킬수있도록 해두었습니다.
그럼 바로 이미지가없는 상품데이터가 확인되기때문에 바로바로 수정하기 용이 하겠죠
해당포스팅글은 사실 개발자나 코딩관련업무를 하시는 분들에게는 위내용보다 더 효과적인 스크립트나, 방법이있겠지만 그런분들은 상품이미지에대해서 신경을쓸일은없어보이고, 이런업무들은 웹디자이너 (포토샵만 다루시는분) 또는 상품관리하시는 MD 또는 운영자 분들이 관리하실만한 업무로보입니다만 그런분들은 또 간단하지만 위와같은 스크립트를 공부하기에는 좀 버거울수있어서 포스팅하였습니다.
포스팅글에서 부족하거나 좀더 필요한내용이있다면 댓글로 남겨주세요.
'HTML' 카테고리의 다른 글
| 홈페이지/쇼핑몰 홈페이지 파비콘 웹페이지 대표 아이콘 만들기 (1) | 2020.11.12 |
|---|---|
| 개발 첫 단계 홈페이지 만들기 1탄 - 윈도우10 Nginx + php 연동 (0) | 2020.10.15 |
| 도메인 구매 부터 등록까지 [홈페이지/쇼핑몰 구축] (0) | 2020.03.25 |
| [HTML] 쇼핑몰 상품 이미지 대량 다운받기 (feat.JavaScript)_서버이관 (브라우저 캐시이용) (2) | 2019.11.29 |
| 로컬 DNS 서비스 강제변경 host 파일 수정 (0) | 2019.11.28 |
댓글