쇼핑Ease

Wix Studio Challenge에 제출한 작품입니다.

내가 만든 것

저는 Wix Studio를 사용하여 ShopEase라는 완전한 기능을 갖춘 전자상거래 웹사이트를 구축했습니다. ShopEase는 친환경 제품, 특히 재사용 가능한 가방을 홍보하고 판매하는 데 중점을 둡니다. 이 웹사이트는 주요 제품 섹션, 홍보 배너 및 원활한 탐색 기능을 갖춘 동적 홈페이지를 갖추고 있습니다.

데모

https://swetakanguri.wixsite.com/shopease

개발 여정

Wix Studio의 JavaScript 개발 기능 활용
저는 Wix Studio의 강력한 JavaScript 기능을 활용하여 ShopEase 웹사이트의 기능과 상호작용성을 향상시켰습니다.

사용자 정의 JavaScript 기능: 호버 효과 및 동적 콘텐츠 업데이트와 같은 대화형 요소를 추가하기 위해 사용자 정의 JavaScript를 구현했습니다.

자바스크립트
배너 텍스트에 대한 호버 효과:

자바스크립트
코드 복사
// 마우스 오버 시 배너 텍스트 변경
$w.onReady(함수 () {
$w("#bannerText").onMouseIn(() => {
$w("#bannerText").text = "기회를 놓치지 마세요 - 기간 한정 혜택!";
});

$w("#bannerText").onMouseOut(() => {
    $w("#bannerText").text = "Summer Sale - Up to 50% Off";
});

});
이 스크립트는 사용자가 #bannerText 위로 마우스를 가져가면 텍스트를 변경하여 사용자 상호 작용을 기반으로 동적 콘텐츠를 제공합니다.

동적 제품 목록:

자바스크립트
코드 복사
// 제품 데이터를 동적으로 가져오고 표시합니다
'wix-data'에서 wixData 가져오기;

$w.onReady(함수 () {
wixData.query("제품")
.find()
.then((결과) => {
let items = results.items;
items.forEach((제품) => {
//페이지에 상품 상세정보 표시
$w("#productList").append(

탐색 메뉴 활성화:

자바스크립트
// 현재 페이지를 기준으로 탐색 메뉴 항목 활성화
$w.onReady(함수 () {
let currentPage = window.location.pathname;
$w("#navMenu").forEach((menuItem) => {
if (menuItem.link === currentPage) {
menuItem.activate();
}
});
});
이 스크립트는 현재 페이지 URL에 해당하는 탐색 메뉴 항목을 활성화하여 사용자에게 사이트에서의 현재 위치에 대한 시각적 피드백을 제공합니다.

// 예: 마우스 오버 시 배너 텍스트 변경
$w.onReady(함수 () {
$w("#bannerText").onMouseIn(() => {
$w("#bannerText").text = "기회를 놓치지 마세요 - 기간 한정 혜택!";
});

$w("#bannerText").onMouseOut(() => {
    $w("#bannerText").text = "Summer Sale - Up to 50% Off";
});

});

활용되는 API 및 라이브러리

Wix Velo(Corvid): 맞춤형 JavaScript 개발에 활용되어 고급 상호 작용 및 데이터 처리가 가능합니다.
Wix 에디터: 시각적 사용자 정의 및 레이아웃 디자인에 사용됩니다.
Wix Stores API: 제품 데이터를 관리하고 웹사이트에 정보를 표시하기 위해 통합되었습니다.
'wix-stores-backend'에서 wixStoresBackend 가져오기;

// Wix Stores API에서 제품을 가져오는 함수 예시
비동기 함수 fetchProducts() {
시도해보세요 {
// Wix Stores API를 사용하여 제품 쿼리
const 제품 = wixStoresBackend.products.query()를 기다립니다
.limit(10) // 반품되는 제품 수를 제한합니다
.find();

    // Process the products data
    products.items.forEach(product => {
        console.log(`Product Name: ${product.name}, Price: ${product.price}`);
        // Further processing or display logic can be added here
    });

    return products.items; // Return the products array if needed
} catch (error) {
    console.error('Error fetching products:', error);
    throw error; // Handle or rethrow the error as needed
}

}

// 사용예
가져오기제품()
.then(제품 => {
// 필요에 따라 제품 데이터를 처리합니다
console.log('가져온 제품:', products);
})
.catch(오류 => {
// 오류 처리
console.error('제품 가져오기 오류:', error);
});

팀 제출물: https://dev.to/sweta_kangurisonulkar_ 제출물 게시 및 크레딧 Sweta Kanguri Sonulkar

위 내용은 쇼핑Ease의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!