Skip to content
Permalink
Branch: master
Find file Copy path
Find file Copy path
Fetching contributors…
Cannot retrieve contributors at this time
204 lines (113 sloc) 8.78 KB

URL Parameters

All URL parameters must be prefaced by an &, with the the exception of the first parameter which must be prefaced with a ?. Never use two ? in the same URL.

Examples

Provider's locked in experience

https://app.trybaker.com/shop/140?provider=140

https://app.trybaker.com/shop/140?provider=140&hideProviderInfo=true&av=true

Chain/brand locked in experience

https://app.trybaker.com/brand/2?chain=140

Store Locator

https://app.trybaker.com/location/?producer=1

Widget embed

https://app.trybaker.com/shop/140?provider=140&widget=true

https://app.trybaker.com/shop/140?provider=140&widget=true&hh=70

Organic user experience

https://app.trybaker.com/shop/140

Locked in experiences

Parameter Example Required Options Purpose
provider provider=140 YES - if locking in to a provider's experience A provider's ID. Locks the user in to a specific provider's experience (i.e. will use brand colors and prevent the user from seeing content from other Baker providers). NOTE: This should not be used in conjunction with the brand parameter.
brand brand=2 YES - if locking in to a chain's experience A corproate chain ID. Locks the user in to a specific chains's experience (i.e. will use brand colors and prevent the user from seeing content from other Baker chains/providers). NOTE: This should not be used in conjunction with the provider parameter.
producer producer=2 YES - for store locator A producer ID. Filters the provider list to providers associated with the producer. Filter's all provider's menus to items associated with that producer.

UI

Parameter Example Required Options Purpose
av av=1 NO 1 or 0 Skips the age verification modal if set to 1
hideProviderInfo hideProviderInfo=true NO true or false Hides the provider info (name, hours, address, etc.) that is normally on the provider's menu page. NOTE in an upcoming release, this will hide the entire sidebar on desktop.
hideSidebar hideSidebar=true NO true or false Does the same thing as hideProviderInfo but will also hide the sidebar on the brand page

Provider list

Parameter Example Required Options Purpose
filter filter=open filter=open+ordering filter=open%20ordering NO See filters list. Individual filters must be separated by a + or %20 Will apply provider filters to a provider list upon load. NOTE these filters can be cleared by the user.

Provider Menus

Direct to a specific category by adding /category to the URL: https://app.trybaker.com/shop/140/edibles?provider=140. See the categories list for a full list of categories.

Parameter Example Required Options Purpose
filter filter=img filter=cbd+thc filter=cbd%20thc NO See filters list. Individual filters must be separated by a + or %20 Will apply product filters to a menu upon load. NOTE these filters can be cleared by the user.
lockToSearch lockToSearch=kush lockToSearch=strawberry+kush lockToSearch=strawberry%20kush NO ords separated by a + or %20 This will limit the menu to only contain search results from the term. Users can not clear this search.
search search=cheeba+chews search=cheeba%20chews NO Words separated by a + or %20 To load the menu up with a product search already in place. NOTE: Do not include any special characters, including but not limited to ,:'.$%. Only a + or %20 should be used in place of a between two words.
category category=edibles NO See categories list The menu will only show the user items in the selected category, and removes the category bar so the user can't switch categories.

Widget / Embeds

Parameter Example Required Options Purpose
kiosk kiosk=true NO true or false Will enable kiosk mode.
hh hh=70 hh=70+786,40 hh=70+786,0 YES - if embedded, and client's website has a fixed header See formatting section This allows us to position elements like modals with respect to a header that sits on top of our embedded app.
widget widget=true YES - if embedded true or false Enables provider's widget preferences and tells the app to include a suite of style fixes necessary for the app to work properly when embedded.

Category options

specials

flower

sativa

indica

hybrid

cbd

preroll

concentrate

cartridge

wax

extract

edible

drink

tincture

topical

clone

seed

accessory

gear

other

Filter Options

Product filters

f Featured products only

img Product must have a image

thc Product must have a THC percent

cbd Product must have a CBD percent

u Unit stock must be available

hg Half Gram stock must be available

s Sixteenth stock must be available

e Eighth stock must be available

q Quarter stock must be available

ho Half Ounce stock must be available

o Ounce stock must be available

to Two Ounces stock must be available

Provider filters

open Open stores only

ordering Stores with online ordering available

med Medical stores only

rec Rec stores only

specials Stores with active specials/promos

delivery Stores that offer delivery

shipping Stores that offer shipping

pickup Stores that offer pickup

All of the category options are also valid filters.

Header Height Param Formatting

The header height param has two options: a default value, and breakpoints. Both are optional, and you can have multiple breakpoints. The default value and each breakpoint must be separated by a +. To find the height of an element, see the determining height section.

Breakpoints

Breakpoints require two numbers: the width where it's applicable, and the height of the header at that width. They are represented as 786,40. Where 786 is the width of the screen/window where it's applicable, and 40 is the header's height. The values must be separated by a comma. Breakpoints will apply themselves when the device/window width is below or equal to that breakpoint. The smallest applicable breakpoint is the one that will be used.

Default

The default value will be used when there's no applicable breakpoint. If no default is provided, it will be set to 0. It does not need to be the first option, however if there are multiple defaults, only the last one will be used. For the sake of consistentcy it's suggested to do the default first, followed by any breakpoints.

Examples

Default only

hh=40 (Consistent 40 pixel header)

Default with one breakpoint

hh=70+786,40 (70 pixel header on larger screens and below 786 is 40 pixels)

hh=70+786,0 (70 pixel header on larger screens and no header below 786)

No default, with one breakpoint

hh=786,40 (No header on larger screens, 40 pixels below 786)

Default with multiple breakpoints

hh=70+1024,50+786,30 (70 pixel header on larger screens, below 1024 is 50 pixels, and below 786 is 40 pixels)

Determining height

To get the height of an element in chrome, press Command + Shift + C (Mac OS X) or Ctrl + Shift + C (Windows), and hover over the element. There should be a tooltip that looks something like div.header | 425x70. The second number is the height, so here our height would be 70 pixels. Press Command + Shift + C again to stop the hovering inspect.

Be sure that the highlighted blue (or blue and green) take up the entire height of the header. Areas highlighted in orange will not count towards the height, so if there's orange try hovering over a different part of the header. Empty areas near the edges of the header will be your best bet to find the right element.

If you are not seeing elements get highlighted, open the inspector (right click -> inspect), and in the top left of the inspector there should be a button of a square with a cursor. Click that, and hovering an element should highlight it.

You can’t perform that action at this time.