vuestorefront / vsf-default

Vue Storefront Default theme. Always Open Source, MIT license. Made with :green_heart: by Vue Storefront. (please consider vsf-capybara instead)

vsf-default

Vue Storefront Default theme (please consider vsf-capybara instead)

Stay connected

🎉 Current status: Production ready

The design

This theme is basic template of typical eCommerce for a fashion industry. In the project we used Material Icons.

Here you can read more about the process of designing PWA for eCommerce.

The design is available in open source in the Figma file format under the URL https://www.figma.com/file/VKyqbHFI55TKIKcQlFLiVpVF/Vue-Storefront-Open-Source.

Browser Compatibility

• last 2 Chrome versions
• last 2 Firefox versions
• last 2 Edge versions
• modern browsers

🔌 Installation

To be able to use new Default theme in your Vue Storefront installation, you need to:

1. Install lerna globally:

   npm install -g lerna
   

   or

   yarn global add lerna
   

2. Configure vsf-default repository as a git submodule in theme path of your Vue Storefront workspace, and then track master branch:

   git submodule add -b master [email protected]:DivanteLtd/vsf-default.git src/themes/default
   

3. Fetch all the data:

   git submodule update --init --remote
   

4. Update Vue Storefront configuration by copying local.json file from vsf-default to root config directory.

5. Update TypeScript compiler option in tsconfig.json in root directory: change value for compilerOptions.paths.theme/* from default theme ["src/themes/default/*"] to brand new Default theme: ["src/themes/default/*"].

6. Download all dependencies and start development server:

   lerna bootstrap && yarn dev
   

7. That’s all! Now after opening your development server (http://localhost:3000 by default) you should see Vue Storefront with Default theme! 🎉

Troubleshooting

After git submodule add -b master [email protected]:DivanteLtd/vsf-default.git src/themes/default you see message: 'src/themes/default' already exists in the index

That is shown because directory already exist or if you removed it then you need to remove it from git index git rm -r --cached src/themes/default

The screenshots

vsf-default's Issues

Sometimes additional fields appear in the Compare table.

Current behavior

Sometimes additional fields appear in the Compare table and description contains < p > tag

Expected behavior

Do not display unneeded fields and remove < p > tag

Steps to reproduce the issue

1. Add products to compare
2. Remove any product
3. Go to any PDP and add the product to Compare list again
4. Open the Compare list
5. Repeat steps if necessary

Can you handle fixing this bug by yourself?

• YES
• NO

Environment details

• Browser:
• OS:
• Code Version:

Additional information

[Bug] iOS - after selecting 'sort by' side swipe is possible

Current behavior

On iOS after selecting 'sort by' option the page is zoomed and side swipe is possible.

Expected behavior

There should not be possibility to side swipe the page after selecting 'sort by' option.

Steps to reproduce the issue

1. go to any category page on iOS
2. press 'Latest' on the top of the page
3. select low to high or high to low and press 'done'
4. try to side swipe and see the error

Can you handle fixing this bug by yourself?

• YES
• NO

Environment details

iOS

Additional information

Hide price of bundle and group products added to the wishlist.

What is the motivation for adding/enhancing this feature?

When bundle or group products are added to wishlist from PLP, $0 is displayed on the wishlist.
In this case, it is better to hide the price.

What are the acceptance criteria?

Can you complete this feature request by yourself?

• YES
• NO

Additional information

"See our bestsellers" on non existing page.

Current behavior

After redirecting to page-not-found, unnecessary section "See our bestsellers" is displayed.

Expected behavior

Remove "See our bestsellers" section.

Steps to reproduce the issue

1. go to https://demo.storefrontcloud.io/test.html

Can you handle fixing this bug by yourself?

• YES
• NO

Environment details

• Browser:
• OS:
• Code Version:

Additional information

[Bug] iOS- filter option is not working correctly

Current behavior

On iOS after selecting filter option and pressing the 'Filter' button the tab is not closing and user needs to scroll up in order to close it

Expected behavior

After selecting filter option and pressing 'Filter' button the tab should close and list of filtered products should appear

Steps to reproduce the issue

1. go to any product listing page on iOS
2. press 'Filter'
3. select any filter option
4. scroll down to the 'Filter' button and press it
5. see the error

Can you handle fixing this bug by yourself?

• YES
• NO

Environment details

iOS

Additional information

Cart sidebar not closing when proceeding to checkout

Steps to reproduce the issue

1. Open https://next.storefrontcloud.io/
2. Add any product to cart
3. Proceed to checkout

Current behavior

Checkout is opened underneath, but cart sidebar remains open
Important! Sometimes when we open fresh browser window/cart, bug wont occur on the first try. However, when we proceed trough steps again, it will pop up.

Expected behavior

Cart should be closed every time we proceed to checkout

Can you handle fixing this bug by yourself?

• YES
• NO

Environment details

• Browser: Chrome, Firefox
• OS: Ubuntu

add capybara theme

What is the motivation for adding/enhancing this feature?

It would be nice to add information about capybara theme to default. Maybe as popup 🤷

What are the acceptance criteria?

• - user can see information about capybara theme and can easily remove it

Can you complete this feature request by yourself?

• YES
• NO

Additional information

It is not possible to order virtual products via Instant checkout.

Current behavior

It is not possible to order virtual products via Instant checkout.
Following errors in dev console:

Note:

Instant Checkout is not available on demo..

Expected behavior

Users should be able to place an order via instant checkout.

Steps to reproduce the issue

1. Add virtual product to the cart
2. Open cart
3. Press Instant Checkout

Can you handle fixing this bug by yourself?

• YES
• NO

Environment details

• Browser:
• OS:
• Code Version:

Additional information

Transform theme's assets to .webp & optimize losyless current ones

What is the motivation for adding/enhancing this feature?

Perf boost

What are the acceptance criteria?

• Prepare smaller versions of images for tablet & mobile
• Transform assets used on website to .webp (omit ones from manifest.json)
• Use picture tag for .webp with fallback to original
• Use srcset

Can you complete this feature request by yourself?

• YES
• NO

After clicking "browse our catalog" link - wishlist sidebar is not automatically closed.

Current behavior

If user opens empty wishlist sidebar and clicks on browse our catalog link - sidebar will not automatically close.

Expected behavior

Wishlist sidebar should close automatically when user is redirected to Home page.

Steps to reproduce the issue

1. Open empty wishlist sidebar
2. Click browse our catalog link

Can you handle fixing this bug by yourself?

• YES
• NO

Environment details

• Browser:
• OS:
• Code Version:

Additional information

Iphone - scroll doesn't work in search tab

Current behavior

User can't scroll in search tab on iphone

Expected behavior

Steps to reproduce the issue

Can you handle fixing this bug by yourself?

• YES
• NO

Environment details

• Browser:
• OS:
• Code Version:

Additional information

After selecting a category in the search results, all results disappear.

Current behavior

When you select a category in the search results, all results disappear.

Expected behavior

Results should be visible.

Steps to reproduce the issue

1. Open search bar
2. Press top
3. Select one of categories, e.g Bras & Tanks

Can you handle fixing this bug by yourself?

• YES
• NO

Environment details

• Browser:
• OS:
• Code Version:

Additional information

iPhone 5s Chrome - wrong styling in header and product listing

Current behavior

Loding the page on iPhone 5s chrome results with wrong styling in header and product listing.
Issue occurs on both https://demo.vuestorefront.io/ and https://test.storefrontcloud.io/
I haven't been using physilal device, I used browserstack.

Can you handle fixing this bug by yourself?

• YES
• NO

Which Release Cycle state this refers to? Info for developer. (doesn't apply to Next)

Pick one option.

• This is a bug report for test version on https://test.storefrontcloud.io - In this case Developer should create branch from develop branch and create Pull Request 2. Feature / Improvement back to develop.
• This is a bug report for current Release Candidate version on https://next.storefrontcloud.io - In this case Developer should create branch from release branch and create Pull Request 3. Stabilisation fix back to release.
• This is a bug report for current Stable version on https://demo.storefrontcloud.io and should be placed in next stable version hotfix - In this case Developer should create branch from hotfix or master branch and create Pull Request 4. Hotfix back to hotfix.

Environment details

• Browser: Chrome
• OS: iPhone 5s

Additional information

newsletterpopup dose not show after setting it to true

HEllo ,
i need to show newsletterpopup modal after certain amount of time ,
i enabled it in module/ui-store/index.ts but it dose not show up.
any help would be apreciated.

Thank you in advance

Brest regards

After pressing "Proceed to checkout" button, when Cart sidebar is open, sidebar does not automatically close.

Current behavior

If user opens Cart sidebar and at the same time presses "Proceed to checkout" in pop-up notification, after redirecting to the checkout the sidebar will not automatically close.

Expected behavior

Cart sidebar should close automatically when user is redirected to the checkout.

Steps to reproduce the issue

1. Add product to the cart
2. Open cart
3. Press Proceed to checkout button in pop-up notification
   

Can you handle fixing this bug by yourself?

• YES
• NO

Environment details

• Browser:
• OS:
• Code Version:

Additional information

permission problem[when you try to install theme by instruction]

I have done first step and on the second step when I try to execute the git submodule add -b master [email protected]:DivanteLtd/vsf-default.git src/themes/default code it says "make sure you have the correct access rights and repository exists" what can went wrong

port fixes from 1.11.3

What is the motivation for adding/enhancing this feature?

This repo is created based on version 1.12 and we need to keep it sync to the release 1.12.

What are the acceptance criteria?

• port all fixes related to 1.12 vuestorefront/vue-storefront#4291

Can you complete this feature request by yourself?

• YES
• NO

Additional information

QA Session

Make a QA Session and create an issue for each found bug.