首页 > 解决方案 > 总和产品 kcal ,蛋白质和其他属性 Woocommerce

问题描述

我正在为我的 wordpress 网站使用一个插件,该插件使用 JQuery 来显示产品。

正如您在下图中看到的,它显示了产品名称、价格,并在其下方的灰色中显示了 Kcal 和蛋白质含量的属性

我正在尝试将购物车中所有产品的总千卡和蛋白质相加,并显示在总价之上

在此处输入图像描述

我尝试在 functions.php 文件中添加此代码,但没有奏效

    function myprefix_cart_extra_info() {
    $volume = 0;

    // Iterating though each item in cart
    $cart_items = WC()->cart->get_cart();
    foreach( $cart_items as $cart_item ){
        $item_id = $cart_item['product_id'];
        $terms = get_the_terms( $item_id , 'kcal');
            foreach($terms as $key => $term)
                if(!empty($term->name)) $volume += $term->name;
        }

    echo '<div class="cart-extra-info">';
    echo '<p class="total-weight">' . __('Total Kkcal', 'woocommerce');
    echo ' ' . $volume . ' ' . 'kcal';
    echo '</p>';
    echo '</div>';
}

标签: phpjquerywordpresswoocommerce

解决方案


将此脚本添加到您的网站:

var currentTotalKals;
var totalKalsContainer = $('#total-cals-sum');
var totalProteinSum = $('#total-protein-sum');
var totalFettSum = $('#total-fett-sum');
var totalKolhydrateSum = $('#total-kolhydrate-sum');


/* get number from string */
function getNumValue(string) {
    string = string.toString();
    var stringNum = string.replace(/\D/g, "");
    stringNum = stringNum == "" ? 0 : stringNum;
    return parseInt(stringNum);
}

/* get existing total kals */
function getExistingTotalKals() {
    let tempKals = totalKalsContainer.text().trim();
    tempKals = tempKals == "" ? 0 : tempKals;
    tempKals = parseInt(tempKals);  
    return tempKals;    
}

/* get existing total */
function getExistingTotal(element) {
    let tempExisting = element.text().trim();
    tempExisting = tempExisting == "" ? 0 : tempExisting;
    tempExisting = parseInt(tempExisting);
    return tempExisting;
}

/* update dom with new value */
function updateDOMWithNewValue(element, value) {
    element.text(value);
}

/* decide whether left text has protein or kolhydrates */
function getValueAndType(string, type) {
    console.log(string);
    let valueAndType = [];
    //let divider = (type == "onAdding") ? "</option>" : "<br>";
    let divider = "br";

    let parts = string.split(divider);
    console.log(parts);
    parts.pop();

    parts.forEach(part => {

        let numValue = getNumValue(part);
        valueAndType.push(getValueType(part,numValue));
    });
    return valueAndType;
}

/* decide whether left text has protein or kolhydrates */
function getValueType(string, numValue) {
  if(string.includes("Protein")) {
    return {
      element : totalProteinSum,
      type: "Protein",
      value : numValue  
    }
  }
  else if(string.includes("Fett")) {
    return {
      element: totalFettSum,
      type: 'Fett',
      value : numValue
    }
  }
  else if(string.includes("Kolhydrater")) {
      return {
      element: totalKolhydrateSum,
      type: 'Kolhydrater',
      value : numValue
    }
  }
}

然后添加产品:

            currentTotalKals = getExistingTotalKals();
            /* add current product kals to total */
            currentTotalKals+= getNumValue(product.right_text);
            /* update dom with new total kal value*/
            updateDOMWithNewValue(totalKalsContainer,currentTotalKals);


            /* decide whether its protien or kolhydrater */
            let otherDetails = getValueAndType(product.left_text,'onAdding');
            console.log(otherDetails);
            otherDetails.forEach(detail => {
                // get existing total
                let currentTotal = getExistingTotal(detail.element);
                // add current value to total
                currentTotal+= getNumValue(detail.value);
                //update dom
                updateDOMWithNewValue(detail.element, currentTotal);
            });

并在移除产品时:

        /** custom logic starts here .... */
        currentTotalKals = getExistingTotalKals();

        /* finding the item to be removed */
        let itemToBeRemoved = $('.added_' + item_id);
        /* find the amount of cals it had */
        let kalToBeRemoved = $('.cal-values', itemToBeRemoved).text();

        let leftSidebarDetails = $('.sidebar_left_text', itemToBeRemoved).html();

        if(leftSidebarDetails !== undefined) {
        let detailsType = getValueAndType(leftSidebarDetails,'onRemoval');  
            detailsType.forEach(detail => {
                let currentTotal = getExistingTotal(detail.element);
                currentTotal-= detail.value;
                currentTotal = currentTotal == 0 ? "" : currentTotal;
                updateDOMWithNewValue(detail.element,currentTotal);
            });             
        }


        /* calculate new total */
        currentTotalKals-= getNumValue(kalToBeRemoved);
        currentTotalKals = currentTotalKals == 0 ? "" : currentTotalKals;
        /* update DOM */
        updateDOMWithNewValue(totalKalsContainer, currentTotalKals);

推荐阅读