Changes for page Build your own shop system
Last modified by Shop Team on 2023/02/13 22:56
Summary
-
Page properties (1 modified, 0 added, 0 removed)
-
Objects (1 modified, 0 added, 0 removed)
Details
- Page properties
-
- Content
-
... ... @@ -2,10 +2,8 @@ 2 2 3 3 If a standalone or [[JavaScript Integrated Shop>>url:https://help.spreadshirt.com/hc/en-us/articles/207487815-Website-Integration-with-JavaScript||shape="rect"]] does not fulfill your requirements and you absolutely must have a custom shop this tutorial aims to be a starting point for your journey. 4 4 5 - ==Example=5 +Before we start you can take a look at a **[[working (minimal) example>>url:https://github.com/spreadshirt/shop-api-example-integration||shape="rect"]]** that we have built in order to demonstrate the capabilities of the Public Shop API. It shows a draft of a shop system written in php that might be helpful to understand the (list-page -> detail-page -> add-to-basket) workflow. 6 6 7 -Before we start you can take a look at a working (minimal) example that we have built in order to demonstrate the capabilities of the Public Shop API: **[[https:~~/~~/github.com/spreadshirt/shop-api-example-integration>>url:https://github.com/spreadshirt/shop-api-example-integration||shape="rect"]]**. It shows a draft of a shop system written in php that might be helpful to understand the (list-page -> detail-page -> add-to-basket) workflow. 8 - 9 9 [[image:attach:image2019-8-2_14-10-37.png]][[image:attach:image2019-8-2_14-11-14.png]][[image:attach:image2019-8-2_14-9-28.png]] 10 10 11 11 = Prerequisites = ... ... @@ -12,51 +12,40 @@ 12 12 13 13 We have to stress that you have to have a certain amount of time and technical knowledge in order to build your own shop based on the Public Shop API. 14 14 15 -The following topics will not be covered by this tutorial and will be treated as given 13 +The following topics will not be covered by this tutorial and will be treated as given: 16 16 17 -1. A Spreadshop with one or more des ignwhich you configured in the PartnerArea18 -1. An SpreadshirtAPI Key15 +1. A Spreadshop with one or more ideas which you configured in the Partner Area 16 +1. An API Key 19 19 1. ((( 20 - HTMLand CSSknowledge18 +A solid understanding of HTTP, HTML, CSS, client-side and server-side programming. 21 21 ))) 22 -1. ((( 23 -PHP and/or Javascript knowledge 24 -))) 25 -1. ((( 26 -Basic understanding about HTTP and "REST Resources" (in combination often called API) 27 -))) 28 28 29 -= Recommendedapproach=21 += Step by step = 30 30 31 -== Manage your assets in the Partner Area == 23 +== (% style="font-size: 20.0px;letter-spacing: -0.008em;" %) 1. Manage your assets in the Partner Area(%%) == 32 32 33 - AfteryouhavecreatedyourSpreadshopyouare readyto manage your assetsatany time in the Partner Area.This is the onlysupportedwayo manageyourshops, designs andproducts.25 +There are no endpoints available that allow uploading or changing the content of your shop. Use the partner area to upload designs and manage your assortment. Note that not only the content you upload in the Partner Area, but also the shop settings affect the output of the [[sellable resources>>doc:API.Sellables||style="letter-spacing: 0.025em;" shape="rect"]]. For example, enabling model images affects the image URLs returned by the API. 34 34 35 -== Productdata import ==27 +== (% style="font-size: 20.0px;letter-spacing: -0.008em;" %) 2. Build a scheduled sellable data import(%%) == 36 36 37 -T heuse the full potential of a custom shop implementation it is recommended to importall datainto your own database.Itmightbe possible to use the Public Shop API as a direct data source foryourshop but the featuresetissmall and performancewill suffer.Forexample,youwouldnotbe ableto introduce all kinds of filtering and sorting optionsbecause theseare NOT built into the Public Shop API. That means that you should fetch (periodically or on demand)all sellables via the Public Shop API and import them to YOUR database. Once you have imported this data you can build a frontend that meets your requirements.The only thing that should require direct API access based on customer action is the [[Basket API>>doc:Baskets]].29 +To use the full potential of a custom shop implementation it is recommended to import the entries of the [[sellable list>>doc:Sellables]] resource into your own database every 24 hours. The example integration uses the Public Shop API as a direct data source for simplicity, but that is not the recommended approach. The import based solution yields better performance and allows you to introduce all kinds of filtering and sorting options (which are NOT built into the Public Shop API). Once you have imported this data you can build a frontend that meets your requirements. 38 38 39 - Requiredresources:31 +== 3. Build the list page == 40 40 41 -* [[doc:Sellables]] 42 -* [[doc:Baskets]] 43 -* ((( 44 -[[doc:ProductType]] (optional) 45 -))) 33 +Using the sellable data from your data base, you can now build your own list page giving an overview over the available sellables. Use the "previewImage.url" field directly in your <img> tags. You are free to build any navigational structure and filtering mechanisms you deem necessary. Depending on your needs, the [[doc:ProductType Departments and Categories]] resource might be useful. 46 46 47 - Optionalresources:35 +== 4. Build the detail page == 48 48 49 -* Product Type based navigation can be built using [[doc:ProductType Departments and Categories]] 50 -* For localization see [[doc:Country]], [[doc:Language]] and [[doc:Currency]] (also see [[doc:Price Formatting Guide]]) 51 -* If you want to display correct shipping information you should study the [[doc:Shipping Types]] documentation 37 +When assembling a detail page on your server, request the [[sellable detail resource>>doc:Sellables]] allowing you to render all available images as well as sizes. If you want to display things like name and description of the product type, appearance names and colors, etc., the [[doc:ProductType]] resource is useful. The response of that resource is slow and rarely changes, so it is a good candidate for caching. In a somewhat generic implementation, the [[doc:Price Formatting Guide]] might be helpful. 52 52 53 -== UpdatingData==39 +== 5. Build a basket == 54 54 55 -There is no Public API available for uploading or updating ideas or sellables. This should be done via the Partner Area. 56 -Note that not only the content you upload in the Partner Area, but also the shop settings affect the output of the [[sellable resources>>doc:API.Sellables||shape="rect"]]. For example, enabling model images affects the image URLs returned by the API. 41 +Once a user clicks the add-to-basket button, use the "[[Create a basket>>doc:Baskets]]" resource to create a Spreadshirt basket with the selected sellable in it. Associate the returned basket id with the customer's session. You can now use the fields from the basket payload to assemble a drop-down UI component or something similar. Use the "Update a basket" resource for subsequent customer interactions. 57 57 58 -== Basket handlingandcheckout ==43 +== 6. Redirect to the Spreadshirt checkout == 59 59 60 - Pleaseseethe [[basketsresourcedocumentation>>doc:Baskets]]on howtocreateand updateSpreadshirtAPI Baskets.Itisuptoyou ifyoudirectly use theSpreadshirt BasketsAPI foryourshopr if you createoneoncheckoutnd useyour ownbasketimplementation.45 +Finally, you can redirect the customer to the Spreadshirt checkout using the "shop checkout" link from the basket response. We will take over from there. 61 61 62 62 \\ 48 + 49 +\\
- Confluence.Code.ConfluencePageClass[0]
-
- id
-
... ... @@ -1,1 +1,1 @@ 1 -282789 321 +28278940 - url
-
... ... @@ -1,1 +1,1 @@ 1 -https://developer.spreadshirt.net/wiki/spaces/API/pages/282789 32/Build your own shop system1 +https://developer.spreadshirt.net/wiki/spaces/API/pages/28278940/Build your own shop system