Implementation and Architecture of a Shop Storefront Decoration System Using Drag‑and‑Drop, TypeScript, and Gulp

Background

The new‑car e‑commerce storefront displays merchant products, promotions, and contact information to improve user experience and capture leads; a backend editor allows merchants to customize the page layout efficiently, reducing development cost.

Core Modules and Areas

The editor consists of three zones and twelve modules (the home‑screen splash appears only on mobile). The zones are:

Module area – shows the system modules available to the merchant.

Preview area – provides a live, WYSIWYG view of the page.

Edit hotspot – lets the merchant modify module properties such as product selection, carousel images, and custom URLs.

Implementation of the Decoration Page

Modules are dragged using mouse events. The basic flow is: mouse down → create a clone of the module → track mouse movement → update the clone’s position → determine the insertion point in the preview area → on mouse up, insert the clone into the target location and clean up temporary elements.

Key code snippets:

$(".model").on('mousedown', function(ev){ /* start drag */ });

$(document).on('mousemove', function(ev){ /* move clone */ });

$(document).on('mouseup', function(ev){ /* drop and insert */ });

During dragging, the script calculates offsets, creates a temporary placeholder ( #tmpDomTips ), and decides where to insert the module based on the cursor’s position relative to existing modules.

Backend Processing Solution

The backend is written in TypeScript, which offers static typing, interfaces, generics, classes, and enums—features familiar to Java developers. A tsconfig.json file defines compilation options (module system, target ES5, strict null checks, included packages, output file, etc.).

{
  "compilerOptions": {
    "module": "system",
    "target": "es5",
    "noImplicitAny": false,
    "strictNullChecks": true,
    "types": ["jquery", "lodash"],
    "outFile": "decorate_all.min.js"
  },
  "exclude": ["node_modules"],
  "include": ["src/main/webapp/js/decorate"]
}

TypeScript files are compiled with the tsc command, producing a single bundled JavaScript file that can be referenced in the browser.

Build Tools

Gulp automates the build process. The gulpfile.js imports gulp , gulp-typescript , gulp-uglify , and gulp-clean . It defines source and destination paths, a clean task, a default task (clean → compile → uglify → output), and a debug task (clean → compile without uglify).

const gulp = require('gulp');
const ts = require('gulp-typescript');
const tsProj = ts.createProject('tsconfig.json');
const uglify = require('gulp-uglify');
const clean = require('gulp-clean');
const tsPath = './src/main/webapp/js/decorate/typescript/**/*.ts';
const dist = './src/main/webapp/js/tsBuilt/';

gulp.task('clean', function(){
  return gulp.src(dist).pipe(clean());
});

gulp.task('default', ['clean'], function(){
  return gulp.src(tsPath)
    .pipe(tsProj())
    .pipe(uglify())
    .pipe(gulp.dest(dist));
});

gulp.task('debug', ['clean'], function(){
  return gulp.src(tsPath)
    .pipe(tsProj())
    .pipe(gulp.dest(dist));
});

Running gulp executes the default task, while gulp debug compiles without minification for easier debugging.

Notes and Future Expectations

Important points include the need to compile TypeScript to JavaScript before browser execution and the requirement to use the system or amd module format with an outFile for bundling. Looking ahead, the author envisions VR‑style storefronts enabled by 5G, offering immersive car‑showroom experiences.

References

https://typescript.bootcss.com/

https://www.tslang.cn/docs/home.html

https://www.gulpjs.com.cn/docs/api/concepts/