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.
https://app.trybaker.com/shop/140?provider=140
https://app.trybaker.com/shop/140?provider=140&hideProviderInfo=true&av=true
https://app.trybaker.com/brand/2?chain=140
https://app.trybaker.com/shop/140?provider=140&widget=true
https://app.trybaker.com/shop/140?provider=140&widget=true&hh=70
https://app.trybaker.com/shop/140
| 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. |
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. |
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. |
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. |
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. |
p (not ready / tested) |
p=1 |
NO | 1 or 0 |
Sets the user's browsing prescription to true so if they are viewing a menu with both med and rec available, it will default to the med menu. (not applicable to colocated stores, where the med and rec store have different provider IDs) |
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. |
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. |
specials
flower
sativa
indica
hybrid
cbd
preroll
concentrate
cartridge
wax
extract
edible
drink
tincture
topical
clone
seed
accessory
gear
other
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
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 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.
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.
hh=40 (Consistent 40 pixel header)
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)
hh=786,40 (No header on larger screens, 40 pixels below 786)
hh=70+1024,50+786,30 (70 pixel header on larger screens, below 1024 is 50 pixels, and below 786 is 40 pixels)
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.