Tìm kiếm nhanh

Đưa hình ảnh banner giới thiệu loại sản phẩm ra trang chủ

Thảo luận trong 'Modules sản phẩm' đăng bởi hoanglongvnpt, 29/09/2016 01:22.

  • hoanglongvnpt

    hoanglongvnpt Nguyễn Tất Thắng

    vấn đề này chắc nhiều bạn đang cần. Hôm nay mình chia sẻ cách đưa banner hình ảnh giới thiệu từng loại sản phẩm ra trang chủ. Lưu ý dùng khi hiển thị kiểu cấu hình LOẠI SẢN PHẨM 

    Hình ảnh ở đây chỉ hiển thị khi có chọn hình ảnh của chủ đề.

    Bắt đầu nhé
    Mở modules/shops/funcs/main.php
    Tìm

    'num_link' => $array_info_i['numlinks']

    Thay bằng

    'num_link' => $array_info_i['numlinks'],
                        'image' => !empty($array_info_i['image']) ? NV_BASE_SITEURL . NV_UPLOADS_DIR . '/' . $module_data . '/' . $array_info_i['image'] : ''

    Mở modules/shops/theme.php
    Trong hàm view_home_cat
    Tìm

    $xtpl->parse('main.catalogs');

    Thêm bên trên

    if(!empty($data_row['image'])){
                        $xtpl->assign('IMAGE', $data_row['image']);
                        $xtpl->parse('main.catalogs.image');
                    }

    Mở themes/ten-theme/modules/shops/main_procate.tpl
    Tìm

    <!-- BEGIN: items -->

    Thêm lên trên

    <!-- BEGIN: image -->
                <img src="{IMAGE}" alt="{TITLE_CATALOG}" class="img-responsive" />
                <!-- END: image -->

     

     

    Tệp đính kèm:

    • a.png
      a.png
      Dung lượng:
      273.54 KB
      Lượt xem:
      27
    anhyeuviolet thích điều này.
  • anpy.ceo

    anpy.ceo David An

    bác đưa thêm chữ nữa đc ko - dưới hình ạ

     
  • anhyeuviolet

    anhyeuviolet Kenny Nguyen

  • hoanglongvnpt

    hoanglongvnpt Nguyễn Tất Thắng

    ý bạn là như này

     

    Tệp đính kèm:

    • 1.png
      1.png
      Dung lượng:
      249.95 KB
      Lượt xem:
      10
    • 2.png
      2.png
      Dung lượng:
      337.53 KB
      Lượt xem:
      7
    aptx4869 anpy.ceo thích điều này.
  • anpy.ceo

    anpy.ceo David An

     

    bỏ 2 cái sản phẩm 2 bên - chỉ giữ lại 1 cái ở giữa và thêm 2 cái block 2 bên đc ko bác 

     
  • anhyeuviolet

    anhyeuviolet Kenny Nguyen

    Để hiển thị ảnh của Loại SP ra trang chủ:

     

    01/ Mở theme.php, tìm :

    function view_home_cat($data_content, $compare_id, $html_pages = '', $sort = 0)
    {
        global $module_info, $lang_module, $module_file, $module_name, $pro_config, $array_wishlist_id, $global_array_shops_cat, $global_array_group, $my_head;
    

    Sửa thành:

     

    function view_home_cat($data_content, $compare_id, $html_pages = '', $sort = 0)
    {
        global $module_info, $lang_module, $module_file, $module_upload, $module_name, $pro_config, $array_wishlist_id, $global_array_shops_cat, $global_array_group, $my_head;
    

    Tức là thêm vào $module_upload.

     

    02/ Ngay bên dưới dòng vửa sửa, tìm:

                    $xtpl->assign('LINK_CATALOG', $data_row['link']);
                    $xtpl->assign('NUM_PRO', $data_row['num_pro']);
    

    Thêm vào bên dưới :

    				if($global_array_shops_cat[$data_row['catid']]['image']){
    					$cat_image = NV_BASE_SITEURL . NV_UPLOADS_DIR . '/' . $module_upload . '/' . $global_array_shops_cat[$data_row['catid']]['image'];
    					$xtpl->assign('CAT_IMG', $cat_image);
    					$xtpl->parse('main.catalogs.cat_image');
    				}
    

    02/ Mở main_procate.tpl, tìm:

    		<div class="panel-body">
    			<!-- BEGIN: items -->
                <div class="col-sm-12 col-md-{num}">
    

    Thêm bên trên nó:

    		<!-- BEGIN: cat_image -->
    		<img src="{CAT_IMG}" alt="{TITLE_CATALOG}" class="img-responsive" />
    		<!-- END: cat_image -->
    

    Làm tới đây là xong phần xuất hình ảnh của Loại SP ra trang chủ.

    ---------------------------------------------

     

     

    Để hiển thị giới thiệu HTML của Loại SP ra trang chủ, phần theme.php cua module sửa thêm như sau:

    01/ Tìm :

    function view_home_cat($data_content, $compare_id, $html_pages = '', $sort = 0)
    {
    

    Tìm tiếp bên dưới nó:

                    $xtpl->assign('TITLE_CATALOG', $data_row['title']);
                    $xtpl->assign('LINK_CATALOG', $data_row['link']);
    

    Thêm code này vào dưới:

    				if(!empty($global_array_shops_cat[$data_row['catid']]['descriptionhtml'])){
    					$xtpl->assign('DESCRIPTIONHTML',$global_array_shops_cat[$data_row['catid']]['descriptionhtml']);
    					$xtpl->parse('main.catalogs.descriptionhtml');
    				}
    

    Sau đó sửa tới main_procate.tpl của theme.

    Tìm :

    				<a class="pull-left" href="{LINK_CATALOG}" title="{TITLE_CATALOG}"><img class="img-responsive" src="{CAT_IMG}" alt="{TITLE_CATALOG}"/></a>
    

    Thêm vào dưới nó :

    				<!-- BEGIN: descriptionhtml -->
    				<div class="alert alert-info">{DESCRIPTIONHTML}</div>
    				<!-- END: descriptionhtml -->
    

     

     
    Lần sửa cuối bởi bạn: 10/11/2016 10:37
    aptx4869 thích điều này.
  • anhyeuviolet

    anhyeuviolet Kenny Nguyen

    Tiếp theo, để phần banner và giới thiệu của loại SP nằm bên trái (bên phải) còn SP nằm ở phần còn lại, ta về cơ bản là sửa sao cho khối chứa mô tả và hình ảnh của loại SP nằm trong 1 div có class là col-md-6, khối chứa các SP là trong div có class col-md-18.

    Khi đó TPL sẽ như sau:

    <!-- BEGIN: main -->
    <div id="category">
    	<!-- BEGIN: catalogs -->
    	<div class="panel panel-default">
    		<div class="panel-heading">
    			<a class="pull-left" href="{LINK_CATALOG}" title="{TITLE_CATALOG}">{TITLE_CATALOG} ({NUM_PRO} {LANG.title_products})</a>
    			<span class="pull-right">
    			<!-- BEGIN: subcatloop -->
    			<a href="{SUBCAT.link}" title="{SUBCAT.title}">{SUBCAT.title}</a>&nbsp;&nbsp;&nbsp;
    			<!-- END: subcatloop -->
    			</span>
    			<div class="clear"></div>
    		</div>
    		<div class="row">	
    			<div class="col-md-6 panel-body">
    				<a class="pull-left" href="{LINK_CATALOG}" title="{TITLE_CATALOG}"><img class="img-responsive" src="{CAT_IMG}" alt="{TITLE_CATALOG}"/></a>
    				<!-- BEGIN: descriptionhtml -->
    				<div class="alert alert-info">{DESCRIPTIONHTML}</div>
    				<!-- END: descriptionhtml -->
    			</div>
    			<div class="col-md-18">
    				<div class="panel-body">
    					<!-- BEGIN: items -->
    					<div class="col-sm-12 col-md-{num}">
    						<div class="thumbnail">
    							<div style="height: {height}px">
    								<a href="{LINK}" title="{TITLE}"><img src="{IMG_SRC}" alt="{TITLE}" <!-- BEGIN: tooltip_js -->data-content='{hometext}' data-rel="tooltip" data-img="{IMG_SRC}"<!-- END: tooltip_js -->class="img-thumbnail" style="max-height:{height}px;max-width:{width}px;"></a>
    							</div>
    							<div class="info_pro">
    								<!-- BEGIN: new -->
    								<span class="label label-success newday">{LANG.newday}</span>
    								<!-- END: new -->
    								<!-- BEGIN: discounts -->
    								<span class="label label-danger">-{PRICE.discount_percent}{PRICE.discount_unit}</span>
    								<!-- END: discounts -->
    								<!-- BEGIN: point -->
    								<span class="label label-info" title="{point_note}">+{point}</span>
    								<!-- END: point -->
    								<!-- BEGIN: gift -->
    								<span class="label label-success">+<em class="fa fa-gift fa-lg">&nbsp;</em></span>
    								<!-- END: gift -->
    							</div>
    							<div class="caption text-center">
    								<h3><a href="{LINK}" title="{TITLE}">{TITLE0}</a></h3>
    
    								<!-- BEGIN: product_code -->
    								<p class="label label-default">{PRODUCT_CODE}</p>
    								<!-- END: product_code -->
    
    								<!-- BEGIN: adminlink -->
    								<p>{ADMINLINK}</p>
    								<!-- END: adminlink -->
    
    								<!-- BEGIN: price -->
    								<p class="price">
    									<!-- BEGIN: discounts -->
    									<span class="money">{PRICE.sale_format} {PRICE.unit}</span>
    									<span class="discounts_money">{PRICE.price_format} {PRICE.unit}</span>
    									<!-- END: discounts -->
    
    									<!-- BEGIN: no_discounts -->
    									<span class="money">{PRICE.price_format} {PRICE.unit}</span>
    									<!-- END: no_discounts -->
    								</p>
    								<!-- END: price -->
    
    								<!-- BEGIN: contact -->
    								<p class="price">{LANG.detail_pro_price}: <span class="money">{LANG.price_contact}</span></p>
    								<!-- END: contact -->
    
    								<!-- BEGIN: compare -->
    								<p><input type="checkbox" value="{ID}"{ch} onclick="nv_compare({ID});" id="compare_{ID}"/><a href="#" onclick="nv_compare_click();" >&nbsp;{LANG.compare}</a></p>
    								<!-- END: compare -->
    
    								<div class="clearfix">
    									<!-- BEGIN: order -->
    									<a href="javascript:void(0)" id="{ID}" title="{TITLE}" onclick="cartorder(this, {GROUP_REQUIE}, '{LINK}')"><button type="button" class="btn btn-primary btn-xs">{LANG.add_product}</button></a>
    									<!-- END: order -->
    
    									<!-- BEGIN: product_empty -->
    									<button class="btn btn-danger disabled btn-xs">{LANG.product_empty}</button>
    									<!-- END: product_empty -->
    
    									<!-- BEGIN: wishlist -->
    									<a href="javascript:void(0)" title="{TITLE}" ><button type="button" onclick="wishlist({ID}, this)" class="btn btn-primary btn-xs <!-- BEGIN: disabled -->disabled<!-- END: disabled -->">{LANG.wishlist}</button></a>
    									<!-- END: wishlist -->
    								</div>
    							</div>
    						</div>
    					</div>
    					<!-- END: items -->
    				</div>
    			</div>
    		</div>
    	</div>
    	<!-- END: catalogs -->
    </div>
    
    <!-- BEGIN: modal_loaded -->
    <div class="modal fade" id="idmodals" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    	<div class="modal-dialog">
    		<div class="modal-content">
    			<div class="modal-header">
    				<button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
    				<h4 class="modal-title">{LANG.add_product}</h4>
    			</div>
    			<div class="modal-body">
    				<em class="fa fa-spinner fa-spin">&nbsp;</em>
    			</div>
    		</div>
    	</div>
    </div>
    <!-- END: modal_loaded -->
    
    <div class="msgshow" id="msgshow">&nbsp;</div>
    <!-- END: main -->
    

    Ta chú ý đến đoạn này, là khối chứa thông tin của loại SP, bao gồm ảnh banner và giới thiệu HTML:

    			<div class="col-md-6 panel-body">
    				<a class="pull-left" href="{LINK_CATALOG}" title="{TITLE_CATALOG}"><img class="img-responsive" src="{CAT_IMG}" alt="{TITLE_CATALOG}"/></a>
    				<!-- BEGIN: descriptionhtml -->
    				<div class="alert alert-info">{DESCRIPTIONHTML}</div>
    				<!-- END: descriptionhtml -->
    			</div>
    

    Còn khối bên dưới nó là chứa các SP trong loại SP:

    			<div class="col-md-18">
    				<div class="panel-body">
    					<!-- BEGIN: items -->
    					<div class="col-sm-12 col-md-{num}">
    						<div class="thumbnail">
    							<div style="height: {height}px">
    								<a href="{LINK}" title="{TITLE}"><img src="{IMG_SRC}" alt="{TITLE}" <!-- BEGIN: tooltip_js -->data-content='{hometext}' data-rel="tooltip" data-img="{IMG_SRC}"<!-- END: tooltip_js -->class="img-thumbnail" style="max-height:{height}px;max-width:{width}px;"></a>
    							</div>
    							<div class="info_pro">
    								<!-- BEGIN: new -->
    								<span class="label label-success newday">{LANG.newday}</span>
    								<!-- END: new -->
    								<!-- BEGIN: discounts -->
    								<span class="label label-danger">-{PRICE.discount_percent}{PRICE.discount_unit}</span>
    								<!-- END: discounts -->
    								<!-- BEGIN: point -->
    								<span class="label label-info" title="{point_note}">+{point}</span>
    								<!-- END: point -->
    								<!-- BEGIN: gift -->
    								<span class="label label-success">+<em class="fa fa-gift fa-lg">&nbsp;</em></span>
    								<!-- END: gift -->
    							</div>
    							<div class="caption text-center">
    								<h3><a href="{LINK}" title="{TITLE}">{TITLE0}</a></h3>
    
    								<!-- BEGIN: product_code -->
    								<p class="label label-default">{PRODUCT_CODE}</p>
    								<!-- END: product_code -->
    
    								<!-- BEGIN: adminlink -->
    								<p>{ADMINLINK}</p>
    								<!-- END: adminlink -->
    
    								<!-- BEGIN: price -->
    								<p class="price">
    									<!-- BEGIN: discounts -->
    									<span class="money">{PRICE.sale_format} {PRICE.unit}</span>
    									<span class="discounts_money">{PRICE.price_format} {PRICE.unit}</span>
    									<!-- END: discounts -->
    
    									<!-- BEGIN: no_discounts -->
    									<span class="money">{PRICE.price_format} {PRICE.unit}</span>
    									<!-- END: no_discounts -->
    								</p>
    								<!-- END: price -->
    
    								<!-- BEGIN: contact -->
    								<p class="price">{LANG.detail_pro_price}: <span class="money">{LANG.price_contact}</span></p>
    								<!-- END: contact -->
    
    								<!-- BEGIN: compare -->
    								<p><input type="checkbox" value="{ID}"{ch} onclick="nv_compare({ID});" id="compare_{ID}"/><a href="#" onclick="nv_compare_click();" >&nbsp;{LANG.compare}</a></p>
    								<!-- END: compare -->
    
    								<div class="clearfix">
    									<!-- BEGIN: order -->
    									<a href="javascript:void(0)" id="{ID}" title="{TITLE}" onclick="cartorder(this, {GROUP_REQUIE}, '{LINK}')"><button type="button" class="btn btn-primary btn-xs">{LANG.add_product}</button></a>
    									<!-- END: order -->
    
    									<!-- BEGIN: product_empty -->
    									<button class="btn btn-danger disabled btn-xs">{LANG.product_empty}</button>
    									<!-- END: product_empty -->
    
    									<!-- BEGIN: wishlist -->
    									<a href="javascript:void(0)" title="{TITLE}" ><button type="button" onclick="wishlist({ID}, this)" class="btn btn-primary btn-xs <!-- BEGIN: disabled -->disabled<!-- END: disabled -->">{LANG.wishlist}</button></a>
    									<!-- END: wishlist -->
    								</div>
    							</div>
    						</div>
    					</div>
    					<!-- END: items -->
    				</div>
    			</div>
    

    Nếu làm đúng thì ta sẽ có kết quả như ảnh đính kèm:

     

    Còn về đẹp xấu thế nào thì chịu khó CSS xíu lại là đẹp. cool

     

    Chúc các bạn thành công !

     
    Lần sửa cuối bởi bạn: 01/10/2016 04:25
    hoanglongvnpt aptx4869 thích điều này.
  • aptx4869

    aptx4869 Trần Phương

    cách này rất hay đó nhá. Tận dụng dc thêm 1 số thứ như banner kèm theo loại sản phẩm luôn. Tức là loại sp nào cũng có 1 cái banner riêng kèm theo

     
  • hoanglongvnpt

    hoanglongvnpt Nguyễn Tất Thắng

    Đã hoàn tất đây rồi bạn

    - Hình ảnh banner giới thiệu sản phẩm

    - khi click vào banner thì xuất hiện giới thiệu về sản phẩm đó

     
    anpy.ceo thích điều này.
  • anpy.ceo

    anpy.ceo David An

     
  • duongnguyen

    duongnguyen Duong Nguyen

    Đẹp quá, gần giống lazada.vn rồi. Nhưng còn thiếu slide giống ảnh đính kèm.

     

    Tệp đính kèm:

    • shop.jpg
      shop.jpg
      Dung lượng:
      88.56 KB
      Lượt xem:
      13
  • anhyeuviolet

    anhyeuviolet Kenny Nguyen

     

    Xử lý bằng block hoặc dùng JS gán cho các SP con trên trang chủ. Cái đó cũng khá đơn giản.

     
    hoanglongvnpt thích điều này.
  • hoanglongvnpt

    hoanglongvnpt Nguyễn Tất Thắng

    yeuviolet hướng dẫn luôn cho anh em đi bạn. Thank!

     
  • duongnguyen

    duongnguyen Duong Nguyen

    A Thắng làm được rồi hướng dẫn ae với, cám ơn!

     
  • hoanglongvnpt

    hoanglongvnpt Nguyễn Tất Thắng

    anhyeuviolet đã hướng dẫn ở trên đó bạn

     
  • duongnguyen

    duongnguyen Duong Nguyen

    Ý mình là cho nó slide hay dùng js ấy

     
  • duongnguyen

    duongnguyen Duong Nguyen

    A Thắng cho hỏi sửa như thế nào đưa nhiều banner. VD Váy dùng Banner 01; Gày dep dùng Banner 02; Mỹ phẩm dùng Banner 03 ...?

    Nếu css như sau chỉ hiển thị 1 banner thôi

    img-responsive {
        height: 335px;
        width: 255px;
        color: #fff;
        background: url("../images/B01.jpg") no-repeat scroll 0 center;
        border: 1px solid #181818;
    }

     
  • anhyeuviolet

    anhyeuviolet Kenny Nguyen

     

    Mình hd cách gọi banner theo cấu hình từng loại SP cơ mà.

     
  • duongnguyen

    duongnguyen Duong Nguyen

    Đúng rồi trong cầu hình hiển thị mình chọn là Hiển thị theo loại sản phẩm

    Vậy gọi banner như thế nào vậy bạn?

     

Chia sẻ trang này

Bạn đã không sử dụng Site, Bấm vào đây để duy trì trạng thái đăng nhập. Thời gian chờ: 60 giây