Đóng khung sản phẩm VirtueMart

Thảo luận trong 'VirtueMart' bắt đầu bởi joomla, 24/12/11.

  1. joomla

    joomla OMG Staff Member

    Bài viết:
    1,068
    Likes :
    2,262
    Cách 1:
    Thí dụ khi dùng Mod Latest Products để hiển thị các sản phẩm mới trên trang chủ (Home), cách hiển thị thế nào thì các bạn tìm xem trên Trang web hoặc Diễn đàn JoomlaViet.. ở đây chỉ nói đến việc trang trí màu mè mà thôi.
    - Vào mod_virtuemart_latestprod
    - Nhập -xyz (hoặc bất cứ chữ gì bạn muốn) vào mục Module Class Suffix
    - Save.
    Trong tập tin template.css của Template tạo thêm các dòng CSS vào dưới cuối:
    HTML:
    /* định dạng cho toàn bộ Module */
    table.moduletable-xyz, div.moduletable-xyz  {
        width: 100%;         
    }
     
    /* định dạng khoảng cách trên và dưới cho các thành phần bên trong Module */
    table.moduletable-xyz div, div.moduletable-xyz div {
        margin: 5px 0;;         
    }
     
    /* định dạng màu nền, viền cho các ô (cell) trong Module (đây chính là các ô sản phẩm trong VM) */
    table.moduletable-xyz td, div.moduletable-xyz td  {
        padding: 2px;
        border: 1px solid #fff;
        text-align: center;
        vertical-align: top;
        background: #eee;
    }
     
    /* định dạng màu nền, viền cho hình ảnh trong mỗi ô (cell)  */
    table.moduletable-xyz td img, div.moduletable-xyz td img  {
        background: #000;
        padding: 1px;
        border-right: 2px solid #aaa;
        border-bottom: 2px solid #aaa;
    }
    
    Lưu ý:

    * -xyz phải giống như khai báo trong phần Module Class Suffix. Vì không biết Template của các bạn dùng Table hay DIV nên chơi 2 cái luôn (table.moduletable và div.moduletable), có thể bỏ bớt 1 cái nếu muốn.

    * Đây là căn bản, có thể áp dụng cho nhiều Module khác nữa.
    Cách 2:
    Tìm file: productsnapshot.tpl.php
    Mã:
    components\com_virtuemart\themes\ja-mesolite\templates\common
    
    rồi thay bằng đoạn code sau :
    PHP:
    <?php if( !defined'_VALID_MOS' ) && !defined'_JEXEC' ) ) die( 'Direct Access to '.basename(__FILE__).' is not allowed.' ); ?>
    <div id="feature_products">
     
            <a title="<?php echo $product_name ?>" href="<?php echo $product_link ?>">
                <?php
                    
    // Print the product image or the "no image available" image
                    
    echo ps_product::image_tag$product_thumb_image"alt=\"".$product_name."\"");
                
    ?>
            </a>
     
        <div class="products_name">
            <a title="<?php echo $product_name ?>" href="<?php echo $product_link ?>">
                    <?php echo $product_name ?>
            </a>
          </div>
     
     
        <br />
     
        <b>Price:  </b> <?php
        
    if( !empty($price) ) {
            echo 
    $price;
        }
        
    ?>
        <?php
        
    if( !empty($addtocart_link) ) {
            
    ?>
            <br />
            <form action="<?php echo  $mm_action_url ?>index.php" method="post">
            <input type="hidden" name="option" value="com_virtuemart" />
            <input type="hidden" name="page" value="shop.cart" />
            <input type="hidden" name="Itemid" value="<?php echo ps_session::getShopItemid(); ?>" />
            <input type="hidden" name="func" value="cartAdd" />
            <input type="hidden" name="prod_id" value="<?php echo $product_id?>" />
            <input type="hidden" name="product_id" value="<?php echo $product_id ?>" />
            <input type="hidden" name="quantity" value="1" />
            <input type="hidden" name="set_price[]" value="" />
            <input type="hidden" name="adjust_price[]" value="" />
            <input type="hidden" name="master_product[]" value="" />
            <input type="submit" class="addtocart_button_module" value="<?php echo $VM_LANG->_('PHPSHOP_CART_ADD_TO'?>" title="<?php echo $VM_LANG->_('PHPSHOP_CART_ADD_TO'?>" />
            </form>
            <br />
            <?php
        
    }
        
    ?>
    </div>
    rồi sau đó chèn đoạn css này vào file css của cái template bạn đang sài ( virtuemart template)
    Mã:
    #feature_products {
        height: 360px;
        border: #e4e4e4 1px solid;}
    #feature_products a {
        color: #5a5a5a;}
    .products_name {
        font-size: 12px;
        }
    
    Cách 3: (Tương tự bên trên, có thêmbo tròn khung và đổ bóng )

    Edit file: productsnapshot.tpl.php thay toàn bộ bằng đoạn code dưới:

    PHP:
    <?php if( !defined'_VALID_MOS' ) && !defined'_JEXEC' ) ) die( 'Direct Access to '.basename(__FILE__).' is not allowed.' ); ?>
    <div id="khung_sp">
     
    <a title="<?php echo $product_name ?>" href="<?php echo $product_link ?>" class="link-product"><span class="jv-span-name"><?php echo $product_name ?></span></a>
    <br />
    <a href="<?php echo $product_link ?>">
    <?php
    // Print the product image or the "no image available" image {tip Tooltip Title::tbvpcnd}hihihhahaha{/tip}
    echo "{tip"$product_name"::".$product_s_desc."}".ps_product::image_tag $product_thumb_image). "{/tip}";
    ?>
    </a>
     
     
    <?php
    if( $this->get_cfg'showViewDetails')) {
    ?>
    <br />
    <a class="jv-a-detail" title="<?php echo $product_name ?>" href="<?php echo $product_link ?>">View Details</a>
    <?php
    }
    ?>
    <br />
    <div class="jv-cart-price"><div class="jv-cart-price-inner">
     
    <div class="jv-cart">
    <?php
    if( !empty($addtocart_link) )
    {
    ?>
    <form action="<?php echo $mm_action_url ?>index.php" method="post">
    <input type="hidden" name="option" value="com_virtuemart" />
    <input type="hidden" name="page" value="shop.cart" />
    <input type="hidden" name="Itemid" value="<?php echo ps_session::getShopItemid(); ?>" />
    <input type="hidden" name="func" value="cartAdd" />
    <input type="hidden" name="prod_id" value="<?php echo $product_id?>" />
    <input type="hidden" name="product_id" value="<?php echo $product_id ?>" />
    <input type="hidden" name="quantity" value="1" />
    <input type="hidden" name="set_price[]" value="" />
    <input type="hidden" name="adjust_price[]" value="" />
    <input type="hidden" name="master_product[]" value="" />
    <input type="submit" class="addtocart_button_snapshot" value="<?php echo $VM_LANG->_('PHPSHOP_CART_ADD_TO'?>" title="<?php echo $VM_LANG->_('PHPSHOP_CART_ADD_TO'?>" />
    </form>
    <?php
    }
    ?>
    </div>
     
    <?php
    if( !empty($price) ) {
    ?>
    <div class="jv-price">
    <div class="jv-price-inner">
    <?php
    echo $price;
    ?>
    </div>
    </div>
    <?php
    }
    ?>
     
    </div>
    </div>
     
    </div> 
    Thêm đoạn css này vào template.css
    Mã:
    #khung_sp {
    border: 1px solid #DCDCDC;
    margin: 10px auto;
    padding: 10px;
    text-align: center;
    width: 130px; // <== tự điều chỉnh
    height:155px; //  <== tự điều chỉnh
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    border-radius: 10px;
    -webkit-box-shadow: #e8e8e8 0px 3px 4px;
    -moz-box-shadow: #e8e8e8 0px 3px 4px;
    box-shadow: #e8e8e8 0px 3px 4px;
    }
    Chú ý: Nếu khi add code css vào theme của VirtueMart không đc ta có thể add đoạn css đó vào theme của web
    Tổng hợp từ nhiều nguồn trên internet​
     
    voige, VN.Classic, vu duc nam and 2 others like this.
  2. kehaydua

    kehaydua Mới tham gia

    Bài viết:
    2
    Likes :
    0
    Khi mình tìm file template.css trong thư mục thì có nhiều file template.css không biết file nào, bạn có thể chỉ đường dẫn cụ thể???
     
  3. joomla

    joomla OMG Staff Member

    Bài viết:
    1,068
    Likes :
    2,262
    Template đang dùng của VitrtureMart hoặc của web, cái này còn tuỳ nha chúng la linh động tên file có thể là Temeplate.css hoặc theme.css, chúng ta cứ lần lượt thay vào, ko đc thì xoá đi, có thế mới vỡ ra đc nhiều cái hay hơn mà tự mình làm đc
     
  4. TomyTran

    TomyTran Marketing & Founder Staff Member

    Bài viết:
    1,073
    Likes :
    666
    Bạn chú ý dung lượng tệp tin, cái nào nặng nhất là đáng ngờ nhất.
     
  5. kehaydua

    kehaydua Mới tham gia

    Bài viết:
    2
    Likes :
    0
    Mình làm theo cách 1 thì sản phẩm được đóng khung, tuy nhiên mình có vấn đề tính hỏi. Muốn thay đổi màu khung nền, thôn số chiều cao, rộng của khung thì chỉnh cái nào.
    Vì khung thấy rộng quá muốn thu nhỏ lại. :)
     
  6. TomyTran

    TomyTran Marketing & Founder Staff Member

    Bài viết:
    1,073
    Likes :
    666
    cái table đầu tiên đấy thôi, thêm thuộc tính nền, cao vào và chỉnh lại độ rộng sẵn có thành độ rộng bạn muốn.
     
  7. www.vn-boom.com

    www.vn-boom.com Mới tham gia

    Bài viết:
    10
    Likes :
    3
    bác này cũng chém ở đây nữa ak?

    file css là tùy thuộc vào templates của người đó dùng và người tạo ra.
    Khi tạo vào mod để điền tên css mới thì bạn có thể vào bất cứ một file css nào của templates bạn đang dùng để thêm thuộc tính css bạn vừa tạo - miễn là file đó được load lại ở toàn page trên hệ thống website.

    Chẳng liên quan đến nặng nhẹ ở đây cả!
     
  8. neomatran

    neomatran Rất tích cực

    Bài viết:
    37
    Likes :
    2
    mình search file productsnapshot.tpl.php này mà nó ko ra bạn ah...Cho mình đường dẫn cụ thể đc ko :D
     
  9. joomla

    joomla OMG Staff Member

    Bài viết:
    1,068
    Likes :
    2,262
    components\com_virtuemart\themes\ja-mesolite\templates\common
    Cái màu đỏ là tùy cái bạn đang dùng nha.
     
    neomatran thích bài này.
  10. neomatran

    neomatran Rất tích cực

    Bài viết:
    37
    Likes :
    2
    Chắc là mình cài thiếu cái gì chứ mình đến com_virtuemart là ko thấy folder themes đâu cả bạn à
     
  11. dinhchi

    dinhchi Administrator Staff Member

    Bài viết:
    1,358
    Likes :
    1,022
    đối với joomla 1.5 và VM 1.1.x thôi bạn ạ, 2.5 ko có đâu
     
  12. neomatran

    neomatran Rất tích cực

    Bài viết:
    37
    Likes :
    2
    Thế lên bản 2.5 thì có cách nào làm được như thế ko bạn :D
     
  13. dinhchi

    dinhchi Administrator Staff Member

    Bài viết:
    1,358
    Likes :
    1,022
    đóng khung kiểu gì, cho demo thì làm đc, chứ m kém ý tưởng lắm, giờ off ngủ tí đã
     
    neomatran thích bài này.
  14. neomatran

    neomatran Rất tích cực

    Bài viết:
    37
    Likes :
    2
  15. dinhchi

    dinhchi Administrator Staff Member

    Bài viết:
    1,358
    Likes :
    1,022
    nói thật với bạn nếu chỉ cho bạn thì ko khác nào là mình làm hộ luôn code, cái này chỉ cần chút kiến thức css và html căn bản là làm đc thôi, mình nghĩ bạn nên tự học sẽ tiện hơn
    http://www.w3schools.com/css/css_border.asp
     
    neomatran thích bài này.
  16. neomatran

    neomatran Rất tích cực

    Bài viết:
    37
    Likes :
    2
    Pro lập 1 topic cho anh em dùng 2.5.x đi....Thấy nhiều người hỏi về vấn đề này mà....:71.jpg:
     
  17. van_hai_2003

    van_hai_2003 Mới tham gia

    Bài viết:
    3
    Likes :
    0
    Mình làm theo cách 2 đóng khung được, nhưng cột ở giữa lại hẹp hơn 2 cột kia, làm sao chỉnh đều 3 cột?
     
  18. duythanh666

    duythanh666 Rất nhiệt tình

    Bài viết:
    159
    Likes :
    47
    Ai làm trên Virtuemart 2.0.x rồi chỉ mình với?
    Cảm ơn rất nhiều!
     
  19. duythanh666

    duythanh666 Rất nhiệt tình

    Bài viết:
    159
    Likes :
    47
    Up lên top cho mọi người giúp
     
  20. cutim

    cutim Mới tham gia

    Bài viết:
    16
    Likes :
    0
    Mình đã làm theo cách của bạn. Nhưng mà không đóng khung được cho phần mainmenu. Mình đã chon kiểu menu là vituemart rôi. Help!
     
comments powered by Disqus

Chia sẻ trang này