商品详情模板

+/**
+ * 购物车Logic
+ * @author: xuqi<qi.xu@yoho.cn>
+ * @date: 2015/10/20
+ */
+var $ = require('jquery'),
+    ellipsis = require('mlellipsis'),
+    Hammer = require('yoho.hammer');
+
+var chosePanel = require('./chose-panel'),
+    dialog = require('../me/dialog'),
+    loading = require('../plugin/loading'),
+    tip = require('../plugin/tip');
+
+var $cartContent = $('.cart-content'),
+    cartType = $('#cartType').val(),
+    $cartNav = $('.cart-nav'),
+    $cartPage = $('.shopping-cart-page'),
+    hasShowCartPresellTip = false;
+
+var navHammer,
+    advanceBuyHammer,
+    freebieHammer,
+    switchChose = false;
+
+var isRefreshByDelete = window.cookie('_yoho-cart-refreshByDelete') === 'true' ? true : false;
+
+var lowStockCount = 0;
+
+
+loading.showLoadingMask();
+
+function needLoadRecommandForYou() {
+    return window.isCookiesEnabled() ?
+            $('.cart-goods').length <= 0 && !isRefreshByDelete :
+            $('.cart-goods').length <= 0;
+}
+
+
+if (needLoadRecommandForYou()) {
+    require('../product/recommend-for-you');
+} else {
+    if (isRefreshByDelete) {
+        $('body').css('background-color', '#f0f0f0');
+    }
+    require('./good');
+}
+
+$cartPage.css('display', 'block');
+loading.hideLoadingMask();
+
+window.setCookie('_yoho-cart-refreshByDelete', false);
+
+ellipsis.init();
+
+function cartContentShow() {
+    return $cartContent.not('.hide');
+}
+
+function mlellipsisHiddenNames() {
+    cartContentShow().find('.shopping-cart-good .name').each(function() {
+        this.mlellipsis(2);
+    });
+    switchChose = true;
+}
+
+function hasChecked() {
+    return cartContentShow().find('.cart-goods .icon-cb-checked').length > 0 ? true : false;
+}
+
+function shouldSelectGift() {
+    var $freebie = cartContentShow().find('.freebie');
+
+    if ($freebie.length <= 0) {
+        return false;
+    }
+
+    return true;
+}
+
+function shouldLowStocks() {
+    var $lowStocks,
+        result = false;
+
+    if (cartType === 'ordinary') {
+        $lowStocks = $('.common .low-stocks');
+    } else if (cartType === 'advance') {
+        $lowStocks = $('.presell .low-stocks');
+    }
+
+    if ($lowStocks.length <= 0) {
+        return result;
+    }
+
+    $lowStocks.each(function(idx, item) {
+        if ($(item).parent().parent().parent().siblings('.checkbox').hasClass('icon-cb-checked')) {
+            lowStockCount += 1;
+            result = true;
+        }
+    });
+
+    return result;
+}
+
+function showChooseGifDialog() {
+    dialog.showDialog({
+        dialogText: '您还未选择赠品，是否去选择赠品',
+        hasFooter: {
+            leftBtnText: '我不要赠品',
+            rightBtnText: '去选择'
+        }
+    }, function() {
+        window.location.href = cartContentShow().find('.freebie > a').attr('href');
+    }, function() {
+        var info = window.cookie('order-info');
+
+        if (info) {
+            window.setCookie('order-info', '');
+        }
+        window.location.href = '/cart/index/orderEnsure?cartType=' + cartType;
+    });
+}
+
+if (typeof window.cookie === 'function' && window.cookie('_hasShowCartPresellTip') === 'y') {
+    $('#presell-tip').removeClass('show').addClass('hide');
+    hasShowCartPresellTip = true;
+} else {
+    $('#presell-tip').removeClass('hide').addClass('show');
+}
+
+if (cartType === 'advance') {
+    $cartContent.toggleClass('hide');
+    $('#common-cart-nav').removeClass('active');
+    $('#presell-cart-nav').addClass('active');
+
+    mlellipsisHiddenNames();
+    $(window).trigger('scroll');
+}
+
+if ($cartNav.length > 0) {
+    navHammer = new Hammer(document.getElementsByClassName('cart-nav')[0]);
+    navHammer.on('tap', function(e) {
+        var $this = $(e.target).closest('li');
+
+        if ($this.hasClass('active')) {
+            return;
+        }
+
+        if (cartType === 'ordinary') {
+            cartType = 'advance';
+            $('#cartType').val('advance');
+        } else {
+            cartType = 'ordinary';
+            $('#cartType').val('ordinary');
+        }
+
+        $this.siblings('.active').removeClass('active');
+        $this.addClass('active');
+
+        // 切换普通商品和预售商品购物车显示
+        $cartContent.toggleClass('hide');
+
+        if (switchChose === false) {
+            mlellipsisHiddenNames();
+        }
+
+        // trigger lazyload
+        $(window).trigger('scroll');
+    });
+
+    if (!hasShowCartPresellTip) {
+        setTimeout(function() {
+            $('#presell-tip').removeClass('show').addClass('hide');
+            window.setCookie('_hasShowCartPresellTip', 'y');
+        }, 3000);
+    }
+}
+
+if ($('.advance-buy').length > 0) {
+    advanceBuyHammer = new Hammer(document.getElementsByClassName('advance-buy')[0]);
+    advanceBuyHammer.on('tap', function() {
+        window.location.href = '/cart/index/advanceBuy?cartType=' + cartType;
+    });
+}
+
+if ($('.freebie').length > 0) {
+    freebieHammer = new Hammer(document.getElementsByClassName('freebie')[0]);
+    freebieHammer.on('tap', function() {
+        window.location.href = '/cart/index/gift?cartType=' + cartType;
+    });
+}
+
+$('.btn-balance').on('touchend', function() {
+    var info = window.cookie('order-info');
+
+    lowStockCount = 0;
+
+    if (shouldLowStocks()) {
+        tip.show('所选商品中有' + lowStockCount + '种库存不足的商品');
+        return false;
+    }
+
+    if (shouldSelectGift()) {
+        showChooseGifDialog();
+        return false;
+    }
+
+    if (hasChecked()) {
+        if (info) {
+            window.setCookie('order-info', '');
+        }
+        window.location.href = '/cart/index/orderEnsure?cartType=' + cartType;
+    } else {
+        tip.show('请先勾选商品');
+    }
+});
+
+$('.off-shell-goods').on('touchstart touchend', function(e) {
+    var $this = $(e.target).closest('span');
+
+    if ($this.hasClass('icon-del')) {
+        return;
+    }
+
+    tip.show('商品已下架');
+    return false;
+});
+
+$('.chose').on('touchend', function() {
+    chosePanel.show();
+});
+
+$cartNav.on('touchstart', 'li', function() {
+    $(this).addClass('bytouch');
+}).on('touchend touchcancel', function() {
+    $cartNav.find('li').removeClass('bytouch');
+});
+
+// 提前触发lazyload
+$(window).scrollTop(1).scrollTop(0);

+/**
+ * 赠品/加价购
+ * @author: xuqi<qi.xu@yoho.cn>
+ * @date: 2015/10/23
+ */
+
+var $ = require('jquery'),
+    ellipsis = require('mlellipsis'),
+    lazyLoad = require('yoho.lazyload'),
+    Hammer = require('yoho.hammer'),
+    tip = require('../plugin/tip'),
+    loading = require('../plugin/loading'),
+    chosePanel = require('./chose-panel');
+
+var $page = $('.gift-advance-page'),
+    queryString = $.queryString();
+
+require('../common');
+
+lazyLoad($('.lazy'));
+ellipsis.init();
+
+function getProductInfo(skn, promotionId) {
+    loading.showLoadingMask();
+    $.get('/cart/index/giftinfo', {
+        skn: skn,
+        promotionId: promotionId
+    }).then(function(html) {
+        if (!html) {
+            tip.show('网络错误');
+            return;
+        }
+        chosePanel.show(html, function() {
+            window.location.href = '/cart/index/index?cartType=' + queryString.cartType;
+        });
+    }, function() {
+        tip.show('网络错误');
+    }).always(function() {
+        loading.hideLoadingMask();
+    });
+}
+
+$page.find('.chose').each(function(i, elem) {
+    var choseHammer = new Hammer(elem);
+
+    choseHammer.on('tap', function(e) {
+        var $this = $(e.target),
+            id = $this.closest('.gift-advance-good').data('id'),
+            promotionId = $this.closest('.advance-block').data('promotion-id');
+
+        getProductInfo(id, promotionId);
+    });
+});
+
+setTimeout(function() {
+    $('.gift-advance-good .name').each(function() {
+        this.mlellipsis(2);
+    });
+}, 0);

+/**
+ * 购物车商品
+ * @author: xuqi<qi.xu@yoho.cn>
+ * @date: 2015/10/20
+ */
+
+var $ = require('jquery'),
+    ellipsis = require('mlellipsis'),
+    chosePanel = require('../cart/chose-panel'),
+    loading = require('../plugin/loading'),
+    lazyLoad = require('yoho.lazyload');
+
+var dialog = require('../me/dialog'),
+    tip = require('../plugin/tip');
+
+var $selectAllBtn = $('.balance .checkbox'),
+    requesting = false;
+
+// 上次编辑的商品skn
+var previousEditSkn;
+
+ellipsis.init();
+
+lazyLoad({
+    try_again_css: 'order-failure'
+});
+
+setTimeout(function() {
+    $('.shopping-cart-good .name').each(function() {
+        this.mlellipsis(2);
+    });
+}, 0);
+
+function GoodInfo(properties) {
+    this.goods_type = properties.goods_type;
+    this.buy_number = properties.buy_number;
+    this.product_sku = properties.product_sku;
+    this.selected = properties.selected;
+}
+
+// TIP:事件委托在.cart-goods，商品列表的容器统一需要有.cart-goods
+$('.cart-goods').on('touchstart', '.checkbox', function() {
+    var $this = $(this),
+        $good = $this.closest('.shopping-cart-good'),
+        id = $good.data('id');
+
+    var goodsList = [],
+        goodInfo = {};
+
+    if (!$this.hasClass('icon-cb-checked') && $this.siblings('.info').find('.low-stocks').length > 0) {
+        tip.show('库存不足，无法购买');
+        return false;
+    }
+
+    goodInfo.goods_type = $('#cartType').val();
+    goodInfo.selected = $this.hasClass('icon-cb-checked') ? 'N' : 'Y';
+    goodInfo.product_sku = id;
+    goodInfo.buy_number = $good.find('.count').eq(0).text().trim().replace('×', '');
+    goodsList.push(new GoodInfo(goodInfo));
+
+    $.ajax({
+        type: 'post',
+        url: 'select',
+        data: {
+            skuList: JSON.stringify(goodsList)
+        }
+    }).then(function(data) {
+        if (data.code === 200) {
+            if ($this.hasClass('icon-cb-checked')) {
+                $this.removeClass('icon-cb-checked').addClass('icon-checkbox');
+            } else {
+                $this.removeClass('icon-checkbox').addClass('icon-cb-checked');
+            }
+            window.location.href = '/cart/index/index?cartType=' + $('#cartType').val();
+        } else if (data.code === 400) {
+            tip.show('网络异常');
+        }
+    }, function() {
+        tip.show('网络异常');
+    });
+});
+
+/*
+ * 显示购物车编辑面板。
+ *
+ * @param {String} html. chose-pannel模板,由服务端返回
+ *
+ * @param {String} id. 商品skuid
+ *
+ * @param {Bool} isSelected. 所要编辑的商品是否被选中
+ *
+ * @param {Bool} isEditNum. 所要编辑的商品是否被选中
+ *
+ * @return false or undefined
+ *
+ */
+function showEditPannelWithSku(html, id, isSelected, isEditNum) {
+    if (html.length < 2) {
+        tip.show('出错啦！');
+        return false;
+    }
+
+    // 删掉页面上原有的pannel
+    chosePanel.remove();
+
+    $(html).appendTo('#mainCart');
+
+
+    chosePanel.init();
+    chosePanel.setEditModeWithSknId(id, isSelected);
+
+    if (!isEditNum) {
+        chosePanel.disableNumEdit();
+    }
+
+    chosePanel.show();
+}
+
+
+$('.icon-edit').on('touchstart', function(e) {
+    var $this = $(this),
+        skn = $this.closest('.shopping-cart-good').data('skn');
+
+    var $checkBox,
+        $tag;
+
+    var id,
+        count,
+        canEditNum;
+
+    if ($this.parents('.off-shell-goods').length) {
+        tip.show('商品已下架');
+        return false;
+    }
+
+    // 如果点击的是上次编辑的商品,直接显示chose-pannel
+    if (skn === previousEditSkn) {
+        chosePanel.show();
+        return;
+    }
+
+    previousEditSkn = skn;
+
+
+    $checkBox = $this.closest('.info').siblings('.checkbox');
+    $tag = $this.closest('.deps').siblings('.few-tag');
+
+    id = $this.closest('.shopping-cart-good').data('id');
+    count = $this.data('count');
+
+    // 加价购或者赠品不能编辑数量
+    canEditNum = $tag.hasClass('gift-tag') || $tag.hasClass('plus-tag') ? false : true;
+
+    e.stopPropagation();
+
+    loading.showLoadingMask();
+
+
+    $.ajax({
+        url: '/cart/index/goodinfo',
+        data: {
+            skn: skn,
+            buy_num: count
+        },
+        success: function(res) {
+            showEditPannelWithSku(res, id, $checkBox.hasClass('icon-cb-checked'), canEditNum);
+        },
+        error: function() {
+            tip.show('网络异常');
+            window.location.reload();
+        },
+        complete: function() {
+            loading.hideLoadingMask();
+        }
+    });
+});
+
+$('.icon-del').on('touchstart', function(e) {
+    var $this = $(this);
+
+    e.stopPropagation();
+
+    dialog.showDialog({
+        dialogText: '您确定要从购物车中删除吗？',
+        hasFooter: {
+            leftBtnText: '取消',
+            rightBtnText: '确定'
+        }
+    }, function() {
+        var $shoppingCartGood = $this.closest('.shopping-cart-good'),
+            count = $this.data('count');
+
+        $.ajax({
+            method: 'post',
+            url: '/cart/index/del',
+            data: {
+                sku: $shoppingCartGood.data('id'),
+                count: count,
+                promotionId: $shoppingCartGood.data('promotion')
+            }
+        }).then(function(data) {
+            if (data.code === 200) {
+                dialog.showDialog({
+                    dialogText: '删除成功',
+                    autoHide: true,
+                    fast: true
+                });
+                window.setCookie('_yoho-cart-refreshByDelete', true);
+                window.location.href = '/cart/index/index?cartType=' + $('#cartType').val();
+            } else {
+                tip.show(data.message);
+            }
+        }, function() {
+            tip.show('网络异常');
+            window.location.reload();
+        });
+    });
+});
+
+function requestUpdateAllGoodsCheckStatus(theGoods, successHandeler) {
+    if (requesting) {
+        return;
+    }
+    requesting = true;
+    $.ajax({
+        url: 'select',
+        type: 'post',
+        data: {
+            skuList: JSON.stringify(theGoods)
+        },
+        success: function(res) {
+            if (res.code === 200) {
+                successHandeler();
+            } else {
+                tip.show(res.message);
+            }
+        },
+        error: function() {
+            tip.show('网络异常');
+        },
+        complete: function() {
+            requesting = false;
+        }
+    });
+}
+
+function didUpdateAllGoodsCheckStatus() {
+    var $checkedBoxs = $('.shopping-cart-good .icon-cb-checked'),
+        $uncheckedBoxs = $('.shopping-cart-good .icon-checkbox');
+
+    var shouldSelectAll;
+
+    if ($selectAllBtn.hasClass('icon-cb-checked')) {
+        $selectAllBtn.removeClass('icon-cb-checked').addClass('icon-checkbox');
+        shouldSelectAll = true;
+    } else {
+        $selectAllBtn.removeClass('icon-checkbox').addClass('icon-cb-checked');
+        shouldSelectAll = false;
+    }
+
+    if (!shouldSelectAll) {
+        $uncheckedBoxs.each(function(idx, uncheckedBox) {
+            $(uncheckedBox).removeClass('icon-checkbox').addClass('icon-cb-checked');
+        });
+    } else {
+        $checkedBoxs.each(function(idx, checkedBox) {
+            $(checkedBox).removeClass('icon-cb-checked').addClass('icon-checkbox');
+        });
+    }
+    window.location.href = '/cart/index/index?cartType=' + $('#cartType').val();
+}
+
+function bottomCheckBoxHandeler(isSelected, type, handlerAfterTouch) {
+    var goodInfo = {},
+        $goods = $('.cart-content:not(.hide) .shopping-cart-good'),
+        $good = null,
+        goodsList = [];
+
+    goodInfo.goods_type = type;
+    goodInfo.selected = isSelected ? 'N' : 'Y';
+
+    $goods.each(function(idx, good) {
+        $good = $(good);
+
+        goodInfo.product_sku = $(good).data('id');
+        goodInfo.hasPromotion = $(good).data('promotion');
+        goodInfo.buy_number = $good.find('.count').eq(0).text().trim().replace('×', '');
+
+        goodsList.push(new GoodInfo(goodInfo));
+    });
+
+    requestUpdateAllGoodsCheckStatus(goodsList, handlerAfterTouch);
+}
+
+// 全选按钮点击事件
+$selectAllBtn.on('touchend', function() {
+    var cartType = $('#cartType').val(),
+        isSelect = $(this).hasClass('icon-cb-checked');
+
+    if (cartType === 'ordinary') {
+        if (!isSelect && $('.common .low-stocks').length > 0) {
+            tip.show('所选商品中含有库存不足的商品');
+            return false;
+        }
+    } else if (cartType === 'advance') {
+        if (!isSelect && $('.presell .low-stocks').length > 0) {
+            tip.show('所选商品中含有库存不足的商品');
+            return false;
+        }
+    }
+
+    bottomCheckBoxHandeler(isSelect, cartType, didUpdateAllGoodsCheckStatus);
+});
+
+$('.down').on('touchend', function() {
+    chosePanel.show();
+});

@@ -6,7 +6,8 @@
 var $ = require('yoho-jquery'),
 var $ = require('yoho-jquery'),
     Swiper = require('yoho-swiper'),
     Swiper = require('yoho-swiper'),
     Hammer = require('yoho-hammer'),
     Hammer = require('yoho-hammer'),
-    lazyLoad = require('yoho-jquery-lazyload');
+    lazyLoad = require('yoho-jquery-lazyload'),
+    commonJS = require('../common');
 
 
 var goodsSwiper,
 var goodsSwiper,
     $discountFolder = $('.goodsDiscount .discount-folder'),
     $discountFolder = $('.goodsDiscount .discount-folder'),
@@ -60,14 +61,14 @@ goodsSwiper = new Swiper('.banner-swiper', {
 
 
 
 
 // 初始化goods-discount
 // 初始化goods-discount
-if (0 === $discountFolder.children().length) {
+if ($discountFolder.children().length === 0) {
     $discountFolder.css('display', 'none');
     $discountFolder.css('display', 'none');
     $discountArrow.html('');
     $discountArrow.html('');
 }
 }
 
 
 // goods-discount下拉按钮点击事件
 // goods-discount下拉按钮点击事件
 if (goodsDiscountHammer && $discountFolder.children().length > 0) {
 if (goodsDiscountHammer && $discountFolder.children().length > 0) {
-    goodsDiscountHammer.on('tap', function(e) {
+    goodsDiscountHammer.on('tap', function() {
         if ($discountFolder.is(':hidden')) {
         if ($discountFolder.is(':hidden')) {
             $discountFirstItem.removeClass('short-text');
             $discountFirstItem.removeClass('short-text');
             $discountArrow.removeClass('icon-down').addClass('icon-up').html('');
             $discountArrow.removeClass('icon-down').addClass('icon-up').html('');

+.chose-panel {
+    position: fixed;
+    display: none;
+    height: 100%;
+    top: 0;
+    bottom: 0;
+    left: 0;
+    right: 0;
+    background: rgba(0, 0, 0, 0.3);
+    z-index: 3;
+
+    .main {
+        position: absolute;
+        height: 610px;
+        bottom: 0;
+        left: 0;
+        right: 0;
+        background: #fff;
+    }
+
+    .infos {
+        height: 460px;
+        padding: 0 22px;
+    }
+
+    .chose-items {
+        height: 325px;
+        overflow: auto;
+    }
+
+    .basic-info {
+        overflow: hidden;
+        position: relative;
+        margin-bottom: 30px;
+        margin-top: 30px;
+    }
+
+    .thumb {
+        float: left;
+        width: 100px;
+        margin-right: 20px;
+    }
+
+    .text-info {
+        height: auto;
+        .name {
+            font-size: 28px;
+            height: 74px;
+            overflow: hidden;
+            display: -webkit-box;
+            -webkit-line-clamp: 2;
+            -webkit-box-orient: vertical;
+        }
+
+        .price {
+            font-size: 24px;
+            display: inline;
+        }
+        .sale-price {
+            color: #e10;
+            margin-right: 15px;
+
+            &.no-price {
+                color: #000;
+            }
+        }
+
+        .market-price {
+            color: #b0b0b0;
+            text-decoration: line-through;
+        }
+    }
+
+    .color-list,
+    .size-list,
+    .num {
+        position: relative;
+        font-size: 28px;
+        padding-left: 80px;
+
+        input.disabled {
+            background-color: #fff;
+            color: #000;
+            opacity: 1;
+            border-radius: 0;
+            -webkit-appearance: none;
+        }
+
+        > span {
+            position: absolute;
+            left: 0;
+            top: 20px;
+        }
+
+        > span.left-num {
+            position: absolute;
+            left: 380px;
+            top: 20px;
+        }
+
+        span.disabled {
+            color: #e6e6e6;
+        }
+    }
+
+    .size-list li.hide {
+        display: none;
+    }
+
+    .block {
+        float: left;
+        display: block;
+        box-sizing: border-box;
+        padding: 0 20px;
+        min-width: 80px;
+        height: 80px;
+        border: 1px solid #000;
+        margin-right: 30px;
+        margin-bottom: 30px;
+        line-height: 80px;
+        text-align: center;
+
+        &.chosed {
+            border-color: #e10;
+            background: resolve('shopping-cart/right.png') no-repeat;
+            background-size: 38px;
+            background-position: bottom right;
+            color: #e10;
+        }
+
+        &.zero-stock {
+            color: #e0e0e0;
+            border-color: #e0e0e0;
+        }
+
+        &.zero-stock.chosed {
+            border-color: #e0e0e0;
+            background: none;
+            color: #e0e0e0;
+            background-color: #c0c0c0;
+        }
+    }
+
+    .num {
+        margin-bottom: 20px;
+    }
+
+    .num .btn {
+        float: left;
+        display: block;
+        height: 80px;
+        width: 80px;
+        text-align: center;
+        line-height: 80px;
+        border: 1px solid #e6e6e6;
+
+        &.disable {
+            color: #e6e6e6;
+        }
+    }
+
+    .good-num {
+        float: left;
+        width: 106px;
+        height: 80px;
+        line-height: 80px;
+        padding: 0;
+        border: 1px solid #e6e6e6;
+        text-align: center;
+        margin-left: -1px;
+    }
+
+    .btn-plus {
+        margin-left: -1px;
+    }
+
+    .btn-wrap {
+        position: relative;
+        height: 120px;
+        border-top: 1px solid #e6e6e6;
+        padding: 20px;
+        text-align: center;
+        background: #fff;
+        box-sizing: border-box;
+
+        .btn-sure {
+            width: 260px;
+            height: 80px;
+            background: #e10;
+            color: #fff;
+            font-size: 32px;
+            border: none;
+        }
+    }
+}

@@ -9,3 +9,5 @@
 @import "product/detail";
 @import "product/detail";
 @import "product/comments-consults";
 @import "product/comments-consults";
 @import "product/product-description";
 @import "product/product-description";
+@import "product/recommend-for-you";
+@import "cart/chose-panel";

+.recommend-for-you {
+    padding: 30px 0;
+    border-top: 1px solid #e0e0e0;
+    border-bottom: 1px solid #e0e0e0;
+    background: #fff;
+
+    .title {
+        font-size: 32px;
+        line-height: 88px;
+        text-align: center;
+        color: #444;
+    }
+
+    .swiper-container {
+        padding: 30px 0 20px;
+        width: 100%;
+
+        .swiper-slide {
+            padding: 0 10px;
+            float: left;
+            width: 156px;
+
+            &:first-child {
+                padding-left: 30px;
+            }
+
+            &:last-child {
+                padding-right: 30px;
+            }
+
+            img {
+                width: 100%;
+                height: 208px;
+            }
+        }
+    }
+    .sale-name {
+        overflow: hidden;
+        text-overflow: ellipsis;
+        width: 100%;
+        white-space: nowrap;
+        margin-top: 20px;
+        color: #444;
+    }
+
+    .price {
+        position: relative;
+        margin-top: 8px;
+        font-size: 24px;
+        line-height: 1;
+
+        .sale-price {
+            display: block;
+            color: #d9134f;
+            margin-right: 8px;
+        }
+
+        .old-price {
+            display: block;
+            color: #b0b0b0;
+            text-decoration: line-through;
+        }
+
+        .no-price {
+            color: #444;
+        }
+    }
+}