oneshop.web
v1.2.11
Published
Javascript SDK for web applications accessing Oneshop API with ease.
Downloads
30
Readme
ONESHOP WEB SDK
Web framework for accessing Oneshop API conveniently.
The Oneshop Web library provides convenient access to Oneshop Web APIs.
Documentation
See the Oneshop-web API docs for JS/ReactJS.
Guildlines
Create shop
Setup custom theme
Develop your own theme
Installation
Option 1. For framworks like React JS, Vue Js or Angular JS.
Install with yarn:
yarn add oneshop.webOR with npm:
npm install --save oneshop.webOption 2. Develop without using frameworks
See the demo folder in this repository. Start an Express server and set the proxy target to your web shop's domain.
- install node modules before you start the server.
cd ~/demo/non-framework
npm i- Replace the Oneshop's default theme domain with yours.
Usage
ReactJS
import React from 'react';
import Oneshop from 'oneshop.web';
const OS = new Oneshop();
function App(){
// get article hooks and init articles = [];
const {articles, setArticles} = useState([]);
// get articles
OS.article.get().then(setArticles).catch(alert);
return (
<div className="articles">
{articles.map(a => (
<div id={a.id}>
{a.sections.map((s, section_idx) => (
<div id={`section-${a.id}-${section_idx}`} className="section">
<img src={`${s.media[0].url}`}>
<h3>{s.title}</h3>
<p>{s.description}<p>
</div>
))}
</div>
))}
</div>
);
}
Without frameworks
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<script id="oneshop-web" src="https://cdn.oneshop.cloud/oneshop-sdk-min.js"></script>
</head>
<body>
<div id="articles"></div>
<script>
// create OS instance
let OS = new Oneshop.default();
// IIFE to get article
(async () => {
// get articles
let articles = await OS.article.get();
// get element
let articleDiv = document.getElementById('articles');
// get view
articleDiv.innerHTML = articles.map(a => `
<div>
${a.sections[0].media.length > 0 ? `<img src="${a.sections[0].media[0].url}" width="300" height="auto" />` : ""}
<h5>${a.sections[0].title}</h5>
<p>${a.sections[0].description}</p>
</div>
`);
})();
</script>
</body>
</html>Equiry?
Developers are eligible to request a referral code from us to use the service for free!
Please email to: [email protected] for details 🎉