This example demonstrates how to link components together to create a fully featured store with products, categories and a shopping cart.
The Products example demonstrates how you can link a Product List and a Product component together, so that clicking an item in the list leads you to a full product page.
- Product List has the
data-reflow-product-linkattribute set to./product.html?product={id}. This instructs Reflow to wrap each list item in a link, and replace the{id}placeholder with the actual product id. - The product page looks for the
productquery parameter, and sets thedata-reflow-productattribute on the tag on page load.
In the Categories example you can learn how to connect a Category List and a Product List component together. This creates a navigation menu for browsing all categories and products from the store.
- Category List has the
data-reflow-category-linkattribute set to./index.html?category={id}(the product list example page). This instructs Reflow to wrap each list item in a link, and replace the{id}placeholder with the actual category id. - The product list page looks for the
categoryquery parameter, and sets thedata-reflow-categoryattribute on the tag on page load. It then lists all products from the specified category.
The Cart example displays a shopping cart where you can see all the Products that were added for purchase.
- The Product component has the
data-reflow-shoppingcart-urlattribute set to./cart.html. - This links the components together, so that when the Add to Cart button is pressed products are correctly added for purchase.