Customer Testimonial Extension for Spree Commerce

As a potential customer of an ecommerce store, a big assurance and confidence boost for me is to see testimonials from existing customers.

If you want to add this capability to your Spree store, there is help available. We extracted a customer testimonial or quote management extension from one of our projects recently and open sourced it.

Here is the github link to the SpreeCommerce Customer Testimonial extension

The extension provides the functionality to receive testimonials from customers. It also allows the store owner to submit testimonials on behalf of customers. The store owner also has the capability to moderate testimonials submitted by customers and mark them as published. These published testimonials can then be used at other places on the store.

Read more


SpreeCommerce Product Customization

As an eCommerce business you can do better than your competition by allowing your customers to customize product that they want to order. Of course not all products can be customized but if you deal in a product which renders itself well to customization - by allowing the customer to do so, you are engaging the customer at a deeper creative level. So now the transaction does not remain merely a financial transaction for her, but the customer is invested at an emotional level with the product since she has designed it herself.

Some examples of businesses that really do this well are :

Shoes of Prey
Shoes of Prey allow customers to design their own shoes. They do a really good job of making it very easy for customers to design and then order her shoe.

https://1atelier.com/
1 Atelier allows their customers to design their own HandBags. You can choose a bag type from among all the options available - whether a tote or a clutch or something else. Then you choose the hardware, piping, leather finish for the various parts and you are ready to checkout.

Since we do most of our e-commerce development on SpreeCommerce, we set out to build something that could be available off the shelf. We experimented with Shoes and T-shirts and have made decent progress and that is what is presented here.
You can play with the SpreeCommerce demo at http://3d.domain4now.com/ . Signup as a new customer to get access to the functionality on the demo site.

You can also follow this link to view snapshots of demonstration or watch the tutorial video of SpreeCommerce Product Customization.


SpreeCommerce Marketing Extension - All you need to target the right audience

When it comes to marketing it's important to target the right people. Say, you have the perfect marketing strategy for increasing retention or just the right content for promoting a product. What else do you need for a successful marketing campaign? The Right Audience. No matter how exciting your offer is, if you're targeting the wrong people your marketing will fail to generate returns.

Spree Marketing Extension focuses on classifying the user base in such a way that as a store owner you'll be able to feed the right consumer with the right content / marketing campaigns. That's not all! You can view all your marketing campaigns from the email campaigning service you use (mailchimp for now) along with the customers it probably affected! From the list of people who signed up last week to the buyers from a particular geographic area, all information is presented in the form of well-structured lists.

Follow this link to view snapshots of complete demonstration of the SpreeCommerce Marketing Extension.


Building an exrm release including NectarCommerce

The post belongs to NectarCommerce and Extension Framework Awareness Series

  1. NectarCommerce Vision
  2. Extension Framework Game Plan
  3. Introduction to Metaprogramming
  4. Ecto Model Schema Extension
  5. Ecto Model Support Functions Extension
  6. Phoenix Router Extension
  7. Phoenix View Extension
  8. Running Multiple Elixir Apps Together
  9. Extension Approach Explained
  10. Learning from failures: First Experiment at NectarCommerce Extension Approach
  11. Developing NectarCommerce Extensions
  12. Building an exrm release including NectarCommerce

Building an exrm release including NectarCommerce

You can read more about how to build an exrm release for an umbrella project here. Following the example outlined in the repository, the main app for our case will be the User Store Application. Let’s get started and try to build an exrm release:

Note: We are going to build our release in Dev environment, the only thing that should change for production is the configuration. Some of the options may already be switched off for the production release. See Phoenix Guides for how to build production exrm release for phoenix applications.

Step 1:
Update deps of umbrella to include exrm and run mix deps.get to install them.

Step 2:
Run the mix release command. Let’s try it with the dev environment for now.

Let’s examine the output and keep on continuing:

In the end we can see:

Let’s try accessing it. Running with no args gives us the output:

We need to start the application to access the user_app and nectar, so let’s do that. We are using foreground to see the console output, it can also be started to run as a background service. Doing that:

and we see

It seems to be unable to start the endpoint because the code reloader is missing. We can add it to the applications, but since it has no reason for belonging in the release, we will comment out the config for now in dev.exs and set code_reload: false in config.exs, doing that and building a new release.

It is working. Now to try accessing the server, it fails with connection refused, the server is not starting automatically.

Going over the phoenix endpoint configuration, we need to set server: true in endpoint configuration which is done automatically when running mix phoenix.server, doing that and rebuilding the release.

It’s alive! But we are getting 500 error. Hopping over to the logs(remember we are running it in the foreground mode)

It fails because guardian is not loaded. This was one of the missing dependencies which were not included in running applications. There were four of them:

  1. guardian
  2. arc
  3. comeonin
  4. phoenix_live_reload

Since we have already tackled the last one, let’s add the first three in the application list in nectar.

And trying again:

Success. Similarly, we can copy over the config for production environment when building our exrm release. Now we can deploy the user app as the main application, See phoenix guides for details on how to configure and build exrm releases for production.

Running Migrations for an Exrm Release

Please refer the excellent post for how to run migrations for an exrm release by @plataformatec.

You can always run mix release.clean -- implode to clean up your workspace.

Our aim with these posts is to start a dialog with the Elixir community on validity and technical soundness of our approach. We would really appreciate your feedback and reviews, and any ideas/suggestions/pull requests for improvements to our current implementation or entirely different and better way to do things to achieve the goals we have set out for NectarCommerce.

Enjoy the Elixir potion !!


Developing NectarCommerce Extensions

The post belongs to NectarCommerce and Extension Framework Awareness Series

  1. NectarCommerce Vision
  2. Extension Framework Game Plan
  3. Introduction to Metaprogramming
  4. Ecto Model Schema Extension
  5. Ecto Model Support Functions Extension
  6. Phoenix Router Extension
  7. Phoenix View Extension
  8. Running Multiple Elixir Apps Together
  9. Extension Approach Explained
  10. Learning from failures: First Experiment at NectarCommerce Extension Approach
  11. Developing NectarCommerce Extensions
  12. Building an exrm release including NectarCommerce

Developing NectarCommerce Extensions

Where we left off

In the past few posts we have learned how to write code that extends existing models, routers, added methods to override view rendering and run multiple phoenix application together in the same umbrella project. Let’s Continue to build upon that and write our first extension for NectarCommerce favorite products and ultimately our store based on NectarCommerce.

For our curious readers, we tried another extension approach which had linear dependency (nectar => extensions_manager => extensions) helpful in development but turned out to had the serious limitation of Nectar being unavailable for testing.

To overcome the barrier of testing and pleasant developer workflow, what we need is that Nectar is available and compiled while developing extensions and if an extension is added it should recompile itself to include the new extensions.
We have modified Nectar for this approach to seek for extensions and used a custom compiler step(A story for another time) to mark files for recompilation. Let’s get started and see if we can scale the testing barrier.

A layered guide to NectarCommerce extensions

Index

  1. Setup
  2. Model Layer
  3. View Layer
  4. Starting the server
  5. Testing
  6. Creating your store with NectarCommerce
  7. Suggested Workflow

Setup

Create a new phoenix application to hold the favorite products application.
In your shell run inside the umbrella/apps folder:

We could have gone with a regular mix application, but phoenix/ecto will come in handy in this case, since we want to have views to display stuff and a model to store data.

While we are at it let’s configure our dev.exs to use the same db as Nectar, we could write some code and share the db settings between Nectar and our extensions see: running multiple phoenix application together for more details. But now for simplicity’s sake we are just copying the settings from Nectar to get started.

DB_SETTINGS:

We need to let the extension manager know that this application is an extension for Nectar.
Update the dependencies in extension_manager/mix.exs with the favorite_products dependency.

And now for the big differentiator, we will add Nectar as dependency of the favorite_products extension, effectively ensuring it is compiled before the extension.

Model Layer

We want a NectarCommerce user to have some products to like and a way to remember them in short a join table and with two associations let’s generate them:

Now to point to correct Nectar models. Open up the source and change the associations to from favorite products model to Nectar models. In the end we have a schema like:

Fun Fact: Since we are depending upon Nectar now we can use Nectar.Web, :model instead of FavoriteProducts.Web, :model in user_like.ex and make our extensions available for extension.

Of, course this is only the extension view of this relationship, We want the Nectar user to be aware of this relationship and most important of all, we should be able to do something like Nectar.User.liked_products(user) to fetch the liked products of the user.

Calling our handy macros to perform the dark art of compile time code injection. Let’s create the nectar_extension.ex file in favorite_products/lib/ directory and place this code there:

Don’t forget to update the install file in extensions_manager.

Now we have a user that can like products and product from which we can query what users liked it. Time to play.

From the root of umbrella, run the following to start the shell:

This should trigger another round of compilation. Ultimately loading the extension code into Nectar. Lets see if we were successful. But before doing that we should migrate the database.

Voila, we can now save and retrieve records to a relation we defined outside Nectar from Nectar models.

VIEW LAYER

Now that we can save the user likes, we should probably add an interface for the user to like them as well. Which leads us to the first shortcoming in our current approach, we can replace existing views but right now we don’t have anything for adding to an existing view(Please leave us a note here if you know of a clean performant approach to do this). Meanwhile we expect most people will end up overriding the existing views to something more custom then updating it piecemeal but i digress. For now let’s have a page where we list all the products and user can mark them as liked or unlike the previously liked ones.

controller

Notice how we use the Nectar.Repo itself instead of using the FavoriteProducts.Repo, infact beside migration, we won’t be utilizing or starting the FavoriteProducts.Repo, which will help us keep the number of connections open to database limited via only the Nectar.Repo

the view file: index.html.eex

In both of the files we refer to routes via NectarRoutes alias instead of favorite products. To get the assets from Nectar add nectar/web/static to the brunch config’s watched folders:

and in app.js, initialize the nectar code:

Finally for adding the route to Nectar, update nectar_extension.ex with the following code:

And add to install.ex the call:

Now we can see the added routes

let’s update the layout as well:

Starting the server to preview the code

In the previous attempt we were directly running the Nectar server, However since we are essentially working from ground up, let us make another change and add a forward from favorite_products to nectar.

In favorite_products/web/router.ex:

All the usual caveats for forwards apply here. Before doing so please ensure that nectar is added to list of applications in favorite_products.ex.

Note: We have disabled the supervisor for Nectar.Endpoint to specifically allow this and suggest all the extensions do this as well once development is complete. More on this later but suffice to say two endpoints cannot start at and we are now running nectar along-with favorite_products extension.

Now we can run our mix phoenix.server and go about marking our favorites with nectar layout and all.

Layout Present

Testing

We are almost done now. To ensure that we know when things break we should add a few tests of-course, we need to make sure that Nectar migrations are run before running the migrations for favorite products and we need the Nectar repo running as well.

for the former let’s update the test_helper.ex with:

And now to write the tests

The tests for code injection:

Create a new test file tests/model/user_test.ex:

We can test for user_like just like any other ecto model. Let’s skip that for now.

Running Them:

Bonus Guide: Creating your store based on NectarCommerce

We already did this, when we were creating favorite_products extension. A forward to Nectar is all it takes. You can create your Phoenix application and add a forward to Nectar.Router to run your user application. Some extensions might require to be added in the application list for their processes to start, in such cases we need to add a dependency here as well. You might want to do that anyway to support exrm release properly(We will be covering this in our next post).

Suggested Workflow

We can now see developing extensions is not very different from building our store with custom functionality based on NectarCommerce. You start with your store and extract out the functionality into self contained applications and load them back as extensions into Nectar.

Our aim with these posts is to start a dialog with the Elixir community on validity and technical soundness of our approach. We would really appreciate your feedback and reviews, and any ideas/suggestions/pull requests for improvements to our current implementation or entirely different and better way to do things to achieve the goals we have set out for NectarCommerce.

Enjoy the Elixir potion !!


Privacy Preference Center