Jump to content

Help-Tạo Nhiều Dòng Sản Phẩm Cùng Danh Mục

thanhnga
 Share

Recommended Posts

thanhnga Newbie

thanhnga

Posted
Posted

Trong modun productscategory, mình muốn tạo nhiều dòng "Sản phẩm cùng danh mục-Products In The Same Category

" (Mặc định là 1 dòng) thì làm như thế nào? Mong được trợ giúp?

Ví dụ mình muốn chuyển thành 2 dòng như sau

 

XT3NAHW.jpg

Link to comment
Share on other sites
thanhnga Newbie

thanhnga

Posted
  • Author
Posted

Hi,Paul Nguyen

Mình không biết code, bạn giúp giùm. File productscategory.js trong themes của mình nè, cần bỏ đoạn nào vậy bạn:

 

/*

 

* 2007-2014 PrestaShop

 

*

 

* NOTICE OF LICENSE

 

*

 

* This source file is subject to the Academic Free License (AFL 3.0)

 

* that is bundled with this package in the file LICENSE.txt.

 

* It is also available through the world-wide-web at this URL:

 

* http://opensource.org/licenses/afl-3.0.php

 

* If you did not receive a copy of the license and are unable to

 

* obtain it through the world-wide-web, please send an email

 

* to [email protected] so we can send you a copy immediately.

 

*

 

* DISCLAIMER

 

*

 

* Do not edit or add to this file if you wish to upgrade PrestaShop to newer

 

* versions in the future. If you wish to customize PrestaShop for your

 

* needs please refer to http://www.prestashop.com for more information.

 

*

 

*  @author PrestaShop SA <[email protected]>

 

*  @copyright  2007-2014 PrestaShop SA

 

*  @license    http://opensource.org/licenses/afl-3.0.php  Academic Free License (AFL 3.0)

 

*  International Registered Trademark & Property of PrestaShop SA

 

*/

 

 

 

function pc_serialScrollFixLock(event, targeted, scrolled, items, position)

 

{

 

    var leftArrow = position == 0 ? true : false;

 

    var rightArrow = position + 4 >= $('#productscategory_list li:visible').length ? true : false;

 

    

 

    $('a#productscategory_scroll_left').css('cursor', leftArrow ? 'default' : 'pointer').fadeTo(0, leftArrow ? 0 : 1);        

 

    $('a#productscategory_scroll_right').css('cursor', rightArrow ? 'default' : 'pointer').fadeTo(0, rightArrow ? 0 : 1).css('display', rightArrow ? 'none' : 'block');

 

 

 

    return true;

 

}

 

function resizeProductitem() {

 

    var docWidth = $(document).width();

 

    if ( docWidth <= 480 ) {

 

        var docItemWidth = $('#productscategory_list').width();

 

        $('#productscategory_list_ul.product_list.grid li').css('width', docItemWidth);

 

    }else if ( docWidth <= 767 ) {

 

        var docItemWidth = Math.floor(($('#productscategory_list').width()-30)/2);

 

        $('#productscategory_list_ul.product_list.grid li').css('width', docItemWidth);

 

    }else if ( docWidth >= 768 ) {

 

        $('#productscategory_list_ul.product_list.grid li').removeAttr('style');

 

    }

 

}

 

$(document).ready(function()

 

{

 

    $('#productscategory_list').serialScroll({

 

        items: 'li',

 

        prev: 'a#productscategory_scroll_left',

 

        next: 'a#productscategory_scroll_right',

 

        axis: 'x',

 

        offset: 0,

 

        stop: true,

 

        onBefore: pc_serialScrollFixLock,

 

        duration: 400,

 

        step: 1,

 

        lazy: true,

 

        lock: false,

 

        force: false,

 

        cycle: true });

 

    $('#productscategory_list').trigger( 'goto', 0);

 

    $(window).load(resizeProductitem);

 

    $(window).resize(function(){

 

        resizeProductitem();

 

        $('#productscategory_list').trigger( 'goto', 0); }   

 

    );

 

    $(window).on( "orientationchange", function() {

 

        resizeProductitem();

 

     });

 

});

Link to comment
Share on other sites
LeoNguyen Newbie

LeoNguyen

Posted
Posted

Bạn dùng Prestashop version nào? 

sp thành 2 dòng nhưng vẫn muốn hiển thị kiểu slider như cũ hay chỉ cần list sp ra?

Nếu chỉ cần list sản phẩm ra thì comment toàn bộ JS lại là được.

Còn nếu vẫn muốn hiển thị dạng slider như cũ thì cần thay đổi tpl chút.

Bạn ko biết code nên chỉ hơi khó, nếu cần gửi link site mình view giúp.

  • Like 1
Link to comment
Share on other sites
LeoNguyen Newbie

LeoNguyen

Posted
Posted

:D bạn đang nhờ ng khác làm mà lại ngại là sao.

Mình xem link bạn gửi rồi nh bạn chưa trả lời câu hỏi trên mình hơi khó giúp:

"sp thành 2 dòng nhưng vẫn muốn hiển thị kiểu slider như cũ hay chỉ cần list sp ra?"

TH1: Nếu chỉ cần list sản phẩm ra thì comment toàn bộ JS lại là được. => bạn có thể tự làm

TH2: Còn nếu vẫn muốn hiển thị dạng slider như cũ thì cần thay đổi tpl chút. => cái này bạn ko biết code, cũng ko có link site bạn, ko có file .tpl thì ko ai giúp đc :D

 

  • Like 1
Link to comment
Share on other sites
thanhnga Newbie

thanhnga

Posted
  • Author
Posted

Cảm ơn bạn, Mình muốn TH2 như bạn nói đó. Và file productscategory.tpl của mình

{if count($categoryProducts) > 0 && $categoryProducts !== false}

<section class="page-product-box blockproductscategory">

{*}<h3 class="productscategory_h3 page-product-heading">{$categoryProducts|@count} {l s='Other products in the same category:' mod='ovicproductscategory'}</h3>{*}

<h3 class="productscategory_h3 page-product-heading">{l s='Products In The Same Category' mod='productscategory'}</h3>

<div id="productscategory_list" class="clearfix">

{include file="$tpl_dir./product-list.tpl" products=$categoryProducts id='productscategory_list_ul'}

</div>

{if count($categoryProducts) > 4}<a id="productscategory_scroll_right" class="next_slide navigation_btn" title="{l s='Next' mod='ovicproductscategory'}" href="javascript:{ldelim}{rdelim}">{l s='Next' mod='ovicproductscategory'}</a>{/if}

{if count($categoryProducts) > 4}<a id="productscategory_scroll_left" class="prev_slide navigation_btn" title="{l s='Previous' mod='ovicproductscategory'}" href="javascript:{ldelim}{rdelim}">{l s='Previous' mod='ovicproductscategory'}</a>{/if}

</section>

{/if}

Link to comment
Share on other sites
Tung at RockPOS.com Newbie

Tung at RockPOS.com

Posted
Posted

"sp thành 2 dòng nhưng vẫn muốn hiển thị kiểu slider như cũ hay chỉ cần list sp ra?"

TH1: Nếu chỉ cần list sản phẩm ra thì comment toàn bộ JS lại là được. => bạn có thể tự làm

TH2: Còn nếu vẫn muốn hiển thị dạng slider như cũ thì cần thay đổi tpl chút. => cái này bạn ko biết code, cũng ko có link site bạn, ko có file .tpl thì ko ai giúp đc

 

Cảm ơn bạn, Mình muốn TH2 như bạn nói đó.

 

 

Hi,

Mình không hiểu là vừa muốn slider như cũ, vừa nhiều dòng tức là thế nào.

Hoặc là slider và 1 dòng.

Hoặc là không slider và nhiều dòng.

 

Bạn check lại xem nhu cầu thực sự của mình là gì nhé.

Thân!

  • Like 1
Link to comment
Share on other sites
thanhnga Newbie

thanhnga

Posted
  • Author
Posted

Hi, mình muốn tạo: 3 sản phẩm cùng danh mục => hiển thị thành 1 dòng, 6 sản phẩm => 2 dòng và nếu lớn hơn 6 sản phẩm nó hiển thị dấu mũi tên "kế tiếp". ( Vì theo mặc định nó chỉ hiển thị sản phẩm trên 1 dòng và nếu lớn hơn 3 nó hiện mũi tên "kế tiếp"

Mong bạn giúp đở.

Link to comment
Share on other sites
Tung at RockPOS.com Newbie

Tung at RockPOS.com

Posted
Posted

Mình nghĩ, đây có thể là câu trả lời cho bạn:

http://stackoverflow.com/questions/22545466/how-can-i-create-a-carousel-with-multiple-rows

 

Tuy nhiên, nếu bạn không biết code thì xem ra cũng không đơn giản lắm.

Bạn nên thuê một ai đó làm giúp bạn. 

 

Bạn thử contact với bạn Kiên này xem sao:

https://www.prestashop.com/forums/user/305665-designworldinfo/

Link to comment
Share on other sites
thanhnga Newbie

thanhnga

Posted
  • Author
Posted (edited)

Cảm ơn các bạn. Nếu mình biết code thì mình tự làm rùi.

 

Here's the relevant code for a 2x2 grid:

 

HTML

<div class="slider">

 

<!-- This will be considered one slide -->

<div>

<div class="grandchild">

<img src="" />

</div>

<div class="grandchild">

<img src="" />

</div>

 

<br class="clearboth">

 

<div class="grandchild">

<img src="" />

</div>

<div class="grandchild">

<img src="" />

</div>

</div>

 

<!-- The second slide -->

<div>

<div class="grandchild">

<img src="" />

</div>

...

</div>

</div>

 

CSS

.grandchild {

float: left;

}

.clearboth {

clear: both;

}

 

JS

 

$(document).ready(function() {

$('.slider').slick({

slidesToShow: 1,

slidesToScroll: 1

});

});

Mình xin hỏi 3 câu.

 

1. Để tạo 2 dòng như code trên mình phải chỉnh sửa đồng thời 3 file như trên phải phải không? hoặc một trong 3 file đó.

2. Hơn nữa đối với prestashop mình thấy file HTML nó nằm ở đâu?

3. Mình thấy file css của mình:

float: left;

 

clear: none!important;

Nhưng theo hướng dẫn.

.grandchild {

float: left;

}

.clearboth {

clear: both;

}

Vậy nó khác nhau chỗ nào?

Mong các bạn giúp đở.

Edited by thanhnga (see edit history)
Link to comment
Share on other sites
thanhnga Newbie

thanhnga

Posted
  • Author
Posted (edited)

Rất cảm ơn bạn.

Đoạn: float: left;

}

.clearboth {

clear: both;

}

Mình thay both thành none thì sản phẩm sẽ hiển thị ra hết. Tuy nhiên, mình muốn hiển thị nếu sản phẩm lớn hơn 6 thì hiện dấu mũi tên. Như vậy nó liên quan đến code nào?

Vì mình không biết code nên cũng khó. Mong bạn gợi ý mình sẽ cố gắng tìm hiểu hoặc bạn gợi ý giùm code của prestashop.

Edited by thanhnga (see edit history)
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share
Go to topic listing
×
×
  • Create New...