Dynamic Pricing – Vis priser

Denne løsning kan du bruge til at vise de forskellige priser fra pluginet “WooCommerce Dynamic Pricing“.

Placer denne shortcode hvor du ønsker at placere tabellen: [product_pricing_table]
Du du at ændre hvad der står efter prisen eller i headeren (“Antal du køber” og “Pris pr. stk.”), så skal du gøre det i PHP koden der indsættes i snippets.

Der medfølger noget basic CSS, dette kan ændres som du ønsker.

Indsæt i Elementor Brugerdefineret kode - header

<script>
jQuery(document).ready(function($) {
    // Locate the div containing the JSON array
    const pricingDiv = $('.pricing_table');
    const jsonData = pricingDiv.attr('data-price-table'); // Fetch the JSON data

    // Ensure there's data to work with
    if (!jsonData) {
        console.error("No pricing table data found!");
        return;
    }

    // Parse the JSON-like string
    const rules = JSON.parse(jsonData);
	
// Create a styled div layout dynamically
let containerHTML = '<div>';

// Add headers inside a wrapper div
containerHTML += '<div class="pricing-header">';
containerHTML += '<div class="pricing-header-item">Antal du køber</div>';
containerHTML += '<div class="pricing-header-item">Pris pr. stk.</div>';
containerHTML += '</div>';

// Loop through the object keys
Object.keys(rules).forEach(key => {
    const rule = rules[key];
    let formattedAmount = rule.amount;

    // Add suffix based on type
    if (rule.type === "fixed_price") {
        formattedAmount += " kr.";
    } else if (rule.type === "price_discount" || rule.type === "percentage_discount") {
        formattedAmount += "%";
    }

    // Format the range text
    let rangeText = rule.to ? `${rule.from} - ${rule.to}` : `${rule.from}+`;

    // Wrap each rangeText and formattedAmount in a new div
    containerHTML += '<div class="pricing-row">';
    containerHTML += `<div class="pricing-item">${rangeText}</div>`;
    containerHTML += `<div class="pricing-item">${formattedAmount}</div>`;
    containerHTML += '</div>';
});

containerHTML += '</div>';

// Insert the styled div layout into a placeholder
$('#price-table-container').html(containerHTML);

});

</script>

Indsæt i pluginnet "Snippets"

// Register shortcode
add_shortcode('product_pricing_table', 'render_pricing_table');

function render_pricing_table() {
    global $product;

    if (!is_product() || !$product) {
        return ''; // Only works on single product pages
    }

    $has_sale_price = '';

    // Check if the product has a sale price
    if ($product->get_sale_price() != '') {
        $price_to_display = wc_get_price_to_display($product, ['price' => $product->get_regular_price()]);
        $has_sale_price = 'data-sale-price="' . $price_to_display . '"';
    }

    // Display the price
    $price_to_display = wc_get_price_to_display($product, ['price' => $product->get_price()]);

    // Generate the pricing table
    $output = '<div class="pricing_table" data-price="' . $price_to_display . '" ' . $has_sale_price . ' ' . get_pricing_rules($product->get_id()) . '></div>';
    $output .= '<div id="price-table-container"></div>'; // Placeholder for the table
    return $output;
}

function get_pricing_rules($product_id) {
    // Fetch the product's pricing rules
    $pricing_rules = get_post_meta($product_id, '_pricing_rules', true);

    if (!$pricing_rules) {
        return ''; // Return nothing if no pricing rules are found
    }

    $rules = current($pricing_rules)['rules'];

    return "data-price-table='" . json_encode($rules) . "'";
}

Indsæt i "Tilpasset CSS"

/* Dynamic Pricing Table */
#price-table-container {
	width: fit-content;
}

#price-table-container > div {
	display: flex;
	flex-direction: column;
}

#price-table-container .pricing-header, #price-table-container .pricing-row {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	grid-template-rows: 1fr;
	grid-column-gap: 30px;
	grid-row-gap: 0px;
}

#price-table-container .pricing-header {
	background: #f3f3f3;
	border-bottom: 1px solid var(--e-global-color-4a64e61);
	padding: 4px 8px;
	font-size: 14px;
	font-weight: 600;
	color: black;
}

#price-table-container .pricing-row {
	border-bottom: 1px solid var(--e-global-color-4a64e61);
	padding: 4px 8px;
	font-size: 14px;
	font-weight: 400;
	color: black;
}