#e-commerce

Subscribe
E-commerce, also known as electronic commerce, is the buying and selling of goods or services over the internet. It involves the transfer of information between two or more parties, typically through a website or app. Examples of e-commerce include online shopping, online banking, online stock trading, and online auctions. In JavaScript, e-commerce websites can be created by using frameworks such as React and Angular to create user interfaces and Node.js for server-side scripting. Additionally, libraries like Stripe can be used to handle payment processing.
Building Visually Readable Websites with React Bricks
Building Visually Readable Websites with React Bricks
Article
React Bricks offers a CMS with visual editing based on React components, bridging the gap between developers and content editors.Visual editors like React Bricks allow inline editing similar to word processors, enhancing user experience for content editors.The platform supports flexibility and autonomy, enabling developers to use preferred React frameworks while maintaining design integrity.React Bricks provides a framework-agnostic system, allowing deployment across various platforms like Vercel and Netlify.Advanced features include custom visual components, collaboration tools, and integration with external data sources.Creating a visually readable website has always been a balancing act between developers' needs and content editors' preferences. React Bricks aims to solve this challenge by offering a content management system (CMS) with visual editing based on React components. This approach allows developers to enjoy the flexibility of React frameworks while providing content editors with an intuitive, inline editing experience.The evolution of content management systems highlights the ongoing struggle to find a satisfying synthesis between visual editing and form-based editing. Early web development tools allowed for visual creation, but the generated code often lacked quality. Over time, CMS platforms like Joomla and WordPress emerged, offering visual editing capabilities but still faced issues with user independence and design consistency. React Bricks addresses these challenges by introducing a robust visual editor that combines the best of both worlds.React Bricks' visual editor is designed to mimic the experience of using word processors, allowing content editors to click and edit content directly inline. This approach eliminates the need for abstract entities and relationships, making the tool accessible and user-friendly. Developers, on the other hand, benefit from the autonomy and flexibility to use their preferred React frameworks and CSS libraries. The visual editor supports inline editing for text, images, and other components, providing a seamless editing experience.The platform's flexibility extends to designers, who can express a perfect corporate image with a design system that prevents editors from breaking it. React Bricks employs a method with constraints and freedom, ensuring that design systems remain intact while allowing editors the autonomy to create content. This results in a highly productive team where editors, developers, and designers can work harmoniously.React Bricks is framework-agnostic, supporting various platforms like Next.js, Gatsby, and Remix. This flexibility allows users to host their websites on different platforms such as Vercel and Netlify without being tied down to a specific framework. The React Bricks library provides enterprise-grade headless CMS capabilities, enabling the creation of visually editable content blocks with built-in constraints for editors.The creation of content blocks, or 'bricks,' is a central feature of React Bricks. These are essentially React components augmented with visual editing capabilities. Developers can define schemas and props for these bricks, ensuring that editors have control over content without compromising the design. The library includes components like text, rich text, image, and others that facilitate the creation of visually editable content blocks.Starting a project with React Bricks is straightforward, using a CLI command to create a React Bricks app. Developers can choose from various frameworks, including Next.js, and load default content to get started quickly. The platform provides pre-made bricks and styles, allowing users to focus on creating custom components tailored to their needs.React Bricks also offers advanced features such as collaboration tools, custom visual components, and integration with external data sources. Collaboration features allow multiple users to work on the same page, with real-time updates and editing locks to prevent conflicts. Custom visual components enable developers to extend the platform's capabilities, creating bespoke solutions for specific needs.Integration with external data sources allows React Bricks to fetch data from APIs or databases, providing dynamic content capabilities. This feature is particularly useful for e-commerce sites or applications that require real-time data updates. Developers can bind external data to content blocks, allowing editors to override or augment this content as needed.React Bricks' approach to content management emphasizes flexibility, autonomy, and user experience. By bridging the gap between developers and content editors, the platform ensures a seamless collaboration process, resulting in visually compelling and technically sound websites.
Building High-Performance Online Stores with Shopify Hydrogen and Remix
React Advanced Conference 2023React Advanced Conference 2023
104 min
Building High-Performance Online Stores with Shopify Hydrogen and Remix
WorkshopFree
Alexandra Spalato
Alexandra Spalato
I. Introduction- Overview of Shopify Hydrogen and Remix- Importance of headless e-commerce and its impact on the industry
II. Setting up Shopify Hydrogen- Installing and setting up Hydrogen with Remix- Setting up the project structure and components
III. Creating Collections and Products- Creating collections and products using Hydrogen’s React components- Implementing a Shopping Cart- Building a shopping cart using Hydrogen’s built-in components
VI. Building the home page with Storyblok- Cloning the space and explaining how it works- Implementing Storyblok in the repo- Creating the Blok components- Creating the Shopify components- Implementing personalisation
Create a Visually Editable Next.js Website Using React Bricks, With Blog and E-commerce
React Summit 2023React Summit 2023
139 min
Create a Visually Editable Next.js Website Using React Bricks, With Blog and E-commerce
Top Content
WorkshopFree
Matteo Frana
Matteo Frana
- React Bricks: why we built it, what it is and how it works- Create a free account- Create a new project with Next.js and Tailwind- Explore the directory structure- Anatomy of a Brick- Create a new Brick (Text-Image)- Add a title and description with RichText visual editing- Add an Image with visual editing- Add Sidebar controls to edit props (padding and image side)- Nesting Bricks using the Repeater component- Create an Image gallery brick- Publish on Netlify or Vercel- Page Types and Custom fields- Access Page meta values- Internationalization- How to reuse content across pages: Stories and Embeds- How to create an E-commerce with Products’ data from an external database and landing pages created visually in React Bricks- Advanced enterprise features: flexible permissions, locked structure, custom visual components
The New Frontier: E-Commerce at the Edge
Remix Conf Europe 2022Remix Conf Europe 2022
19 min
The New Frontier: E-Commerce at the Edge
Today's Talk discusses the new frontier of e-commerce at the edge, focusing on headless commerce and the benefits it offers. The edge, an intermediate server, can improve website loading by rendering HTML on the server and reducing latency. Venger, an open-source headless e-commerce framework, is introduced as a solution to cache API responses at the edge and improve performance. The Venger online shop demonstrates excellent performance, highlighting the benefits of headless and edge computing in e-commerce.
Build a Product Page with Shopify’s Hydrogen Framework
React Advanced Conference 2022React Advanced Conference 2022
81 min
Build a Product Page with Shopify’s Hydrogen Framework
WorkshopFree
David Witt
David Witt
Get hands on with Hydrogen, a React-based framework for building headless storefronts. Hydrogen is built for Shopify commerce with all the features you need for a production-ready storefront. It provides a quick start, build-fast environment so you can focus on the fun stuff - building unique commerce experiences. In this workshop we’ll scaffold a new storefront and rapidly build a product page. We’ll cover how to get started, file-based routing, fetching data from the Storefront API, Hydrogen’s built-in components and how to apply styling with Tailwind.You will know:- Get started with the hello-world template on StackBlitz- File-based routing to create a /products/example route- Dynamic routing /products/:handle- Hit the Storefront API with GraphQL- Move the query into the Hydrogen app- Update the query to fetch a product by handle- Display title, price, image & description.- Tailwind styling- Variant picker and buy now button- Bonus if there’s time: Collections page
Prerequisites: - A Chromium-based browser (StackBlitz)- Ideally experience with React. A general web development background would be fine.
Building custom storefronts on Shopify with Hydrogen
React Summit 2022React Summit 2022
71 min
Building custom storefronts on Shopify with Hydrogen
WorkshopFree
Abe Haskins
Megan Majewski
2 authors
Get hands-on with Hydrogen, a React-based framework powered by Shopify. In this workshop, we'll explore the framework and get a custom storefront up and running quickly. You'll learn how (and when) to leverage React Server Components and caching mechanisms to build fast, dynamic, custom storefronts.
Build a Custom Storefront on Shopify with Hydrogen
React Advanced Conference 2021React Advanced Conference 2021
170 min
Build a Custom Storefront on Shopify with Hydrogen
Workshop
Matt Seccafien
Cathryn Griffiths
2 authors
Hydrogen is an opinionated React framework and SDK for building fast, custom storefronts powered Shopify. Hydrogen embraces React Server Components and makes use of Vite and Tailwind CSS. In this workshop participants will get a first look at Hydrogen, learn how and when to use it, all while building a fully functional custom storefront with the Hydrogen team themselves.
Vue Storefront + Vendure = Fullstack Open Source Ecommerce
Vue.js London Live 2021Vue.js London Live 2021
19 min
Vue Storefront + Vendure = Fullstack Open Source Ecommerce
This Talk discusses the full stack open-source e-commerce using ViewStorefront and Venge. ViewStorefront is a lightning-fast frontend platform for headless commerce, while Venge is a framework for the back-end. Both tools are highly customizable and built using modern frameworks. Creating an online store with Venge is quick and easy. Overall, this Talk presents a dream stack for open-source e-commerce and encourages contributions to the projects.
Contentful and headless
React Finland 2021React Finland 2021
19 min
Contentful and headless
How Contentful helps you to manage all the data in a headless e-commerce website.
Jamstack eCommerce 101
JSNation Live 2021JSNation Live 2021
199 min
Jamstack eCommerce 101
Workshop
Bolaji Ayodeji
Bolaji Ayodeji
Digital commerce has changed, and there is an increasing demand for faster and kite efficient solutions. In this workshop, you'll learn about the evolution of ecommerce and how Jamstack and headless commerce evolves shopping experiences on the web. We will explore the basics of headless commerce building a minimal Jamstack ecommerce product page with static content, HTML5, CSS, and Javascript. Finally, we will integrate Commerce Layer for headless commerce capabilities and deploy our application to Netlify.
Faster media = faster websites
React Summit Remote Edition 2021React Summit Remote Edition 2021
90 min
Faster media = faster websites
Workshop
Marissa Masangcay
Pramod Shenoy
Akshay Ranganath
3 authors
As eCommerce all around the world has shifted to a predominantly online-first platform the need to provide a high performance website to your users has significantly increased. And on top of that, google has announced that as of May 2021 Core Web Vitals will have a direct impact on page rankings and SEO making web performance even more significant. Come learn the basics of web performance and how it relates to media. Using a simple React based ecommerce app in conjunction with a media optimizing product, you can learn how to deliver the optimal format and fidelity, potentially improving your page rankings.
Building a Shopify App with React & Node
React Summit Remote Edition 2021React Summit Remote Edition 2021
87 min
Building a Shopify App with React & Node
Top Content
WorkshopFree
Jennifer Gray
Hanna Chen
2 authors
Shopify merchants have a diverse set of needs, and developers have a unique opportunity to meet those needs building apps. Building an app can be tough work but Shopify has created a set of tools and resources to help you build out a seamless app experience as quickly as possible. Get hands on experience building an embedded Shopify app using the Shopify App CLI, Polaris and Shopify App Bridge.We’ll show you how to create an app that accesses information from a development store and can run in your local environment.
E-commerce on the Jamstack with NextJS and Netlify
React Summit Remote Edition 2021React Summit Remote Edition 2021
120 min
E-commerce on the Jamstack with NextJS and Netlify
Workshop
Nick DeJesus
Nick DeJesus
Jamstack frameworks are changing the way we build top-of-the-line experiences on the web. They are performant, secure and enable developers to build web apps faster than before. In this workshop, Nick DeJesus will walk you through what it's like to build an e-commerce site using NextJS, use-shopping-cart and theme-ui. You will learn how serverless functions with Netlify to help you make secure transactions and how to build accessible UI components that extend use-shopping-cart's abilities.
Headless vs Traditional eCommerce Platforms: Introducing Commerce Layer
JSNation Live 2021JSNation Live 2021
8 min
Headless vs Traditional eCommerce Platforms: Introducing Commerce Layer
Commerce Layer is an Atlas Commerce platform that provides global shopping capabilities. It offers a range of endpoints for managing various aspects of e-commerce. Modular architecture, like the one used by Commerce Layer, offers benefits such as flexibility, scalability, security, omnichannel capabilities, and future-proofing.