{
    "componentChunkName": "component---src-templates-article-page-template-js",
    "path": "/ftw/ftw-product/",
    "result": {"data":{"markdownRemark":{"frontmatter":{"title":"FTW product","slug":"ftw-product","updated":"2021-09-30T00:00:00.000Z","category":"ftw-introduction","ingress":"This article introduces FTW-product and what's different compared to FTW-daily and FTW-hourly.","skills":null},"htmlAst":{"type":"root","children":[{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"FTW-product is a new Flex Template for Web. It's built with product\nmarketplaces in mind."}]},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"While FTW daily was about renting saunas and FTW hourly was about\nbooking Yoga teachers, FTW product is a conceptual marketplace called\nSneakertime to buy sneakers."}]},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"You can find the repository from here:"},{"type":"element","tagName":"br","properties":{},"children":[]},{"type":"text","value":"\n"},{"type":"element","tagName":"a","properties":{"href":"https://github.com/sharetribe/ftw-product","target":"_blank","rel":["noopener","noreferrer"]},"children":[{"type":"text","value":"https://github.com/sharetribe/ftw-product"}]}]},{"type":"text","value":"\n"},{"type":"element","tagName":"h2","properties":{"id":"differences-in-directory-structure","style":"position:relative;"},"children":[{"type":"element","tagName":"a","properties":{"href":"#differences-in-directory-structure","ariaLabel":"differences in directory structure permalink","className":["anchor","before"]},"children":[{"type":"element","tagName":"svg","properties":{"ariaHidden":"true","focusable":"false","height":"16","version":"1.1","viewBox":"0 0 16 16","width":"16"},"children":[{"type":"element","tagName":"path","properties":{"fillRule":"evenodd","d":"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"},"children":[]}]}]},{"type":"text","value":"Differences in directory structure"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"With this template, we decided to take advantage of the possibilities\nthat code-splitting made possible. FTW-daily and FTW-hourly were created\nbefore code-splitting was possible, and pushing most of the components\nto a specific "},{"type":"element","tagName":"em","properties":{},"children":[{"type":"text","value":"src/components/"}]},{"type":"text","value":" directory made sense. It was a clear\nplace where customizers could start looking for components they wanted\nto customize. This setup also improved developer experience a bit since\nit allowed us to use index file to export all those components:"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"div","properties":{"className":["gatsby-highlight"],"dataLanguage":"js"},"children":[{"type":"element","tagName":"pre","properties":{"className":["language-js"]},"children":[{"type":"element","tagName":"code","properties":{"className":["language-js"]},"children":[{"type":"element","tagName":"span","properties":{"className":["token","keyword"]},"children":[{"type":"text","value":"import"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"{"}]},{"type":"text","value":" Avatar"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":","}]},{"type":"text","value":" Button"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":","}]},{"type":"text","value":" Logo "},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"}"}]},{"type":"text","value":" from ‘"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"."}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"."}]},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":"/"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"."}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"."}]},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":"/"}]},{"type":"text","value":"components’"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":";"}]}]}]}]},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"The alternative is to import everything one-by-one, which can be a\npretty long list of imports."}]},{"type":"text","value":"\n"},{"type":"element","tagName":"div","properties":{"className":["gatsby-highlight"],"dataLanguage":"js"},"children":[{"type":"element","tagName":"pre","properties":{"className":["language-js"]},"children":[{"type":"element","tagName":"code","properties":{"className":["language-js"]},"children":[{"type":"text","value":"Import Avatar from ‘"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"."}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"."}]},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":"/"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"."}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"."}]},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":"/"}]},{"type":"text","value":"components"},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":"/"}]},{"type":"text","value":"Avatar"},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":"/"}]},{"type":"text","value":"Avatar"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"."}]},{"type":"text","value":"js’"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":";"}]},{"type":"text","value":"\nImport Button from ‘"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"."}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"."}]},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":"/"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"."}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"."}]},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":"/"}]},{"type":"text","value":"components"},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":"/"}]},{"type":"text","value":"Button"},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":"/"}]},{"type":"text","value":"Button"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"."}]},{"type":"text","value":"js’"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":";"}]},{"type":"text","value":"\nImport Logo from ‘"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"."}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"."}]},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":"/"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"."}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"."}]},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":"/"}]},{"type":"text","value":"components"},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":"/"}]},{"type":"text","value":"Logo"},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":"/"}]},{"type":"text","value":"Logo"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"."}]},{"type":"text","value":"js’"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":";"}]}]}]}]},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"Code-splitting changed the dynamics of this setup a bit. Everything that\nis imported through a single file, is likely to end up into a main\ncode-chunk. That means that everything in that file is going to slow\ndown page rendering - when the page is fully loaded. That also affects\nsearch engine optimization (SEO)."}]},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"With FTW-product, we have decided to move certain page-specific files\nunder page-directories. Here are some of the relevant changes in the\ndirectory structure:"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"ul","properties":{},"children":[{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"element","tagName":"em","properties":{},"children":[{"type":"element","tagName":"strong","properties":{},"children":[{"type":"text","value":"src/config/"}]},{"type":"text","value":": Generic configuration files are moved to this\ndirectory"}]},{"type":"element","tagName":"br","properties":{},"children":[]},{"type":"text","value":" Extra configs:"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"ul","properties":{},"children":[{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"element","tagName":"strong","properties":{},"children":[{"type":"text","value":"mainSearchType"}]},{"type":"text","value":" in Topbar. It's either "},{"type":"element","tagName":"em","properties":{},"children":[{"type":"text","value":"'keywords'"}]},{"type":"text","value":" or\n"},{"type":"element","tagName":"em","properties":{},"children":[{"type":"text","value":"'location'"}]},{"type":"text","value":"."}]},{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"element","tagName":"strong","properties":{},"children":[{"type":"text","value":"searchPageVariant"}]},{"type":"text","value":": "},{"type":"element","tagName":"em","properties":{},"children":[{"type":"text","value":"'list'"}]},{"type":"text","value":" & "},{"type":"element","tagName":"em","properties":{},"children":[{"type":"text","value":"'map'"}]},{"type":"text","value":"."}]},{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"element","tagName":"strong","properties":{},"children":[{"type":"text","value":"listingPageLayout"}]},{"type":"text","value":": "},{"type":"element","tagName":"em","properties":{},"children":[{"type":"text","value":"'full-image'"}]},{"type":"text","value":" & "},{"type":"element","tagName":"em","properties":{},"children":[{"type":"text","value":"'hero-image'"}]}]},{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"element","tagName":"strong","properties":{},"children":[{"type":"text","value":"listing.aspectWidth"}]},{"type":"text","value":": config to define width of aspect ratio"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"element","tagName":"strong","properties":{},"children":[{"type":"text","value":"listing.aspectHeight"}]},{"type":"text","value":": config to define height of aspect ratio"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"element","tagName":"strong","properties":{},"children":[{"type":"text","value":"listing.variantPrefix"}]},{"type":"text","value":": listing-specific image variants"}]},{"type":"text","value":"\n"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"br","properties":{},"children":[]},{"type":"text","value":"\nRenamed configs:\n"},{"type":"element","tagName":"ul","properties":{},"children":[{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"element","tagName":"strong","properties":{},"children":[{"type":"text","value":"transactionProcessAlias"}]},{"type":"text","value":" (in other templates:\n"},{"type":"element","tagName":"em","properties":{},"children":[{"type":"text","value":"bookingProcessAlias"}]},{"type":"text","value":")"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"element","tagName":"strong","properties":{},"children":[{"type":"text","value":"lineItemUnitType"}]},{"type":"text","value":" (in other templates: "},{"type":"element","tagName":"em","properties":{},"children":[{"type":"text","value":"bookingUnitType"}]},{"type":"text","value":")"}]},{"type":"text","value":"\n"}]},{"type":"text","value":"\n"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"element","tagName":"strong","properties":{},"children":[{"type":"text","value":"src/routing/"}]},{"type":"text","value":": Route configuration and UI components related to\nrouting are moved to this directory"}]},{"type":"text","value":"\n"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"UI components that are only used in a single page or within a more\ncomplex component are nested within that page or component."},{"type":"element","tagName":"br","properties":{},"children":[]},{"type":"text","value":" For\nexample:"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"ul","properties":{},"children":[{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"element","tagName":"em","properties":{},"children":[{"type":"text","value":"EditListingWizard"}]},{"type":"text","value":" is moved under "},{"type":"element","tagName":"strong","properties":{},"children":[{"type":"text","value":"EditListingPage"}]}]},{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"element","tagName":"em","properties":{},"children":[{"type":"text","value":"Search map and filters"}]},{"type":"text","value":" are moved under "},{"type":"element","tagName":"strong","properties":{},"children":[{"type":"text","value":"SearchPage"}]}]},{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"element","tagName":"strong","properties":{},"children":[{"type":"text","value":"TransactionPage"}]},{"type":"text","value":" got subcomponents like "},{"type":"element","tagName":"em","properties":{},"children":[{"type":"text","value":"ActivityFeed"}]},{"type":"text","value":",\n"},{"type":"element","tagName":"em","properties":{},"children":[{"type":"text","value":"ReviewModal"}]},{"type":"text","value":", "},{"type":"element","tagName":"em","properties":{},"children":[{"type":"text","value":"ReviewForm"}]},{"type":"text","value":", "},{"type":"element","tagName":"em","properties":{},"children":[{"type":"text","value":"SendMessageForm"}]},{"type":"text","value":", and\n"},{"type":"element","tagName":"em","properties":{},"children":[{"type":"text","value":"TransactionPanel"}]},{"type":"text","value":"."}]},{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"element","tagName":"strong","properties":{},"children":[{"type":"text","value":"LandingPage"}]},{"type":"text","value":" got subcomponents like "},{"type":"element","tagName":"em","properties":{},"children":[{"type":"text","value":"SectionHero"}]},{"type":"text","value":",\n"},{"type":"element","tagName":"em","properties":{},"children":[{"type":"text","value":"SectionHowItWorks"}]},{"type":"text","value":", and "},{"type":"element","tagName":"em","properties":{},"children":[{"type":"text","value":"SectionFilteredSearches"}]},{"type":"text","value":"."}]},{"type":"text","value":"\n"}]},{"type":"text","value":"\n"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"element","tagName":"strong","properties":{},"children":[{"type":"text","value":"src/forms/"}]},{"type":"text","value":": this directory was removed as there was only one form\nthat was truly shared between pages: "},{"type":"element","tagName":"em","properties":{},"children":[{"type":"text","value":"StripeConnectAccountForm"}]},{"type":"text","value":". It's\nmoved to "},{"type":"element","tagName":"em","properties":{},"children":[{"type":"text","value":"src/components/"}]},{"type":"text","value":"."}]},{"type":"text","value":"\n"}]},{"type":"text","value":"\n"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"h2","properties":{"id":"searchpage","style":"position:relative;"},"children":[{"type":"element","tagName":"a","properties":{"href":"#searchpage","ariaLabel":"searchpage permalink","className":["anchor","before"]},"children":[{"type":"element","tagName":"svg","properties":{"ariaHidden":"true","focusable":"false","height":"16","version":"1.1","viewBox":"0 0 16 16","width":"16"},"children":[{"type":"element","tagName":"path","properties":{"fillRule":"evenodd","d":"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"},"children":[]}]}]},{"type":"text","value":"SearchPage"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"SearchPage component has got 2 variants: "},{"type":"element","tagName":"strong","properties":{},"children":[{"type":"text","value":"SearchPageWithList"}]},{"type":"text","value":" and\n"},{"type":"element","tagName":"strong","properties":{},"children":[{"type":"text","value":"SearchPageWithMap"}]},{"type":"text","value":". One of these is taken into use by changing\n"},{"type":"element","tagName":"em","properties":{},"children":[{"type":"text","value":"searchPageVariant"}]},{"type":"text","value":" configuration in "},{"type":"element","tagName":"em","properties":{},"children":[{"type":"text","value":"src/config/config.js"}]},{"type":"text","value":"."}]},{"type":"text","value":"\n"},{"type":"element","tagName":"h3","properties":{"id":"searchpagewithlist","style":"position:relative;"},"children":[{"type":"element","tagName":"a","properties":{"href":"#searchpagewithlist","ariaLabel":"searchpagewithlist permalink","className":["anchor","before"]},"children":[{"type":"element","tagName":"svg","properties":{"ariaHidden":"true","focusable":"false","height":"16","version":"1.1","viewBox":"0 0 16 16","width":"16"},"children":[{"type":"element","tagName":"path","properties":{"fillRule":"evenodd","d":"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"},"children":[]}]}]},{"type":"text","value":"SearchPageWithList"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"This variant is the new default layout that FTW-product uses. It doesn't\ncontain a map at all but only listings with a layout where filters are\nshown in a sidebar."}]},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"element","tagName":"span","properties":{"className":["gatsby-resp-image-wrapper"],"style":"position: relative; display: block; margin-left: auto; margin-right: auto; max-width: 635px; "},"children":[{"type":"text","value":"\n      "},{"type":"element","tagName":"a","properties":{"className":["gatsby-resp-image-link"],"href":"/docs/legacy/static/638460a992f56236aaf0f9282c7e4777/d1106/search-page-with-list.png","style":"display: block","target":"_blank","rel":["noopener"]},"children":[{"type":"text","value":"\n    "},{"type":"element","tagName":"span","properties":{"className":["gatsby-resp-image-background-image"],"style":"padding-bottom: 83.0188679245283%; position: relative; bottom: 0; left: 0; background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAARCAYAAADdRIy+AAAACXBIWXMAAAsTAAALEwEAmpwYAAADcklEQVQ4y22US28bVRiG5w+w4C8gWLFCbNixiSqKaDeVKiqkSigSSN0V0oAoKki0RWmkCkqTliKHCLULikvSBkgBlVsRDU0KBNtJHDe2m/HYHnsutsee+8yD5jgXJeFIRyMdnfOc73zv+45UyJTILuUoZtZxmgFRFOP0fHzfx/M84jhm90j22FZAtx3g2gGe3SO7+ADL6iJVywaPinUqDzXMmoPvhQR+SBAEAph8oyjaM5N9vhcRBhFREFCvKmK/ZJg6URSKm8PIJwxDYvZW9X8jjAL8wMfx3K01SVVVHMchDEJxQzJy/y4yezPN9I2vuXXzFktLK2iahqIo6LpOcqbT6mDWDVqqgVnX0JWmYEiq2ugDwxDXcQTw/OkPOPTcs7zy0n4OHzzA7My35PMrpFKfMz52GbWhoioqpQerqKsySq5I4V4Wz/GQkuYnsKRXrtsv/ZORUfY98SRDrw9y6IV9jJ49S0WuM/HZNMMnTpGaSGGZHSrZIiuLGeRCmVp+Hd/1kCpyja5li0bbti2A42+f5KnHHufMO8c5ODDA8NAQ83NLvHFsnGtfzHDk5Vf5/psfKS9n+O3nKe7f/Y783J9CTElV2vi+J6r0Niq8M5Hi2JHD/PLDdcbPn+HCxxdYWyuycH+RXHaVbGaF6noNeXWNYuYeizPXKPwxLxSXKiUTP/C2ng0R9YZNRe7Qarfp2TZRHKOUTAytQxD0hUv8Vy23iMNtRySeldpmjyDY7mNyuGca6HIZQ5GJnZ7YbLQN9JaOF/aBiV0ajb6gmzBhm0bdxPNcAfRFhTF/NztMlXR+NX1+bzoULY9Qc0GLCZsBTtUmcsKNsvqwzSl1u102lXb9PnBkWeOZ6RyDk3c4+lORyZUmZAL+mlxgLZ3HuN3Ardk7KtsC9no9YWghygbwS9ni+GvDfPX085y6vUy61CJ17jL7XzzA+ydPc2NsiljrJ2p31qWkB4llhA99XyxeyqscnZzl6uCbjF6/yyXZ5qMPzzFx8VNG3nuX9JU0sR6KgO4Bihh1OqJCR0QvZmxVZ2Be461cg4v/rJOWLSgFtOdN9Lkq7QUd3/B2PHkLaFmWyGaSkgSaAGuKyXq5jpcoHic/gYhHD1Uaqo7rboPiDVF2AJPQFwoFEfoEmDzfcWw6nTZxuKlkjNW1xEv6Xt0WYff4DxF91seOak2DAAAAAElFTkSuQmCC'); background-size: cover; display: block;"},"children":[]},{"type":"text","value":"\n  "},{"type":"element","tagName":"picture","properties":{},"children":[{"type":"text","value":"\n          "},{"type":"element","tagName":"source","properties":{"srcSet":["/docs/legacy/static/638460a992f56236aaf0f9282c7e4777/82e29/search-page-with-list.webp 159w","/docs/legacy/static/638460a992f56236aaf0f9282c7e4777/ef33f/search-page-with-list.webp 318w","/docs/legacy/static/638460a992f56236aaf0f9282c7e4777/f1837/search-page-with-list.webp 635w","/docs/legacy/static/638460a992f56236aaf0f9282c7e4777/29549/search-page-with-list.webp 953w","/docs/legacy/static/638460a992f56236aaf0f9282c7e4777/e3c51/search-page-with-list.webp 1026w"],"sizes":"(max-width: 635px) 100vw, 635px","type":"image/webp"},"children":[]},{"type":"text","value":"\n          "},{"type":"element","tagName":"source","properties":{"srcSet":["/docs/legacy/static/638460a992f56236aaf0f9282c7e4777/8b9b5/search-page-with-list.png 159w","/docs/legacy/static/638460a992f56236aaf0f9282c7e4777/fa108/search-page-with-list.png 318w","/docs/legacy/static/638460a992f56236aaf0f9282c7e4777/53fb6/search-page-with-list.png 635w","/docs/legacy/static/638460a992f56236aaf0f9282c7e4777/5a426/search-page-with-list.png 953w","/docs/legacy/static/638460a992f56236aaf0f9282c7e4777/d1106/search-page-with-list.png 1026w"],"sizes":"(max-width: 635px) 100vw, 635px","type":"image/png"},"children":[]},{"type":"text","value":"\n          "},{"type":"element","tagName":"img","properties":{"className":["gatsby-resp-image-image"],"src":"/docs/legacy/static/638460a992f56236aaf0f9282c7e4777/53fb6/search-page-with-list.png","alt":"SearchPageWithList","title":"SearchPageWithList","loading":"lazy","decoding":"async","style":"width:100%;height:100%;margin:0;vertical-align:middle;position:absolute;top:0;left:0;"},"children":[]},{"type":"text","value":"\n        "}]},{"type":"text","value":"\n  "}]},{"type":"text","value":"\n    "}]}]},{"type":"text","value":"\n"},{"type":"element","tagName":"h3","properties":{"id":"searchpagewithmap","style":"position:relative;"},"children":[{"type":"element","tagName":"a","properties":{"href":"#searchpagewithmap","ariaLabel":"searchpagewithmap permalink","className":["anchor","before"]},"children":[{"type":"element","tagName":"svg","properties":{"ariaHidden":"true","focusable":"false","height":"16","version":"1.1","viewBox":"0 0 16 16","width":"16"},"children":[{"type":"element","tagName":"path","properties":{"fillRule":"evenodd","d":"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"},"children":[]}]}]},{"type":"text","value":"SearchPageWithMap"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"This variant is a similar layout to what FTW-daily and FTW-hourly use.\nHowever, it has been made easier to select a map provider. This can be\ndone through configuration change:"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"div","properties":{"className":["gatsby-highlight"],"dataLanguage":"shell"},"children":[{"type":"element","tagName":"pre","properties":{"className":["language-shell"]},"children":[{"type":"element","tagName":"code","properties":{"className":["language-shell"]},"children":[{"type":"text","value":"└── src\n    └── config\n        └── config.js"}]}]}]},{"type":"text","value":"\n"},{"type":"element","tagName":"div","properties":{"className":["gatsby-highlight"],"dataLanguage":"js"},"children":[{"type":"element","tagName":"pre","properties":{"className":["language-js"]},"children":[{"type":"element","tagName":"code","properties":{"className":["language-js"]},"children":[{"type":"element","tagName":"span","properties":{"className":["token","keyword"]},"children":[{"type":"text","value":"const"}]},{"type":"text","value":" maps "},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":"="}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"{"}]},{"type":"text","value":"\n  "},{"type":"element","tagName":"span","properties":{"className":["token","literal-property","property"]},"children":[{"type":"text","value":"mapboxAccessToken"}]},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":":"}]},{"type":"text","value":" process"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"."}]},{"type":"text","value":"env"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"."}]},{"type":"element","tagName":"span","properties":{"className":["token","constant"]},"children":[{"type":"text","value":"REACT_APP_MAPBOX_ACCESS_TOKEN"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":","}]},{"type":"text","value":"\n  "},{"type":"element","tagName":"span","properties":{"className":["token","literal-property","property"]},"children":[{"type":"text","value":"googleMapsAPIKey"}]},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":":"}]},{"type":"text","value":" process"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"."}]},{"type":"text","value":"env"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"."}]},{"type":"element","tagName":"span","properties":{"className":["token","constant"]},"children":[{"type":"text","value":"REACT_APP_GOOGLE_MAPS_API_KEY"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":","}]},{"type":"text","value":"\n\n  "},{"type":"element","tagName":"span","properties":{"className":["token","comment"]},"children":[{"type":"text","value":"// Choose map provider: 'MAPBOX', 'GOOGLE_MAPS'"}]},{"type":"text","value":"\n  "},{"type":"element","tagName":"span","properties":{"className":["token","comment"]},"children":[{"type":"text","value":"// Note: you need to have REACT_APP_MAPBOX_ACCESS_TOKEN or REACT_APP_GOOGLE_MAPS_API_KEY"}]},{"type":"text","value":"\n  "},{"type":"element","tagName":"span","properties":{"className":["token","comment"]},"children":[{"type":"text","value":"//       set depending on which one you use in this config."}]},{"type":"text","value":"\n  "},{"type":"element","tagName":"span","properties":{"className":["token","literal-property","property"]},"children":[{"type":"text","value":"mapProvider"}]},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":":"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","string"]},"children":[{"type":"text","value":"'MAPBOX'"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":","}]}]}]}]},{"type":"text","value":"\n"},{"type":"element","tagName":"h2","properties":{"id":"listingpage","style":"position:relative;"},"children":[{"type":"element","tagName":"a","properties":{"href":"#listingpage","ariaLabel":"listingpage permalink","className":["anchor","before"]},"children":[{"type":"element","tagName":"svg","properties":{"ariaHidden":"true","focusable":"false","height":"16","version":"1.1","viewBox":"0 0 16 16","width":"16"},"children":[{"type":"element","tagName":"path","properties":{"fillRule":"evenodd","d":"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"},"children":[]}]}]},{"type":"text","value":"ListingPage"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"Also ListingPage component has got 2 variants: "},{"type":"element","tagName":"strong","properties":{},"children":[{"type":"text","value":"ListingPageFullImage"}]},{"type":"text","value":"\nand "},{"type":"element","tagName":"strong","properties":{},"children":[{"type":"text","value":"ListingPageHeroImage"}]},{"type":"text","value":" These are configured through\n"},{"type":"element","tagName":"em","properties":{},"children":[{"type":"text","value":"listingPageLayout"}]},{"type":"text","value":" configuration in "},{"type":"element","tagName":"em","properties":{},"children":[{"type":"text","value":"src/config/config.js"}]},{"type":"text","value":"."}]},{"type":"text","value":"\n"},{"type":"element","tagName":"div","properties":{"className":["gatsby-highlight"],"dataLanguage":"js"},"children":[{"type":"element","tagName":"pre","properties":{"className":["language-js"]},"children":[{"type":"element","tagName":"code","properties":{"className":["language-js"]},"children":[{"type":"element","tagName":"span","properties":{"className":["token","comment"]},"children":[{"type":"text","value":"// ListingPage has 2 layout options: 'hero-image' and 'full-image'."}]},{"type":"text","value":"\n"},{"type":"element","tagName":"span","properties":{"className":["token","comment"]},"children":[{"type":"text","value":"// - 'hero-image' means a layout where there's a hero section with a cropped image at the beginning of the page"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"span","properties":{"className":["token","comment"]},"children":[{"type":"text","value":"// - 'full-image' shows an image carousel, where listing images are shown with the original aspect ratio"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"span","properties":{"className":["token","keyword"]},"children":[{"type":"text","value":"const"}]},{"type":"text","value":" listingPageLayout "},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":"="}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","string"]},"children":[{"type":"text","value":"'full-image'"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":";"}]}]}]}]},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"Other considerable changes are that both versions use "},{"type":"element","tagName":"strong","properties":{},"children":[{"type":"text","value":"OrderPanel"}]},{"type":"text","value":"\ncomponent instead of "},{"type":"element","tagName":"em","properties":{},"children":[{"type":"text","value":"BookingPanel"}]},{"type":"text","value":". In addition, "},{"type":"element","tagName":"em","properties":{},"children":[{"type":"text","value":"BookingBreakdown"}]},{"type":"text","value":"\ncomponent has been renamed as "},{"type":"element","tagName":"strong","properties":{},"children":[{"type":"text","value":"OrderBreakdown"}]},{"type":"text","value":". In FTW-product, you\nare selecting a quantity and delivery method instead of booking dates."}]},{"type":"text","value":"\n"},{"type":"element","tagName":"h3","properties":{"id":"listingpagefullimage","style":"position:relative;"},"children":[{"type":"element","tagName":"a","properties":{"href":"#listingpagefullimage","ariaLabel":"listingpagefullimage permalink","className":["anchor","before"]},"children":[{"type":"element","tagName":"svg","properties":{"ariaHidden":"true","focusable":"false","height":"16","version":"1.1","viewBox":"0 0 16 16","width":"16"},"children":[{"type":"element","tagName":"path","properties":{"fillRule":"evenodd","d":"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"},"children":[]}]}]},{"type":"text","value":"ListingPageFullImage"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"This layout is the default in FTW-product. It has a bit different layout\nthan what other templates use. The biggest difference is that there is\nno hero-style image but instead there's an image gallery component that\nshows scaled versions of listing images. So, uploaded product images are\nnot cropped in that gallery."}]},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"element","tagName":"span","properties":{"className":["gatsby-resp-image-wrapper"],"style":"position: relative; display: block; margin-left: auto; margin-right: auto; max-width: 635px; "},"children":[{"type":"text","value":"\n      "},{"type":"element","tagName":"a","properties":{"className":["gatsby-resp-image-link"],"href":"/docs/legacy/static/5aae8bd2af315f1c2c4f315388b6009f/d1106/listing-page-full-image.png","style":"display: block","target":"_blank","rel":["noopener"]},"children":[{"type":"text","value":"\n    "},{"type":"element","tagName":"span","properties":{"className":["gatsby-resp-image-background-image"],"style":"padding-bottom: 88.0503144654088%; position: relative; bottom: 0; left: 0; background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAASCAYAAABb0P4QAAAACXBIWXMAAAsTAAALEwEAmpwYAAADlklEQVQ4y5WUyW8cRRSH+//ghjjk4sBfgAkJCGSuiAsX7lwIJEJEQkHCLE6CEFaCLDhgFDtxTOJElrPY8RYviU2wcUS8TeKxzUw87unp6bWql+r+ULfHo4SIAyV9qlfVr3+lV/Xe08yKRWHlESury1Qf10mClChKCIOIKAqJ45h/jzQF6St8OyYQCiEEQRAQhiGacAWmYWLUDLy6QEWKOFJEUZSTCSqlniMMYgIZE4VxLrTvryVJ0jw5SRNUJhCrZ8hEn0apmCRVJMnzB2mZyP8dddOmXKqg67vout6MIpu1yA4JyoLgiXwOWfaRzW+CoCSI7RBDdygVTYQUSCmbYrmgt+Fg3NihNrJLbbiSYwxX0G8+wRkzsUcNqrd28r3q9R28VQfTqlLVd3EchzAISZ4O2S+6e2LjOrWxXYzRCvXxKvE9yVLfIiuX/8KbsnDumLmfv+5iew67uk5CShRHhA1kEOwJGrcqmOM69kQNMe2g397h4qkLtLz8Ch2fdOBNWvSc6qU8tI1Yd/EiH9O1sGVmC/xI4kUSGYVo3t8uzmwdc0yneP0RZz/vpO3NNl59/RAHWlpoPXSY7rO/cuzYZ9zvm0eVIup2na3NLWzL2ru7LGXCKM9FLdmJ6TvTQ9tb79D62mEOHDzICy++xNHjnzIwcJme3vN8ePwErW+3Mdo9QrId40mPWq2Gbdv5Pfq+n5MLhluS+Z4Zzn13jq87znD6+046f+xi4Mo1Bs930f7R+3x54mNu3Bpie2ELf8XBlR5VvZqnTCaapumzr+zcNrEmDMrDRUojG2wMrVC4uszDvgfM/zLF/e5J/uy9x+bVAmLdw3ItDMMghebrmqaZo4ltD3NSpz5dxZqu5djTJs6siXvXwp9zEfMe/ryLPVXDf+ziBwKzZualphpJbVlWHr6WLdIkJVUpiUpysnLL7UbpZRcuhSQKovznbD+NE9LcX+UzDX8tyVpH1kFy0v8uN6uO47m5fakyw5Glk7y3fIYP1jp5d/k0byyd5ELlDlppWWfx2kM2F55glXXGHm7TNbtKYc2gNLfB1sImxdkNlFCoVIGCe9Ya7cV+vlnv59v1ftpXL/JV8Tdm66tod0cW+emLLv64+YDC7zP8PDzH0bNXmJh8zFz3OIPdg1z6oZfACnLBrDLY7ydJA7XfKEETdoRdlrimQNomO15AQcRIEYOERCoSP0veRl+M90SDOGyWXNhYZ/v/AEe4H1PtUyDxAAAAAElFTkSuQmCC'); background-size: cover; display: block;"},"children":[]},{"type":"text","value":"\n  "},{"type":"element","tagName":"picture","properties":{},"children":[{"type":"text","value":"\n          "},{"type":"element","tagName":"source","properties":{"srcSet":["/docs/legacy/static/5aae8bd2af315f1c2c4f315388b6009f/82e29/listing-page-full-image.webp 159w","/docs/legacy/static/5aae8bd2af315f1c2c4f315388b6009f/ef33f/listing-page-full-image.webp 318w","/docs/legacy/static/5aae8bd2af315f1c2c4f315388b6009f/f1837/listing-page-full-image.webp 635w","/docs/legacy/static/5aae8bd2af315f1c2c4f315388b6009f/29549/listing-page-full-image.webp 953w","/docs/legacy/static/5aae8bd2af315f1c2c4f315388b6009f/e3c51/listing-page-full-image.webp 1026w"],"sizes":"(max-width: 635px) 100vw, 635px","type":"image/webp"},"children":[]},{"type":"text","value":"\n          "},{"type":"element","tagName":"source","properties":{"srcSet":["/docs/legacy/static/5aae8bd2af315f1c2c4f315388b6009f/8b9b5/listing-page-full-image.png 159w","/docs/legacy/static/5aae8bd2af315f1c2c4f315388b6009f/fa108/listing-page-full-image.png 318w","/docs/legacy/static/5aae8bd2af315f1c2c4f315388b6009f/53fb6/listing-page-full-image.png 635w","/docs/legacy/static/5aae8bd2af315f1c2c4f315388b6009f/5a426/listing-page-full-image.png 953w","/docs/legacy/static/5aae8bd2af315f1c2c4f315388b6009f/d1106/listing-page-full-image.png 1026w"],"sizes":"(max-width: 635px) 100vw, 635px","type":"image/png"},"children":[]},{"type":"text","value":"\n          "},{"type":"element","tagName":"img","properties":{"className":["gatsby-resp-image-image"],"src":"/docs/legacy/static/5aae8bd2af315f1c2c4f315388b6009f/53fb6/listing-page-full-image.png","alt":"ListingPageFullImage","title":"ListingPageFullImage","loading":"lazy","decoding":"async","style":"width:100%;height:100%;margin:0;vertical-align:middle;position:absolute;top:0;left:0;"},"children":[]},{"type":"text","value":"\n        "}]},{"type":"text","value":"\n  "}]},{"type":"text","value":"\n    "}]}]},{"type":"text","value":"\n"},{"type":"element","tagName":"h3","properties":{"id":"listingpageheroimage","style":"position:relative;"},"children":[{"type":"element","tagName":"a","properties":{"href":"#listingpageheroimage","ariaLabel":"listingpageheroimage permalink","className":["anchor","before"]},"children":[{"type":"element","tagName":"svg","properties":{"ariaHidden":"true","focusable":"false","height":"16","version":"1.1","viewBox":"0 0 16 16","width":"16"},"children":[{"type":"element","tagName":"path","properties":{"fillRule":"evenodd","d":"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"},"children":[]}]}]},{"type":"text","value":"ListingPageHeroImage"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"Hero-styled image layout is a similar layout to what FTW-daily and\nFTW-hourly use. There's a hero-image at the beginning of the page.\nHowever, this is not exactly the same layout as what the other templates\nuse."}]},{"type":"text","value":"\n"},{"type":"element","tagName":"h2","properties":{"id":"differences-in-transaction-process","style":"position:relative;"},"children":[{"type":"element","tagName":"a","properties":{"href":"#differences-in-transaction-process","ariaLabel":"differences in transaction process permalink","className":["anchor","before"]},"children":[{"type":"element","tagName":"svg","properties":{"ariaHidden":"true","focusable":"false","height":"16","version":"1.1","viewBox":"0 0 16 16","width":"16"},"children":[{"type":"element","tagName":"path","properties":{"fillRule":"evenodd","d":"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"},"children":[]}]}]},{"type":"text","value":"Differences in transaction process"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"FTW-product has a different transaction process graph than what\nFTW-daily and FTW-hourly use. Visually, the biggest changes are after\nthe checkout page and before the review period. E.g. FTW-product has a\n"},{"type":"element","tagName":"strong","properties":{},"children":[{"type":"text","value":"dispute"}]},{"type":"text","value":" state there. However, the defining difference is actually in\nactions: FTW-product doesn't use bookings (and availability management\nof time-slots). Instead, it has actions to deal with stock management."}]},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"Roughly, the transaction process graph looks like this:"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"element","tagName":"span","properties":{"className":["gatsby-resp-image-wrapper"],"style":"position: relative; display: block; margin-left: auto; margin-right: auto; max-width: 635px; "},"children":[{"type":"text","value":"\n      "},{"type":"element","tagName":"a","properties":{"className":["gatsby-resp-image-link"],"href":"/docs/legacy/static/7ca34938732f825f7bc3edca760c4cca/bf0a4/flex-product-default-process.png","style":"display: block","target":"_blank","rel":["noopener"]},"children":[{"type":"text","value":"\n    "},{"type":"element","tagName":"span","properties":{"className":["gatsby-resp-image-background-image"],"style":"padding-bottom: 111.32075471698113%; position: relative; bottom: 0; left: 0; background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAWCAYAAADAQbwGAAAACXBIWXMAAAsTAAALEwEAmpwYAAAC8klEQVQ4y42V6W7jNhRG/f6vV2DQpk0m8aKF2+VO2RjgFKTjZGxMO/lBSaSow7t892rnc+NXQ1K9u5tQUaGM+Xa+cPnxg7Rt+NJYZ43WDl82dr+DjdGBkliMICKElHFK0N8TohrP+4XDYon1P4A3WKob7XyhtYZziuOikBCJuSA2YE6JVQfM+1r+CrC0jeQq+tUz7z0+RFKu5FpwrjAdBPF9byPmxu7m1oDkz+cPl3PF+co6Z8yaR5xsSBhjEd3wuhJ8G7GU1D4tvAPfYpcqIW8D+rd1mFyIHegjatW8ffccJs9JIiaV8e2uP5h4nfj0mZDubv9YhcQqkflZUCqOeSqNlBJPInwzhqd+2Dtj92KEk49MyjEZx+w8Nmba+UzdNk5aOEyW10nztCiORqhto7WN2i6EdI3dzbOdOSRkrZycsN9r3mbDP4tG7SPO1avVqqBd4eACPjacTnjvh5yk1LvY7yRWYt7QMaGmwOoyhxixuhBCw0tDdOG0Br4dFw5zQGxGvCAdbgud8WFhv9TtTNs22tYQ61iPlhgDW3e7NXI9c/SRP4zmFBLKelalmG3kbfK48AAMPfg+jgUTCs+zw74H2VpH8G7cX48GZ9zVXfG4XkG53EnsCsyNyXlMzONlKA23FqzO/KU0b9qjDxE9ZawkxOgBvCrjXm67m9Y68GivWT4ax3FxzKvwvCheJsXbYtgby16bEYbL5UJu52HMz/W/+3ly0+JLz/jqMVMaWe0W3945U3GxoE1E+Tz2ukcLHztLeB+PVTP2hq67SogZlQt/GnsPfGxZt2r5PKCv148DfAjk2kYzGDX87kF4BP6q29wOcbFynALzrDDWoSUxG8FKZp6E48mzmvwZw9917W7B6j3O+yEn43uz7bIpA6pswqRELF8EdhfbdsaaPMpzsYHZeE4nYVo0tZXRN8P/Ae9clopZC+sSmI/d0ozxEaMcy6LQ07Xuh7C/YuGQxyTX6gmVtl3GjyrmPDL8sgirSSMx/wJ8nY/XhZpdgwAAAABJRU5ErkJggg=='); background-size: cover; display: block;"},"children":[]},{"type":"text","value":"\n  "},{"type":"element","tagName":"picture","properties":{},"children":[{"type":"text","value":"\n          "},{"type":"element","tagName":"source","properties":{"srcSet":["/docs/legacy/static/7ca34938732f825f7bc3edca760c4cca/82e29/flex-product-default-process.webp 159w","/docs/legacy/static/7ca34938732f825f7bc3edca760c4cca/ef33f/flex-product-default-process.webp 318w","/docs/legacy/static/7ca34938732f825f7bc3edca760c4cca/f1837/flex-product-default-process.webp 635w","/docs/legacy/static/7ca34938732f825f7bc3edca760c4cca/29549/flex-product-default-process.webp 953w","/docs/legacy/static/7ca34938732f825f7bc3edca760c4cca/c5420/flex-product-default-process.webp 1270w","/docs/legacy/static/7ca34938732f825f7bc3edca760c4cca/e10ab/flex-product-default-process.webp 3522w"],"sizes":"(max-width: 635px) 100vw, 635px","type":"image/webp"},"children":[]},{"type":"text","value":"\n          "},{"type":"element","tagName":"source","properties":{"srcSet":["/docs/legacy/static/7ca34938732f825f7bc3edca760c4cca/8b9b5/flex-product-default-process.png 159w","/docs/legacy/static/7ca34938732f825f7bc3edca760c4cca/fa108/flex-product-default-process.png 318w","/docs/legacy/static/7ca34938732f825f7bc3edca760c4cca/53fb6/flex-product-default-process.png 635w","/docs/legacy/static/7ca34938732f825f7bc3edca760c4cca/5a426/flex-product-default-process.png 953w","/docs/legacy/static/7ca34938732f825f7bc3edca760c4cca/91155/flex-product-default-process.png 1270w","/docs/legacy/static/7ca34938732f825f7bc3edca760c4cca/bf0a4/flex-product-default-process.png 3522w"],"sizes":"(max-width: 635px) 100vw, 635px","type":"image/png"},"children":[]},{"type":"text","value":"\n          "},{"type":"element","tagName":"img","properties":{"className":["gatsby-resp-image-image"],"src":"/docs/legacy/static/7ca34938732f825f7bc3edca760c4cca/53fb6/flex-product-default-process.png","alt":"flex-product-default-process","title":"flex-product-default-process","loading":"lazy","decoding":"async","style":"width:100%;height:100%;margin:0;vertical-align:middle;position:absolute;top:0;left:0;"},"children":[]},{"type":"text","value":"\n        "}]},{"type":"text","value":"\n  "}]},{"type":"text","value":"\n    "}]}]},{"type":"text","value":"\n"},{"type":"element","tagName":"h2","properties":{"id":"managing-stock","style":"position:relative;"},"children":[{"type":"element","tagName":"a","properties":{"href":"#managing-stock","ariaLabel":"managing stock permalink","className":["anchor","before"]},"children":[{"type":"element","tagName":"svg","properties":{"ariaHidden":"true","focusable":"false","height":"16","version":"1.1","viewBox":"0 0 16 16","width":"16"},"children":[{"type":"element","tagName":"path","properties":{"fillRule":"evenodd","d":"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"},"children":[]}]}]},{"type":"text","value":"Managing stock"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"Stock management is pretty straightforward. On EditListingWizard, (which\nis a component to create and update listings), a provider can set the\nstock quantity for the listing. Under the hood, FTW-product calls API\nwith "},{"type":"element","tagName":"em","properties":{},"children":[{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"sdk.stock/compareAndSet()"}]}]},{"type":"text","value":" with the value provider is trying to\nset (\""},{"type":"element","tagName":"strong","properties":{},"children":[{"type":"text","value":"newTotal"}]},{"type":"text","value":"\") and also the previous value (\""},{"type":"element","tagName":"strong","properties":{},"children":[{"type":"text","value":"oldTotal"}]},{"type":"text","value":"\"). At\nthe time of update, if the assumed old total still matches with the\ncurrent stock, the "},{"type":"element","tagName":"strong","properties":{},"children":[{"type":"text","value":"currentStock"}]},{"type":"text","value":" entity is updated to the value\npassed through with \"newTotal\" parameter. This check is done to prevent\nrace conditions, where someone orders a listing while the provider is\nupdating its stock."}]},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"Listing entity has a relationship to \"currentStock\" entity - so,\ncurrentStock info can be included listing queries. Then on ListingPage,\na customer can order as many listings as there is stock left for it."}]},{"type":"text","value":"\n"},{"type":"element","tagName":"blockquote","properties":{},"children":[{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"Note: Flex API and FTW-product don't yet support listing variants (the\nstock of yellow t-shirts vs red t-shirts). So, listing variants need\nto be modeled with separate listings."}]},{"type":"text","value":"\n"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"h2","properties":{"id":"shipping-the-product","style":"position:relative;"},"children":[{"type":"element","tagName":"a","properties":{"href":"#shipping-the-product","ariaLabel":"shipping the product permalink","className":["anchor","before"]},"children":[{"type":"element","tagName":"svg","properties":{"ariaHidden":"true","focusable":"false","height":"16","version":"1.1","viewBox":"0 0 16 16","width":"16"},"children":[{"type":"element","tagName":"path","properties":{"fillRule":"evenodd","d":"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"},"children":[]}]}]},{"type":"text","value":"Shipping the product"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"For product marketplaces, it's usually necessary to ask for a shipping\naddress from a customer. FTW-product asks shipping method on ListingPage\nand if 'shipping' is chosen, shipping address is asked on CheckoutPage.\nThe address is saved to transaction's protected data in transitions:\n"},{"type":"element","tagName":"em","properties":{},"children":[{"type":"text","value":"request-payment"}]},{"type":"text","value":" and "},{"type":"element","tagName":"em","properties":{},"children":[{"type":"text","value":"request-payment-after-enquiry"}]},{"type":"text","value":"."}]},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"On TransactionPage (the page opened by clicking inbox items), the\nshipping address or pickup address is shown to both parties of the\ntransaction. The provider has 2 weeks to mark the item shipped\n("},{"type":"element","tagName":"em","properties":{},"children":[{"type":"text","value":"transition/mark-delivered"}]},{"type":"text","value":") or the automatic expiration happens\n("},{"type":"element","tagName":"em","properties":{},"children":[{"type":"text","value":"transition/auto-cancel"}]},{"type":"text","value":") and the customer is refunded. If needed, the\ncustomer can dispute the order from the \"Delivered\" state."}]},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"element","tagName":"span","properties":{"className":["gatsby-resp-image-wrapper"],"style":"position: relative; display: block; margin-left: auto; margin-right: auto; max-width: 635px; "},"children":[{"type":"text","value":"\n      "},{"type":"element","tagName":"a","properties":{"className":["gatsby-resp-image-link"],"href":"/docs/legacy/static/eae6132a0ef51b59940b3cd4baaf19c5/c5a87/dispute-modal.png","style":"display: block","target":"_blank","rel":["noopener"]},"children":[{"type":"text","value":"\n    "},{"type":"element","tagName":"span","properties":{"className":["gatsby-resp-image-background-image"],"style":"padding-bottom: 80.50314465408806%; position: relative; bottom: 0; left: 0; background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAQCAYAAAAWGF8bAAAACXBIWXMAABYlAAAWJQFJUiTwAAAC/UlEQVQ4y42SXUhTYRjHT/dBeNNtF13VZUgXgdRFoKOLUChSAkGkUAyUEKTSiPLCpvs6O+/Z5szU6t40jCRM0JtuAqlNUnRnW5tD5/zYx/ncP5736EoU6sCP87X9zvN/nkcYGBhAX18fRFEEYwzzX+YRiUawtLR0hEgkgqn3U5gMzGB2eAEfRmfx4t4QGs60ovVcN+5UtePhrccQfD4fPB4Px+12I5VO4X+Pb9MR3D3dhfbzT9B6tgdPGwcgkKS/vx8ul4ujJGLQsxZKWe2YwDRNGLoBXdX5/fTrT7gkXMP1qgZcOVWH9ptddoVOp7MijMfj0HUd29vbyOVy2NnZwe7uLra2tlAul7nIsix+nvk4g+rL1ah11KLmag06HnTYQuojQdUmEgnk83nEYjF+TR9IpVJYX1/nzzVNQ6FQ4MK5uTk4HA40Njahvr4e3d3dEGgYRDAY5GdFUWAYBq+Iqvy7UnqWyWSwt7fHhYuLi2hqakJbWxtaWlrQ29tr93BwcJDLeA8VhUfe3NysCElE1VEP6d1h9JWVFQwPD2NiYoITDoftCqmHQ0NDPDZFoyOfL6BUUlEkiiVoul4ZjmXZwmg0yttE6WRZ5msn+P1+vjIkppexmALT0JDdTGN/N4tiPofCfg5qcQ+wVJRNFZZe5MLl5WV4vV6EQqGKVGCSBA5joAHRMOwyVKBMVRk2dG1pnLJRqgjpPySSJAmBQACC5PdBEt2QRA+8bidi62v8x4ZhwjSto1hlmJYF3TDtyMtReLxejusgukB2guwUO67EoZZUJJNJpNNpbKTTfLKZjQy/J34lk3wTVn+uICjKGA2EEWIByAGKzBgOpVyYUPjXS1oRmqGeSFG193Dhx1fcfnYfzc5OPPI+RzgQ+lMhF/pFrH5fQ3kfULcNaDnzREpZHSgCk4ufcaGnDhd7b6D5ZSdGgyMHQmbDZIZXbAzj7C3G2Jtj0PNx2WZCfocRNgpJlnhUDk35cH8Oo0vMDz8T/4EfXpGG4QGTDlrG7D38Dd/QBowdkOxEAAAAAElFTkSuQmCC'); background-size: cover; display: block;"},"children":[]},{"type":"text","value":"\n  "},{"type":"element","tagName":"picture","properties":{},"children":[{"type":"text","value":"\n          "},{"type":"element","tagName":"source","properties":{"srcSet":["/docs/legacy/static/eae6132a0ef51b59940b3cd4baaf19c5/82e29/dispute-modal.webp 159w","/docs/legacy/static/eae6132a0ef51b59940b3cd4baaf19c5/ef33f/dispute-modal.webp 318w","/docs/legacy/static/eae6132a0ef51b59940b3cd4baaf19c5/f1837/dispute-modal.webp 635w","/docs/legacy/static/eae6132a0ef51b59940b3cd4baaf19c5/29549/dispute-modal.webp 953w","/docs/legacy/static/eae6132a0ef51b59940b3cd4baaf19c5/c5420/dispute-modal.webp 1270w","/docs/legacy/static/eae6132a0ef51b59940b3cd4baaf19c5/d9d66/dispute-modal.webp 1998w"],"sizes":"(max-width: 635px) 100vw, 635px","type":"image/webp"},"children":[]},{"type":"text","value":"\n          "},{"type":"element","tagName":"source","properties":{"srcSet":["/docs/legacy/static/eae6132a0ef51b59940b3cd4baaf19c5/8b9b5/dispute-modal.png 159w","/docs/legacy/static/eae6132a0ef51b59940b3cd4baaf19c5/fa108/dispute-modal.png 318w","/docs/legacy/static/eae6132a0ef51b59940b3cd4baaf19c5/53fb6/dispute-modal.png 635w","/docs/legacy/static/eae6132a0ef51b59940b3cd4baaf19c5/5a426/dispute-modal.png 953w","/docs/legacy/static/eae6132a0ef51b59940b3cd4baaf19c5/91155/dispute-modal.png 1270w","/docs/legacy/static/eae6132a0ef51b59940b3cd4baaf19c5/c5a87/dispute-modal.png 1998w"],"sizes":"(max-width: 635px) 100vw, 635px","type":"image/png"},"children":[]},{"type":"text","value":"\n          "},{"type":"element","tagName":"img","properties":{"className":["gatsby-resp-image-image"],"src":"/docs/legacy/static/eae6132a0ef51b59940b3cd4baaf19c5/53fb6/dispute-modal.png","alt":"Dispute modal","title":"Dispute modal","loading":"lazy","decoding":"async","style":"width:100%;height:100%;margin:0;vertical-align:middle;position:absolute;top:0;left:0;"},"children":[]},{"type":"text","value":"\n        "}]},{"type":"text","value":"\n  "}]},{"type":"text","value":"\n    "}]}]},{"type":"text","value":"\n"},{"type":"element","tagName":"h2","properties":{"id":"handling-time-zones","style":"position:relative;"},"children":[{"type":"element","tagName":"a","properties":{"href":"#handling-time-zones","ariaLabel":"handling time zones permalink","className":["anchor","before"]},"children":[{"type":"element","tagName":"svg","properties":{"ariaHidden":"true","focusable":"false","height":"16","version":"1.1","viewBox":"0 0 16 16","width":"16"},"children":[{"type":"element","tagName":"path","properties":{"fillRule":"evenodd","d":"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"},"children":[]}]}]},{"type":"text","value":"Handling time zones"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"FTW-product doesn't really need to print dates and times, but we have\nrefactored "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"src/util/dates.js"}]},{"type":"text","value":" so that it uses \"moment-timezone\" library\nand it is, therefore, ready to convert and render timestamps in\ndifferent time zones if needed."}]},{"type":"text","value":"\n"},{"type":"element","tagName":"h2","properties":{"id":"summary","style":"position:relative;"},"children":[{"type":"element","tagName":"a","properties":{"href":"#summary","ariaLabel":"summary permalink","className":["anchor","before"]},"children":[{"type":"element","tagName":"svg","properties":{"ariaHidden":"true","focusable":"false","height":"16","version":"1.1","viewBox":"0 0 16 16","width":"16"},"children":[{"type":"element","tagName":"path","properties":{"fillRule":"evenodd","d":"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"},"children":[]}]}]},{"type":"text","value":"Summary"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"This template works as a starting point for marketplaces that need to\nuse stock management instead of booking. We have added more\nconfiguration options to this template, but naturally, not everything\nhas a configuration option. You can however change anything you want by\nmaking changes to the code directly. You should think of this as a\nstarting point for your customization journey - a starting point to get\nyour\n"},{"type":"element","tagName":"a","properties":{"href":"https://www.sharetribe.com/academy/how-to-build-a-minimum-viable-platform/","target":"_blank","rel":["noopener","noreferrer"]},"children":[{"type":"text","value":"Minimum Viable Product"}]},{"type":"text","value":"\n(MVP) up and running."}]}],"data":{"quirksMode":false}},"headings":[{"value":"Differences in directory structure","depth":2},{"value":"SearchPage","depth":2},{"value":"SearchPageWithList","depth":3},{"value":"SearchPageWithMap","depth":3},{"value":"ListingPage","depth":2},{"value":"ListingPageFullImage","depth":3},{"value":"ListingPageHeroImage","depth":3},{"value":"Differences in transaction process","depth":2},{"value":"Managing stock","depth":2},{"value":"Shipping the product","depth":2},{"value":"Handling time zones","depth":2},{"value":"Summary","depth":2}]}},"pageContext":{"slug":"ftw-product","category":"ftw-introduction"}},
    "staticQueryHashes": ["3794076007","439097193","717698143"]}