新零售商城 快打包
当前位置:首页 > 教程中心 > CMS教程 > EcShop

ECShop实现商品颜色属性用颜色图片显示

所属栏目:EcShop 时间:2014-12-26 来源:网络 作者:不详 点击:

ECSHOP系统本身的商品属性比如颜色,都是直接显示颜色文字名称的,用户体验很不好。

一流资源网之前分享过一篇教程:实现Ecshop仿淘宝颜色/尺码/规格选择

今天再来分享 用颜色图片来代替文字颜色,注意,是纯颜色图片,不是商品颜色图片。

后台相关修改:

1、在 includes/lib_common.php 文件尾部增加get_attachment_by_id 函数:

function get_attachment_by_id( $id )
{
    if( $id == '' || $id == 0 )
    {
        exit("Function :get_attachment_by_id parame $id Is Not Legaled");
    }
    $number = 6;
    $size = 2;
    $string = sprintf("%06d", $id);
    $path = array();
    for( $i = 0 ;$i < $number/$size ; $i ++)
    {
        $path[] = substr($string, $i*$size, $size);
    }
    return implode('/', $path);
}

2、修改admin/includes/lib_goods.php。

(1)修改build_attr_html函数:

找到:

$html .= ($val['attr_type'] == 1 || $val['attr_type'] == 2),

大约在714行,

原代码:

$html .= ($val['attr_type'] == 1 || $val['attr_type'] == 2) ?
            $GLOBALS['_LANG']['spec_price'].' <input type="text" name="attr_price_list[]" value="' . $val['attr_price'] . '" size="5" maxlength="10" />' :
            ' <input type="hidden" name="attr_price_list[]" value="0" />';

在这句后增加下面代码:

$attr_color_images_html = '';
if( $val['goods_attr_id'] && $val['goods_attr_id'] != 0 && $val['goods_attr_id'] != '' )
{
    $attr_color_images_dir = "../".DATA_DIR.'/color/'.get_attachment_by_id($goods_id)."/0-0-".$val['goods_attr_id'].".jpg";
    file_exists($attr_color_images_dir) && $attr_color_images_html = '<span style="border:1px solid #FF6600;"><img src="'.$attr_color_images_dir.'" width="15" height="15" align="absmiddle"></span>';
}
$html .= $val['attr_name'] == '颜色' ? '<span>   属性图片:<input type="file" name="attr_images_list[]" value="' . $val['attr_images_list'] . '" /></span> '.$attr_color_images_html : '<span style="display:none;"><input type="file" name="attr_images_list[]" value="" /></span>';

(2)修改函数get_attr_list中的sql语句,增加查询的数据项 v.goods_attr_id,修改后代码如下:

/**
 * 取得通用属性和某分类的属性,以及某商品的属性值
 * @param   int     $cat_id     分类编号
 * @param   int     $goods_id   商品编号
 * @return  array   规格与属性列表
 */
function get_attr_list($cat_id, $goods_id = 0)
{
    if (empty($cat_id))
    {
        return array();
    }
 
    // 查询属性值及商品的属性值 商品颜色属性用图片代替, v.goods_attr_id
    $sql = "SELECT a.attr_id, a.attr_name, a.attr_input_type, a.attr_type, a.attr_values, v.attr_value, v.attr_price, v.goods_attr_id ".
            "FROM " .$GLOBALS['ecs']->table('attribute'). " AS a ".
            "LEFT JOIN " .$GLOBALS['ecs']->table('goods_attr'). " AS v ".
            "ON v.attr_id = a.attr_id AND v.goods_id = '$goods_id' ".
            "WHERE a.cat_id = " . intval($cat_id) ." OR a.cat_id = 0 ".
            "ORDER BY a.sort_order, a.attr_type, a.attr_id, v.attr_price, v.goods_attr_id";
 
    $row = $GLOBALS['db']->GetAll($sql);
 
    return $row;
}

3、修改admin/goods.php,

(1)找到 $attr_price = $_POST['attr_price_list'][$key]; 大约在976行,后面添加: 

$attr_images = array('name' => $_FILES['attr_images_list']['name'][$key] , 'type' => $_FILES['attr_images_list']['type'][$key] , 'tmp_name' => $_FILES['attr_images_list']['tmp_name'][$key] , 'error' => $_FILES['attr_images_list']['error'][$key], 'size' => $_FILES['attr_images_list']['size'][$key] );

(2)找到$goods_attr_list[$attr_id][$attr_value]['attr_price'] = $attr_price;有两处,大约在983行和989行,后面分别添加: 

$goods_attr_list[$attr_id][$attr_value]['attr_images'] = $attr_images;

(3)找到$db->query($sql);大约在1026,这个有多处(请注意行数),在后面增加:

$goods_attr_id = $info['sign'] == 'insert' ? $db->insert_id() : $info['goods_attr_id'];
if( $info['sign'] == 'insert' || $info['sign'] == 'update' )
{
    if( $info['attr_images']['tmp_name'] != '' )
    {
        $attr_images_dir = 'color/'.get_attachment_by_id($goods_id);
        $attr_images_scoure_name = "0-0-$goods_attr_id.jpg"; 
        $color_scoure_images = $image->upload_image($info['attr_images'] , $attr_images_dir , $attr_images_scoure_name ); // 原始图片
    }
}
else
{
    $attr_color_images_dir = ROOT_PATH.DATA_DIR.'/color/'.get_attachment_by_id($goods_id)."/0-0-".$info[goods_attr_id].".jpg";
    file_exists($attr_color_images_dir) && unlink( $attr_color_images_dir );
}

前台获取图片:

1、在includes/lib_goods.php文件中的get_goods_properties函数中添加获取颜色图片代码,修改后代码如下:

/**
 * 获得商品的属性和规格
 *
 * @access  public
 * @param   integer $goods_id
 * @return  array
 */
function get_goods_properties($goods_id)
{
    /* 对属性进行重新排序和分组 */
    $sql = "SELECT attr_group ".
            "FROM " . $GLOBALS['ecs']->table('goods_type') . " AS gt, " . $GLOBALS['ecs']->table('goods') . " AS g ".
            "WHERE g.goods_id='$goods_id' AND gt.cat_id=g.goods_type";
    $grp = $GLOBALS['db']->getOne($sql);
 
    if (!empty($grp))
    {
        $groups = explode("\n", strtr($grp, "\r", ''));
    }
 
    /* 获得商品的规格 */
    $sql = "SELECT a.attr_id, a.attr_name, a.attr_group, a.is_linked, a.attr_type, ".
                "g.goods_attr_id, g.attr_value, g.attr_price " .
            'FROM ' . $GLOBALS['ecs']->table('goods_attr') . ' AS g ' .
            'LEFT JOIN ' . $GLOBALS['ecs']->table('attribute') . ' AS a ON a.attr_id = g.attr_id ' .
            "WHERE g.goods_id = '$goods_id' " .
            'ORDER BY a.sort_order, g.attr_price, g.goods_attr_id';
    $res = $GLOBALS['db']->getAll($sql);
 
    $arr['pro'] = array();     // 属性
    $arr['spe'] = array();     // 规格
    $arr['lnk'] = array();     // 关联的属性
 
    foreach ($res AS $row)
    {
        $row['attr_value'] = str_replace("\n", '<br />', $row['attr_value']);
 
        if ($row['attr_type'] == 0)
        {
            $group = (isset($groups[$row['attr_group']])) ? $groups[$row['attr_group']] : $GLOBALS['_LANG']['goods_attr'];
 
            $arr['pro'][$group][$row['attr_id']]['name']  = $row['attr_name'];
            $arr['pro'][$group][$row['attr_id']]['value'] = $row['attr_value'];
        }
        else
        {
            $arr['spe'][$row['attr_id']]['attr_type'] = $row['attr_type'];
            $arr['spe'][$row['attr_id']]['name']     = $row['attr_name'];
            $arr['spe'][$row['attr_id']]['values'][] = array(
                                                        'label'     => $row['attr_value'],
                                                        'price'     => $row['attr_price'],
                                                        'format_price' => price_format(abs($row['attr_price']), false),
                                                        'id'            => $row['goods_attr_id'],
                                                        //获取颜色图片
                                                        'attr'          => "../".DATA_DIR.'/color/'.get_attachment_by_id($goods_id)."/0-0-".$row['goods_attr_id'].".jpg");
        }
 
        if ($row['is_linked'] == 1)
        {
            /* 如果该属性需要关联,先保存下来 */
            $arr['lnk'][$row['attr_id']]['name']  = $row['attr_name'];
            $arr['lnk'][$row['attr_id']]['value'] = $row['attr_value'];
        }
    }
 
    return $arr;
}

2、在前台模板文件中使用<img src="{$value.attr}" alt="{$value.label}"/>即可显示颜色图片。
如果没有图片,前台判断这么写:

<!-- {if $value.attr} -->//有图片
                        <li title="{$value.label}" style="height:38px; width:38px;cursor:pointer;"><a href="{$value.attr}" style="display:block; height:38px; width:38px;" class="lia" name="spec_li" title="{$value.label}"><img src="{$value.attr}" alt="{$value.label}" style="max-height:38px; max-width:38px;"/></a>
                      </li>
                      <!-- {else} -->//没有图片直接显示属性文字
                      <li style="height:38px; width:38px;cursor:pointer; line-height:38px;" style="display:block; height:38px; width:38px;" class="lia" name="spec_li" title="{$value.label}">{$value.label}
                      </li>
                      <!-- {/if} -->

前台具体的选择样式跟提交时判断选的哪个颜色,就得大家自己去处理了。。。

请站长喝杯咖啡?

站长一直坚持白天工作、晚上熬夜更新素材,付出了巨大的精力和时间,其中的辛酸难以言述。

坚持免积分、免登录、无任何限制下载!如果本站素材对你有用,不妨考虑请站长喝杯咖啡鼓励一下!

共有 0 条评论

给个评价吧

验证码: