Requirement

Add a free product to cart when cart total price is over $40.

Solution

Well yes, there is a quick solution for this and that is to buy an addon. But I’m not here to convince you to do that. Rather we will be building it from scratch. So to begin with,

Take a moment and think about how are you going to achieve this, how am I;

  • inject a product to the cart?


What is Styled-components?

As the name itself says this is a component-based styling tool. It is powered by tagged templates and allows to create react components with styles.

What does it cater?

  • Auto prefixing
  • Reverse selectors
  • Built-in Theme compatibility
  • Nesting
  • Uses unique classes
  • Using styled-component supported libraries, such as styled-material, bootstrap styled and many more
  • Loads only the required styles for the displayed page

Installation

  1. Navigate to your components root
  2. Run npm install -save styled-components
  3. To start using open a component and import
import styled from 'styled-components’

Styling

I’ll show this with an example. Let's style our website header section

<Header> <MenuWrapper> <MenuItem>Home</MenuItem> <MenuItem>About</MenuItem> <MenuItem>Contact</MenuItem> </MenuWrapper> <Logo>Site Name</Logo> <HeaderRight>…


Requirements

WordPress 4.7 or higher

Project Setup

  1. Run npm install -g create-react-app on your terminal if you have not installed globally
  2. Run create-react-app wordpress-react-app to install react
  3. After the packages has been installed navigate into wordpress-react-app
  4. To start the project: npm start

Connecting with REST API

Open the project in your editor. Create a new folder named components inside the src folder.

Defining the backend URL’s

Create a file GetData.js inside components. Lets create a constant named appUrl to add the WordPress URL+ JSON path.

const appUrl = “http://dev.wpreactbackend.com/wp-json/wp/v2/";


So that was a huge change going from Windows to Ubuntu. Being a Windows user from the day one the switch to command base OS is definitely a thinker.

If you are like me, I’m sure you must be going through the pain of setting up the development environment. Believe me it gets way easier

One major issue I came across was when installing MySQL. The installation process was a piece of cake and after completion I felt something was missing. YES it did not ask me to add user and password.

Access Denied

😮 What happened?

The root user used auth_socket to authenticate in…


Wanting to try BigCommerce?

BigCommerce is a scalable ecommerce platform which allows you to create an online store.

They allow you a generous 15 days free trial for you to try out now. 😋

Are you ready? 🚀

Steps for installation

  1. Clone from git — git clone https://github.com/bigcommerce/cornerstone.git
  2. When clone is completed, direct to cornerstone folder
  3. In gitbash run — npm install -g bigcommerce/stencil-cli
  4. In gitbash run — npm install
  5. Setting up API
  6. Login or create account in BigCommerce
  7. From the navigation go to Advanced Setting → API Accounts → Create API Account
  8. In gitbash run — stencil init
  9. Enter the site URL


GetResponse

GetResponse is an email marketing platform. They provide several ways to integrate with your website. Enables to create custom fields through GetResponse Dashboard. Its a simple implementation with their provided out of the box services.

In my case I had to integrate it with my website register form.

I had to use cURL for accessing with the provided authentication as browsers do not allow CORS(Cross Origin Resource Sharing).

curl.php

<?php
$authorization = “X-Auth-Token: api-key xxxx xxxx xxxx xxxx xxxx xxxx xxxx”;
$ch = curl_init();$name = $_POST[“name”];
$email = $_POST[“email”];
$data = array ( ‘name’ => $name, ‘email’ => $email…


Checklist

  • Wamp/xamp
  • Database — MYSQL 5.6.x or higher
  • PHP — 7.0.4 or higher

Step 1

Install composer.json
Install node

  1. Download the installer
  2. Execute the installer

Or from gitHub
https://github.com/magento/magento2

Also if you are using git, then clone magento 2 files using command line or any terminal. Create a folder inside the www folder (wamp>www) and run
git clone https://github.com/magento/magento2.git.
(composer install)

Open phpmyadmin and create a database with the project name

MAKING SERVER NAMES

Go to : wamp64\bin\apache\apache2.4.18\conf\extra
Open httpd-vhosts.conf

COPY AND PASTE BELOW

<VirtualHost *:80> ServerName Set…

Rashain Jayanetty

Frontend Developer; Minimalist; Tea enthusiast; Visit me @ jayanetty.com

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store