Tag Archives: single

Thumbnail

How To Reduce The Need To Hand-Code Theme Parts In Your WordPress Website




How To Reduce The Need To Hand-Code Theme Parts In Your WordPress Website

Nick Babich



(This is a sponsored article.) Good design leads to sales and conversions on your website, but crafting great design is no easy task. It takes a lot of time and effort to achieve excellent results.

Design is a constantly evolving discipline. Product teams iterate on design to deliver the best possible experience to their users. A lot of things might change during each iteration. Designers will introduce changes, and developers will dive into the code to adjust the design. While jumping into code to solve an exciting problem might be fun, doing it to resolve a minor issue is the exact opposite. It’s dull. Imagine that you, as a web developer, continually get requests from the design team like:

  • Change the featured image.
  • Update the copy next to the logo in the header.
  • Add a custom header to the “About Us” page.

These requests happen all the time in big projects. It’s a never-ending stream of boring requests. Want to have fun while creating websites, focus on more challenging tasks, and complete your projects much faster?

Elementor helps with just that. It reduces the need to hand-code the theme parts of your website and frees you up to work on more interesting and valuable parts of the design.

Elementor Page Builder

For a long time, people dreamed that they would be able to put together a web page by dragging and dropping different elements together. That’s how page builders became popular. Page builders introduced a whole different experience of building a page — all actions involving content are done visually. They reduce the time required to produce a desirable structure.

What if we took the most popular CMS in the world and develop the most advanced page builder for it? That’s how Elementor 1.0 for WordPress was created. Here are a few features of the tool worth mentioning:

  • Live editing. Elementor provides instant live editing — what you see is what you get! The tool comes with a live drag-and-drop interface. This interface eliminates guesswork by allowing you to build your layout in real time.
  • Elementor comes with a ton of widgets, including for the most common website elements. Also, there are dozens of Elementor add-ons created by the community: https://wordpress.org/plugins/search/elementor/
  • Responsive design out of the box. The content you create using Elementor will automatically adapt to mobile devices, ensuring that your website is mobile-friendly. Your design will look pixel-perfect on any device.
  • Mobile-first design. The Elementor page builder lets you create truly a responsive website in a whole new visual way. Use different font sizes, padding and margins per device, or even reverse column ordering for users who are browsing your website using a mobile device.
  • Revision history. Elementor has a history browser that allows you to roll forward and backward through your changes. It gives you the freedom to experiment with a layout without fear of losing your progress.
  • Built-in custom CSS feature allow you to add your own styles. Elementor allows you to add custom CSS to every element, and to see it in action live in the editor.
  • Theme-independence. With Elementor, you’re not tied to a single theme. You can change the theme whenever you like, and your content will come along with you. This gives you, as a WordPress user, maximum flexibility and freedom to work with your favorite theme, or to switch themes and not have to worry about making changes.
  • Complete code reference and a lot of tutorials. Elementor is a developer-oriented product — it’s an open-source solution with a complete code reference. If you’re interested in creating your own solutions for Elementor, it’s worth checking the website https://developers.elementor.com. The website contains a lot of helpful tutorials and explanations.

There are two particular cases in which Elementor would be helpful to web developers:

  • Web developers who need to create an interactive prototype really quickly. Elementor can help in situations where a team needs to provide an interactive solution but doesn’t have enough time to code it.
  • Web developers who don’t want to be involved in post-development activities. Elementor is perfect when a website is developed for a client who wants to make a lot of changes themselves without having to write a single line of code.

Meet Elementor Pro 2.0 Theme Builder

Despite all of the advantages Elementor 1.0 had, it also had two severe limitations:

  • There were parts of a WordPress website that weren’t customizable. As a user, you were limited to a specific area of your website: the content that resides between the header and the footer. To modify other parts of the website (e.g. footer or header), you had to mess with the code.
  • It was impossible to create dynamic content. While this wouldn’t cause any problems if the website contained only static pages (such as an “About Us” page), it might be a roadblock if the website had a lot of dynamic content.

In an attempt to solve these problems, the Elementor team released the Elementor 2.0 Theme Builder, with true theme-building functionality. Elementor Pro 2.0 introduces a new way to build and customize websites. With Theme Builder, you don’t have to code menial theme jobs anymore and can instead focus on deeper website functionality. You are able to design the entire page in the page builder. No header, no footer, just Elementor.

How Does Theme Builder Work?

The tool allows you to build a header, footer, single or archive templates, and other areas of a website using the same Elementor interface. To make that possible, Elementor 2.0 introduces the concept of global templates. Templates are design units. They’re capable of customizing each and every area of your website.

The process of creating a template is simple:

  1. Choose a template type.
  2. Build your page’s structure.
  3. Set the conditions that define where to apply your template.

Let’s explore each of these steps in more detail by creating a simple website. In the next section, we’ll build a company website that has a custom header and footer and dynamic content (a blog and archive). But before you start the process, make sure you have the latest version of WordPress, with the Elementor Pro plugin installed and activated. It is also worth mentioning that you should have a theme for your website. Elementor doesn’t replace your theme; rather, it gives you visual design capabilities over every part of the theme.

Custom Header And Footer

The header and footer are the backbone of every website. They are where users expect to see navigation options. Helping visitors navigate is a top priority for web designers.

Let’s start with creating a header. We’ll create a fairly standard header, with the company’s logo and main menu.

The process of creating a custom header starts with choosing a template. To create a new template, you’ll need to go to “Elementor” → “My Templates” → “Add New”.




Large preview

You’ll see a dialog box, “Choose Template Type”. Select “Header” from the list of options.




Choose the type of template you want to create. It can be a header, footer, single post page or archive page. (Large preview)

Once you choose a type of template, Elementor will display a list of blocks that fit that type of content. Blocks are predesigned layouts provided by Elementor. They save you time by proving common design patterns that you can modify to your own needs. Alternatively, you can create a template from scratch.




Choose either a predesigned block for your header, or build the entire menu from scratch. (Large preview)

Let’s choose the first option from the list (“Metro”). You can see that the top area of the page layout has a new object — a newly created header.




Large preview

Now, you need to customize the header according to your needs. Let’s choose a logo and define a menu. Click on the placeholder “Choose Your Image”, and select the logo from the gallery. It’s worth mentioning that the template embeds your website’s logo. This is good because if you ever change that logo at the website level, the header will automatically be updated on all pages. Next, click on the menu placeholder and select the website’s main menu.




Large preview

When the process of customization is finished, you need to implement the revised header on your website. Click the “Publish” button. The “Display Conditions” window will ask you to choose where to apply your template.




Every template contains the display conditions that define where it’s placed. Choose where the header will be shown. (Large preview)

The conditions define which pages your template will be applied to. It’s possible to show the header on all pages, to show it only on certain pages or to exclude some pages from showing the header. The latter case is helpful if you don’t want to show the header on particular pages.




Choose where you want to show the header. Want one header for the home page and another for the services page? Get it done in minutes. (Large preview)

As soon as you publish your template, Elementor will recognize it as a header and will use it on your website.

Now it’s time to create the footer for your website. The process is similar; the only difference is that this time you’ll need to choose the template named “Footer” and select the footer layout from the list of available blocks. Let’s pick the first option from the list (the one that says “Stay in Touch” on the dark background).




Choosing a block for a footer. (Large preview)




Large preview

Next, we need to customize the footer. Change the color of the footer and the text label under the words “Stay in Touch”. Let’s reuse the color of the header for the footer. This will make the design more visually consistent.




Large preview

Finally, we need to choose display conditions. Similar to the header, we’ll choose to display the footer for the entire website.




Large preview

That’s all! You just built a brand new header and footer for your website without writing a single line of code. The other great news is that you don’t have to worry about how your design will look on mobile. Elementor does that for you. UI elements such as the top-level menu will automatically become a hamburger for mobile users.

Single Post for Blog

Let’s design a blog page. Unlike static pages, such as “About us”, the blog has dynamic content. Elementor 2.0 allows you to build a framework for your content. So, each time you write a new blog post, your content will automatically be added to this design framework.

The process of creating a blog page starts with selecting a template. For a single blog post, choose the template type named “Single.” We have two options of blocks to choose from. Let’s choose the first one.




Choosing a block for a single post. (Large preview)

The block you selected has all of the required widgets, so you don’t need to change anything. But it’s relatively easy to adjust the template if needed. A single post is made of dynamic widgets such as the post title, post content, featured image, meta data and so on. Unlike static widgets that display content that you enter manually, dynamic widgets draw content from the current pages where they’re applied. These widgets are in the “Elements” panel, under the category “Theme Elements”.




List of dynamic elements. A dynamic widget changes according to the page it’s used on. (Large preview)

When you work on dynamic content like a single post, you’ll want to see how it looks on different posts. Elementor gives you a preview mode so you can know exactly what your blog will look like.

To go into preview mode, you need to click on the Preview icon (the eye icon in the bottom-left part of the layout), and then “Settings”.




Never again work on the back end and guess what the front end will look like. Use preview mode to see how your templates will work for your content. (Large preview)

To see what your page will look like when it’s be filled with content, simply choose a source of content (e.g. a post from the “News” category).




Large preview




Fill your template with content from your actual website to see what the result will look like. (Large preview)

Once you’ve finished creating dynamic content, you’ll need to choose when the template will be applied. Click on “Publish” button, and you’ll see a dialog that allows you to define conditions.




Choosing conditions for a single post template. (Large preview)

Archive

The archive page is a page that shows an assortment of posts. Your archive page makes it easy for readers to see all of your content and to dive deeper into the website. It’s also a common place to show search results.

The Theme Builder enables you to build your own archive using a custom taxonomy. To create an archive page, you need to go through the usual steps: create a new template, and choose a block for it. For now, Elementor provides only one type of block for this type of template (you can see it in the image below).




Large preview

After selecting this block, all you need to do is either set a source for your data or stick to the default selection. By default, the archive page shows all available blog posts. Let’s leave it as is.




Large preview

As you can see, we’ve successfully customized the website’s header, footer, single post and archive page, without any roadblocks of coding.

What To Expect In The Near Future

Elementor is being actively developed, with new features and exciting enhancements released all the time. This means that the theme builder is only going to get better. The Elementor team plans to add integration for plugins such as WooCommerce, Advanced Custom Fields (ACF), and Toolset. The team also welcomes feedback from developers. So, if you have a feature that you would like to have in Elementor, feel free to reach out to the Elementor team and suggest it.

Conclusion

When WordPress was released 15 years ago, the idea behind it was to save valuable time for developers and to make the process of content management as easy as possible. Today, it is widely regarded as a developer-friendly tool. Elementor is no different. The tool now offers never-before-seen flexibility to visually design an entire website. Don’t believe me? Try it for yourself! Explore Elementor Pro today.

Smashing Editorial
(ms, ra, il, al, yk)


Read article here – 

How To Reduce The Need To Hand-Code Theme Parts In Your WordPress Website

Thumbnail

Landing The Concept: Movie High-Concept Theory And UX Design




Landing The Concept: Movie High-Concept Theory And UX Design

Andy Duke



Steven Spielberg once famously said, “If a person can tell me the idea in 25 words or less, it’s going to make a pretty good movie.” He was referring to the notion that the best mass-appeal ‘blockbuster’ movies are able to succinctly state their concept or premise in a single short sentence, such as Jaws (“It’s about a shark terrorizing a small town”) and Toy Story (“It’s about some toys that come to life when nobody’s looking”).

What if the same were true for websites? Do sites that explain their ‘concept’ in a simple way have a better shot at mass-appeal with users? If we look at the super simple layout of Google’s homepage, for example, it gives users a single clear message about its concept equally as well as the Jaws movie poster:


Google homepage


Google homepage: “It’s about letting you search for stuff.” (Large preview)

Being aware of the importance of ‘high-concept’ allows us — as designers — to really focus on user’s initial impressions. Taking the time to actually define what you want your simple ‘high-concept’ to be before you even begin designing can really help steer you towards the right user experience.

What Does High-Concept Theory Mean For UX Design?

So let’s take this seriously and look at it from a UX Design standpoint. It stands to reason that if you can explain the ‘concept’ or purpose of your site in a simple way you are lowering the cognitive load on new users when they try and understand it and in doing so, you’re drastically increasing your chances of them engaging.

The parallels between ‘High-Concept’ theory and UX Design best practice are clear. Blockbuster audiences prefer simple easy to relate concepts presented in an uncomplicated way. Web users often prefer simpler, easy to digest, UI (User Interface) design, clean layouts, and no clutter.

Regardless of what your message is, presenting it in a simple way is critical to the success of your site’s user experience. But, what about the message itself? Understanding if your message is ‘high-concept’ enough might also be critical to the site’s success.

What Is The Concept Of ‘High-Concept’ In The Online World?

What do we mean when we say ‘high-concept’? For movies it’s simple — it’s what the film is about, the basic storyline that can be easy to put into a single sentence, e.g. Jurassic Park is “about a theme park where dinosaurs are brought back to life.”

When we look at ‘high-concept’ on a website, however, it can really apply to anything: a mission statement, a service offering, or even a new product line. It’s simply the primary message you want to share through your site. If we apply the theory of ‘high-concept’, it tells us that we need to ensure that we convey that message in a simple and succinct style.

What Happens If You Get It Right?

Why is ‘high-concept’ so important? What are the benefits of presenting a ‘high-concept’ UX Design? One of the mistakes we often fall foul of in UX Design is focussing in on the specifics of user tasks and forgetting about the critical importance of initial opinions. In other words, we focus on how users will interact with a site once they’ve chosen to engage with it and miss the decision-making process that comes before everything. Considering ‘high-concept’ allows us to focus on this initial stage.

The basic premise to consider is that we engage better with things we understand and things we feel comfortable with. Ensuring your site presents its message in a simple ‘high-concept’ way will aid initial user engagement. That initial engagement is the critical precursor to all the good stuff that follows: sales, interaction, and a better conversion rate.

How Much Concept Is Too Much Concept?

The real trick is figuring out how much complexity your users can comfortably handle when it comes to positioning your message. You need to focus initially on presenting only high-level information rather than bombarding users with everything upfront. Give users only the level of understanding they need to engage initially with your site and drive them deeper into the journey disclosing more detail as you go.

Netflix does a great job at this. The initial view new users are presented with on the homepage screen is upfront with its super high-concept — ‘we do video content’ once users have engaged with this premise they are taken further into the proposition — more information is disclosed, prices, process, and so on.


Netflix


Netflix: “It lets you watch shows and movies anywhere.” (Large preview)

When To Land Your High-Concept?

As you decide how to layout the site, another critical factor to consider is when you choose to introduce your initial ‘high-concept’ to your users. It’s key to remember how rare it is that users follow a nice simple linear journey through your site starting at the homepage. The reality is that organic user journeys sometimes start with search results. As a result, the actual interaction with your site begins on the page that’s most relevant to the user’s query. With this in mind, it’s critical to consider how the premise of your site appears to users on key entry pages for your site wherever they appear in the overall hierarchy.

Another key point to consider when introducing the message of your site is that in many scenarios users will be judging whether to engage with you way before they even reach your site. If the first time you present your concept to users is via a Facebook ad or an email campaign, then implementation is drastically different. However, the theory should be the same, i.e. to ensure you present your message in that single sentence ‘high-concept’ style way with potential users.

How To Communicate Your High-Concept

Thus far, we’ve talked about how aiming for ‘high-concept’ messages can increase engagement — but how do we do this? Firstly, let’s focus on the obvious methods such as the wording you use (or don’t use).

Before you even begin designing, sit down and focus in on what you want the premise of your site to be. From there, draw out your straplines or headings to reflect that premise. Make sure you rely on content hierarchy though, use your headings to land the concept, and don’t bury messages that are critical to understanding deep in your body copy.

Here’s a nice example from Spotify. They achieve a ‘high-concept’ way of positioning their service through a simple, uncluttered combination of imagery and wording:


Spotify


Spotify: “It lets you listen to loads of music.” (Large preview)

Single Sentence Wording

It’s key to be as succinct as possible: the shorter your message is, the more readable it becomes. The true balancing act comes in deciding where to draw the line between too little to give enough understanding and too much to make it easily readable.

If we take the example of Google Drive — it’s a relatively complex service, but it’s presented in a very basic high-concept way — initially a single sentence that suggests security and simplicity:


Google Drive

Then the next level of site lands just a little more of the concept of the service but still keeping in a simple single sentence under 25 words (Spielberg would be pleased):


Google Drive


Google Drive: “A place where you can safely store your files online.” (Large preview)

Explainer Videos

It doesn’t just stop with your wording as there is a myriad of other elements on the page that you can leverage to land your concept. The explainer video is used to great effect by Amazon to introduce users to the concept of Amazon Go. In reality, it’s a highly complex technical trial of machine learning, computer visual recognition, and AI (artificial intelligence) to reimagine the shopping experience. As it’s simply framed on the site, it can be explained in a ‘high-concept’ way.

Amazon gives users a single sentence and also, crucially, makes the whole header section a simple explainer video about the service.




Amazon Go: “A real life shop with no checkouts.” (Large preview)

Imagery

The imagery you use can be used to quickly and simply convey powerful messages about your concept without the need to complicate your UI with other elements. Save the Children use imagery to great effect to quickly show the users the critical importance of their work arguably better than they ever could with wording.




Save the children… “They’re a charity that helps children.” (Large preview)

Font And Color

It’s key to consider every element of your site as a potential mechanism for helping you communicate your purpose to your users, through the font or the color choices. For example, rather than having to explicitly tell users that your site is aimed at academics or children you can craft your UI to help show that.

Users have existing mental models that you can appeal to. For example, bright colors and childlike fonts suggest the site is aimed at children, serif fonts and limited color use often suggest a much more serious or academic subject matter. Therefore, when it comes to landing the concept of your site, consider these as important allies to communicate with your users without having to complicate your message.




Legoland: “A big Lego theme park for kids.” (Large preview)

Design Affordance

So far, we’ve focused primarily on using messaging to communicate the concept to users. Still, what if the primary goal of your page is just to get users to interact with a specific element? For example, if you offer some kind of tool? If that’s the case, then showing the interface of this tool itself is often the best way to communicate its purpose to users.

This ties in with the concept of ‘Design Affordance’ — the idea that the form of a design should communicate its purpose. It stands to reason that sometimes the best way to tell users about your simple tool with an easy to use interface — is to show them that interface.

If we look at Airbnb, a large part of the Airbnb concept is the online tool that allows the searching and viewing of results; they use this to great effect on this landing page design by showing the data entry view for that search. Showing users how easy it is to search while also presenting them the with simple messaging about the Airbnb concept.


Airbnb


Airbnb: “It let’s you rent people’s homes for trips.” (Large preview)

How To Test You’ve Landed It

Now that you’ve designed your site and you’re happy that it pitches its concept almost as well as an 80s blockbuster — but how can you validate that? It would be lovely to check things over with a few rounds of in-depth lab-based user research, but in reality, you’ll seldom have the opportunity, and you’ll find yourself relying on more ‘guerilla’ methods.

One of the simplest and most effective methodologies to check how ‘high-concept’ your site is is the ‘5 second’ or ‘glance’ test. The simple test involves showing someone the site for 5 seconds and then hiding it from view. Then, users can then be asked questions about what they can recall about the site. The idea being that in 5 seconds they only have the opportunity to view what is immediately obvious.

Here are some examples of questions to ask to get a sense of how well the concept of your site comes across:

  • Can you remember the name of the site you just saw?
  • What do you think is the purpose of the page you just saw?
  • Was it obvious what the site you just saw offers?
  • Do you think you would use the site you just saw?

Using this test with a decent number of people who match your target users should give some really valuable insight into how well your design conveys the purpose of your site and if indeed you’ve managed to achieve ‘high-concept’.

Putting It All Into Practice

Let’s try implementing all this knowledge in the real world? In terms of taking this and turning it into a practical approach, I try and follow these simple steps for every project:

  1. Aim For High-Concept
    When you’re establishing the purpose of any new site (or page or ad) try and boil it down to a single, simple, overarching ‘High-Concept.’
  2. Write It Down
    Document what you want that key concept to be in 25 words or less.
  3. Refer Back
    Constantly refer back to that concept throughout the design process. From picking your fonts and colors to crafting your headline content — ensure that it all supports that High-Concept you wrote down.
  4. Test It
    Once complete use the 5-second test on your design with a number of users and compare their initial thoughts to your initial High-Concept. If they correlate, then great, if not head back to step 3 and try again.

In this article, we have discussed the simple rule of making blockbuster movies, and we have applied that wisdom to web design. No ‘shock plot twist’ — just some common sense. The first time someone comes into contact with your website, it’s vital to think about what you want the initial message to be. If you want mass market appeal, then craft it into a ‘high-concept’ message that Spielberg himself would be proud of!

Smashing Editorial
(ah, ra, yk, il)


Visit site:

Landing The Concept: Movie High-Concept Theory And UX Design

Thumbnail

Building Mobile Apps Using React Native And WordPress




Building Mobile Apps Using React Native And WordPress

Muhammad Muhsin



As web developers, you might have thought that mobile app development calls for a fresh learning curve with another programming language. Perhaps Java and Swift need to be added to your skill set to hit the ground running with both iOS and Android, and that might bog you down.

But this article has you in for a surprise! We will look at building an e-commerce application for iOS and Android using the WooCommerce platform as our backend. This would be an ideal starting point for anyone willing to get into native cross-platform development.

A Brief History Of Cross-Platform Development

It’s 2011, and we see the beginning of hybrid mobile app development. Frameworks like Apache Cordova, PhoneGap, and Ionic Framework slowly emerge. Everything looks good, and web developers are eagerly coding away mobile apps with their existing knowledge.

However, mobile apps still looked like mobile versions of websites. No native designs like Android’s material design or iOS’s flat look. Navigation worked similar to the web and transitions were not buttery smooth. Users were not satisfied with apps built using the hybrid approach and dreamt of the native experience.

Fast forward to March 2015, and React Native appears on the scene. Developers are able to build truly native cross-platform applications using React, a favorite JavaScript library for many developers. They are now easily able to learn a small library on top of what they know with JavaScript. With this knowledge, developers are now targeting the web, iOS and Android.

Furthermore, changes done to the code during development are loaded onto the testing devices almost instantly! This used to take several minutes when we had native development through other approaches. Developers are able to enjoy the instant feedback they used to love with web development.

React developers are more than happy to be able to use existing patterns they have followed into a new platform altogether. In fact, they are targeting two more platforms with what they already know very well.

This is all good for front-end development. But what choices do we have for back-end technology? Do we still have to learn a new language or framework?

The WordPress REST API

In late 2016, WordPress released the much awaited REST API to its core, and opened the doors for solutions with decoupled backends.

So, if you already have a WordPress and WooCommerce website and wish to retain exactly the same offerings and user profiles across your website and native app, this article is for you!

Assumptions Made In This Article

I will walk you through using your WordPress skill to build a mobile app with a WooCommerce store using React Native. The article assumes:

  • You are familiar with the different WordPress APIs, at least at a beginner level.
  • You are familiar with the basics of React.
  • You have a WordPress development server ready. I use Ubuntu with Apache.
  • You have an Android or an iOS device to test with Expo.

What We Will Build In This Tutorial

The project we are going to build through this article is a fashion store app. The app will have the following functionalities:

  • Shop page listing all products,
  • Single product page with details of the selected item,
  • ‘Add to cart’ feature,
  • ‘Show items in cart’ feature,
  • ‘Remove item from cart’ feature.

This article aims to inspire you to use this project as a starting point to build complex mobile apps using React Native.

Note: For the full application, you can visit my project on Github and clone it.

Getting Started With Our Project

We will begin building the app as per the official React Native documentation. Having installed Node on your development environment, open up the command prompt and type in the following command to install the Create React Native App globally.

npm install -g create-react-native-app

Next, we can create our project

create-react-native-app react-native-woocommerce-store

This will create a new React Native project which we can test with Expo.

Next, we will need to install the Expo app on our mobile device which we want to test. It is available for both iOS and Android.

On having installed the Expo app, we can run npm start on our development machine.

cd react-native-woocommerce-store

npm start


Starting a React Native project through the command line via Expo. (Large preview)

After that, you can scan the QR code through the Expo app or enter the given URL in the app’s search bar. This will run the basic ‘Hello World’ app in the mobile. We can now edit App.js to make instant changes to the app running on the phone.

Alternatively, you can run the app on an emulator. But for brevity and accuracy, we will cover running it on an actual device.

Next, let’s install all the required packages for the app using this command:

npm install -s axios react-native-htmlview react-navigation react-redux redux redux-thunk

Setting Up A WordPress Site

Since this article is about creating a React Native app, we will not go into details about creating a WordPress site. Please refer to this article on how to install WordPress on Ubuntu. As WooCommerce REST API requires HTTPS, please make sure it is set up using Let’s Encrypt. Please refer to this article for a how-to guide.

We are not creating a WordPress installation on localhost since we will be running the app on a mobile device, and also since HTTPS is needed.

Once WordPress and HTTPS are successfully set up, we can install the WooCommerce plugin on the site.


Installing the WooCommerce plugin to our WordPress installation. (Large preview)

After installing and activating the plugin, continue with the WooCommerce store setup by following the wizard. After the wizard is complete, click on ‘Return to dashboard.’

You will be greeted by another prompt.


Adding example products to WooCommerce. (Large preview)

Click on ‘Let’s go‘ to ‘Add example products’. This will save us the time to create our own products to display in the app.

Constants File

To load our store’s products from the WooCommerce REST API, we need the relevant keys in place inside our app. For this purpose, we can have a constans.js file.

First create a folder called ‘src’ and create subfolders inside as follows:


Create the file ‘Constants.js’ within the constans folder. (Large preview)

Now, let’s generate the keys for WooCommerce. In the WordPress dashboard, navigate to WooCommerce → Settings → API → Keys/Apps and click on ‘Add Key.’

Next create a Read Only key with name React Native. Copy over the Consumer Key and Consumer Secret to the constants.js file as follows:

const Constants = 
   URL: 
wc: 'https://woocommerce-store.on-its-way.com/wp-json/wc/v2/'
   ,
   Keys: 
ConsumerKey: 'CONSUMER_KEY_HERE',
ConsumerSecret: 'CONSUMER_SECRET_HERE'
   
}
export default Constants;

Starting With React Navigation

React Navigation is a community solution to navigating between the different screens and is a standalone library. It allows developers to set up the screens of the React Native app with just a few lines of code.

There are different navigation methods within React Navigation:

  • Stack,
  • Switch,
  • Tabs,
  • Drawer,
  • and more.

For our Application we will use a combination of StackNavigation and DrawerNavigation to navigate between the different screens. StackNavigation is similar to how browser history works on the web. We are using this since it provides an interface for the header and the header navigation icons. It has push and pop similar to stacks in data structures. Push means we add a new screen to the top of the Navigation Stack. Pop removes a screen from the stack.

The code shows that the StackNavigation, in fact, houses the DrawerNavigation within itself. It also takes properties for the header style and header buttons. We are placing the navigation drawer button to the left and the shopping cart button to the right. The drawer button switches the drawer on and off whereas the cart button takes the user to the shopping cart screen.

const StackNavigation = StackNavigator(
 DrawerNavigation:  screen: DrawerNavigation 
}, 
   headerMode: 'float',
   navigationOptions: ( navigation, screenProps ) => (
     headerStyle:  backgroundColor: '#4C3E54' ,
     headerTintColor: 'white',
     headerLeft: drawerButton(navigation),
     headerRight: cartButton(navigation, screenProps)
   })
 });

const drawerButton = (navigation) => (
 <Text
   style= padding: 15, color: 'white' }
   onPress=() => 
     if (navigation.state.index === 0) 
       navigation.navigate('DrawerOpen')
      else 
       navigation.navigate('DrawerClose')
     
   }
   }> (
 <Text style= padding: 15, color: 'white' }
   onPress=() =>  navigation.navigate('CartPage') }
 >
   <EvilIcons name="cart" size=30 />
   screenProps.cartCount
 </Text>
);

DrawerNavigation on the other hands provides for the side drawer which will allow us to navigate between Home, Shop, and Cart. The DrawerNavigator lists the different screens that the user can visit, namely Home page, Products page, Product page, and Cart page. It also has a property which will take the Drawer container: the sliding menu which opens up when clicking the hamburger menu.

const DrawerNavigation = DrawerNavigator(
 Home: 
   screen: HomePage,
   navigationOptions: 
     title: "RN WC Store"
   
 },
 Products: 
   screen: Products,
   navigationOptions: 
     title: "Shop"
   
 },
 Product: 
   screen: Product,
   navigationOptions: ( navigation ) => (
     title: navigation.state.params.product.name
   ),
 },
 CartPage: 
   screen: CartPage,
   navigationOptions: 
     title: "Cart"
   
 }
}, 
   contentComponent: DrawerContainer
 );

#


Left: The Home page (homepage.js). Right: The open drawer (DrawerContainer.js).

Injecting The Redux Store To App.js

Since we are using Redux in this app, we have to inject the store into our app. We do this with the help of the Provider component.

const store = configureStore();

class App extends React.Component 
 render() 
   return (
     <Provider store=store>    
       <ConnectedApp />    
     </Provider>    
   )
 }
}

We will then have a ConnectedApp component so that we can have the cart count in the header.

class CA extends React.Component 
 render() 
   const cart = 
     cartCount: this.props.cart.length
   
   return (
     <StackNavigation screenProps=cart />
   );
 }
}

function mapStateToProps(state) 
 return 
   cart: state.cart
 ;
}

const ConnectedApp = connect(mapStateToProps, null)(CA);

Redux Store, Actions, And Reducers

In Redux, we have three different parts:

  1. Store
    Holds the whole state of your entire application. The only way to change state is to dispatch an action to it.
  2. Actions
    A plain object that represents an intention to change the state.
  3. Reducers
    A function that accepts a state and an action type and returns a new state.

These three components of Redux help us achieve a predictable state for the entire app. For simplicity, we will look at how the products are fetched and saved in the Redux store.

First of all, let’s look at the code for creating the store:

let middleware = [thunk];

export default function configureStore() 
    return createStore(
        RootReducer,
        applyMiddleware(...middleware)
    );

Next, the products action is responsible for fetching the products from the remote website.

export function getProducts() 
   return (dispatch) => 
       const url = `$Constants.URL.wcproducts?per_page=100&consumer_key=$Constants.Keys.ConsumerKey&consumer_secret=$Constants.Keys.ConsumerSecret`
      
       return axios.get(url).then(response => 
           dispatch(
               type: types.GET_PRODUCTS_SUCCESS,
               products: response.data
           
       )}).catch(err => 
           console.log(err.error);
       )
   };
}

The products reducer is responsible for returning the payload of data and whether it needs to be modified.

export default function (state = InitialState.products, action) 
    switch (action.type) 
        case types.GET_PRODUCTS_SUCCESS:
            return action.products;
        default:
            return state;
    
}

Displaying The WooCommerce Shop

The products.js file is our Shop page. It basically displays the list of products from WooCommerce.

class ProductsList extends Component 

 componentDidMount() 
   this.props.ProductAction.getProducts(); 
 

 _keyExtractor = (item, index) => item.id;

 render() 
   const  navigate  = this.props.navigation;
   const Items = (
     <FlatList contentContainerStyle=styles.list numColumns=2
       data=this.props.products  
       keyExtractor=this._keyExtractor
       renderItem=
         ( item ) => (
           <TouchableHighlight style= width: '50%' } onPress=() => navigate("Product",  product: item )} underlayColor="white">
             <View style=styles.view >
               <Image style=styles.image source= uri: item.images[0].src } />
               <Text style=styles.text>item.name</Text>
             </View>
           </TouchableHighlight>
         )
       }
     />
   );
   return (
     <ScrollView>
       this.props.products.length ? Items :
         <View style= alignItems: 'center', justifyContent: 'center' }>
           <Image style=styles.loader source=LoadingAnimation />
         </View>
       }
     </ScrollView>
   );
 }
}

this.props.ProductAction.getProducts() and this.props.products are possible because of mapStateToProps and mapDispatchToProps.


Products listing screen. (Large preview)

mapStateToProps and mapDispatchToProps

State is the Redux store and Dispatch is the actions we fire. Both of these will be exposed as props in the component.

function mapStateToProps(state) 
 return 
   products: state.products
 ;
}
function mapDispatchToProps(dispatch) 
 return 
   ProductAction: bindActionCreators(ProductAction, dispatch)
 ;
}
export default connect(mapStateToProps, mapDispatchToProps)(ProductsList);

Styles

In React, Native styles are generally defined on the same page. It’s similar to CSS, but we use camelCase properties instead of hyphenated properties.

const styles = StyleSheet.create(
 list: 
   flexDirection: 'column'
 ,
 view: 
   padding: 10
 ,
 loader: 
   width: 200,
   height: 200,
   alignItems: 'center',
   justifyContent: 'center',
 ,
 image: 
   width: 150,
   height: 150
 ,
 text: 
   textAlign: 'center',
   fontSize: 20,
   padding: 5
 
});

Single Product Page

This page contains details of a selected product. It shows the user the name, price, and description of the product. It also has the ‘Add to cart’ function.


Single product page. (Large preview)

Cart Page

This screen shows the list of items in the cart. The action has the functions getCart, addToCart, and removeFromCart. The reducer handles the actions likewise. Identification of actions is done through actionTypes — constants which describe the action that are stored in a separate file.

export const GET_PRODUCTS_SUCCESS = 'GET_PRODUCTS_SUCCESS'
export const GET_PRODUCTS_FAILED = 'GET_PRODUCTS_FAILED';

export const GET_CART_SUCCESS = 'GET_CART_SUCCESS';
export const ADD_TO_CART_SUCCESS = 'ADD_TO_CART_SUCCESS';
export const REMOVE_FROM_CART_SUCCESS = 'REMOVE_FROM_CART_SUCCESS';

This is the code for the CartPage component:

class CartPage extends React.Component 

 componentDidMount() 
   this.props.CartAction.getCart();
 

 _keyExtractor = (item, index) => item.id;

 removeItem(item) 
   this.props.CartAction.removeFromCart(item);
 

 render() 
   const  cart  = this.props;
   console.log('render cart', cart)

   if (cart && cart.length > 0) {
     const Items = <FlatList contentContainerStyle=styles.list
       data=cart
       keyExtractor=this._keyExtractor
       renderItem=( item ) =>
         <View style=styles.lineItem >
           <Image style=styles.image source= uri: item.image } />
           <Text style=styles.text>item.name</Text>
           <Text style=styles.text>item.quantity</Text>
           <TouchableOpacity style= marginLeft: 'auto' } onPress=() => this.removeItem(item)><Entypo name="cross" size=30 /></TouchableOpacity>
         </View>
       }
     />;
     return (
       <View style=styles.container>
         Items
       </View>
     )
   } else {
     return (
       <View style=styles.container>
         <Text>Cart is empty!</Text>
       </View>
     )
   }
 }
}

As you can see, we are using a FlatList to iterate through the cart items. It takes in an array and creates a list of items to be displayed on the screen.


#


Left: The cart page when it has items in it. Right: The cart page when it is empty.

Conclusion

You can configure information about the app such as name and icon in the app.json file. The app can be published after npm installing exp.

To sum up:

  • We now have a decent e-commerce application with React Native;
  • Expo can be used to run the project on a smartphone;
  • Existing backend technologies such as WordPress can be used;
  • Redux can be used for managing the state of the entire app;
  • Web developers, especially React developers can leverage this knowledge to build bigger apps.

For the full application, you can visit my project on Github and clone it. Feel free to fork it and improve it further. As an exercise, you can continue building more features into the project such as:

  • Checkout page,
  • Authentication,
  • Storing the cart data in AsyncStorage so that closing the app does not clear the cart.
Smashing Editorial
(da, lf, ra, yk, il)


More here: 

Building Mobile Apps Using React Native And WordPress

Adding Code-Splitting Capabilities To A WordPress Website Through PoP

Speed is among the top priorities for any website nowadays. One way to make a website load faster is by code-splitting: splitting an application into chunks that can be loaded on demand — loading only the required JavaScript that is needed and nothing else. Websites based on JavaScript frameworks can immediately implement code-splitting through Webpack, the popular JavaScript bundler. For WordPress websites, though, it is not so easy. First, Webpack was not intentionally built to work with WordPress, so setting it up will require quite some workaround; secondly, no tools seem to be available that provide native on-demand asset-loading capabilities for WordPress.

Originally posted here – 

Adding Code-Splitting Capabilities To A WordPress Website Through PoP

Styling Empty Cells With Generated Content And CSS Grid Layout

A common Grid Layout gotcha is when a newcomer to the layout method wonders how to style a grid cell which doesn’t contain any content. In the current Level 1 specification, this isn’t possible since there is no way to target an empty Grid Cell or Grid Area and apply styling. This means that to apply styling, you need to insert an element.
In this article, I am going to take a look at how to use CSS Generated Content to achieve styling of empty cells without adding redundant empty elements and show some use cases where this technique makes sense.

Source:

Styling Empty Cells With Generated Content And CSS Grid Layout

How to Generate Email Signups Using Instagram

instagram email

An email list is one of the best assets that you can build for your business. No change in the Google Algorithm or advertising account ban can take your email list away from you. Whatever happens in the online marketing world, your email list will always be able to give you a direct line of communication with people who want to hear from you — and will be interested in buying from you. 80% of retail professionals suggest that email is their greatest driver of customer retention, and 59% of B2B marketers say that email is their most effective revenue…

The post How to Generate Email Signups Using Instagram appeared first on The Daily Egg.

Read this article:  

How to Generate Email Signups Using Instagram

Your Blog Design is Bollocks (And How You’re Gonna Fix it)

One page, one purpose. If you’ve spent any time in the CRO world, or read even a single article on landing page optimization, you’ll have heard this catchy little slogan. And yet, unlike the majority of marketing advice containing little substance, this is a phrase which can drastically change the effectiveness of your site’s pages. How? By focusing your page’s intent. Having only one purpose removes extraneous CTAs, helps target your messaging, and makes it easier to track actual success. I mean, if your page has 10 CTAs (and we assume each has an equal chance of being taken) then…

The post Your Blog Design is Bollocks (And How You’re Gonna Fix it) appeared first on The Daily Egg.

Excerpt from: 

Your Blog Design is Bollocks (And How You’re Gonna Fix it)

How to Create a Customer Journey Completely From Scratch

How many times have you lost interest in a product? Let’s say it was a shiny new SaaS that caught your attention and you tried it out. Then, after a few minutes or a handful of efforts at it, you left. Never to return. It’s probably happened more times than you can count. Think back to times when that’s happened to you. Why did you lose interest? It’s likely that you lost interest because something went wrong along the way. Maybe you found a competitor’s product that was better, or maybe you weren’t convinced enough to buy anything. In other…

The post How to Create a Customer Journey Completely From Scratch appeared first on The Daily Egg.

Source article – 

How to Create a Customer Journey Completely From Scratch

Want a Better Way to Engage Your Audience? Try Data-Driven Micro-Content

micro content

Content marketing is in a state of surplus: there is too much supply of branded content and diminishing returns of audience engagement. A report by Beckon analyzed over 16 million in marketing spend and concluded: “Brands might be shocked to hear that while branded content creation is up 300 percent year over year, consumer engagement with that content is totally flat. They’re investing a lot in content creation, and it’s not driving more consumer engagement.” -Jennifer Zeszut, CEO at Beckon The painful truth is: the vast majority of content marketing ended up going down the rabbit holes of the internet…

The post Want a Better Way to Engage Your Audience? Try Data-Driven Micro-Content appeared first on The Daily Egg.

Taken from:  

Want a Better Way to Engage Your Audience? Try Data-Driven Micro-Content

How to Leverage eCommerce Conversion Optimization Through Different Channels to Maximize Growth

Note: This is a guest article written by Sujan Patel, co-founder of Web Profits. Any and all opinions expressed in the post are Sujan’s.


“If you build it, they will come” only works in the movies. In the real world, if you’re serious about e-commerce success, it’s up to you to grab the CRO bull by the horns and make the changes needed to maximize your growth.

Yet, despite the potential of conversion rate optimization to have a major impact on your store’s bottom line, only 59% of respondents to an Econsultancy survey see it as crucial to their overall digital marketing strategy. And given that what’s out of sight is out of mind, you can bet that many of the remaining 41% of businesses aren’t prioritizing this strategy with the importance it deserves.

Implementing an e-commerce CRO program may seem complex, and it’s easy to get overwhelmed by the number of possible things to test. To simplify your path to proper CRO, we’ve compiled a list of ways to optimize your site by channel.

This list is by no means exclusive; every marketing channel supports as many opportunities for experimentation as you can dream up. Some of these, however, are the easiest to put into practice, especially for new e-commerce merchants. Begin with the tactics described here; and when you’re ready to take your campaigns to the next level, check out the following resources:

On-Page Optimization

Your website’s individual pages represent one of the easiest opportunities for implementing a conversion optimization campaign, thanks to the breadth of technology tools and the number of established testing protocols that exist currently.

These pages can also be one of the fastest, thanks to the direct impact your changes can have on whether or not website visitors choose to buy.

Home Page

A number of opportunities exist for making result-driven changes to your site’s home page. For example, you can test:

  • Minimizing complexity: According to ConversionXL, “simple” websites are scientifically better.
  • Increasing prominence and appeal of CTAs: If visitors don’t like what you’re offering as part of your call-to-action (or worse, if they can’t find your CTA at all), test new options to improve their appeal.
  • Testing featured offers: Even template e-commerce shops generally offer a spot for featuring specific products on your store’s home page. Test which products you place there, the price at which you offer them, and how you draw attention to them.
  • Testing store policies – Free shipping is known to reduce cart abandonment. Implement consumer-friendly policies and test the way you feature them on your site.
  • Trying the “five-second test” – Can visitors recall what your store is about in 5 seconds or less? Attention spans are short, and you might not have longer than that to convince a person to stick around. Tools like UsabilityHub can get you solid data.

Home Page Optimization Case Study

Antiaging skincare company NuFACE made the simple change of adding a “Free Shipping” banner to its site header.

Original

eCommerce conversion Optimization - Nuface Control

Test Variation

eCommerce conversion Optimization - Nuface Variation

The results of making this change alone were a 90% increase in orders (with a 96% confidence level) and a 7.32% lift in the average order value.

Product Pages

If you’re confident about your home page’s optimization, move on to getting the most out of your individual product pages by testing your:

  • Images and videos
  • Copy
  • Pricing
  • Inclusion of social proof, reviews, and so on

Product Page Optimization Case Study

Underwater Audio challenged itself to simplify the copy on its product comparison page, testing the new page against its original look.

Original

Underwater Audio Control

Test Variation

Underwater Control Variation - eCommerce conversion rate optimization

This cleaner approach increased website sales for Underwater Audio by 40.81%.

Checkout Flow

Finally, make sure customers aren’t getting hung up in your checkout flow by testing the following characteristics:

Checkout Flow Optimization Case Study

A Scandinavian gift retailer, nameOn, reduced the number of CTAs on their checkout page from 9 to 2.

Original

nameon-1

Test Variation

nameon-2

Making this change led to an estimated $100,000 in increased sales per year.

Lead Nurturing

Proper CRO doesn’t just happen on your site. It should be carried through to every channel you use, including email marketing. Give the following strategies a try to boost your odds of driving conversions, even when past visitors are no longer on your site.

Email Marketing

Use an established email marketing program to take the steps below:

Case Study

There are dozens of opportunities to leverage email to reach out to customers. According to Karolina Petraškienė of Soundest, sending a welcome email results in:

4x higher open rates and 5x higher click rates compared to other promotional emails. Keeping in mind that in e-commerce, average revenue per promotional email is $0.02, welcome emails on average result in 9x higher revenue — $0.18. And if it’s optimized effectively, revenue can be as high as $3.36 per email.”

Live Chat

LemonStand shares that “live chat has the highest satisfaction levels of any customer service channel, with 73%, compared with 61% for email and 44% for phone.” Add live chat to your store and test the following activities:

Case Study

LiveChat Inc.’s report on chat greeting efficiency shares the example of The Simply Group, which uses customized greetings to assist customers having problems at checkout. Implementing live chat has enabled them to convert every seventh greeting to a chat, potentially saving sales that would otherwise be lost.

Content Marketing

Content marketing may be one of the most challenging channels to optimize for conversions, given the long latency periods between reading content pieces and converting. The following strategies can help:

  • Tie content pieces to business goals.
  • Incorporate content upgrades.
  • Use clear CTAs within content.
  • Test content copy, messaging, use of social proof, and so on.
  • Test different distribution channels and content formats.

Case Study

ThinkGeek uses YouTube videos as a fun way to feature their products and funnel interested prospects back to their site. Their videos have been so successful that they’ve accumulated 180K+ subscribers who tune in regularly for their content.

thinkgeek

Post-Acquisition Marketing

According to Invesp, “It costs five times as much to attract a new customer, than to keep an existing one.” Continuing to market to past customers, either in the hopes of selling new items or encouraging referrals, is a great way to boost your overall performance.

Advocacy

Don’t let your CRO efforts stop after a sale has been made. Some of your past clients can be your best sources of new customers, if you take the time to engage them properly.

  • Create an advocacy program: Natural referrals happen, but having a dedicated program turbocharges the process.
  • Test advocacy activation programs: Install a dedicated advocacy management platform like RewardStream or ReferralSaaSquatch and test different methods for promoting your new offering to customers with high net promoter scores.
  • Test different advocate incentives: Try two-way incentives, coupon codes, discounted products, and more.
  • Invest in proper program launch, goal-setting, and ongoing evaluation/management: Customer advocacy programs are never truly “done.”

Case Study

Airbnb tested its advocacy program invitation copy and got better results with the more unselfish version.

airbnb

Reactivation

As mentioned above in the funnel-stage email recommendation, reactivation messages can be powerful drivers of CRO success.

Pay particular attention to these 2 activities:

  • Setting thresholds for identifying inactive subscribers
  • Building an automated reactivation workflow that’s as personalized as possible

Case Study

RailEasy increased opens by 31% and bookings by 38% with a reactivation email featuring a personalized subject line.

raileasy

Internal Efforts

Lastly, make CRO an ongoing practice by prioritizing it internally, rather than relegating it to “something the marketing department does.”

Ask CRO experts, and they’ll tell you that beyond the kinds of tactics and strategies described above, having a culture of experimentation and testing is the most important step you can take to see results from any CRO effort.

Here’s how to do it:

Have an idea for another way CRO can be used within e-commerce organizations? Leave your suggestions in the comments below.

0

0 ratings

How will you rate this content?

Please choose a rating

The post How to Leverage eCommerce Conversion Optimization Through Different Channels to Maximize Growth appeared first on VWO Blog.

This article is from: 

How to Leverage eCommerce Conversion Optimization Through Different Channels to Maximize Growth