Element product category của flatsome hiện nay hỗ trợ cũng kha kha option. Tuy nhiên có vẻ những option đó k làm thỏa mãn được các web designer ^^. Nên hôm nay mình chia sẽ một add-on mình viết cho dự án của mình. Các bạn có thể tham khảo thêm element slider thumnail flatsome của mình nhé.
Element product category by Pttuan410
Mình sẽ lấy demo của thằng dienmayxanh để anh em dễ hình dung né.
Tạo code backend của product category flatsome
Shortcode của ux builder flatsome gồm 2 phần, 1 là backend và 1 là frontend.
Phần backend sẽ có nội dung như sau:
add_ux_builder_shortcode('pttuan_product_cat', array(
'name' => __('Pttuan product category'),
'category' => __('Content'),
'info' => 'Sp của Pttuan',
'wrap' => false,
'options' => array(
'text' => array(
'type' => 'textfield',
'heading' => 'Title',
'default' => 'Sản phẩm của PTTUAN',
'auto_focus' => true,
),
'color' => array(
'type' => 'colorpicker',
'heading' => __( 'Color' ),
'alpha' => true,
'format' => 'rgb',
'position' => 'bottom right',
),
'ids' => array(
'type' => 'select',
'heading' => 'Categories',
'param_name' => 'ids',
'config' => array(
'multiple' => true,
'placeholder' => 'Select..',
'termSelect' => array(
'post_type' => 'product_cat',
'taxonomies' => 'product_cat'
),
)
),
),
));
}
add_action('ux_builder_setup', 'pttuan_category_product_ux_builder');
Kết quả sẽ như thế này
Trong này mình tích hợp title, màu sắc và product category. Bạn có thể bỏ bớt mấy cái mình không cần dùng nhé.
Phần backend như vậy là xong. Kế đến là frontend.
Tạo code frontend của product category flatsome
extract( shortcode_atts( array(
'ids' => '',
'text' => 'Sản phẩm của PTTUAN',
'color' => '',
), $atts ) );
$css_args = array(
array( 'attribute' => 'margin-top', 'value' => $margin_top),
array( 'attribute' => 'margin-bottom', 'value' => $margin_bottom),
);
$css_args_title = array();
if($color){
$css_args_title[] = array( 'attribute' => 'color', 'value' => $color);
}
$orderby = 'name';
$order = 'asc';
$hide_empty = true ;
$idss = array();
if ( isset( $atts[ 'ids' ] ) ) {
$ids = explode( ',', $atts[ 'ids' ] );
$ids = array_map( 'trim', $ids );
$parent = '';
$orderby = 'include';
} else {
$ids = array();
}
$cat_args = array(
'orderby' => $orderby,
'order' => $order,
'hide_empty' => $hide_empty,
'include' => $ids
);
$product_categories = get_terms( 'product_cat', $cat_args );
if( !empty($product_categories) ){
$ptt_html_cat_custom = '';
$ptt_html_cat_custom .= '<div class="namegroup"'.get_shortcode_inline_css($css_args_title).'>'.$text.'</div>';
foreach ($product_categories as $key => $category) {
$ptt_html_cat_custom .= '<a href="'.get_term_link($category).'" >';
$ptt_html_cat_custom .= '<span>'.$category->name.'</span>';
$ptt_html_cat_custom .= '</a>';
}
}
return '<div class="listgroup" '.get_shortcode_inline_css($css_args).'>'.$ptt_html_cat_custom .'</div>';
}
add_shortcode('pttuan_product_cat', 'pttuan_product_cat_shortcode');
Xong, kết quả sẽ như thế này.
Thêm css là xong, ở đoạn này mình css cho dự án của mình nên các bạn thích như thế nào thì tự đổi lại nhé.
display: block;
overflow: hidden;
}
.listgroup a {
background: #f3f3f3;
margin: 5px;
margin-right: 0;
padding: 20px 0px;
font-size: 12px;
color: #666;
border-radius: 4px;
display: flex;
justify-content: center;
align-items: center;
min-height: 36px;
line-height: 15px;
float: left;
overflow: hidden;
margin-bottom: 10px;
width: 24%;
text-align: center;
}
.listgroup img {
display: block;
width: 45px;
height: 45px;
margin: 0 auto 5px;
border-radius: 50px;
}
.listgroup span {
display: block;
line-height: 1.3em;
font-size: 13px;
color: #0064c2;
text-align: center;
padding: 0 5px;
}
.namegroup {
display: block;
overflow: hidden;
font-size: 14px;
font-weight: 600;
padding: 10px;
}
Kết quả cuối cùng
Thấy hay thì nhấp nút like giúp nhé
Update vụ get field của catagory images ra là có lẽ sẽ đẹp hơn nhiều nhiều nhỉ 😀
Bạn chỉ cần thêm một chút vào function trên là được mà, mình sẽ update thêm trong thời gian sắp tới nhé
cảm ơn bác vì đã có những bài viết hướng dẫn rất bổ ích.
mình cũng có chút góp ý nhé:
– cũng có rất nhiều người không phải là dân code trong đó có mình, Như bài viết trên hoặc bài viết khác, bác có thể hướng dẫn mọi người bỏ code vào file nào thuộc folder nào được ko bác. vì mình nhìn bác viết code như v mà mình cũng ko biết là nhúng code vào file nào. Cảm ơn bác nhé
Đa phần các function chúng ta code thêm sẽ nằm trong file function.php nhé, theo mình thì việc không biết code nó chỉ là cách nói tránh của việc không tìm hiểu và học hỏi thôi. Bản thân mình là người không biết code nhưng vẫn cố gắng học hỏi để có thể viết những bài như thế này. Mình hi vọng sau này bạn đừng nói câu không biết code nhé, chỉ cần đặt câu hỏi mình thấy hợp lý sẽ trả lời giúp bạn.
Boy có hướng dẫn mình 1 chút để giữ cái này trên amp flatsome đc k
Mình tên Tuấn nhé ^^, ý bạn là amp (mobile) đúng k . Mình cũng chưa dùng bao giờ nên k chắc lắm