Navigate the store - view, search, and filter products.

Show list of all categories

In the shop.py, get all categories by calling Category::findAll() method.

src/AppBundle/Controller/StoreController.php

<?php

$categories = Category::findAll()

Now, the model contains a list all the categories in the camera store, this list encapsulated in Page object.

Page object is a container which wrap a collection of objects, it implements ObjectArray so you can iterate over its content using the standard for loop, and can be easily used within jinja2 templates.

We will use this collection of Category objects to populate the top navigation menu of the store.

app/Resources/views/layouts/default.html.twig


<ul class="nav navbar-nav" id="category_menu">
    <li><a href="/products" >All</a></li>
    {% for cat in categories %}
    {% if cat.name != 'Uncategorized' %}
    <li><a href="/categories/{{ cat.id }}" >{{ cat.title }}</a></li>
    {% endif %}
    {% endfor %}
    <li><a href="#" id="show_search_box"><span class="glyphicon glyphicon-search"></span></a></li>
</ul>

Display list of all brands

Using the same technique, We can get a list of the available brands, and display them in the sidebar navigation. for example in the details action method:

src/AppBundle/Controller/StoreController.php

<?php

$brands = Brand::findAll()

Then display it in the sidebar

app/Resources/views/layouts/products.html.twig


<div class="product-listy">
    <h2>Browse By Brand</h2>
    <ul class="product-list">
        {% for brand in brands %}
        <li><a href="/brands/{{ brand.id }}">{{ brand.title }}</a></li>
        {% endfor %}
    </ul>
</div>

Browse products

Likewise, We can obtain and show a list of all products.

src/AppBundle/Controller/StoreController.php

<?php

/**
 * @Route("/products", name="browse_all")
 */
public function browseAllAction(Request $request)
{
    $products = Product::findAll();
    $brands = Brand::findAll();
    $categories = Category::findAll();
    $featured = Collection::findOne(['name' => 'featured']);
    $cart = ShoppingCart::get();
    return $this->render('store/products.html.twig', [
        'cart' => $cart, "categories" => $categories, 'brands' => $brands, 'featured' => $featured, 'products' => $products
    ]);
}

To show the products, iterate over the product collection

app/Resources/views/store/products.html.twig


<ul>
    {% for p in products %}
    <li>
        <div>
            <a class="cbp-vm-image" href="/products/{{ p.id }}">
                <div class="simpleCart_shelfItem">
                    <div class="view view-first">
                        <div class="inner_content clearfix">
                            <div class="product_image">
                                <img src="{{p.mainPhoto.url}}" class="img-responsive" alt=""/>
                                <div class="mask">
                                    <div class="info">Quick View</div>
                                </div>
                                <div class="product_container">
                                    <div class="cart-left">
                                        <p class="title">{{ p.title }}</p>
                                    </div>
                                    <div class="pricey">
                                        <span class="item_price" >$ {{ p.price }}</span>
                                    </div>
                                    <div class="clearfix"></div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </a>

            <div class="cbp-vm-details">
                {{ p.shortDescription }}
            </div>
            <a class="cbp-vm-icon cbp-vm-add item_add add_to_cart_button"
               data-product_id="{{p.id}}" href="#">Add to cart</a>
        </div>
    </li>
    {% endfor %}

</ul>

This may looks very boring and repetitive, but we want to make a point out of that: the Java SDK has a very consistent, once you learned a small subset you ‘ll find the rest of it very familiar and predectable.

Searching

Searching for a certain product(s) require a very little code change. Just pass the property you want to search with to the find_all method.

src/AppBundle/Controller/StoreController.php

<?php

/**
 * @Route("/products", name="browse_all")
 */
public function browseAllAction(Request $request)
{
    if($request->query->has('query')){
        $products = Product::findAll(['title' => $request->query->get('query')]);
    }else{
        $products = Product::findAll();
    }
    $brands = Brand::findAll();
    $categories = Category::findAll();
    $featured = Collection::findOne(['name' => 'featured']);
    $cart = ShoppingCart::get();
    return $this->render('store/products.html.twig', [
        'cart' => $cart, "categories" => $categories, 'brands' => $brands, 'featured' => $featured, 'products' => $products
    ]);
}

Filter products by category

Now, Let’s see how to filter this list of products by category

Because filtering products by category and brand are frequently used operations, there is a dedicated methods for these operations: findAllByCategory and findAllByBrand respectively.

All findAll* methods return Page object wrapping the result set, so it is possible to use the same view template to display the search results.

src/AppBundle/Controller/StoreController.php

<?php

/**
 * @Route("/categories/{id}", name="browse_category")
 */
public function browseCategoryAction($id)
{
    $brands = Brand::findAll();
    $categories = Category::findAll();
    $products = Product::findAll(['category' => $id]);
    $featured = Collection::findOne(['name' => 'featured']);
    $cart = ShoppingCart::get();
    return $this->render('store/products.html.twig', [
        'cart' => $cart, "categories" => $categories, 'brands' => $brands, 'featured' => $featured, 'products' => $products
    ]);
}

Filter products by brand

Likewise, You can filter products by brand, just use the Product#find_all_by_brand instead.

src/AppBundle/Controller/StoreController.php

<?php

/**
 * @Route("/brands/{id}", name="browse_brand")
 */
public function browseBrandAction($id)
{
    $brands = Brand::findAll();
    $categories = Category::findAll();
    $products = Product::findAll(["brand" => $id]);
    $featured = Collection::findOne(['name' => 'featured']);
    $cart = ShoppingCart::get();
    return $this->render('store/products.html.twig', [
        'cart' => $cart, "categories" => $categories, 'brands' => $brands, 'featured' => $featured, 'products' => $products
    ]);
}

Viewing product details

You can get single product by its ID, just use Product#find_by_id, the code is straightforward:

src/AppBundle/Controller/StoreController.php

<?php

/**
 * @Route("/products/{id}", name="show_product")
 */
public function showProductAction($id)
{
    $product = Product::findById($id);
    if (!$product) {
        throw $this->createNotFoundException('The product does not exist');
    }
    else {
        $brands = Brand::findAll();
        $categories = Category::findAll();
        $featured = Collection::findOne(['name' => 'featured']);
        $cart = ShoppingCart::get();
        // replace this example code with whatever you need
        return $this->render('store/single.html.twig', [
            'cart' => $cart, "categories" => $categories, 'brands' => $brands, 'featured' => $featured, 'product' => $product
        ]);
    }
}

And this is the view template:

app/Resources/views/store/single.html.twig


<div class="new-product">
    <div class="col-md-5 zoom-grid">
        <div class="flexslider">
            <ul class="slides">
                {% for ph in product.photos %}
                <li data-thumb="{{ph.url}}">
                    <div class="thumb-image">
                    <img src="{{ph.url}}" data-imagezoom="true" class="img-responsive" alt="" />
                    </div>
                </li>
                {% endfor %}
            </ul>
        </div>
    </div>
    <div class="col-md-7 dress-info">
        <div class="dress-name">
            <h3>{{ product.title }}</h3>
            <span>$ {{ product.price }}</span>
            <div class="clearfix"></div>
            <p>{{ product.description }}</p>
        </div>

        <div class="purchase">
            <a class="cbp-vm-icon cbp-vm-add item_add add_to_cart_button"
               href="#" data-product_id="{{product.id}}">Add To Cart</a>

            <div class="clearfix"></div>
        </div>
    </div>
</div>

Getting Collections

For the sake of completeness, we demonstrate how to get and display Collections, Also this is a good opportunity to show you how you can use Collections in your own projects.

src/AppBundle/Controller/StoreController.php

<?php

/**
 * @Route("/", name="homepage")
 */
public function indexAction(Request $request)
{
    $categories = Category::findAll();
    $collections = Collection::findAll();
    $cart = ShoppingCart::get();
    return $this->render('store/index.html.twig', [
        'cart' => $cart, "categories" => $categories, 'collections' => $collections
    ]);
}

In the home-page of the store, we use Collections to show customers selected collections of our products. We use collection for the available deals, another for the featured products, and one for the newly added products.

app/Resources/views/store/index.html.twig


{% for coll in collections %}
<div class="container collections" >
    <h3 class="like text-center">{{ coll.title }}</h3>
    <ul id="{{coll.name}}" class="flexiselDemo3">
    {% for p in coll.products %}
        <li>
            <a href="/products/{{ p.id }}">
                <img src="{{p.mainPhoto.url}}" class="img-responsive" alt="" />
            </a>
            <div class="product liked-product simpleCart_shelfItem">
                <a class="like_name" href="/products/{{ p.id }}">{{ p.title }}</a>
                <p><a class="item_add add_to_cart_button" data-product_id="{{p.id}}"><i></i> <span class=" item_price">$ {{ p.price }}</span></a></p>
            </div>
        </li>
        {% endfor %}
    </ul>
</div>
{% endfor %}

You can get single collection by name, use Collection#find_by_name

src/AppBundle/Controller/StoreController.php

<?php

/**
 * @Route("/products/{id}", name="show_product")
 */
public function showProductAction($id)
{
    $product = Product::findById($id);
    if (!$product) {
        throw $this->createNotFoundException('The product does not exist');
    }
    else {
        $brands = Brand::findAll();
        $categories = Category::findAll();
        $featured = Collection::findOne(['name' => 'featured']);
        $cart = ShoppingCart::get();
        // replace this example code with whatever you need
        return $this->render('store/single.html.twig', [
            'cart' => $cart, "categories" => $categories, 'brands' => $brands, 'featured' => $featured, 'product' => $product
        ]);
    }
}

We use this in the product details shop/single.html to show featured products.

app/Resources/views/layouts/products.html.twig


<ul id="flexiselDemo3">
    {% for p in featured.products %}
    <li>
        <a href="/products/{{ p.id }}">
            <img src="{{p.mainPhoto.url}}" style="width: 220px;" class="img-responsive"/>
        </a>
        <div class="product liked-product simpleCart_shelfItem">
            <a class="like_name" href="/products/{{ p.id }}">{{ p.title }}</a>
            <p><a class="item_add add_to_cart_button" href="#" data-product_id="{{p.id}}"><i></i> <span class=" item_price">$ {{ p.price }}</span></a></p>
        </div>
    </li>
    {% endfor %}
</ul>