Giter Club home page Giter Club logo

sylius-wishlist-bundle's Introduction

Sylius Wishlist Bundle

This bundle adds wishlist functionality to Sylius e-commerce platform. It can be configured to use single or multiple wishlists per user, which can be public or private.


Installation

  1. require the bundle with Composer:
$ composer require webburza/sylius-wishlist-bundle
  1. enable the bundle in app/AppKernel.php:
public function registerBundles()
{
  $bundles = [
    // ...
    new \Webburza\Sylius\WishlistBundle\WebburzaSyliusWishlistBundle(),
    // ...
  ];
}
  1. add configuration to the top of app/config/config.yml:
imports:
    - { resource: "@WebburzaSyliusWishlistBundle/Resources/config/config.yml" }

Among other things, this provides configuration entries which can then be overriden in your app's config.yml.

webburza_sylius_wishlist:
    multiple: true           # multiple wishlist mode
    default_public: false    # used for automatically created wishlists
  1. register routes in app/config/routing.yml
webburza_wishlist:
  resource: "@WebburzaSyliusWishlistBundle/Resources/config/routing.yml"

webburza_wishlist_front:
  resource: "@WebburzaSyliusWishlistBundle/Resources/config/routingFront.yml"
  prefix: /wishlist

webburza_wishlist_account:
  resource: "@WebburzaSyliusWishlistBundle/Resources/config/routingAccount.yml"
  prefix: /account/wishlists

As you can see, there are three groups of routes, the main resource (administration) routes, frontend routes, and user account routes where the user can manage their wishlist(s), create new ones, mark them public/private, etc...

  1. The bundle should now be fully integrated, but it still requires database tables to be created. For this, we recommend using migrations.
$ bin/console doctrine:migrations:diff
$ bin/console doctrine:migrations:migrate

Or if you don't use migrations, you can update the database schema directly.

  $ bin/console doctrine:schema:update
  1. If you're integrating this bundle into an existing project, your existing users will not have any wishlists associated. This is not an issue as wishlists are automatically created when needed. All new users will automatically have a wishlist created for them from the start.

If you want to make sure all your users have wishlists, you can run a command which will create initial wishlists for all existing users which do not already have one.

$ bin/console webburza:sylius-wishlist-bundle:create-initial

Integration on shop pages

Now that you've installed and integrated the bundle, the users can view their wishlists, create new ones, etc, depending on bundle configuration, but they still have no way of adding products to wishlists. Since each project will have custom product pages, this implementation is up to you. It can be done in two ways.

  1. Simple

Since 'add to wishlist' functionality is almost the same as adding items to cart, the simplest way to finalize integration is to add a new 'Add to wishlist' button next to the 'Add to cart' button in the existing form.

Open the template containing your 'add to cart' form, most likely in: app/Resources/SyliusShopBundle/Resources/views/Product/Show/_addToCart.html.twig

Find the 'add to cart' button, by default:

<button type="submit" class="ui huge primary icon labeled button"><i class="cart icon"></i> {{ 'sylius.ui.add_to_cart'|trans }}</button>

And under it, add the following line.

{% include '@WebburzaSyliusWishlist/Frontend/Shop/_addToWishlist.html.twig' %}

This will include the 'Add to Wishlist' button, and all required functionality. It will also feature a dropdown if the user has more than one wishlist, to enable the user to select which wishlist they want to add the item to.

The dropdown will only be rendered if the user has more than one wishlist.

  1. Custom AJAX implementation

An alternative is to implement your own, fully custom 'add to wishlist' functionality. To accomplish this, submit data to the webburza_wishlist_frontend_add_item route.

$.ajax({
    url: '/wishlist/item/',
    type: 'POST',
    data: {
        productVariantId: 123,
        wishlistId: 456 // optional
    },
    success: // ...
});

You can also submit the data in the same format as in the first example (the 'add-to-cart' form), both examples use the same route, and both accept variant data to be resolved (first example), or an already resolved productVariantId.

Wishlist badge

You might also want to feature a badge in your header which links to the wishlist and shows the current number of items added, similar to the existing cart badge.

To do this, just add this line to the bottom of the same file app/Resources/SyliusShopBundle/Resources/views/Cart/_widget.html.twig

{% include '@WebburzaSyliusWishlist/Frontend/Shop/_badge.html.twig' %}

Translations and naming

The bundle has multilingual support, and language files can be overridden as with any other bundle, by creating translation files in the app/Resources/WebburzaSyliusWishlistBundle/translations directory.

To get started, check the bundle's main language file in: Resources/translations/messages.en.yml

License

This bundle is available under the MIT license.

To-do

  • Tests

sylius-wishlist-bundle's People

Contributors

psihius avatar ychanan avatar

Forkers

wldjfr

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.