Task:

Add custom short code to filter from woo commerce products and Dokan vendors using these
dropdown filters.
Artist menu

- By country
o {list of all countries}
o By name

Artwork menu

- By type
o Oil
o Acrylic
o Watercolor
o Mixed-media
o Spray-paint
o Gouache
o Other
- By category
o Abstract
o Animals, Birds, & Fish
o Anime & Manga
o Astronomy & Space
o Blueprints
o Buildings & Architecture
o Cars
o Cartoons
o Celebrities
o Childrens Art
o Comics
o Contemporary art
o Entertainment
o Ethnic, Cultural, & Tribal
o Fantasy & Mythology
o Fashion
o Flowers, Plants, & Trees
o Food & Beverage
o Gaming
o Holidays & Occasions
o Humor & Satire
o Inspirational
o Japanese & Asian
 o Landscapes & Nature
o Maps
o Military
o Minimalistic
o Movies
o Music
o Patterns
o People & Figures
o Places & Travel
o Planes
o Politics & Patriotism
o Religion, Philosophy, & Astrology
o Retro
o Science & Technology
o Space
o Sport
o Sports & Hobbies
o Still Life
o Text Art
o Travel
o Tv shows
o United States
o Vehicles & Transportation
o Vintage posters

Add extra PHP or JS code on top of Woocommerce Dokan source code to show a chosen
product image in our existing custom roomscene html file that is written with html, css, js, and
Fabricjs. The code modification should not be overwritten by future Dokan updates. The code
should only be applied on top of woocommerce and Dokan original source code, so that it
doesn’t modify or delate any of Dokan’s default source code.
The code cannot interfere with the site’s responsive design.
Design the code flow so that when user clicks on the “show artwork in room” button in a
product page, it takes the dataURL of the product image, pass it to a random roomscene html
file and open that webpage in new tab. Vice versa, when user is in a roomscene, allow them to
click on a button to pick a piece of artwork and place that artwork’s image inside that
roomscene.
Find artwork for room:

When user clicks on Add artwork, open up a modal with 2 options:

- Upload your own artwork

- Choose an artwork from Artlyss Marketplace

When user clicks on “Choose an artwork from Artlyss Marketplace” open a modal with the Artwork
menu users can choose artworks based on the dropdown filters with checklist:

Please go to this link to see our design:

https://www.figma.com/file/KxQCNUKD3sUCparnYP7RMU/Untitled?node-id=0%3A1

Users can check on boxes to filter the artworks. After user clicks Ok, filter the artworks based on their
preferences and pick a random artwork from the group of artworks that meet the requirements. If no
artwork meets the requirements, simply select a random artwork and place it inside the roomscene.

You should use the product categories from woo commerce to filter from.