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

Footer

Adaptive, grid-like navigation

Custom design section

Responsive section grid

• Mobile

  

• Tablet

  

• Desktop

  

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

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.

• 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')
  })

• The squares in the grid appear staggered when clicked a second time between clicks only to animate neatly into position

2. 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(args, uS, elm) {
  isLoggedIn = !0, rmStasis(), uS=$w('#user'), 
  member().then(user=>{
    elm = [], ['loginLoader', 'profile', 'to-design', 'logout']
    .forEach((str, i, e)=>(elm.push(e=$w('#'+str)), e).customClassList[i?'add':'remove']('show')),
    signIn.link = '/profile',
    console.log('::LOGGED IN::', args, signIn.link),
    signIn.label = 'view profile',
    uS.text = user.loginEmail
  })
}

function loggedOut(args) {
  isLoggedIn = void 0, rmStasis(),
  signIn.label = 'sign in',
  ['#logout', '#profile'].forEach(str=>$w(str).customClassList.remove('show'))
}

authentication.onLogin(loggedIn), authentication.onLogout(loggedOut)

3. Showing loginEmail of signed in users in the grid menu

To speed up development with Velo, I made my showing/hiding states of elements via a CSS class that can be added or removed

4. 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 a section as global always makes it hard to stack at the top z-index

<!-- Thanks for participating! →