[英]WP - Attribute and filter Region Sizing (EU, UK, US..)
這是我要實現的目標:
如您在此處看到的,您可以根據地區(歐盟,英國,美國)選擇鞋碼。
大量的研究后,我發現從@ Hambos22的解決方案有是完全一個我想要做的事。 但是無法將@ Hambos22或@mikejolley解決方案都放置到位。 我想在將所有內容放入“ function.php”中時缺少一些知識,將這些部分放在哪里,但這只是向我顯示了切換器。
我在“屬性” 大小 (英國,美國)中添加了2個其他自定義字段。
我的屬性: 大小
隨ACF添加的變量: uk-size , us-size
我的屬性默認值: 歐盟
這是一個PHP代碼段
$us_size = get_field('us_size', $term);
$uk_size = get_field('uk_size', $term);
$cm_size = get_field('cm_size', $term);
printf( '<div class="sizeRadio">
<input type="radio" name="%1$s" value="%2$s" id="%3$s" %4$s>
<label for="%3$s">
<span class="label_show" data-region="eu">%5$s</span>
<span data-region="us">%6$s</span>
<span data-region="uk">%7$s</span>
<span data-region="cm">%8$s</span>
</label>
</div>', $input_name, $esc_value, $id, $checked, $filtered_label, $us_size, $uk_size, $cm_size );
}
這是一個JS代碼段
$('[data-chooseregion]').on('click', function(e) {
$(this).addClass('active--sizeSelect').siblings().removeClass('active--sizeSelect');
var $active = $('[data-region=' + $(this).data('chooseregion') + ']').addClass('label_show');
$('[data-region]').not($active).removeClass('label_show');
e.preventDefault();
});
這是切換台的標記
<?php
echo '<a class="sizeSelect active--sizeSelect" data-chooseregion="eu" href="#">EU</a>';
echo '<a class="sizeSelect" data-chooseregion="us" href="#" >US</a>';
echo '<a class="sizeSelect" data-chooseregion="uk" href="#" >UK</a>';
echo '<a class="sizeSelect" data-chooseregion="cm" href="#" >CM</a>';
?>
有人可以幫我解決嗎?
順便說一句,我也很樂意將其應用到我的商店頁面,作為左側面板中的過濾器!
如果需要更多信息,請在不到12小時內回復。
干杯:)
對於單個產品頁面:
我最終進行了排序,而不是創建“動態”數據的更改,而是選擇在pa_size下的2個字段中創建一個表,如下所示:
if(!empty($terms)){
echo '<button class="accordion">Size Chart <i class="fa-sitemap"></i></button>
<div class="panel">
<table class="sf-table standard_bordered"><tbody><tr><td><strong>EU</strong></td>';
foreach ($terms as $term) {
$eu_s = get_field('eu-size', 'pa_size_' . $term->term_id);
echo '<td>'. $eu_s .'</td>';
}
echo '</tr><tr><td><strong>UK</strong></td>';
foreach ($terms as $term) {
$uk_s = get_field('uk-size', 'pa_size_' . $term->term_id);
echo '<td>'. $uk_s .'</td>';
}
echo '</tr><tr><td><strong>US</strong></td>';
foreach ($terms as $term) {
$us_s = get_field('us-size', 'pa_size_' . $term->term_id);
echo '<td>'. $us_s .'</td>';
}
echo '</tr></tbody></table></div>';
}
對於“ WC Shop上的過濾器”頁面:
我創建了一個新的“小部件”,將其轉到過濾器面板,還安裝了方便的插件PHP Text Widget ,該插件擴展了默認的WordPress文本小部件,使其能夠執行PHP代碼。
然后將以下代碼放入其中:
<div class="filter-size">
<input type="button" name="filterEU" value="EU" onclick="sizesEU()" />
<input type="button" name="filterUK" value="UK" onclick="sizesUK()" />
<input type="button" name="filterUS" value="US" onclick="sizesUS()" />
</div>
<?php
global $product;
$terms = get_terms( 'pa_size', $args );
$page_url = esc_url( home_url( '/' ) );?>
<div id="filterEU">
<ul class="jcaa_attr_select jcaa_attr_variable_select jcaa_size_medium">
<?php foreach( $terms as $term ):
$slug = $term->slug;
$num = (float)$slug;
if ($num > 20){
$eu_s = get_field('eu-size', 'pa_size_' . $term->term_id);
$uk_s = get_field('uk-size', 'pa_size_' . $term->term_id);
$us_s = get_field('us-size', 'pa_size_' . $term->term_id);
$term_link = $page_url . 'product-tag/cf-size-eu-' . $eu_s . '-uk-' . $uk_s . '-us-' . $us_s; ?>
<li><a class="jcaa_attr_option jcaa_obj_text" href="<?php echo esc_url($term_link ); ?>"><?php echo $eu_s ?></a>
<?php } ?>
<?php endforeach; ?>
</ul>
</div>
<div id="filterUK" style="display:none">
<ul class="jcaa_attr_select jcaa_attr_variable_select jcaa_size_medium">
<?php foreach( $terms as $term ):
$slug = $term->slug;
$num = (float)$slug;
if ($num > 20){
$eu_s = get_field('eu-size', 'pa_size_' . $term->term_id);
$uk_s = get_field('uk-size', 'pa_size_' . $term->term_id);
$us_s = get_field('us-size', 'pa_size_' . $term->term_id);
$term_link = $page_url . 'product-tag/cf-size-eu-' . $eu_s . '-uk-' . $uk_s . '-us-' . $us_s; ?>
<li><a class="jcaa_attr_option jcaa_obj_text" href="<?php echo esc_url($term_link ); ?>"><?php echo $uk_s ?></a></li>
<?php } ?>
<?php endforeach; ?>
</ul>
</div>
<div id="filterUS" style="display:none">
<ul class="jcaa_attr_select jcaa_attr_variable_select jcaa_size_medium">
<?php foreach( $terms as $term ):
$slug = $term->slug;
$num = (float)$slug;
if ($num > 20){
$eu_s = get_field('eu-size', 'pa_size_' . $term->term_id);
$uk_s = get_field('uk-size', 'pa_size_' . $term->term_id);
$us_s = get_field('us-size', 'pa_size_' . $term->term_id);
$term_link = $page_url . 'product-tag/cf-size-eu-' . $eu_s . '-uk-' . $uk_s . '-us-' . $us_s; ?>
<li><a class="jcaa_attr_option jcaa_obj_text" href="<?php echo esc_url($term_link ); ?>"><?php echo $us_s ?></a></li>
<?php } ?>
<?php endforeach; ?>
</ul>
</div>
<script>
function sizesEU() {
document.getElementById('filterEU').style.display = "block";
document.getElementById('filterUK').style.display = "none";
document.getElementById('filterUS').style.display = "none";
}
function sizesUK() {
document.getElementById('filterEU').style.display = "none";
document.getElementById('filterUK').style.display = "block";
document.getElementById('filterUS').style.display = "none";
}
function sizesUS() {
document.getElementById('filterEU').style.display = "none";
document.getElementById('filterUK').style.display = "none";
document.getElementById('filterUS').style.display = "block";
}
</script>
如有任何疑問,請不要猶豫。
干杯
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.