การใช้งานก็ง่ายมากๆเพียงแค่โหลด Block edit มาทำการติดตั้งหลังจากนั้นก็ enable ตัว module ซะ

เพีงเท่านี้เราก็จะสามารถใช้งานได้แล้วครับ เป็น module อีกตัวที่ผมแนะนำให้ใช้ครับ ฟันธง!!!

Quicktabs เป็นโมดูลที่จะช่วยในการสร้าง tab โดยสามารถนำ block, node หรือ view มาแสดงผลในรูปแบบ tab ได้ ใครนึกภาพไม่ออกดูจากรูปด้านบนได้ครับ

ให้โหลดโมดูล Quicktabs และ ajax มาทำการติดตั้ง

สำหรับ Ajax ให้ enable เฉพาะ Ajax กับ Ajax plugin – quicktabs
และ Quicktabs ก็ให้ enable ตามปกติ

ตั้งค่า Quicktabs ให้ไปที่ admin/settings/quicktabs จะเป็นการเลือก default style ของ tab ที่เราจะสร้างขึ้น

ต่อมาคือการเรียกใช้งาน Quicktabs ให้ไปที่ admin/build/quicktabs แล้วกดที่ New QT block เพื่อทำการสร้าง Tab ใหม่

กำหนดค่าต่างๆ

1. ตั้งหัวข้อ block
2. เลือกรูปแบบของ tab
3. กำหนดการใช้งานของ ajax ให้ tab ที่จะสร้างหรือไม่

เลือกเนื้อหาเช่น block, view หรือ node มาใส่ลงใน tab ของเราครับโดยสามารถเพิ่มลดได้ตามต้องการ

พอกลับมาดูที่ List ก็จะพบกับ tab ที่เราสร้างไว้

ต่อมาคือการนำไปใช้งาน Quicktab นั้นจะสร้าง tab ให้อยู่ในรูปแบบของ block ฉะนั้นเราก็ไปที่ admin/build/block กำหนด tab ที่เราสร้างขึ้นมานำไปวางไว้ตาม region ที่เราต้องการ

เพียงเท่านี้เราก็จะได้เนื้อหาที่แสดงในรูปแบบ tab มาใช้งานละครับทำให้ประหยัดเนื้อที่ของเว็บได้มากเลยทีเดียว เหมาะสำหรับเว็บที่ต้องการแสดงเนื้อหามากๆ

drupal จะมี block ที่ไว้สำหรับ login มาให้แล้วแต่ผมก็ต้องการปรับแต่งในฉบับของตัวเอง จะทำยังไงดีละ? ทริปนี้จะเป็นตัวอย่างโค็ด php ที่ไว้ใช้สร้าง User Login Block ขึ้นมาเองเพื่อเราจะได้ปรับแต่งอะไรได้ง่ายๆขึ้นมาหน่อย

1. ทำการเปิด module php ก่อน

2. ให้ไปที่ admin/build/blocks จากนั้นเลือก add block เพื่อสร้าง block ใหม่

3. ใส่ด้านล่างลงไปครับ

<?php global $user; ?>
<?php if ($user->uid) : ?>
<span class="login_text">Welcome, </span> <?php print ($user->name); ?> <br>
<?php print l("Your Account",'user/'.$user->uid); ?> |
<?php print l("Log-Out","logout"); ?>
<?php else : ?>
<div id="usertabs">
<span class="utabs1">Log In</span><span class="utabs2"><a href="/user/register">Sign Up!</a></span>
</div>
<div id="umain">
<form action="/user?<?php print drupal_get_destination() ?>" method="post" id="user-login-form">
Username:
<input type="text" maxlength="60" name="name" id="edit-name" size="20" value="" tabindex="1" class="form-text required" />
<br>
Password:
<input type="password" name="pass" id="edit-pass" size="20" tabindex="2" class="form-text required" />
<br>
<span class="utabs3"><a href="/user/password" title="Forgot your password?">Forgot your password?</a></span>
<span><input type="submit" name="op" id="edit-submit" value="Log In" tabindex="3" class="form-submit" />
</span>
<input type="hidden" name="form_id" id="edit-user-login" value="user_login" />
</form>
</div>
<?php endif; ?>

4. จากนั้นย้าย block เราไปตำแหน่งที่ต้องการก็จะได้ออกมาดังรูป

ยังไม่ login

login แล้ว

หลังจากนั้นเลือกความสวยงามคงต้องแล้วแต่การปรับแต่ง CSS ของแต่ละคนแล้วนะครับ สามารถนำโค็ดด้านบนไปประยุกต์เพิ่มเติมได้

thank : http://webdevnews.net/2008/11/styling-the-drupal-user-login-block-php-code-css/

ซึ่งมันดูแบบเรียบง่ายเกินไปสำหรับการแสดงผลออกมา โดยผมจะเปลี่ยนให้เป็นแบบนี้ครับ

วิธีทำให้เราติดตั้ง module VIEW ก่อนครับจากนั้นเปิดการใช้งาน module ดังนี้

จากนั้นไปที่ http://domain.com/admin/build/views/import แล้วนำ code ดังกล่าวใส่เข้าไปครับ

$view = new view;
$view->name = 'techpint_comments';
$view->description = 'Advance Comments';
$view->tag = '';
$view->view_php = '';
$view->base_table = 'node';
$view->is_cacheable = FALSE;
$view->api_version = 2;
$view->disabled = FALSE; /* Edit this to true to make a default view disabled initially */
$handler = $view->new_display('default', 'Defaults', 'default');
$handler->override_option('fields', array(
  'name' => array(
    'label' => '',
    'alter' => array(
      'alter_text' => 0,
      'text' => '',
      'make_link' => 0,
      'path' => '',
      'link_class' => '',
      'alt' => '',
      'prefix' => '',
      'suffix' => '',
      'help' => '',
      'trim' => 0,
      'max_length' => '',
      'word_boundary' => 1,
      'ellipsis' => 1,
      'strip_tags' => 0,
      'html' => 0,
    ),
    'link_to_user' => 1,
    'exclude' => 0,
    'id' => 'name',
    'table' => 'comments',
    'field' => 'name',
    'override' => array(
      'button' => 'Override',
    ),
    'relationship' => 'none',
  ),
  'nothing' => array(
    'label' => '',
    'alter' => array(
      'text' => 'added a',
      'make_link' => 0,
      'path' => '',
      'link_class' => '',
      'alt' => '',
      'prefix' => '',
      'suffix' => '',
      'help' => '',
      'trim' => 0,
      'max_length' => '',
      'word_boundary' => 1,
      'ellipsis' => 1,
      'strip_tags' => 0,
      'html' => 0,
    ),
    'exclude' => 0,
    'id' => 'nothing',
    'table' => 'views',
    'field' => 'nothing',
    'relationship' => 'none',
    'override' => array(
      'button' => 'Override',
    ),
  ),
  'view_comment' => array(
    'label' => '',
    'alter' => array(
      'alter_text' => 0,
      'text' => '',
      'make_link' => 0,
      'path' => '',
      'link_class' => '',
      'alt' => '',
      'prefix' => '',
      'suffix' => '',
      'help' => '',
      'trim' => 0,
      'max_length' => '',
      'word_boundary' => 1,
      'ellipsis' => 1,
      'strip_tags' => 0,
      'html' => 0,
    ),
    'text' => 'comment',
    'exclude' => 0,
    'id' => 'view_comment',
    'table' => 'comments',
    'field' => 'view_comment',
    'relationship' => 'none',
  ),
  'nothing_1' => array(
    'label' => '',
    'alter' => array(
      'text' => 'to',
      'make_link' => 0,
      'path' => '',
      'link_class' => '',
      'alt' => '',
      'prefix' => '',
      'suffix' => '',
      'help' => '',
      'trim' => 0,
      'max_length' => '',
      'word_boundary' => 1,
      'ellipsis' => 1,
      'strip_tags' => 0,
      'html' => 0,
    ),
    'exclude' => 0,
    'id' => 'nothing_1',
    'table' => 'views',
    'field' => 'nothing',
    'relationship' => 'none',
  ),
  'title' => array(
    'label' => '',
    'link_to_node' => 1,
    'exclude' => 0,
    'id' => 'title',
    'table' => 'node',
    'field' => 'title',
    'override' => array(
      'button' => 'Override',
    ),
    'relationship' => 'none',
  ),
  'timestamp' => array(
    'label' => '',
    'alter' => array(
      'alter_text' => 1,
      'text' => '([timestamp])',
      'make_link' => 0,
      'path' => '',
      'link_class' => '',
      'alt' => '',
      'prefix' => '',
      'suffix' => '',
      'help' => '',
      'trim' => 0,
      'max_length' => '',
      'word_boundary' => 1,
      'ellipsis' => 1,
      'strip_tags' => 0,
      'html' => 0,
    ),
    'date_format' => 'time ago',
    'custom_date_format' => '',
    'exclude' => 0,
    'id' => 'timestamp',
    'table' => 'comments',
    'field' => 'timestamp',
    'relationship' => 'none',
  ),
  'nothing_2' => array(
    'label' => '',
    'alter' => array(
      'text' => ' ',
      'make_link' => 0,
      'path' => '',
      'link_class' => '',
      'alt' => '',
      'prefix' => '',
      'suffix' => '',
      'help' => '',
      'trim' => 0,
      'max_length' => '',
      'word_boundary' => 1,
      'ellipsis' => 1,
      'strip_tags' => 0,
      'html' => 0,
    ),
    'exclude' => 0,
    'id' => 'nothing_2',
    'table' => 'views',
    'field' => 'nothing',
    'relationship' => 'none',
  ),
));
$handler->override_option('sorts', array(
  'timestamp' => array(
    'order' => 'DESC',
    'granularity' => 'second',
    'id' => 'timestamp',
    'table' => 'comments',
    'field' => 'timestamp',
    'relationship' => 'none',
  ),
));
$handler->override_option('filters', array(
  'status' => array(
    'operator' => '=',
    'value' => '0',
    'group' => '0',
    'exposed' => FALSE,
    'expose' => array(
      'operator' => FALSE,
      'label' => '',
    ),
    'id' => 'status',
    'table' => 'comments',
    'field' => 'status',
    'relationship' => 'none',
  ),
  'type' => array(
    'operator' => 'in',
    'value' => array(
      'blog' => 'blog',
      'geshinode' => 'geshinode',
      'image' => 'image',
      'book' => 'book',
      'page' => 'page',
      'story' => 'story',
    ),
    'group' => '0',
    'exposed' => FALSE,
    'expose' => array(
      'operator' => FALSE,
      'label' => '',
    ),
    'id' => 'type',
    'table' => 'node',
    'field' => 'type',
    'relationship' => 'none',
  ),
));
$handler->override_option('access', array(
  'type' => 'none',
));
$handler->override_option('cache', array(
  'type' => 'none',
));
$handler->override_option('use_ajax', TRUE);
$handler->override_option('items_per_page', 5);
$handler->override_option('use_pager', 'mini');
$handler->override_option('use_more', 0);
$handler->override_option('use_more_text', 'more>>');
$handler->override_option('style_options', array(
  'grouping' => '',
));
$handler->override_option('row_options', array(
  'inline' => array(
    'name' => 'name',
    'nothing' => 'nothing',
    'view_comment' => 'view_comment',
    'nothing_1' => 'nothing_1',
    'subject' => 'subject',
    'title' => 'title',
    'timestamp' => 'timestamp',
  ),
  'separator' => '',
));
$handler = $view->new_display('block', 'Block', 'block_1');
$handler->override_option('block_description', '');
$handler->override_option('block_caching', -1);

ดังรูป

จากนั้นทำการบันทึก View ที่เรา Import เข้ามา และนำ block ที่ได้ไปแสดงผลที่หน้าเว็บเลยครับ

<?php getLayout()->createBlock('cms/block')->setBlockId('my_static_block_name')->toHtml() ?>

โดยให้เราเปลี่ยน my_static_block_name ไปเป็นชื่อ block

จากนั้นทำการสร้าง block โดยไปที่ domain.com/admin/build/block/add ใส่เนื้อหาที่ต้องการลงไป

แล้วกลับมาที่ domain.com/admin/build/block จากนั้นกด configuration ที่ block เราสร้างไว้เมื่อกี้จากนั้นสังเหตุที่ URL ครับ ซึ่งจะได้ออกมาแบบนี้ admin/build/block/configure/block/2 ให้เราดูในส่วนของ block ID ก็คือ “2″ นั่นเอง

จากนั้นทำการสร้างเนื้อหาตามปกติ แล้วถ้าเราต้องการนำ block มาใส่ร่วมกับเนื้อหาเราด้วยให้นำโค็ดนี้ไปใส่ครับ

<?php
$block = module_invoke('block', 'block', 'view', 2);
print $block['content'];
?>

โดยเลข 2 ให้เปลี่ยนไปตาม ID block ที่เราต้องการนำมาแสดง และทำการเลือก Input format เป็น PHP

เพียงเท่านี้ block เราก็จะมาโผล่ในเนื้อหาแล้ว นำไปประยุกต์ใช้กันนะครับ

ขั้นแรกให้เราสร้างไฟล์ .phtml ตั้งชื่อว่า thumb_pic.phtml แล้วนำอัพขึ้นไปที่ app/design/frontend/default/[ธีมที่ใช้งาน]/template/catalog/product/view/ โดยข้างในมีโค็ดดังนี้

<?php
$productId = $this->getProduct_id();
$_product = Mage::getModel('catalog/product')->load($productId); //load the product
?>
<img src="<? echo Mage::helper('catalog/image')->init($_product, 'thumbnail')->resize(75, 75); ?>" alt="<?php echo $this->htmlEscape($_product['name']); ?>" border="0" width="75" />

จากนั้นไปที่ CMS > Manage Pages ในที่นี้ผมจะเอารูปไปใช้ใน page นะครับ นำโค็ดด้านล่างไปใช้งาน

{{block type="catalog/product_new" product_id="2" template="catalog/product/view/thumb_pic.phtml"}}

โดยให้เราดูที่ product_id=”…” ให้นำ id ของสินค้ามาใส่

ตัวอย่างผมแก้จาก About Us

การแสดงผลออกมาจากตัวอย่างข้างต้น สามารถนำไปประยุกต์ใช้ได้นะครับ

เครดิต : http://www.molotovbliss.com/blog/magento-commerce/magento-display-a-product-image-within-static-pages-and-blocks/

โดยให้เราไปที่หน้า admin กันก่อนจากนั้นไปที่เมนู CMS > Static Blocks จากนั้นกดที่ Add New Block เพื่อสร้าง block ใหม่

ใส่รายละเอียดต่างๆลงไปแล้ว Save

1. Block Title : กำหนดชื่อ block ลงไป
2. Identifier : เป็นเหมือนไอดีของบล็อกครับซึ่งเราจะใช้ชื่อนี้ในการอ้างอิงดึงบล็อกนี้มาใช้งานกับส่วนต่างๆของเว็บ
3. Status : เลือก Enable เพื่อเปิดการใช้งาน
4. Content : ใส่รายละเอียดที่ต้องการลงไป เป็นโค็ด HTML ก็ได้ ในที่นี้ผมใส่คลิปวิดิโอ youtube ลงไป

*** ในส่วนของ Store View ถ้าใครลงภาษาเพิ่มก็จะสามารถกำหนดให้บล็อกนี้แสดงกับภาษาไหน

จากนั้นเราไปที่ CMS > Manage Pages เพื่อสร้าง page มา 1 หน้า

ใส่รายละเอียดลงไป

โดยในช่อง SEF URL Identifier จะเป็นการกำหนด URL ให้กับ page นี้ และในส่วนของ content ถ้าเราต้องการนำ block ที่เมื่อกี้เราสร้างไว้มาใช้งานกับหนน้านี้ ก็ให้เรานำโค็ดนี้ไปใส่ครับ

{{block type="cms/block" block_id="Identifier" template="cms/content.phtml"}}

ในส่วนของ block_id=”Identifier” ให้เราแก้คำ Identifier ไปเป็น Identifier ของบล็อกที่เราจะใช้งานเช่น video ซึ่งเหมือนตัวอย่างด้านบนที่ผมได้ทำการสร้างไว้ก็จะเป็น

{{block type="cms/block" block_id="video" template="cms/content.phtml"}}

เราก็จะได้หน้า page แบบนี้มาใช้งานครับ

ลองนำไปใช้งานกันดูนะครับ block ที่สร้างก็เอาใส่ข้อมูลพวกที่เราอาจจะต้องแก้ไขบ่อยๆ เราจะได้ไม่ต้องเข้าไปแก้ทั้ง page เราก็แก้เฉพาะ block โอกาสหน้าจะมาบอกการนำไปใช้งานกับตัว template กันเพื่อทำเป็น block ของ sidebar

ซึ่งผมก็ลองๆหาอยู่พอสมควรก็เจอครับโมดูลตัวนี้มีชื่อว่า Block HTML (ดาวโหลด) ชื่อตรงตัวเลยครับทดลองใช้แล้วก็โดนใจครับ ให้โหลดมาทำการติดตั้งลงใน prestashop ครับ (วิธีติดตั้ง module ใน prestashop)

หลังจากติดตั้งแล้วให้เราคลิกที่ Configure ของตัวโมดูลครับ

เราจะพบกับช่องใส่โค็ดสองช่อง ซึ่งจะระบุไว้ว่า Left text คือช่องนี้จะไปกำหนดออกทางตำแหน่ง Left colum และ Right text ช่องนี้จะไปกำหนดออกทางตำแหน่ง Right colum ของตัวเว็บไซต์ หลังจากเราพิมพ์ข้อความหรือโค็ดตามต้องการแล้ว ให้ไปกำหนดที่ position อีกที (วิธีย้ายตำแหน่ง module)

โดยถ้าเรากำหนดให้มันอยู่ซ้าย เราก็ต้องพิมพ์ในช่อง Left text ถ้าสมมติเรากำหนดให้โมดูลอยู่ซ้ายแต่เราไปพิมพ์ช่อง Right text ข้อความก็จะไม่ถูกแสดงออกมา ง่ายๆก็คือถ้าเราพิมพ์ช่องไหน ก็ให้กำหนดตำแหน่งของโมดูลไปตามช่องนั้น

อย่างตัวอย่างผมพิมพ์ช่อง Left text ผมก็ต้องกำหนดให้มันอยู่ตำแหน่งซ้าย

ผลที่ออกมาครับ

thank : http://www.prestashop.com/forums/viewthread/9730

โดยผมจะเอาไว้ใช้งานร่วมกับ Similar Entries เพื่อไว้ทำ related post แบบของ wordpress นึกภาพไม่ออกก็ดูจากบล็อกผมก็ได้ครับ แต่เราก็สามารถนำ module ตัวอื่นไปวางได้นะครับ

วิธีการสร้าง block region ให้อยู่ก่อนหรือเหนือ comment section
1. เปิดไฟล์ .info ของ theme ที่เราใช้ ในที่นี้ผมใช้ theme whitejazz ชื่อไฟล์ว่า whitejazz.info เพิ่มตัวนี้เข้าไป

regions[above_comments] = Above Comments

2. เปิดไฟล์ template.php ขึ้นมาถ้าไม่มีให้สร้างใหม่แล้วเพิ่มโค็ดด้านล่างเข้าไป

function phptemplate_preprocess_node(&$variables, $hook) {
  $variables['above_comments'] = theme('blocks', 'above_comments');
}

3. เปิดไฟล์ node.tpl.php หาคำว่า

<?php print $content ?>

แล้วเพิ่มโค็ดด้านล่างต่อลงมา

<?php if ($above_comments): ?>
    <div class="above_comments"><?php print $above_comments ?></div>
<?php endif ?>

4. ไปที่เว็บ drupal ของเราแล้วไป clear cache ซะเพื่อให้เห็นผล

เสร็จแล้วเราก็ใส่ module Similar Entries เข้าไปที่ block Above Comments เป็นอันเสร็จสิ้น

via : snappytux.com