DEV Community

ogbotemi-2000
ogbotemi-2000

Posted on

CC-Shoes: An innovative ecommerce website for buying and personalizing sneakers with an engaging menu design

This is a submission for the Wix Studio Challenge .

What I Built

An interactive eCommerce website for sneakers resale that has engaging visuals and better navigation design. It further allows for customization of ordered shoes.

It further provides a login functionality to store the session of the user for when he/she adds either wants to custom designs to the sneakers or visit the basic profile page.

Demo

https://oogbotemi.wixstudio.io/cc-shoes

Landing Page

screenshot of the landing page without the shoes' hover animations shown

Footer

screenshot of the of the footer with the 3d text effect and brand logo shown

Adaptive, grid-like navigation

Expanded state of grid-like innovative and adaptive menu design and animation

Custom design section

View of sticky controls panel for specifying image to print on realistic forms of uploaded shoes images

Responsive section grid

  • Mobile

    Mobile view of section grid on homepage

  • Tablet

    Tablet view of section grid on homepage

  • Desktop

    Desktop view of section grid on homepage

It can be observed that the menu in the header adapts in the three screenshots above, here is a fourth as regards the custom menu design

Adaptive menu design

Doing away with the good'ol ha[r]mburger menu for an adaptive and more aesthetic one

Development Journey

  1. ### To toggle the grid menu animation behaviour with custom CSS The concise code below goes in the onReady callback in the masterPage.js file and it ensures different animation behaviours for the squares in the grid menu.
  2. They initallly animate in like cards with the next being either twice the width or height of the previous two.
  let track_click=0;
  explore = $w('#explore-pane'),
  $w('#open-explore').onClick(_=>{
      // [1, 2].forEach(n=>$w('#wishliststat'+n).label = /*wishlist count*/+' items added'),
      ++track_click,
      explore.customClassList.remove('hide'),
      explore.customClassList.add('show', 'menu')
  }),
  $w('#close-explore').onClick(_=>{
      explore.customClassList[track_click===2
        ? (track_click=0, 'remove') : 'add']('hide'),
      explore.customClassList.remove('show', 'menu')
  })
Enter fullscreen mode Exit fullscreen mode
  • The squares in the grid appear staggered when clicked a second time between clicks only to animate neatly into position
  1. Smoothly show hidden links upon login Some buttons such as 'logout' and 'profile' are hidden to avoid distractions and only show after successful login. Velo's authentication.onLogin and authentication.onLogout methods make this very easy, secure and sure to do Also, obtaining and showing member login username or email is straightforward without needing to handle forms.
import { authentication, currentMember } from "wix-members-frontend";

const member =()=>currentMember
  .getMember({fieldsets: [ 'FULL' ]})
  .catch((error) => {
    console.error(error);
  });

function loggedIn() {...}
function loggedOut() {...}

authentication.onLogin(loggedIn), authentication.onLogout(loggedOut)
Enter fullscreen mode Exit fullscreen mode
  1. Automatic code-syncing between IDE and editor This was a notable boost to my development of the site as I could write code once in the IDE and design, try prototypes of layouts almost immediately in the editor. > Kudos to the devs for idea to include that along with collaborations without collisions.

Wix Members area
Wix Forms
'wix-data'
'wix-members-frontend'
File upload API
Wix stores API
CMS

Challenges Faced

Making custom CSS work

I had to see what transformations Wix does to the custom classes to find a workaround as well as to know what works and what doesn't

Adding sections to the global area for reusability

This stumped me. Adding them always makes it hard to stack at the top z-index

<!-- Thanks for participating! →

Top comments (0)