JavaScript 제품 카탈로그 응용 프로그램을 빌드하는 방법

고급기능 JavaScript 제품 카탈로그 응용 프로그램을 빌드하는 방법

추천0

페이지 정보

작성자 GrapeCity

작성일 2022-05-27 09:26 조회 525회 댓글 0건

본문

관련링크

제품 카탈로그는 세일즈와 마케팅의 필수 도구입니다.

이러한 카탈로그는 신규 고객을 확보하고 기존 고객을 유지하는 데 도움이 될 수 있습니다. 명료하고 호소력 있는 방식으로 제품 정보를 제공함으로써 사용자는 쉽게 여러분의 제품을 확인하고 정확한 정보를 습득할 수 있습니다.

이 블로그는 친숙한 Excel 방식의 스프레드시트 경험을 사용자에게 제공하는 JavaScript 스프레드시트 컴포넌트인 SpreadJS를 사용하여 온라인 제품 카탈로그를 만드는 방법을 보여줍니다.

수많은 통계 및 재무 함수를 지원하는 고속 계산 엔진과 더불어, 개발자가 셀 범위 템플릿(template_range)을 단일 셀 유형으로 정의하고 해당 템플릿을 셀에 적용하여 데이터 집합(data_expr)을 템플릿에 로드할 수 있게 하는 강력한 스파크라인인 RANGEBLOCKSPARKLINE(template_range, data_expr)이 광범위하게 사용되도록 만들 것입니다.

데모 파일을 다운로드하여 따라해 보세요.

데이터 소스 시트

데이터 소스 시트에는 다양한 제품과 관련된 데이터가 들어 있습니다. tbProducts라는 표에 있습니다.

이 표에는 이름, 카테고리, 가격, 등급 등과 관련된 정보가 들어 있습니다.

데이터 소스

템플릿 시트

이 페이지에는 카탈로그 시트에서 제품 목록을 만드는 데 사용되는 템플릿 범위가 들어 있습니다.

가장 먼저 할 일은 셀을 정렬한 다음 셀에 대한 바인딩 경로를 설정하는 것입니다.

SpreadJS setBindingPath 메서드를 사용하여 Javascript를 통해 이렇게 할 수 있습니다.

templateSheet.setBindingPath(0, 0, "Nr");
templateSheet.setBindingPath(0, 1, "Name");
templateSheet.setBindingPath(0, 3, "Price");
templateSheet.setBindingPath(0, 4, "Category");
templateSheet.setBindingPath(0, 5, "Description");
templateSheet.setBindingPath(0, 6, "Image");
templateSheet.setBindingPath(0, 7, "Review");
templateSheet.setBindingPath(0, 8, "Favorite");
templateSheet.setBindingPath(0, 9, "Rating");

SpreadJS Designer(데스크탑 템플릿 디자이너)를 사용하는 경우 다음 단계를 따라야 합니다. 이 디자이너는 다운로드에 포함되어 있으며 "\SpreadJS.Release.x.x.x\Designer\Designer Runtime" 폴더에서 설치할 수 있습니다.

데이터 → 시트 바인딩 → 필드 목록
Start 분기를 마우스로 가리킨 다음 녹색 + 버튼을 클릭하여 필드를 추가합니다. *필드는 "x" 버튼을 클릭하여 제거할 수 있고 분기 오른쪽에 있는 설정을 사용하여 수정할 수 있습니다.
템플릿 범위의 원하는 셀에 필드를 끌어옵니다.

템플릿

렌더 시트(카탈로그)

위 스크린샷과 같이 이 시트에는 4개의 기본 섹션이 들어 있습니다.

패널 기준 정렬

이 패널에는 제품 관련 데이터가 들어 있는 표의 순서를 변경하고 카탈로그 시트에서 제품 순서를 변경할 수 있는 버튼 목록이 있습니다.

디자이너를 사용 중인 경우 다음과 같이 수행합니다.

홈 → 셀 편집기 → 셀 유형
버튼 목록 클릭
항목의 텍스트 및 값과 버튼 목록 개체의 다양한 속성을 설정합니다.
항목 추가
확인 클릭

버튼 목록

아래 JavaScript 코드를 사용하여 버튼 목록을 추가할 수도 있습니다.

var cellType = new GC.Spread.Sheets.CellTypes.ButtonList();
cellType.items([{text:"Name (asc)",value:0},{text:"Name (desc)",value:1},{text:"Price (lowest)",value:2},text:"Price (highest)",value:3},{text:"Rating (lowest)",value:4},     {text:"Rating (highest)",value:5}]);
cellType.selectedBackColor("#0AA371");
cellType.selectedForeColor("#FFFFFF");
cellType.selectionMode(GC.Spread.Sheets.CellTypes.SelectionMode.single);// allows only 1 item to be selected
catalogSheet.getCell(3, 2).cellType(cellType);

ValueChanged 이벤트를 사용하면 버튼 목록 선택에 따라 데이터 소스 시트에 위치한 표의 순서를 변경할 수 있습니다.

//Sort by panel
catalogSheet.bind(GC.Spread.Sheets.Events.ValueChanged,function(type,args){
   if (args.row ==3 && args.col==2)//only check if the button list value has changed
  {
       var i = 1; var asc = true;
       switch(args.newValue){
           case 1:
           i= 1; asc = false;//sort by Name desc
           break;
           case 2:
           i= 3; asc = true;//sort by Price asc
           break;
           case 3:
           i= 3; asc = false;//sort by price desc
           break;
           case 4:
           i= 8; asc = true;//sort by Rating asc
           break;
           case 5:
           i= 8; asc = false;//sort by Rating desc
           break;
           default:
           i = 1; asc = true; //sort by Name desc    
           break;
           
      }
       spread.suspendPaint();
       //change the sorting
       spread.getSheetFromName("DataSource").sortRange(1, 0, 15, 9, true, [
      {index:i, ascending:asc}
      ]);
       spread.resumePaint();
  }
});

제품 목록

제품 목록은 제품 카탈로그의 가장 중요한 섹션입니다. 여기에는 제품 목록을 비롯하여 가격, 카테고리, 이름, 이미지 등과 관련된 정보가 들어 있습니다.

처음에 언급한 것처럼 RANGEBLOCKSPARKLINE을 사용하여 제품 목록을 만들겠습니다.

위에 언급한 템플릿(Template!A2:E7)을 수용하도록 셀 너비(B6:D10)를 변경한 후 아래와 같이 이 셀에서 수식을 설정합니다.

=RANGEBLOCKSPARKLINE(Template!A2:E7,OBJECT(tbProducts[#Headers],INDEX(tbProducts[#Data],index,SEQUENCE(COUNTA(tbProducts[#Headers]),1))))

이 경우 인덱스는 항목의 번호가 될 것입니다. 예를 들어, B6의 경우 인덱스는 1이 됩니다.

javascript만 사용하는 경우에는 다음 코드 행을 사용합니다.

//first product
sheet.setFormula(5, 1, "=RANGEBLOCKSPARKLINE(Template!A2:E7,OBJECT(tbProducts[#Headers],INDEX(tbProducts[#Data],1,SEQUENCE(COUNTA(tbProducts[#Headers]),1))))");

다른 셀의 경우에도 동일한 전략을 반복합니다.

선택한 항목

사용자가 SelectionChanged SpreadJS 이벤트를 사용하여 다른 항목을 클릭하면, 카탈로그의 오른쪽에 나타나는 항목이 달라지고 선택한 항목의 오른쪽 끝에 있는 "더하기" 기호의 배경은 초록색이 됩니다.

JavaScript에서 이렇게 만들기 위한 코드는 다음과 같습니다.

// select items
var row = 5, col =1;
catalogSheet.bind(GC.Spread.Sheets.Events.SelectionChanged, function (sender, args) {
const sheet = args.sheet;
const newRow = args.newSelections[0].row;
const newCol = args.newSelections[0].col;
if ((newRow <5 || newRow > 9)
  || (newCol < 1 || newCol > 3))
return;

//change the item appearing on the right panel            
var position = 3*(newRow - 5) + newCol;
sheet.suspendPaint();
sheet.setFormula(5, 5, "=RANGEBLOCKSPARKLINE(Template!H9:O21,OBJECT(tbProducts[#Headers],INDEX(tbProducts[#Data]," + position + ",SEQUENCE(COUNTA(tbProducts[#Headers]),1))))");

// change the color of the "plus" sign of the selected item
sheet.getCell(row, col).backColor("#dddddd");
sheet.getCell(newRow, newCol).backColor("#53b175");

sheet.resumePaint();
row = newRow;
col = newCol;

장바구니에 추가 버튼

장바구니에 추가 버튼은 최종적으로 항목을 장바구니에 추가하는 이벤트를 호출하거나 다른 전자 상거래 결제 기능을 호출하는 hyperlink 함수를 사용할 수 있음을 보여주는 간단한 버튼입니다. 이 버튼은 항목이 장바구니에 추가되었다는 알림을 보여줍니다.

// add cart button
var catalogSheet = spread.getSheetFromName("Catalog");

var rect3 = catalogSheet.shapes.add("addItem", GC.Spread.Sheets.Shapes.AutoShapeType.roundedRectangle, 782, 743, 260, 50);

rect3.hyperlink({
   command: function () {
   alert("You have added an item in your cart!");
  }
});
rect3.text('+ Add to cart');
var style = rect3.style();
style.fill = { type: GC.Spread.Sheets.Shapes.ShapeFillType.solid, color: 'rgb(83,177,117)'};
style.line.color = 'rgb(83,177,117)';
style.textFrame.hAlign = 1;
style.textFrame.vAlign = 1;
style.textEffect.font = "22px Calibri"
rect3.style(style);

지금까지 어떤 프론트엔드 프레임워크 또는 아키텍처 내에서든 사용할 수 있는 JavaScript 컴포넌트인 SpreadJS를 사용하여 제품 카탈로그를 만드는 방법을 알아보았습니다.

최종 제품 카탈로그