Comment créer un widget personnalisé en utilisant django pour une utilisation sur des sites externes

Question

J'ai un nouveau site sur lequel je travaille. Le site aura un accord préalable avec les sites de commerce électronique pour inclure des modules complémentaires sur leur site Web.

Envisagez l'exemple suivant: Mon site Web, ABC.com cible les sites de commerce électronique. Pour chaque site de commerce électronique qui vend le produit X, je veux qu'ils incluent un add-on qui donne aux acheteurs la possibilité d'acheter le service Z s'ils le souhaitent. ABC.com communiquera avec les sites de commerce électronique via une API REST.

Mon défi est de savoir comment intégrer mon service en tant qu'application dans les sites de commerce électronique externes. Je suppose que ce sera sous la forme d'un widget, d'un code HTML ou d'un peu de javascript. Quelque chose de similaire à l'image ci-jointe d'Amazon.com. Je vise à faire une intégration simple avec les sites externes pour éviter qu'ils en fassent trop de leur côté.

Existe-t-il une meilleure pratique sur la façon de gérer cela?

Voir un exemple d'Amazon:

Answer 1

Il y a un certain nombre de façons, mais les deux sont les plus communs:

iframe

Vous créez une petite page ne contenant que les contrôles et la logique vous avez besoin de ce qui sera intégré dans le site en utilisant un iframe. Le site parent communiquerait les détails pertinents, tels que le nom du produit et le SKU du produit, avec l'iframe enfant via les paramètres d'URL dans l'attribut src de l'iframe. Dans ce cas, vous ne savez pas si l'utilisateur a effectivement soumis le formulaire parent.

widget de Javascript

Vous créez un petit javascript widget autonome qui peut être chargé à partir d'un CDN. Le widget cible alors un ou plusieurs éléments spécifiques sur la page et ajoute vos champs de formulaire supplémentaires. Il pourrait alors écouter les événements de soumission de formulaire (ou d'autres types d'événements) et pourrait être responsable de faire des appels AJAX directement à votre API. Les exemples sont des widgets comme Stripe qui génèrent des boutons d'achat sur une page.