Example: DOM Methods - Store

Click an item in the store to send it to the shopping cart.

Click an item in the cart to remove it.

  • CART

This example is built upon the DOM Method example in this node module. It just has more CSS and some images.

Setting up the HTML

First we need some HTML for a store.

<ul id="demo">
    <li>
        <a>
            <img src="../assets/node/images/store_soup_tomato.png">
            <span class="description">Campbells Tomato Condensed Soup - 10.75 Oz</span>
            <span class="price">
                <sup>$</sup><span class="dollars">1</span><sup class="cents">.49</sup>
            </span>
        </a>
    </li>
    <!-- For each item in the store there's an li like the above -->
</ul>

Then we need some HTML for a shopping cart.

<ul id="demo2">
    <li class="cart-head">
        <img src="../assets/node/images/store_cart.png" width="35" height="38"> <span>CART</span>
    </li>
</ul>

Using DOM Methods

Most common DOM methods are available via Node instances. These can be used to add, remove, and retrieve other nodes.

clone = item.cloneNode(true);
list2.append(clone);
item.remove(); // sugar for item.get('parentNode').removeChild(item);

The JavaScript

The script for this example is very similar to the DOM Method example 

<script type="text/javascript">
YUI().use('node', 'event-touch', function(Y) {
    var onClick = function(e) {
        e.preventDefault();
        var item = e.currentTarget,
            list2 = Y.one('#demo2');

        if (item.get('parentNode') === list2) { // remove if click is in the cart
            // remove from cart only if it's not the cart header
            if (item.hasClass('cart-head') === false) {
                item.remove(); // sugar for item.get('parentNode').removeChild(item);
            }
        } else { // else add a clone of the clicked item to the cart
            list2.append(item.cloneNode(true));
        }
    };

    Y.one('#demo').delegate('click', onClick, 'li');
    Y.one('#demo').delegate('touchstart', onClick, 'li');
    Y.one('#demo2').delegate('click', onClick, 'li');
    Y.one('#demo2').delegate('touchstart', onClick, 'li');
});
</script>

The CSS

Just like the DOM Method example in this node module, when an item on the left (store) is clicked, an identical clone of that item is added to the list on the right (cart). The only thing that makes the cart items look different from the store items is the CSS. 

<style>
.example ul#demo, .example ul#demo2 {
    display: inline-block;
    zoom: 1;
    *display: inline;
    vertical-align: top;
    list-style: none;
    padding: 0;
}
.example ul#demo{
    width: 300px;
    border: 1px solid #eee;
    padding: 0.5em;
}
.example ul#demo li{
    display: inline-block;
    zoom: 1;
    *display: inline;
    width: 70px;
}
.example a {
    position: relative;
    display: block;
    height: 100%;
    width: 100%;
    color: #555;
}
.example .price {
    color: #555;
    font-size: 120%;
}
.example .price .cents{
    font-size: 70%;
}
.example .dollars {
    font-size: 144%;
}
/********* store side styles ***********/
.example ul#demo li {
    margin: 2px 0 2px 1px;    
}
.example ul#demo img {
    width: 70px;
    height: 125px;
    vertical-align: bottom;
    border: none;
}
.example ul#demo .description, .example ul#demo .price {
    display: none;
}
.example ul#demo a:hover {
    box-shadow: 0 0 5px rgba(255, 187, 71, 0.9);
    text-decoration: none;
}
.example ul#demo a:hover .price {
    background: -ms-linear-gradient(top, rgba(255,200,100,0.5) 0%,rgba(255,200,100,0.5) 100%); /* IE10+ */
    background: linear-gradient(top, rgba(255,200,100,0.5) 0%,rgba(255,200,100,0.5) 100%); /* W3C */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#80ffc864', endColorstr='#80ffc864',GradientType=0 ); /* IE6-8 */
    background-color: rgba(250, 200, 100, 0.50);
    display: block;
    left: -8px;
    position: absolute;
    box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.15);
    top: -8px;
    border-radius: 3px;
    padding: 0 0.3em;
}
/*********** cart side styles ************/
.example ul#demo2 {
    margin-left: 1em;
    margin-top: -9px;
    width: 295px;
}
.example ul#demo2 a:hover{
    background: -ms-linear-gradient(top, rgba(255,33,33,0.1) 0%,rgba(255,33,33,0.1) 100%); /* IE10+ */
    background: linear-gradient(top, rgba(255,33,33,0.1) 0%,rgba(255,33,33,0.1) 100%); /* W3C */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#1aff2121', endColorstr='#1aff2121',GradientType=0 ); /* IE6-8 */
    background-color: rgba(255, 33, 33, 0.10);
    text-decoration: none;
}
.example ul#demo2 li a{
    margin-bottom: 0.3em;
    cursor: no-drop;
}
.example ul#demo2 img {
    width: 25px;
    height: 41.5px;
    vertical-align: bottom;
    border: none;
}
.example ul#demo2 .cart-head{
    border-bottom: solid 1px #eee;
    width: 100%;
    cursor: default;
}
.example ul#demo2 .cart-head img{
    width: 35px;
    height: 38px;
    vertical-align: baseline;
}
.example ul#demo2 .cart-head span{
    font-size: 411%;
    font-family: 'Maven Pro',Helvetica,sans-serif;
    font-weight: bold;
    vertical-align: baseline;
    color: #E5E7EA;
}
.example ul#demo2 .description {
    display: inline-block;
    zoom: 1;
    *display: inline;
    width: 225px;
    border-bottom: dotted 1px #ccc;
    vertical-align: bottom;
}

</style>

Complete Example Source

<style>
.example ul#demo, .example ul#demo2 {
    display: inline-block;
    zoom: 1;
    *display: inline;
    vertical-align: top;
    list-style: none;
    padding: 0;
}
.example ul#demo{
    width: 300px;
    border: 1px solid #eee;
    padding: 0.5em;
}
.example ul#demo li{
    display: inline-block;
    zoom: 1;
    *display: inline;
    width: 70px;
}
.example a {
    position: relative;
    display: block;
    height: 100%;
    width: 100%;
    color: #555;
}
.example .price {
    color: #555;
    font-size: 120%;
}
.example .price .cents{
    font-size: 70%;
}
.example .dollars {
    font-size: 144%;
}
/********* store side styles ***********/
.example ul#demo li {
    margin: 2px 0 2px 1px;    
}
.example ul#demo img {
    width: 70px;
    height: 125px;
    vertical-align: bottom;
    border: none;
}
.example ul#demo .description, .example ul#demo .price {
    display: none;
}
.example ul#demo a:hover {
    box-shadow: 0 0 5px rgba(255, 187, 71, 0.9);
    text-decoration: none;
}
.example ul#demo a:hover .price {
    background: -ms-linear-gradient(top, rgba(255,200,100,0.5) 0%,rgba(255,200,100,0.5) 100%); /* IE10+ */
    background: linear-gradient(top, rgba(255,200,100,0.5) 0%,rgba(255,200,100,0.5) 100%); /* W3C */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#80ffc864', endColorstr='#80ffc864',GradientType=0 ); /* IE6-8 */
    background-color: rgba(250, 200, 100, 0.50);
    display: block;
    left: -8px;
    position: absolute;
    box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.15);
    top: -8px;
    border-radius: 3px;
    padding: 0 0.3em;
}
/*********** cart side styles ************/
.example ul#demo2 {
    margin-left: 1em;
    margin-top: -9px;
    width: 295px;
}
.example ul#demo2 a:hover{
    background: -ms-linear-gradient(top, rgba(255,33,33,0.1) 0%,rgba(255,33,33,0.1) 100%); /* IE10+ */
    background: linear-gradient(top, rgba(255,33,33,0.1) 0%,rgba(255,33,33,0.1) 100%); /* W3C */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#1aff2121', endColorstr='#1aff2121',GradientType=0 ); /* IE6-8 */
    background-color: rgba(255, 33, 33, 0.10);
    text-decoration: none;
}
.example ul#demo2 li a{
    margin-bottom: 0.3em;
    cursor: no-drop;
}
.example ul#demo2 img {
    width: 25px;
    height: 41.5px;
    vertical-align: bottom;
    border: none;
}
.example ul#demo2 .cart-head{
    border-bottom: solid 1px #eee;
    width: 100%;
    cursor: default;
}
.example ul#demo2 .cart-head img{
    width: 35px;
    height: 38px;
    vertical-align: baseline;
}
.example ul#demo2 .cart-head span{
    font-size: 411%;
    font-family: 'Maven Pro',Helvetica,sans-serif;
    font-weight: bold;
    vertical-align: baseline;
    color: #E5E7EA;
}
.example ul#demo2 .description {
    display: inline-block;
    zoom: 1;
    *display: inline;
    width: 225px;
    border-bottom: dotted 1px #ccc;
    vertical-align: bottom;
}

</style>
<ul id="demo">
    <li>
        <a>
            <img src="../assets/node/images/store_soup_tomato.png">
            <span class="description">Campbells Tomato Condensed Soup - 10.75 Oz</span>
            <span class="price">
                <sup>$</sup><span class="dollars">1</span><sup class="cents">.49</sup>
            </span>
        </a>
    </li>
    <li>
        <a>
        <img src="../assets/node/images/store_soup_chicken.png">
            <span class="description">Campbells Chicken Noodle Condensed Soup - 10.75 Oz</span>
            <span class="price">
                <sup>$</sup><span class="dollars">1</span><sup class="cents">.49</sup>
            </span>
        </a>
    </li>
    <li>
        <a>
        <img src="../assets/node/images/store_spaghettios.png">
            <span class="description">Campbells Spaghettios - 15 Oz</span>
            <span class="price">
                <sup>$</sup><span class="dollars">1</span><sup class="cents">.89</sup>
            </span>
        </a>
    </li>
    <li>
        <a>
        <img src="../assets/node/images/store_rice.png">
            <span class="description">Rice A Roni Mexican Style Rice Mix - 6.9 Oz</span>
            <span class="price">
                <sup>$</sup><span class="dollars">1</span><sup class="cents">.50</sup>
            </span>
        </a>
    </li>
    <li>
        <a>
        <img src="../assets/node/images/store_yogurt.png">
            <span class="description">Yoplait Yogurt (all flavors) - 6 Oz</span>
            <span class="price">
                <sup>$</sup><span class="dollars">0</span><sup class="cents">.80</sup>
            </span>
        </a>
    </li>
    <li>
        <a>
        <img src="../assets/node/images/store_banana.png">
            <span class="description">Bananas</span>
            <span class="price">
                <sup>$</sup><span class="dollars">0</span><sup class="cents">.36</sup>
            </span>
        </a>
    </li>
    <li>
        <a>
        <img src="../assets/node/images/store_egg.png">
            <span class="description">Eggs Large Grade AA - 12 Count</span>
            <span class="price">
                <sup>$</sup><span class="dollars">2</span><sup class="cents">.79</sup>
            </span>
        </a>
    </li>
    <li>
        <a>
        <img src="../assets/node/images/store_egg2.png">
            <span class="description">Eggs Large Grade AA - 24 Count</span>
            <span class="price">
                <sup>$</sup><span class="dollars">5</span><sup class="cents">.58</sup>
            </span>
        </a>
    </li>
    <li>
        <a>
        <img src="../assets/node/images/store_peanut_butter.png">
            <span class="description">Laura Scudders Old Fashioned Smooth Peanut Butter - 16 Oz</span>
            <span class="price">
                <sup>$</sup><span class="dollars">5</span><sup class="cents">.49</sup>
            </span>
        </a>
    </li>
    <li>
        <a>
        <img src="../assets/node/images/store_a1.png">
            <span class="description">A-1 Steak Sauce - 15 Oz</span>
            <span class="price">
                <sup>$</sup><span class="dollars">7</span><sup class="cents">.69</sup>
            </span>
        </a>
    </li>
    <li>
        <a>
        <img src="../assets/node/images/store_tobasco.png">
            <span class="description">Mcilhenny Tabasco Chipotle Pepper Sauce - 5 Fl. Oz.</span>
            <span class="price">
                <sup>$</sup><span class="dollars">3</span><sup class="cents">.99</sup>
            </span>
        </a>
    </li>
    <li>
        <a>
        <img src="../assets/node/images/store_ketchup.png">
            <span class="description">Del Monte Ketchup - 20 Oz</span>
            <span class="price">
                <sup>$</sup><span class="dollars">3</span><sup class="cents">.29</sup>
            </span>
        </a>
    </li>
</ul>
<ul id="demo2">
    <li class="cart-head">
        <img src="../assets/node/images/store_cart.png" width="35" height="38"> <span>CART</span>
    </li>
</ul>

<script type="text/javascript">
YUI().use('node', 'event-touch', function(Y) {
    var onClick = function(e) {
        e.preventDefault();
        var item = e.currentTarget,
            list2 = Y.one('#demo2');

        if (item.get('parentNode') === list2) { // remove if click is in the cart
            // remove from cart only if it's not the cart header
            if (item.hasClass('cart-head') === false) {
                item.remove(); // sugar for item.get('parentNode').removeChild(item);
            }
        } else { // else add a clone of the clicked item to the cart
            list2.append(item.cloneNode(true));
        }
    };

    Y.one('#demo').delegate('click', onClick, 'li');
    Y.one('#demo').delegate('touchstart', onClick, 'li');
    Y.one('#demo2').delegate('click', onClick, 'li');
    Y.one('#demo2').delegate('touchstart', onClick, 'li');
});
</script>

Examples

Examples That Use This Component