Component

What is a Component?

Ollie Shop works with Templates, which is nothing but a pre-defined set of slots. Slots are where a Component will go. Once you have created your own component, you can insert it in any slot.

Any template will come with default components. Simply replace them with custom components, or add your custom components to empty slots.

A component is nothing more than a React. Take a look at how a CustomComponent is built.

What are the minimum requirements to create a Component?

Ollie Shop component is composed of an index typescript file, a CSS file (optional), the package.json and the folder node_modules.

File package.json

On the package.json you need to insert the ollieshop/sdk as a dependency:

{
  "name": "custom-component",
  "version": "1.0.0",
  "main": "index.js",
  "license": "MIT",
  "dependencies": {
    "@ollieshop/sdk": "0.x"
  }
}

🚧

Dependecies

If needed, you can include more dependencies on the package.json. However the total zip file cannot exceed 5MB.

File index.tsx

The file index.tsx must export a function as default and must be of type What is a CustomComponent

import React  from "react";
import "./styles.css";
import { type CustomComponent } from "@ollieshop/sdk";

const HelloUser: CustomComponent =  ({ cart }) => {
  return (
    <div className="container__custom__component">
      Hello {cart.customer?.firstName}
    </div>
  );
};

export default HelloUser;

Styles

We recommend using Tailwind for CSS. Simply import it on the index.tsx file

.container__custom__component {
	margin: auto;
	max-width: 1280px;
  padding: 16px
}

How to upload a Component to my store?

Use the Ollie Builder API to upload the component to your store. You'll need the ID of the component and to compress the folder as a zip file.

ComponentId is a Path Variable

Compress your file (.zip) for upload